Forem: Sławek Kołodziej

Tailwind CSS: The future of styling or just another CSS framework?

Sławek Kołodziej — Fri, 15 Jan 2021 15:21:36 +0000

My first encounter with Tailwind CSS was through Twitter. The creators of Tailwind are the same people who published a very popular ebook Refactoring UI. I also recognized Steve (one of the creators) from his Youtube series Refactoring UI where he redesigns views of real application while explaining all of his choices.

With this in mind I knew Tailwind isn't just a random CSS framework but something bigger.

I didn't had to wait too long. Creators of Tailwind CSS quickly released Tailwind UI - a paid set of UI components built on top of Tailwind CSS making $2 million in revenue in 2020.

Why I decided to use Tailwind CSS for my blog redesign

I never really liked CSS frameworks. Back in the days, when Bootstrap was as its peak, the only feature I found useful was its grid system. Yes, I used the one based on float: left. Then flex and grid became widely supported by browsers and using ready-made grid system didn't make sense to me anymore.

Also what I didn't like was how ugly and outdated default styles of Bootstrap are.

The other thing was it became nearly impossible to use any CSS Framework while creating UIs based on a custom design.

Tailwind CSS looked like the first framework I would enjoy using. I already saw how easily you can create beautiful UIs with it (thanks to Tailwind UI project). It also offers easy customization options allowing to work with custom designs, although right now I'm still not 100% convinced on this one.

Pros of using Tailwind CSS

Tailwind CSS just looks good

Although it's primarily an utility CSS framework it offers very modern and pleasing styling options. Authors already made design decisions when it comes to colors, shadows, borders, typography and also spacing options. It's a way easier to come up with a slick UI when you have limited options that work well together than writing CSS from scratch. Trust me, I tried both.

https://tailwindcss.com/

Tailwind CSS has a great IDE support

I'm using VS Code and thanks to Tailwind CSS Intellisense extension I was able to see all available Tailwind CSS classes as suggestions.

But the real power of this extension comes from its integration with the Tailwind configuration for given project. Let's say you added your custom color and modified some spacing option. You will see your changes as suggestions when writing CSS classes.

https://tailwindcss.com/docs/intellisense

It allows for very quick prototyping

Developing a new feature often comes with trying different solutions to see what's working and what's not.

My standard workflow for creating a new piece of UI is coming up with a good name, going to a separate place to create a styled components (I use CSS-in-JS a lot) and then using this component. For the plain CSS the steps are quite similar.

When working with Tailwind CSS I don't not have to switch between my HTML and the place where I define styles. I can use few classes to define the final look of HTML element. I don't have to come up with weird names like container, content-container or page-header-wrapper just to add a display: flex to some element.

Cons of using Tailwind CSS

Although on paper Tailwind looks like a perfect tool, after using it in real project you will start to notice some downsides.

You still have to style the UI by yourself

Tailwind doesn't style any elements by default. More than that, it removes default styles from elements like lists and inputs. While developing your own site you still have to choose typography, colors, sizing and position of elements.

Tailwind doesn't offer any ready-made components by default. Thankfully there are already two plugins that introduce default styling for elements: tailwindcss-typography and tailwindcss-typography. If you are struggling with coming up with good design watch Designing with TailwindCSS on Youtube from Adam Wathan - creator of Tailwind.

Looong list of CSS classes

This is the argument you will hear a lot as a downside of Tailwind. While for simple layout elements it isn't that much overwhelming, you will start notice the issue when styling UI components. Other than that it will be harder to recognize parts of the website when reading the code.
In the usual approach CSS classes usually contain name of the element and describe its function. With utility-first approach this part is missing.

Pagination link component from my blog

The first solution to this issue is creating regular css files and using @apply to include Tailwind utilities to CSS classes. You can read more about it in the documentation. It sounds right but then we might as well not use Tailwind at all and write regular CSS.

The second solution is to use the power of JavaScript frameworks and separate UI elements as components. You might still have a button with 13 different CSS classes but now it will be a proper component. Usually after creating such component once, you might not look into it for a while. You will be able to ignore the styling part when the component is done and do not bother reading all of the CSS classes.

Limited options when working with designers

This is my main problem with all of the CSS frameworks. Custom designs usually do not respect the boundaries of CSS framework. Thankfully Tailwind is very flexible and you can recreate almost any design.

The main limitations are with sizing and spacing values. I would recommend talking with your designer about it before you start working together on something. I would also want to see some official style guide of Tailwind so designers could base their work on it. Also remember that Tailwind is highly customizable and you can add your own sizes, colors etc. if you need to.

My conclusions after using Tailwind CSS

I need more experience with it

Tailwind at its own isn't too hard to learn. What I would want to explore is the tooling around it ex. twin.macro which aims to solve issue with long CSS class names and avoid creating separate CSS files at the same time. I also want discover more good practices.

I won't use it for commercial projects yet

I usually avoid using any CSS frameworks for more complex commercial projects due to its limitations. For now, Tailwind is no exception for me. I don't want to experiment in a commercial project when not everyone in a team is familiar with Tailwind and knows about its good and bad practices. Creating components and using SCSS or CSS-in-JS is usually enough for this type of work.

The only place where I would consider using it are marketing pages with a short time to deliver.

This opinion might change if we will have more experience with Tailwind as a community.

I will still use it for my own projects

Styling with Tailwind is very fast and fun. I think is the only tool since I learned React that I truly enjoy using.

The redesign of my blog took overall few hours to complete. I know I would struggle longer with plain CSS to come up with good looking UI.

As for my own projects I don't care that much about great code quality since the scale and the need of maintenance is usually very low. It's a good place to make mistakes and experiment with new tools.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

Arrow functions in JavaScript: Everything you need to know about them

Sławek Kołodziej — Wed, 06 Jan 2021 14:58:37 +0000

Arrow function is an alternative form of creating a function in JavaScript. It was introduced in ES6.

They go by name arrow functions, because they are created with arrow symbol - =>.

The main benefit of arrow functions is a short syntax which most of the times increases code readability. They come really handy when you need to quickly create a function that is an argument for another function.

In most cases they can be used interchangeably with regular functions but you need to remember about few differences.

