Forem: Maciej Trzciński 🌱🇵🇱

Store text inside variables instead of inline.

Maciej Trzciński 🌱🇵🇱 — Mon, 29 Nov 2021 09:37:59 +0000

Why does text stored inside variables give you flexibility and control?

Before I wrote this article, I’ve tried a couple of times to write down my thoughts. Let me explain first what I called inline:

<CopyText.Heading tag="h2">
  Lorem Ipsum dolores set.
</CopyText.Heading>

This example showed you what I meant as an inline text.

Let’s go straight forward to the point:
When you are a programmer, and you have been writing the code. One of the most important parts is clarity of your own code. The clarity sometimes defines if you’re engaged.

I wrote some rules how our code could be more efficient by using vars instead of pure text.

Firstly, when you got the message from the marketing team with new needs, you as a programmer gonna replace the text manually. Trust me, it isn’t easy to find text covered by components. Since I have been using const instead of inline text, my life become easier.

const title = `Title`;
const description = `Description`;

// component 
<Component>
  <Title>{title}</Title>
  <Description>{description}</Description>
</Component>

Secondly, client or even you during the project lifecycle can decide to use API to manage the page. When you got all text stored inside variables, the change is easy-peasy to the implementation.

// old variables
const title = `Title`;
const description = `Description`;

// new API
const { title, description } = API();

// component 
<Component>
  <Title>{title}</Title>
  <Description>{description}</Description>
</Component>

Thirdly, in some cases, the structure requires displaying column of the same components with different content. It’s easier to use map and display each component in simple way, than copying one by one - this solution reduce code and complexity.

const data = [
  {
    title: `Title`,
    description: 'Description',
  },
  {
    title: `Title`,
    description: `Description`,
  },
  {
    title: `Title`,
    description: `Description`,
  },
];

// component 
<Parent>
  {data.map(({ title, description}) => (
    <Component>
      <Title>{title}</Title>
      <Description>{description}</Description>
    </Component>
  ))}
</Parent>

Key takeaways:

const variable is easier to find and replace
const variable reduce complexity of components

4 amazing web tools for prototyping.

Maciej Trzciński 🌱🇵🇱 — Thu, 20 May 2021 12:00:32 +0000

Today I'm going to show you 4 amazing tools to save you time when you prototyping.

1. Placeholder.com

This is amazing placeholder tool for images. You can generate what size you want, color, format and text content🤳🏼.

Example:

If you visit this URL https://via.placeholder.com/728x90.png/0000FF/FFFFFF?text=Hello,+How+are+you?, you receive exactly the same image.

Please go to the Placeholder.com and look at the documentation.

2. iHateRegex

There are two types of people, who are familiar with Regex and who aren't.

99% of programmers aren't familiar in 100%, for me this page is really helpful on daily programming.

3. {JSON} Placeholder

This a great tool when you don't have API, and you want to test some part of code, or you are just learning and you don't want to write your own backend.

Example:


fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

Output:


{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

4. ngrok

Another great tool is ngrok, where using one command you can preview your work.

Example of usage:

ngrok http 80

Cover photo by Nick Fewings on Unsplash

Have you heard of the download html attribute?

Maciej Trzciński 🌱🇵🇱 — Thu, 11 Feb 2021 11:30:45 +0000

The download attribute specifies that the target will be downloaded after a user clicks.
Also, when you set value to download, the file after download will have this name, in my particular example the file will named Awesome-Company.pdf after download.

/**
*  download - this is information for breowser that the link will download file
*  value - here you can set name for file
**/
<a href="/uploads/company-info.pdf" download="Awesome-Company" />

If you like this article, follow me on Twitter @MaciejDEV

HTML autocomplete "one-time-code".

Maciej Trzciński 🌱🇵🇱 — Wed, 10 Feb 2021 15:54:06 +0000

Using only html autocomplete (autocomplete="one-time-code") you can autofill inputs using security codes sent by SMS providers.



<input
  type="text"
  name="auth-token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

If you like this article, follow me on Twitter @MaciejDEV

Do you have some kind of Pull Request Score in your company?

Maciej Trzciński 🌱🇵🇱 — Sun, 20 Dec 2020 13:25:13 +0000

I meant some kind of score, how good is your PR (how many bugs have)

For example:

Reviewer found 3 bugs in PR, then PR author lose 3 points from overall score. (Like motivation system)

Common JavaScript Tips

Maciej Trzciński 🌱🇵🇱 — Sat, 19 Dec 2020 16:09:12 +0000

Bellow, I will explain you some popular JavaScript mistakes

Use const/let instead of var

Replace old fashioned var with new const, that will guarantee you better condition of your code.

// bad

var a = ‘foo’

var b = ‘bar’

// good

const a = ‘foo’

const b = ‘bar’

If you really need to change variable use let, it’s like var but let has block range, var has functional range.

What is block variable?

Block variable you can read only in defined block of code where was defined.


for(let i = 0; i < 10; i++) { 

  let j = 10

  console.log(j)

  //variable j range

}

console.log(j) //ReferenceError: i is not defined

Functional variable you can read inside whole function not only in the code block.


for(let i = 0; i < 10; i++) { 

  var j = 10

  console.log(j) // 10

}

console.log(j) //10

Both let and const are in block range.

Use Template Literals

Manually joining string with + it’s terrible, it’s bad for refactoring and code readability. The best way for joining words is Template Literals.

If you earlier joined words like that, read this chapter.

const name = ‘Maciej’

console.log(‘Hello ‘+ name + ‘, wave’)

Now I’ll compare the old method with Template Literals.

const name = ‘Maciej’

console.log(`Hello ${name}, wave`)

It’s more clear, right?

In Template Literals you can easily add new lines with only just enter button.

const name = ‘Maciej’

console.log(`Hello ${name}

,wave`)

Copy array with spread operator

I think every one of us sometimes must copy the array, but only half of us know about spread operator.

const array = [1,2,3,4,5]

//bad

const newArray = []

for(let i = 0; i < array.length; i++){

  newArray[i] = array[i]

}

//good

const newArray = [...array]

Reference on MDN

Conditional operators

Every one of us sometimes must or want to use conditional operators from some reasons, sometimes you want to save a couple of lines or make the code cleaner.

const a = 0

let b = 0

!a ? b = 1 : b = 2

Like you see on the above snippet, this is not perfect code it's looks weird.

Below you will see easier way.

b = !a ? 1 : 2

Tadam! Looks better, right?

Thanks for reading 🙏

Changelog:

07/22/2020

Added:

Use const/let instead of var
Use Template Literals
Copy array with spread operator
Conditional operator

If you like this article, please follow me on Twitter @MaciejDEV

Photo by NeONBRAND on Unsplash

100vh problem with iOS Safari

Maciej Trzciński 🌱🇵🇱 — Sun, 13 Dec 2020 11:19:03 +0000

The web content it's outside the viewport although we used 100vh (the red opacity box with 100vh text).



.section {
    height: 100vh; // bad approach 
}

The problem you have been receiving after adding the height: 100vh to mobile resolutions. It happens due to the calculation method which Safari and Chrome are using. Mobile devices calc browser viewport as (top bar + document + bottom bar) = 100vh. I had a hard time with 100vh when the page have to have a section filled the whole screen. After a couple of hours, I've found the solutions that I show you.

They are two solutions, the first needs JavaScript and CSS, the second solution required only CSS.

1. JS & CSS solution

Let’s get started first with the JS file:



const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

appHeight function has sets new style property var(--app-height) including current window height, --app-height it is necessary for next steps.



:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
}

In the previous step I've created the reference --app-height, wrapping in the var() I've received CSS variable var(--app-height). This variable is allowed to read values created by JS.

2. CSS solution (not recommend)

The last, but not the least solution is --webkit-fill-available, this solution works only on Apple devices, it won't solve the problem on Android devices. I don't recommend this solution, but it's worth showing.



height: 100%;
height: -webkit-fill-available;

Thank you for your attention! I’ll appreciate your feedback.

If you like this article, follow me on Twitter @MaciejDEV

How to sort an array of strings with non-latin letters?

Maciej Trzciński 🌱🇵🇱 — Sat, 12 Dec 2020 13:28:36 +0000

JavaScript has a native sort method, you can do it with array.sort(), it will sort the array alphabetically. Also, you can provide your custom sorting functionality.