Arrow functions are anonymous functions. It means they cannot have a name. You can bypass it by assigning them to a variable and call them with this variable name.

Let's take a look at the simple conversion from regular function to arrow function.

function add(x, y) {
    return x + y;
}

// we assign an anonymous to a variable
const add = function(x, y) {
    return x + y;
}

// we remove "function" keyword and add an arrow after arguments
const add = (x, y) => {
    return x + y;
}

The code sample above shows 3 ways to declare a function. In the last one we are using =>. Notice we don't need a function keyword anymore to declare a function. We also added => after list of arguments.

Arrow function allow us to use even shorter syntax.

// returns x + y
const add = (x, y) => (
    x + y
)

// the same function in one line
const add = (x, y) => x + y

// you can skip parentheses when using only one argument
const add1 = x => x + 1

If your function contains only the return you can use the short form of arrow functions.

You can omit { } and return keyword and the expression after => will be the value returned from this function.

When you return an object you need to remember about adding ( ).

// this won't work
const createUser = (id, name) => {
    id: id,
    name: name
}

In this case the curly braces used to create the object will conflict with curly braces used to create a function body. You need to add parentheses to ensure you are returning an object.

const createUser = (id, name) => ({
    id: id,
    name: name
})

Using short form to improve code readability

Let's take a look how using short form of arrow function can improve code readability when returning a function from other function.

function createAddFunction(number) {
    return function(x) {
        return x + number
    }
}

createAddFunction is a function which creates other function. This pattern is called currying and you can read about it more at What is Function Currying in JavaScript and When to Use It. You can use it for example to create a function which increments a number by 1.

const add1 = createAddFunction(1)
add1(5) // 6

The definition of createAddFunction can be shortened by using features of arrow function we just learned. Let's take a look at the steps to reduce it to one line.

// initial version
function createAddFunction(number) {
    return function(x) {
        return x + number
    }
}

// changing the inner function to arrow function
function createAddFunction(number){
    return x => x + number
}

// changing the outer function to arrow function
const createAddFunction = number => (
    x => x + number
)

// one line version
const createAddFunction = number => x => x + number

What are the differences between regular and arrow functions

`this` in arrow functions

The most important difference is how this behaves inside those 2 function declaration types.

Arrow functions do not create its own this but use its value from the place they were defined.

The explanation of this in JavaScript would need a separate blog post, but I will show you few examples illustrating the differences.

const logThisOutside = () => {
    console.log(this)
}

function Button() {
    this.name = 'My Button'
    function logThis() {
        console.log(this)
    }
    const logThisArrow = () => {
        console.log(this)
    }

    logThis() // Window
    logThisArrow() // { name: 'My Button' }
    logThisOutside() // Window
}

new Button()

As you can see logThisArrow and logThisOutside use the value of this from the place they were defined in. It happens because as apposed to regular function, arrow functions do not create its own this, but use the value from the outer scope.

Using `this` in arrow functions to your advantage

function Button() {
  this.name = 'My Button'

  const that = this
  document.querySelector("button").addEventListener("click", function() {
    console.log('click', this); // Button DOM Element
    console.log('that', that) // { name: 'My Button' }
    this.name = 'Button Clicked' // won't work as expected
    that.name = 'Button Clicked' // name value changed
  });

  document.querySelector("button").addEventListener("click", () => {
    console.log("click arrow", this); // { name: 'My Button' }
    this.name = 'Button Clicked' // name value changed
  });
}

new Button()

We created two event listeners. In one of the we used regular function and arrow function in the other one.

In case of regular function in event listener, when you click on a button this will have a value of DOM element that was clicked. If we would want to change the value of this.name we would have to first create a variable const that = this and then modify it by that.name = 'Button Clicked'. It's a common hack used to modify this from outer scope.

As a mentioned before, arrow functions do not create its own this so you can safely change value of name by this.name = 'Button Clicked.

Accessing arguments in arrow functions

The other feature of arrow functions is they do not create a special variable arguments inside a function body.

Let's see how arguments work in regular function.

function add() {
    console.log(arguments)
}

add(1, 2, 3) // console: [1, 2, 3]

Regular function has access to special arguments variable that stores all arguments that function was called with even if they were not defined between the parenthesis.

Arrow functions do not create arguments variable but there is other solution we can use to achieve the same - rest parameters.

const add = (...args) => {
    console.log(args)
}

add(1, 2, 3) // console: [1, 2, 3]

Summary

Arrow functions offer a short syntax for creating functions. They allow to omit keywords like function and return to improve readability of your code. Please use it we caution because too much nested arrow functions can create code which is confusing for readers.

Arrow functions do not create its own this and arguments special variables which is its main difference from regular functions.

If you want to read about other differences check out MDN Arrow function expressions.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

My 2020 In Review: What I Learned and Accomplished as Senior Front-end Developer

Sławek Kołodziej — Mon, 28 Dec 2020 19:15:04 +0000

With 2020 coming to an end (finally!) I decided to do a little summary of things I learned during this year.

At first I wanted to point out I would not be able to remember every thing I will list here without a journal. To be more specific, in the place I work in we have quarterly performance reviews and to make it more smooth we maintain a document with list of all our accomplishments and observations. It made creating this post a lot easier and I would recommend it for you.

January

I was promoted to Senior Front-end Developer

A very happy start of the year. After more than 2 years working at this company I became a Senior. It was preceded by promotion proposal made by my leader and discussion about my accomplishments with management of Frontend Unit.

I created a tool to automatically export SVG icons from Figma

I open sourced Figma API Exporter. A package to export all SVG icons from Figma using JavaScript. The idea about Figma automation started with my project where we implemented Figmint to sync colors and typography styles from Figma to our code on every deployment. We wanted to also include sync our custom icons, but there wasn't any tool available at the time. So I decided to create it.

I finished Angular Core course on Frontend Masters

Frontend Masters is still my favourite platform for learning. They say it's good to keep your friends close but enemies closer so I decided to learn more about Angular. My key observations are that it works very well with TS and has strong opinions about the project structure. When Angular developer switches projects the chances are he will feel familiar as opposed to React where everything is a wild west.

The interesting part of this course was also introduction of nrwl/nx. It's a tool to manage monorepos. It made me thing about using monorepos more in React projects.

The downside of Angular for me was its flexibility. I remember when I wanted to create a modal in Angular and I spend too much time looking for suitable solution. Maybe it's my lack of experience in Angular, but I appreciate React ecosystem more for creating a very dev friendly components.

February

I finished Testing JavaScript course by Kent C.Dodds

I was already familiar with Kent C. Dodds from Frontend Masters, but this course is a very good introduction into the world of JavaScript/React testing. The most interesting for me were solutions for mocking modules in Jest and working with external libraries in tests. Kent presented very well thought solutions in form of short screencasts (there is a lot of them).

I've read The Unicorn Project by Gene Kim

I think it was the only work related book I fully enjoyed reading (besides The Phoenix Project). Gene tells a story from his other book, The Phoenix Project, but this time from a point of view of developer. It gave me a motivation to look for improvements in my daily life at work and question the rules if they make no sense.

March

I co-created a template for Create React App

At this time new version of CRA was published with a feature called Custom Templates. It allows to customize the default project structure and dependencies of new Create React App project. I created it within a team at work to configure Prettier, ESLint, Commitizen and custom deployment scripts for all new React projects in a company. I turned out to be very successful, allowing developers to deploy their first applications to AWS in 10-15 minutes.

I finished Complete Intro to Containers and Full Stack for Front-End Engineers on Frontend Masters

I wanted to move more into Fullstack role at the time so I decided to pick up those 2 courses.

Complete Intro to Containers starts with setting up containers by hand using chown command and moves to everything you should know about Docker. I knew how to set up Docker before but this course for sure gave me full information to work with it comfortably.

On the other hand Full Stack for Front-End Engineers talks more about setting up your own server and tons of other thing you didn't know about web development if you only focused on Frontend development. Definitely a good introduction to so many good topics you might want to explore more yourself.

April

I finally started using React hooks at work!

When I started working in this project it was React 0.14, but in April we finally migrated it to React 16.8+. It was a year and 2 months after the stable version of hooks was published. I had a chance to learn them before, but didn't put too much attention because I couldn't use them at work.

May

I finished Advanced Distributed Systems Design Course by Udi Dahan

Although it now costs $2500 😵 it was available for free for some time. I took this course as a part of learning more about backend stuff. Udi is a great and engaging teacher. He was giving a lot of example how distributed systems could be used in practice, ex. in booking systems. The great value of this course was also the fact it was recorded with very experienced participants, who attended this workshop live.

June

I finished Go for JavaScript Developers course on Frontend Masters

I already knew some basics from languages like Ruby, PHP, Python, Java, but Go was entirely new to me. What I liked the most about Go was that it is strongly typed language. If I figured out the types then I was almost sure the program would run correctly, I had a similar experience with Haskell. The other nice thing was the ability to explicitly pass variables by value or reference.

July

I started doing Gophercises - exercises to learn Go

I think these are one of the best exercises for learning new language I've seen. I expected building a dummy REST API, but it ended up building a quiz, choose your own adventure game and url shortener. There is a total of 20 video tutorials with introduction and a complete solution.

If I would want to invest more time into Go I would definitely buy other paid courses from the same author.

August

I took a long vacation!

September

I worked with React Admin

I started working in a new project in my job and had a chance to see React Admin in use for the first time. I knew about it before but I wasn't aware how great it is. It's definitely not for everyone, I would use it if I wouldn't care about the visuals and more custom features. It helped us create an admin panel in a very short time.

October

I started working as a Node.js developer in a project

The project I joined in September had a backend written in Node.js and I saw it as an opportunity to work more on backend. The app was built with Nest.js. I started with simple changes to the REST API we needed on frontend and progressed with more advanced stuff. The most interesting feature I've built was generating PDFs.

I started my developer blog

It all started with signing up for BloggingForDevs newsletter, which inspired me to start my own blog. I create one post a week and posted it on dev.to with a link to my original blog. Most of the traffic came from this source, but after few weeks it started gaining organic traffic from Google. For my blog I used Gatsby and a theme I didn't modified. My goal was focus on content first and then take care of technical stuff. I didn't wanted to build my blog from scratch for few weeks and have no content 😃 .

November

I started working on an internal course about testing React components

I took one day a week to work entirely on this project. I wrote several chapters about testing components, mocking API calls, working with libraries like Redux and React Router and more. It was definitely the biggest project outside of programming I've ever made. It wasn't launched yet but I expect it to help many people and introduce better testing practices.

December

I redesigned my blog with Tailwind CSS

You can love or hate Tailwind. For me it made it possible to do the redesign very quickly, I think it was only a couple of hours. The best think about it is that the final effect just looks good, you don't have to put too much time into the details. Tailwind typography plugin works great with content generated by Gatsby. Also I didn't have to write a single line of CSS! I think I will create a separate post about good and bad parts of Tailwind I learned during the redesign.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

What is Function Currying in JavaScript and When to Use It

Sławek Kołodziej — Mon, 21 Dec 2020 20:39:34 +0000

Currying is a way of building functions in a way that it is possible to call them with arguments one by one, instead of all of them at once. It will allow us to create new functions, which have some arguments already remembered. Currying helps with creating specialized functions based on general ones, ex. getName, findId, joinWithSpaces from get, find, join. It helps reducing code duplication.

Creating a curried function

Let me start with very simple example, sum function in curried form:

function sum(a) {
    return function(b) {
        return a + b;
    }
}

// using arrow function

const sum = a => b => a + b;

Looks strange at first sight, but let me explain it.

After calling sum(5) it won't return a number, but a new function:

function(b) {
    return 5 + b; // a was changed to 5
}

// using arrow function

b => 5 + b;

Only after we call it the second time we will get the final result - sum of two numbers.

function sum(a) {
    return function(b) {
        return a + b;
    }
}

// using arrow function

const sum = a => b => a + b;

const addTo5 = sum(5); // function(b) { return 5 + b }

addTo5(3); // 8
// is the same as
add(5)(3); // 8

Summing up, we created specialized function addTo5 which has only one purpose - adding some number to 5. Function sum is more general.

When to use the curried function