But if you want to order an array of non-ASCII character like [‘ą’, ‘ę’, ‘ó’, ‘ż’, ‘ź’, ‘e’], you will receive a [“e”, “ó”, “ą”, “ę”, “ź”, “ż”]. That happened because sort function works only with the English alphabet.

Fortunately, there are two ways to overcome this behavior localeCompare and Intl.Collator provided by ECMAScript Internationalization API.

Using `localeCompare()`

Using `Intl.Collator()`

So when you are working with arrays of strings in a language different from English, remember to use these methods to avoid unexpected sorting.

Thank you for your time!

Why Object.is() is better than ‘==’ and ‘===’ ?

Maciej Trzciński 🌱🇵🇱 — Sat, 12 Dec 2020 13:22:47 +0000

Everybody who used JavaScript knows that JS is loosely typed and comparing with ‘==’ gives unexpected results.

So if we use triple equals operator ‘===’, we got a more strict result, but it is also not yet perfect:

For help us in this case we use ES6 ‘Object.is()’, it is more precision than ‘===’ and moreover it behaves well in some special cases:

Compare table:

Polyfill:

If you like this article, follow me on Twitter @MaciejDEV

Why you should motivate your Pull Request?

Maciej Trzciński 🌱🇵🇱 — Sat, 12 Dec 2020 13:14:08 +0000

Every programmer uses GitHub or another Git repository, If you didn’t use Git repository, read about it. A good PR description is a clue in communication. You don’t want to spend a couple of hours at PR for only understanding your colleague code. Another good example is when you back to the issue after a few days or weeks, this description will let you back to your work in a few minutes, not hours.
Here it’s my recommendation for the PR description.

## Description
This PR will resolve nested lists compiled from markdown. Solution description
## Solution description
In the HtmlRender component I imported a new component `List` where I implemented methods and CSS for the nested list, in the past, we did not have any implementation for List. I discussed with our Designer [here it’s the link for this conversation] and we added square dots for the list, and small numbers for the ordered list. In the List component, I created two methods: one for unordered lists named unorderedList and orderedList for ordered lists.
## Jira ticket
https://[team].atlassian.net/jira/software/projects/[project]/boards/selectedIssue=[issue]
## Did you test this issue on all browsers?
[x] Chrome
[x] FireFox
[x] Edge
[x] Safari
[x] Mobile Safari/Chrome
[x] Tablet Safari/Chrome

Description

At this place, the author of Pull Request should describe in a few words problem, what an author wants to resolve in this PR. You should type max 2/3 paragraphs. It must be short but valuable. It’s no place for essays, reviewers, another colleague or you must easily understand what did you want to resolve here.
For example:

This PR will resolve nested lists compiled from markdown.Solution description

Solution description

This is a place where you should describe your steps, what you added, changed, or removed. Solution description is like a journal where you will describe your steps or explain your idea.
Example:

In the HtmlRender component I imported a new component `List` where I implemented methods and CSS for the nested list. In the past, we did not have any implementation for List. I discussed with our Designer [here it’s the link for this conversation] and we added square dots for the list, and small numbers for the ordered list. In the List component, I created two methods: one for unordered lists named unorderedList and orderedList for ordered lists.

Jira ticket

Here add a link to the ticket, if you don’t have Jira add to another one service.

Did you test this issue on all browsers?

This is a place for a checklist. If you don’t test on the web, add another list.

Thank you for your attention! I’ll appreciate your feedback.

Forem: Maciej Trzciński 🌱🇵🇱

Store text inside variables instead of inline.

4 amazing web tools for prototyping.

1. Placeholder.com

2. iHateRegex

3. {JSON} Placeholder

4. ngrok

Have you heard of the download html attribute?

HTML autocomplete "one-time-code".

Do you have some kind of Pull Request Score in your company?

Common JavaScript Tips

Use const/let instead of var

Use Template Literals

Copy array with spread operator

Conditional operators

100vh problem with iOS Safari

1. JS & CSS solution

2. CSS solution (not recommend)

How to sort an array of strings with non-latin letters?

Using localeCompare()

Using Intl.Collator()

Why Object.is() is better than ‘==’ and ‘===’ ?

Compare table:

Polyfill:

Why you should motivate your Pull Request?

Description

Solution description

Jira ticket

Did you test this issue on all browsers?

Using `localeCompare()`

Using `Intl.Collator()`