Let's see another curried function, which you might use in your application. Function get will take key name, return a function which takes object and in the end return a value for provided key. One use-case if using it as an argument for Array.map

function get(key) {
  return function(obj) {
    return obj[key];
  }
}

// using arrow function

const get = key => obj => obj[key];

const getName = get('name');

const users = [{ name: 'John' }, { name: 'Emma' }];

const namesList = users.map(user => user.name); // normal way
const namesList = users.map(getName); // using specialized function
const namesList = users.map(get('name')) // using general function

As you can see this example is more practical. Because object is the last argument, we can pass this "unfinished" function to map, which calls this function with object. As a result we get value of name from the object.

Notice how more readable is this example when using get function - users.map(getName), you immediately understand what this code fragment does.

Good practices of creating curried functions

When creating your own curried function you should follow one important rule.

Always leave the source of data as the last argument. To determine the order of other "configuration" arguments, think about function use-cases.

Let's take a look at the get function where source of data (object) is NOT the last argument.

function get(obj) {
  return function(key) {
    return obj[key];
  }
}

// using arrow function

const get = obj => key => obj[key];

const users = [{ name: 'Adam' }, { name: 'Maciej' }]

const namesList = users.map(user => get(user)('name'))

As you can see using get function in this form doesn't make sense. And you can't really create a specialized function since you don't have access to the object yet. It is a good practice to leave the source of data as the last argument, because looking at the use-cases it usually comes at the end when executing the code.

Creating curried functions from standard function

In JavaScript world we are not used to curried functions, but looking at the use-cases it looks very promising. Actually we can create a function which is both curried and not.

function add(...args) {
  if (args.length === 1) {
    const [a] = args
    return function(b) {
      return a + b
    }
  }
  const [a, b] = args
  return a + b
}

add(5, 3) // 8
add(5)(3) // 8

If add is called with one argument args.length === 1, then we return new function where first argument is remembered, just like we did before. But if we call it with two arguments, it will just add them and return a sum.

You have to admit that it is very impressive, but the definition of this function is very complicated now and it's only summing up two numbers.

Thankfully there is a helper function which will help us with it:

function curry(argsLength, originalFunction) {
  function next(prevArgs) {
    function curriedFunction(nextArgs) {
      const allArgs = [...prevArgs, ...nextArgs]
      if (allArgs.length >= argsLength) {
        // all arguments are provided, call the function
        return originalFunction(...args);
      }
      else {
        return next(allArgs)
      }
    }
  }
  return next([])
}

It looks even more complicated but with it, we can simply transform the standard function into a curried one. Just remember that the first argument of curry is the number of arguments it can take, and the second one is the function itself;

const add = curry(2, (a, b) => a + b);

const addTo5 = add(5);

add(5, 3) // 8
addTo5(3); // 8
add(5)(3); // 8

Now you don't have to worry about how many arguments you call the function with. You call the function like you did before you got to know about currying or call the function, by one argument at a time.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

Personal Story: My journey to find a perfect job as JavaScript Developer

Sławek Kołodziej — Mon, 16 Nov 2020 12:26:30 +0000

I've always been interested in programming, but only in high school I got hooked into web development. It was (and still is) very approachable for newcomers, with great free resources and tools available online. This is why I decided to learn all about web development and look for a programming job immediately after high school. I didn't wanted to go to college at the time. I considered it a waste of time, time which I could use to gain experience and money on the job.

I will tell you a story about my first 3 (almost 4) jobs as Front-end Developer. Why those 3 in particular? Because only at the last one I felt like in the right place and working with technologies I really wanted to work with. The first two were very important part of my journey so I wanted to include them.

The job I never treated like a job

During high school I really wanted to do some commercial work. I wanted to prove my parents and myself that it's a right profession for me and I can make money out of it. I started to look for a side job online and reply to the listings. I've got one answer from a Pole living in UK asking if I can do WordPress stuff. I just started learning WordPress few weeks ago, but I've send him what I did so far. He said it was a little, but I can start working for him.

There wasn't any interview, we didn't even saw each other. All the communication was done via text. Maybe it was sketchy but I was determined to try it.

Because I was still a student, I started working remotely for 2-3 hours a day. I was helping other full time developers with small tasks. The salary was very low but for me who never had a job before and was still studying it was huge. With this money I bought myself a fancy ergonomic desk chair (I still use it!) and a graphic card to play GTA V 😄.

I left the job after few months, because I was tired working and going to school at the same time, but it gave me confidence that I should follow this path. The fun fact is, during all the time I was working there, we only communicated via text (using Gadu Gadu - Polish communicator) and organized our work on Basecamp. I never saw or heard my employer or people I worked with.

How I've got the job and never started working there

In my location it was hard to find a developer job where I could use "cool" technologies and work with great teams on great products. But there were a lot of places doing WordPress.

Just before I finished high school I decided it is the time I should look for a first full-time job. I applied for a position very close to me and got invited to an interview.

I was never as stressed as I was before this interview. The office of this company was at the 10th floor. For some reason I didn't go to the elevator, but I took stairs instead. I had to wait few minutes before I left the staircase to catch my breath. When I came to the office and said I was here for the interview they said they don't know anything about it! It turned out that the person who replied to my email didn't informed anyone. I had the interview anyway, it was very easy and informal but I've got the job.

When they asked me when can I start I said I would want to still have my holiday so I want to start in September. I knew it was a bold move but they agreed and I was supposed to contact them in two months. When I was living my future boss walked my to the elevator.

I was very happy I've got the job. I knew getting the first job is very difficult. While my colleagues were worrying about the upcoming exams, I was in very comfortable position. At the same time my friend got accepted at Netguru as Junior Front-end Developer (it will become important later).

September came and I made a call to the company that I want to start working with them. To my surprise they said the project I was supposed to work in was cancelled and they can't hire me. I remember I was devastated. Why they didn't inform me sooner? Maybe I shouldn't take this vacation? At the same time my colleagues were going to start their first year at the university and it was too late for me to apply. I thought to myself sarcastically: "I'm unemployed now".

My first full time job

It didn't take a long time I applied for another WordPress position in my city. I remember I was sitting at in the park waiting for my girlfriend when the email came. They invited me to the interview! It was more format one, there were both technical and soft skills questions. The next day I've got invited to the office again. They offered me a job, I didn't get the salary I wanted, but they promised me to increase it after 3 month probation period. I accepted the offer and signed a contract.

The first weeks were very interesting. My official title was Junior Front-end Developer, but I was the only developer in the very small team, working along with designer, copywriter and project manager. Later I've got asked to review the code of website they presented to me. I said it looks like some inexperienced person was working on it. My boss said it was the work of other software company and he was outsourcing some projects to them 😄.

I was so happy I can finally do what I love and get paid. I was fixing some past projects and as I was doing for my own projects I setup whole ecosystem in Gulp to combine single JS files into one, optimize images automatically and so on. It turned out the setup took me more time than I ever worked on this project.

Before my first real project my boss asked me if I can work with WooCommerce and create an e-commerce site. I said I've never worked with it, but I can do it for sure. Later it became clear I couldn't. I didn't knew anything about WooCommerce and I was doing things my way instead of using solutions recommended by official documentation. The site went live, It was working somehow, but not everything from the CMS was working as it was supposed to. Every time client came with some small improvement I was scared the whole thing will collapse.

At the same time my friend was working at Netguru. He was very happy with the job. They offered him a very good salary, possibility to work remotely, flexible working hours and a Macbook he could take home. I'm mentioning a Macbook, because in Poland Apple products are still very premium and not everyone can afford it. By the way this is not advertisement for Netguru 😄.

After few months in this company it became clear to me I want to built more complicated products and have a better opportunity for a promotion.

I bought a $10 Udemy course and started learning React so I could work in Netguru.

Getting my first job as JavaScript Developer

Netguru was one of few places in Poland where they offered remote work for Junior Front-end Developer and were transparent about the salary. Sadly when I felt like I was ready to apply for the Junior position it was now longer available. I remember I refreshed their site almost daily to find out if they opened it again.

After almost a month I could finally apply for Junior Front-end Developer. I was accepted to take part in the recruitment process and I received a task to develop a small application. After they reviewed my work I was invited to the interview with the recruiter and other Front-end Developers. With the recruiter I answered some questions about myself and how do I work with others.

During the technical part I was asked few questions how I would solve some problems and we did pair programming to solve few JavaScript exercises.

After few days I was invited to the last part of the process. It was the interview with the department manager. I was asked about my motivation to be a developer and what I want to learn in the future. At the end he informed me I will receive a job offer in few days.

I was so happy to start this job. Finally I was working in the environment where there were people I could learn from and a project that would take more than a few weeks. I've got assigned a mentor, who by the way took part in the interview, and we closely worked together for almost 2 months. After this time I was promoted to a regular position.

Only at this job I felt like I'm finally doing what I always wanted to do.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

7 Tips to Get Up to Speed Quickly in New Job or Project

Sławek Kołodziej — Mon, 09 Nov 2020 15:19:57 +0000

I've been working for three years in my current company and at the same time I took part in over 10 different projects for various clients. Changing projects this often taught me how to onboard quickly to new project and contribute as soon as possible.

1. Meet with your project manager / team leader

This should be the person who knows the most about the project, especially from the business side.

ask her/him about project background - what we are developing and why
ask about the last milestone they achieved
ask about what they currently work on and what will you do
what is the team currently struggling with - maybe you can offer your help here

2. Meet with your team mates

Project teams may have various sizes. It could be 2 developers working together or even team of 25+ people. In small teams it will be very easy to work closely together. In bigger ones, usually there will be a person or two who will coordinate the work of the team.

When you meet your new team mates get to know them from personal level, but also ask what are their responsibilities in the project. It will be easier to find a person who can help you later.

3. Look for a mentor

This will be the person you can ask questions directly about the projects. Usually it will be the team leader or some other experienced person in the project. Ask them to show you how they work, what is the development flow here and how is the application working.

4. Setup the project

It should be your first technical task. Depending on the project it may be as trivial as running 1-2 commands or require even a few days to install and configure all dependencies. While setting up your local development look for things there are missing or outdated in project documentation and offer to fix them. The new person who will join the project will thank you for sure.

5. Do not worry about not delivering

You are just beginning your work in this project. Do not expect from yourself to deliver something meaningful in the first weeks. It will take time to get to know all details of how your application works. Your team mates are months, if not years, ahead of you when it comes to project knowledge and they are able to quickly find a place in the code where this small change is needed, while you might spend several hours on the same thing. Do not worry about it, you will get there.

6. Start with something small

I know you would want to put you knowledge into practice and deliver great feature in your first week, but it would likely take 2-3 more time than initial estimates of your teammates and that's ok. I would suggest to look for small tasks at first - changing a translation, improving the design, adding some field to form. You will pick up knowledge from different places of the application and you will be able to use it soon.

7. Look for improvements

While working in the project look for ways to improve the project. It could be contribution to documentation or refactoring some parts of application everyone wanted but nobody did it. Looking at project with fresh eyes you may discover some improvements that were obvious, but went unnoticed by your team mates. Maybe you can introduce some interesting practice or tool you used in previous project / job?

Working in a new place and new people is always stressful, especially the first days. Remember to focus on learning as much as possible and do now worry strictly about delivering features. After few weeks or months you will start feeling comfortable and work in your standard level and pace.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

What Do You Need to Know as a Junior Frontend Developer + Bonus Interview Questions

Sławek Kołodziej — Mon, 02 Nov 2020 15:29:41 +0000

When you start learning about frontend and gain some knowledge to develop simple webpages, you might ask yourself a question: "Am I ready to get a first job?".

Requirements in job descriptions often say: "knowledge of HTML, CSS and JavaScript" or "you should know React/Angular/Vue", but what does it really mean?

In this post I will try explain what you really need to know to get hired as Junior Front-end Developer. It can change from job to job, but this is a nice overview of skills you need to know.

What you need to know about HTML as Junior Front-end Developer

At first glance, it is the easiest part of web development, but it can cause trouble even for experienced developers. As a Junior you should know the most common HTML elements and how they effect SEO.

Common HTML Interview Questions

Rewrite given sample of code using proper HTML elements.
Which parts of HTML have the greatest impact on SEO.
What you should include to change site thumbnail when sharing on social media.
How to optimize images for the best performance and quality?
What is defer and async attribute in script element and what's the difference?

What you need to know about CSS as Junior Front-end Developer

As a Junior Front-end Developer you should know most of CSS properties.

You should know how to build common UI elements such as a Modal or Multi-level Navigation, how to implement CSS Animations and use Flexbox and CSS Grid.

Knowledge of Responsive Design and good practices of developing for smaller screens is often must have.

In commercial projects you will rarely see a plain CSS files. Learn about are CSS preprocessors such as SCSS, BEM methodology and CSS-in-JS.

Common CSS Interview Questions

What is the difference between box-sizing: content-box and box-sizing: border-box.
What are the good practices of CSS Animations? What you should avoid and why?
Rewrite given sample of code in SCSS using BEM methodology.
What values of display property you know? What are the differences?

What you need to know about JavaScript as Junior Front-end Developer

During job interview you should expect questions about DOM manipulation, using the most common array methods and many others parts of JavaScript. It's hard to list all of them. In the end you should be able to understand code written in JavaScript and write simple features. I would recommend you to take a look at Functional Programming in Javascript Series from Fun Fun Function channel on Youtube and free JavaScript Algorithms And Data Structures course on freeCodeCamp. After you complete it you should be able to answer most of the questions related to JavaScript.

Common JavaScript Interview Questions

What is the difference between var, let and const?
Use filter array method to remove every odd number from given array.
Implement reverse method, which is available on every String. Ex. using "string".reverse() gives "gnirts".
How does this behave in arrow function and regular function?

What you should know about JavaScript Framework such as React, Angular or Vue

Knowledge of JavaScript framework doesn't have to be required to get hired as a Junior Frontend Developer. But for some companies it is needed to start working in the project, for others you will gain extra points during the interview.

The most common way to test your framework knowledge will be a task to complete before the interview. You should know how to interact with external REST APIs, manage and send form data, implement simple UI elements such as a modal, dropdown, tabs or slider.

It's good to know code testing techniques so you can at least talk about them.

Common React/Angular/Vue Interview Questions

Create application, which fetches list of movies from API, can sort them and display movie details on a separate page (task before interview)
Use state management library (ex. Redux or Mobx in React) to implement counter. You should be able to increment and decrement counter using buttons.
Describe how to debug web application in given framework.

Bonus: Soft skills

It is very important to have good soft skills when applying for a job. Developing apps is almost always done as a team. During interview you should present yourself as a person which is easy to communicate and work with.

Be truly interested and engaged in a conversation. Try to explain and describe your solutions. You will have much bigger chance to get hired if the interviewer will like you.

Before the interview look for information about the company you are applying for and try to use it during the conversation.

What is the best way to show your experience

Remember, you don't need to have commercial experience to get Junior Front-end Developer Job. Instead, you should show your skills in side projects. Look at 5 Javascript Projects You Should Build as Junior Frontend Developer article for ideas.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

5 Javascript Projects You Should Build as Junior Frontend Developer

Sławek Kołodziej — Wed, 28 Oct 2020 20:01:09 +0000

When looking for a first job as a Junior Front-end developer it's very hard to show your experience as a programmer. Your projects used as a playground for learning new skills will rarely also offer good code quality. It's impossible to write perfect code if you write something for the first time! In the end, our public code repository will consists of a bunch of unfinished projects. You wouldn't want your future employer to see all of it.

This is why I encourage you to reuse your skills in practice once again. This time also taking into consideration code quality. Here is a list of project examples you could build to show off your skills.

1. Build a Blog Template with HTML and CSS

When you just start learning front-end development it's important to consolidate your knowledge about HTML and CSS. Building a Blog Template is a good idea for your first bigger project. Do not worry about design, there are many resources available online.

Requirements:

build a homepage, single post page, and contact page
try using CSS Grid
your page should be responsive (RWD)

Nice to haves:

add a slider
use real content instead of Lorem Ipsum

2. Build a Tic-tac-toe game with Pure JavaScript

Building a game in a browser can be a great exercise to test your JavaScript skills. You will have to react to user events, interact with DOM, and store game data. It's also a great project to show to your colleagues and family!

Requirements:

welcome screen with name and symbol input for each player
rendering a symbol when a user clicks on the empty cell
win verification

Nice to haves:

creating a scoreboard and saving it to local storage
playing with the computer, using ex. minmax algorithm or your own solution

3. Location sharing with Pure JavaScript and Maps Service

A simple app where you can share location with your friend can be both a demanding project and a very useful tool you can use. In this project, you will use JavaScript to interact with external services for maps (ex. Google Maps or OpenStreetMap).

Requirements:

displaying your current location on a map
"Share" button which creates a link with your current location
a page which displays a location embedded in URL

Nice to haves:

sharing your realtime location, you will have to save it and read it every few seconds from an external database (ex. Firebase)
displaying the realtime location of your friend when he accesses the page

4. Build TV Series Tracker with JS Framework (React, Vue, Angular or other)

This project will help every TV Series fan, track premieres of new episodes. It will be a great opportunity to use a JavaScript framework you are comfortable with.

Requirements:

searching for TV Series using external API (ex. TVMaze API)
adding TV Series to the tracking list
displaying tracked TV Series list along with newest episode premiere date
single page view with more details about TV Series
saving tracking list to local storage

Nice to haves:

sending emails or push notifications when a premiere is coming

5. Home Budget App with JS Framework (React, Vue, Angular or other)

Creating a home budget App will be an ultimate check for your skills as a Junior Front-end Developer. It will check your ability to create forms and store information, but it can also help you save money!

Requirements:

adding a category
adding expense with name, amount and category
sum up of monthly spendings split into categories
saving data to an external database (ex. Firebase)

Nice to haves:

Summary

Side projects are a great way to show your skills to land first job as Junior Front-end Developer. Let your potential employer know what did you build so far. They will not only look at the webpage but also analyze your code, so make sure it's clean.

Before you start building something new create a list of requirements for MVP (Minimum Valuable Product). During development, you will discover more interesting functionalities your application can have, just add it as a nice to have to the list. It will help you finish the project on schedule.

Remember, you don't have to mimic those examples 1-to-1. Feel free to change, add or remove any detail you like. If you have older projects you used for learning new skills you can always refactor it and put it in a portfolio.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

Guide: Testing Redux Connected Components with React Testing Library and Jest

Sławek Kołodziej — Wed, 21 Oct 2020 18:38:30 +0000

In my experience unit testing React components was always pretty simple until you needed to integrate with an external library like Redux. There are countless "solutions" available online, but I wanted to present you with my simple, yet powerful solution. I used it in a few commercial projects with great results.

It couldn't be easier without React Testing Library, which revolutionized testing components in React.

A common mistake with testing Redux connected components

One solution which was, for some reason, quite popular was testing components connected to Redux without the real connection. Here is an example of what I mean by that.

import React from "react";
import { connect } from "react-redux";

const MyComponent = () => { ... };

const mapStateToProps = state => ({
    data: state.someData,
});

export { MyComponent as MyComponentUnwrapped };
export default connect(mapStateToProps)(MyComponent);

And then in tests, you would import MyComponentUnwrapped instead of your default export used everywhere else in the app.

In this case, you are not testing an important part of your component. Other than that MyComponentUnwrapped is used only by your tests, your real application uses the default export. You can get your tests passing where in reality the same cases could fail.

How to test components in React Testing Library

React Testing Library provides a very intuitive API. Its main goal is to test components the same way user will use them in your application. Of course, the same is possible with other testing libraries like Enzyme, but React Testing Library is very strict about it and doesn't allow to access the internals of your component.

Enough with theory. Let's write some tests!

Let's say we have some components, which fetch user data and display it.

import React, { useState, useEffect } from "react";

import { getUserData } from "./api";

const User = () => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    getUserData.then((data) => {
      setUserData(data);
    });
  });

  if (!userData) {
    return null;
  }

  return <div>{userData.name}</div>;
};

export default User;

Quite simple component, Now let's see how it can be tested

import React from "react";
import { screen, render } from "@testing-library/react";
import User from "./User";

jest.mock("./api", () => ({
  getUserData: () => ({ name: "mock name" })
}));

describe("User", () => {
  it("should display user name", async () => {
    render(<User />);

    const userName = await screen.findByText("mock name");

    expect(userName).toBeTruthy();
  });
});

The first thing we have to do is mock our API call with jest.mock. Normally it would make a network request, but in tests, we need to mock it.

Then we use render function to render our component, and screen.findByText to search for text in the component we just rendered.

Testing Redux connected components

Now let's suppose we would need to access user data in other parts of the application. Let's move it to the Redux store. Here is how the refactored version of the component might look like.

import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { fetchUserData } from './actions';

const User = ({ userData, fetchUserData }) => {
  useEffect(() => {
    fetchUserData();
  }, []);

  if (!userData) {
    return null;
  }

  return <div>{userData.name}</div>;
};

const mapStateToProps = (state) => ({
  userData: state.user
});

const mapDispatchToProps = {
  fetchUserData,
};

export default connect(mapStateToProps, mapDispatchToProps)(User);

Now the first thing you will notice in your test is: Could not find "store" in the context of "Connect(User)" error. It's because your component needs to be wrapper in Provider to access Redux Store. Let's fix our tests:

import React from "react";
import { screen, render } from "@testing-library/react";
import { createStore } from "redux";
import User from "./User";
import reducer from "./reducer";
import store from "./store";

jest.mock("./api", () => ({
  getUserData: () => ({ name: "mock name" })
}));

const initialState = {
    user: { name: "mock name" },
};

const store = createStore(reducer, initialState);

const Wrapper = ({ children }) => (
    <Provider store={store}>{children}</Provider>
);

describe("User", () => {
  it("should display user name", async () => {
    render(<User />, { wrapper: Wrapper });

    const userName = await screen.findByText("mock name");

    expect(userName).toBeTruthy();
  });
});

We fixed the error by creating a Wrapper. This component will wrap the component we test with Provider and apply a mocked state. We can go one step further by custom render function using the one from React Testing Library.

import React from "react";
import { render as rtlRender } from "@testing-library/react";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from "./reducer";

export const renderWithState = (
  ui,
  { initialState, ...renderOptions } = {}
) => {
  const store = createStore(reducer, initialState);
  const Wrapper = ({ children }) => (
    <Provider store={store}>{children}</Provider>
  );

  return render(ui, { wrapper: Wrapper, ...renderOptions });
};

And then in our case we can just import it and use like this:

renderWithState(<User />, { initialState });

Testing components with Redux hooks

The approach presented above is also compatible when using React Redux hooks and selectors, as long as they use the data we provide them in the state.

This is the true advantage of the React Testing Library. No matter what you use for connecting your component to Redux. It only tests what your component renders, without diving deep into implementation details.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

Sync your icons with Figma API

Sławek Kołodziej — Thu, 09 Jul 2020 19:20:57 +0000

Problem

Adding or editing assets often requires two people to make the change: designer and developer. They have to sync after every update, which is often quick but interrupts other work.

Solution

Figma API makes it possible to extract almost any data from design files into your project.

One obvious integration many projects can benefit from is syncing your svg files with Figma. I will use figma-api-exporter, it is still an early version, but it was already tested in production. Feel free to contribute.

Requirements

Figma Access Token - follow the instruction
Figma File with icons changed to components
figma-api-exporter installed in your project

Downloading icons as svgs

const figmaApiExporter = require('figma-api-exporter').default;

const exporter = figmaApiExporter(YOUR_ACCESS_TOKEN);

exporter
  .getSvgs({
    fileId: FIGMA_FILE_ID,
    canvas: 'Icons',
  })
  .then(async svgsData => {
    await exporter.downloadSvgs({
      saveDirectory: './figmaIcons',
      svgsData: svgsData.svgs,
      lastModified: svgsData.lastModified,
      clearDirectory: true,
    });
  });

Save it as YOUR_NAME.js file and run with node YOUR_NAME.js. You should see files appearing in figmaIcons directory.

Displaying all available icons (ex. in Storybook)

By default there is no easy way to import all files from directory. However, you can use create-index to generate index.js file with files exported as modules after every sync.

const { writeIndex } = require('create-index');
const path = require('path');

...

  await exporter.downloadSvgs(...)
  writeIndex([path.join(__dirname, './figmaIcons')], {
    update: true,
    extensions: ['svg'],
  });

index.js will look like this:

export { default as Icon1 } from './Icon1.svg';
export { default as Icon2 } from './Icon2.svg';
export { default as Icon3 } from './Icon3.svg';

Then in Storybook you can import all svg files and iterate over them:

import * as allSvgIcons from './figmaIcons';

Making it work in production

Option 1: Plug it into CI

Make your script run on every deployment. Every deployment will update the icons to the latest version. The downside is an increased build time.

Option 2: Sync and push

If you are concerned about your deployment time you can run script locally and push new/updated files to repository. It is a less preferred option, as its removes most of the automation. You have to still perform some action after designer updated the icons.

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

Guide: Unit Testing React Apollo Components with React Testing Library

Sławek Kołodziej — Sat, 28 Dec 2019 22:33:08 +0000

In this post I will present you a quick guide how to test React components which use Apollo.

At first let's see how our component looks like:

import React from 'react'
import gql from 'graphql-tag'
import { useQuery } from '@apollo/react-hooks'

export const POSTS_QUERY = gql`
  query Post($id: String!) {
    {
      post(id: $id) {
        title
        author
        description
      }
    }
  }
`

const Post = ({ postId )} => {
  const { loading, error, data } = useQuery(POSTS_QUERY, {
    variables: { id: postId },
  })

  if (loading) return null
  if (error) return `Error: ${error}`

  return (
    <div>
      <h3 data-testId="post-title">{data.post.title}</h3>
      <h4 data-testId="post-author">{data.post.author}</h4>
      <p data-testId="post-description">{data.post.description}</p>
    </div>
  )
}

export default Post

I always had issues with testing components which do not render desired value immediately. In our case Post component at first won't render anything, because it is in loading state.

Fortunately react-testing-library solves this problem for us. It allows us to wait for some element to be rendered.

On the other hand, Apollo has very useful MockedProvider component. Thanks to this component you can mock result of your queries. Let's take a look at the code.

import React from 'react'
import { render, cleanup, findByTestId, findByText } from '@testing-library/react'
import { MockedProvider } from '@apollo/react-testing'

import Post, { POSTS_QUERY } from './Post'

const mocks = [
  {
    request: {
      query: POSTS_QUERY,
      variables: {
        id: 'postId',
      }
    },
    result: {
      data: {
        post: {
          title: 'title',
          author: 'author',
          description: 'description',
        }
      }
    }
  }
]

describe('Post', () => {
  afterEach(cleanup)

  it('should render post title', async () => {
    const { container ) = render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <Post postId="postId" />
      </MockedProvider>
    )

    const titleElement = await findByTestId(container, 'post-title')
    const titleContent = await findByText(titleElement, 'title')

    expect(titleElement).toBeTruthy()
    expect(titleContent).toBeTruthy()
  })

  ...tests for author and description
})

At first we create mocked query response for POSTS_QUERY. We pass the mocks variable to MockedProvider when rendering our component.

To get title element we use findByTestId function. When you go back to component code you can see we added data-testId to h3 element.
When we finally find this element we check whether it has expected text using findByText.

Additional resources

Apollo Docs - Testing React components
React Testing Library Docs

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.

Forem: Sławek Kołodziej

Tailwind CSS: The future of styling or just another CSS framework?

Why I decided to use Tailwind CSS for my blog redesign

Pros of using Tailwind CSS

Tailwind CSS just looks good

Tailwind CSS has a great IDE support

It allows for very quick prototyping

Cons of using Tailwind CSS

You still have to style the UI by yourself

Looong list of CSS classes

Limited options when working with designers

My conclusions after using Tailwind CSS

I need more experience with it

I won't use it for commercial projects yet

I will still use it for my own projects

Arrow functions in JavaScript: Everything you need to know about them

Using short form to improve code readability

What are the differences between regular and arrow functions

this in arrow functions

Using this in arrow functions to your advantage

Accessing arguments in arrow functions

Summary

My 2020 In Review: What I Learned and Accomplished as Senior Front-end Developer

January

I was promoted to Senior Front-end Developer

I created a tool to automatically export SVG icons from Figma

I finished Angular Core course on Frontend Masters

February

I finished Testing JavaScript course by Kent C.Dodds

I've read The Unicorn Project by Gene Kim

March

I co-created a template for Create React App

I finished Complete Intro to Containers and Full Stack for Front-End Engineers on Frontend Masters

April

I finally started using React hooks at work!

May

I finished Advanced Distributed Systems Design Course by Udi Dahan

June

I finished Go for JavaScript Developers course on Frontend Masters

July

I started doing Gophercises - exercises to learn Go

August

I took a long vacation!

September

I worked with React Admin

October

I started working as a Node.js developer in a project

I started my developer blog

November

I started working on an internal course about testing React components

December

I redesigned my blog with Tailwind CSS

What is Function Currying in JavaScript and When to Use It

Creating a curried function

When to use the curried function

Good practices of creating curried functions

Creating curried functions from standard function

Personal Story: My journey to find a perfect job as JavaScript Developer

The job I never treated like a job

How I've got the job and never started working there

My first full time job

Getting my first job as JavaScript Developer

7 Tips to Get Up to Speed Quickly in New Job or Project

1. Meet with your project manager / team leader

2. Meet with your team mates

3. Look for a mentor

4. Setup the project

5. Do not worry about not delivering

6. Start with something small

7. Look for improvements

What Do You Need to Know as a Junior Frontend Developer + Bonus Interview Questions

What you need to know about HTML as Junior Front-end Developer

Common HTML Interview Questions

What you need to know about CSS as Junior Front-end Developer

Common CSS Interview Questions

What you need to know about JavaScript as Junior Front-end Developer

Common JavaScript Interview Questions

What you should know about JavaScript Framework such as React, Angular or Vue

Common React/Angular/Vue Interview Questions

Bonus: Soft skills

`this` in arrow functions

Using `this` in arrow functions to your advantage