DEV Community: Lukasz Pietraszek

Interview questions: React

Lukasz Pietraszek — Mon, 31 May 2021 16:38:51 +0000

Intro

Welcome to 3rd post from the Interview series. This time I'd like to focus on questions around React and its ecosystem. Since those are interview questions some answers are rather shorter and focusing on the core concepts since during the interview they will try to gauge if you are familiar with them and will try to ask more questions that cover a wider spectrum of your knowledge to see where would you fit in companies structures. If you need to dive into specific subjects there are plenty of articles that cover those concepts in a more granular and extensive way on dev.to or medium.

Questions:

What is virtual DOM and how does React use it to render to the DOM?

React has its own DOM as an object in memory separated from real DOM. Every operation that we make in React are primarily evaluated in this memory version of DOM. Then ReactDOM checks what differences are between memory DOM and real DOM and then updates real DOM with specific changes.
This approach makes it fast because resources are not wasted for interaction with a real browser's DOM and improving performance considerably.

What is JSX?

JSX allows us to write HTML or XML-like text code alongside ReactJS by providing syntactic sugar for the React.createElement(component, props, ...children) function. It has its own extension .jsx but we can also use it in regular .js files
JSX code:

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

compiles to:

React.createElement(MyButton,{color: 'blue', shadowSize: 2},'Click Me')

What problems does React solves?

React lets us create Single Page Applications that resolve the problem of user experience. SPA gives us a desktop-like application experience. We don't have an annoying reloading effect known from traditional web pages every time data is changing.

What are the pros and cons of using React?

Pros:

Performance and speed enhancement
Popularity / huge community
SEO-friendly
Cost-effectiveness / easy to learn / development time
Component-Based Architecture
One direction flow

Cons:

Incompleteness - it is just a view part in MVC model
The high pace of development

What is the difference between React and React Native?

React is a library that uses as a default ReactDOM to render content in the browser by changing its DOM. React Native is a cross-platform mobile framework that uses Reactjs for building apps and websites. React Native compiles to native app components enables the programmer to build mobile applications that can run on different platforms such as Windows, Android, iOS in JavaScript.

How do you style components in React?

There are at main 4 ways to style React components.

Inline CSS - Styling React elements using inline CSS allows styles to be completely scoped to an element using a well-understood, standard approach.
CSS & CSS Pre-processors - This involves using separate stylesheets like our conventional way of styling our HTML websites either with CSS or a CSS preprocessor such as SASS, Less or Stylus.
CSS-in-JS - Styled-Components - styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS.
CSS Modules - A CSS Module is a CSS file in which all class names are scoped locally by default.

What features were introduced in React 16.x?

With a new React version we have got a few improvements:

A new type of licence, from now on its MIT, you can use React library for commercial use
New types returned by render, now you can return string or array of elements
Portals - it's a new, better way of rendering elements outside the component in which it was created
Fragments
Context API
Lazy
Hooks
Better error handling by error boundaries - components catching and registering errors
Improvement of Server-Side Rendering
Files size-reduction - modules of React and react-dom has been reduced by 32%

What are Higher Order Components?

Higher-Order Component is an advanced React techniques used when we need to multiply or reuse a component's logic. Components take one or more components as arguments and return a new upgraded component. We don’t modify or mutate components. We create new ones. A HOC is used to compose components for code reuse. A HOC is a pure function and has no side effects, returning only a new component

What are the options to manage state in React?

State management is a way to engender communication and sharing data between components. It creates a concrete data structure that you can read and write and which represents your app's state. A state is a JavaScript object that represents part of the component which can be changed by a user action. We can use Context API or several libraries like Redux, Recoil, we could also use React Hooks.

What's the difference between state and props?

Props (properties) and state are just simple JavaScript objects. Both store pieces of information on how to render a component. Difference between these two objects is major. props are passed to a component like an arguments to the function while the state is managed inside a component just like a variable in the function's body.

What is prop drilling and how can you avoid it?

Prop drilling is when you passing data through props from top to bottom of the components tree and components don't directly use them. To avoid prop drilling we can use Context API or Render Props.

Why React requires key to render the list?

React needs key while rendering lists because it gives React the possibility to distinguish between similar objects in a similar place. When it's up to changing something React by the key can find the exact element that we want to change instead of changing everything that could lead to worse performance. Also in many cases, lack of distinction could cause bugs because React can start interacting with the first found element instead of this one we want it to.

How can we improve Accessibility in React?

The ways to improve accessibility in React apps are:

Semantic markup
Upgrading semantic markup with ARIA (Accessible Rich Internet Applications)
Using an element's focusing styling
Keyboard navigation
Descriptive Alt text for images
Headings levels
Labelling forms elements
Document language
Fixing contrast ratio

What are hooks and why are they useful?

Hooks are functions that contain in themselves actions responsible for the component's state and component's lifecycle methods. With hooks we can now use in stateless components - methods reserved earlier only for classes. Hooks let us keep components layout clear simultaneously with using component's state.

What is Redux?

Redux is a library used to manage the application state. React or Angular use Redux to build the user interface. It is a predictable state container for JavaScript applications and is used for the entire application’s state management.

What solution would you use to process asynchronous requests with Redux?

Each API call has three base actions associated with it:

REQUEST
SUCCESS
FAIL

Each of these actions changes the application state and keeps it in line with what is happening during the asynchronous task execution.

Redux-thunk middleware allows creating the action's creator returning functions instead of objects.

What is Next.js?

Next.js is a framework that renders sites structure on Server Side. Next.js uses React, Babel and Webpack. Next.js is used for developing single-page JavaScript applications, provides Server Side Rendering SSR which improves the performance of applications loading.

How do you test React components?

There are two popular approaches to unit testing React components:
1.Enzyme - is an testing library created by Airbnb where we are testing the component using the state and props of the component. It provides useful functions such as shallow, mount or render. With a shift towards functional components many of Enzyme's methods for testing class instances are no longer useful and for that reason React team recommends using React Testing Library.
2.react-testing-library - is an alternative to Enzyme and encourage you to test actual DOM nodes and users interaction with components rather then implementation.

What is Jest?

Jest is a JavaScript unit testing framework created by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It's often used for testing components.

Useful resources:

Official Documentation
Blog by Dan Abramov
Tutorials by Lee Robinson:Mastering Next JS and React 2025
React Accessibility on MDN
Nader Dabit on YouTube
React Testing Library Tutorial by Robin Wieruch

Special thanks to Marek and Tomek for reviewing this post.

Photo by Clem Onojeghuo on Unsplash

Interview questions: JavaScript

Lukasz Pietraszek — Tue, 27 Apr 2021 07:47:02 +0000

Welcome to the second post on interview questions. You can read previous post which covers general questions regarding HTML, CSS and some of the accessibility.

In this post, I'd like to focus on common JavaScript questions and simple code tests you might be given during the interview. Below list is a mix of various questions that allow interviewers to gauge your seniority level.

What is an IIFE and why are they used?

IIFE stands for "Immediately-invoked function expression"

The main reason to use it is to preserve a private scope within your function inside of your JavaScript code you want to make sure that you are not overriding any global variables.

!(() => {
    console.log("Hello from IIFE!");
})();

List Iteration/loops types

for
while
do while
for of
for in

Explain hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.
Function expressions load only when the interpreter reaches that line of code. So if you try to call a function expression before it's loaded, you'll get an error!
If you call a function declaration instead, it'll always work, because no code can be called until all declarations are loaded.

hoistedFunction(); // Hello! I am defined immediately!
notHoistedFunction(); // ReferenceError: notHoistedFunction is not defined

// Function Decalration
function hoistedFunction () {
  console.log('Hello! I am defined immediately!');
}

// Function Expression
const notHoistedFunction = function () {
  console.log('I am not defined immediately.');
}

List ES6 features

arrow functions
classes
template strings
destructing - The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
default value
spread operator - Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected. Example: [...iterableObj, '4', 'five', 6];
let, const, var

List JavaScript data types

Number
String
Boolean
Null
Undefined
Symbol

How JavaScript's runtime works? Describe an event loop mechanism. How many threads JavaScript has?

Javascript runtime consists of a few parts:

Heap - a large mostly unstructured region of memory, where variables are allocated
Call stack - where function calls form a stack of frames
Queue - a list of messages to be processed. Each message has an associated function that gets called to handle the message.

Functions from the call stack are executed according to the "First in, first out" rule, meaning that the function on top will be executed first.

Async actions such as fetch or setTimeout are provided by the Web API's, and executed by them, so the thread of the JS runtime can remain unblocked while waiting for the timeout or request to be completed. Completed async actions are being put to the queue and pushed back to the call stack once it's empty. This means that setTimeout with 0 timeout might not output the result immediately.

References:

What are Web Workers

Web workers are scripts that run in the background without the page needing to wait for it to complete. It can be useful when you have a heavy-cost, slow operation running in your application as it won't block the JS runtime while it's running and allow a user to interact with the page.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

What is Closure?

A closure is an inner function that has access to the outer (enclosing) function's variables—scope chain. The closure has three scope chains:

it has access to its own scope (variables defined between its curly brackets)
it has access to the outer function's variables
it has access to global variables.

const siteName = 'lukaszpietraszek.com';

function outerFunc() {
  const title = 'Interview Questions';

  function innerFunc() { 
    console.log(siteName);
    console.log(title );
  }
  return innerFunc;
}
const myFunc = outerFunc();

myFunc();
// lukaszpietraszek.com
// Interview Questions

Difference between var and let

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.
var keyword defines a variable globally, or locally to an entire function regardless of block scope.

Difference between map, filter and reduce

The Map object holds key-value pairs and remembers the original insertion order of the keys. A Map object iterates its elements in insertion order — a for...of loop returns an array of [key, value] for each iteration.
The map() function returns a new array by passing a function over each element in the input array.
The filter() method creates a new array with all elements that pass the test implemented by the provided function. A new array with the elements that pass the test. If no elements pass the test, an empty array will be returned.
Reduce method of the array object is used to reduce the array to one single value The reduce() method executes a reducer function (that you provide) on each member of the array resulting in a single output value.
The reducer function takes four arguments: Accumulator (acc) Current Value (cur) Current Index (idx), Source Array (src). Your reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value.

Explain how prototypal inheritance works

JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype and acts as the final link in this prototype chain.

The core idea of Prototypal Inheritance is that an object can point to another object and inherit all its properties.
The main purpose is to allow multiple instances of an object to share common properties, hence, the Singleton Pattern.

Explain Getters and Setters

A getter is a method that gets the value of a specific property. A setter is a method that sets the value of a specific property. You can define getters and setters on any predefined core object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.
A difference between using a getter or setter and using a standard function is that getters/setters are automatically invoked on assignment. So it looks just like a normal property but behind the scenes, you can have extra logic (or checks) to be run just before or after the assignment.

const person = {
    firstName: 'John',
    lastName: 'Doe',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
        const words = name.toString().split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
};

person.fullName = 'Mark Smith';
console.log(person.fullName); // Mark Smith
console.log(person.firstName); // Mark
console.log(person.lastName) // Smith

What is a callback function?

JavaScript functions as arguments, and can be returned by other functions.

Functions that do this are called higher-order functions. Any function that is passed as an argument is called a callback function.

const allUserData = [];

function logStuff(userData) {
  if (typeof userData === "string") {
    console.log(userData);
  } else if (typeof userData === "object") {
    for (const item in userData) {
      console.log(`${item}: ${userData[item]}`);
    }
  }
}

function getInput(options, callback) {
  allUserData.push(options);

  if (typeof callback === "function") {
    callback(options);
  }
}

getInput({ firstName: "John", lastName: "Doe" }, logStuff);
// firstName: John
// lastName: Doe

What are Promises

It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point.

A Promise is in one of these states:

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation completed successfully.
rejected: meaning that the operation failed.

const promise = new Promise((resolve, reject) => {
  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  } else {
    reject(Error("It broke"));
  }
});

promise.then(
  result => {
    console.log(result); // "Stuff worked!"
  },
  err => {
    console.log(err); // Error: "It broke"
  },
);

Async/Await

An async function is a modification to the syntax used in writing promises. You can call it syntactic sugar over promises. It only makes writing promises easier.

An async function returns a promise -- if the function returns a value, the promise will be resolved with the value, but if the async function throws an error, the promise is rejected with that value. Let’s see an async function:

Await is only used with an async function. The await keyword is used in an async function to ensure that all promises returned in the async function are synchronized, ie. they wait for each other. Await eliminates the use of callbacks in .then() and .catch(). In using async and await, async is prepended when returning a promise, await is prepended when calling a promise. try and catch are also used to get the rejection value of an async function. Let's see this with our date example:

async function myDate() {
  try {
    let dateDetails = await date;
    let message = await orderUber(dateDetails);
    console.log(message);
  } catch (error) {
    console.log(error.message);
  }
}

What’s the difference between a variable that is: null, undefined or undeclared?

Undeclared is any variable that has not been declared yet. Console throws an error for this.
Undefined is a declared variable that has no assigned value, yet.
Null is a value that has been assigned to a variable.

What is Singleton

Singleton is a pattern that allows you to create one instance of an object. If such an instance already exists, you cannot create a second one. Additionally, the initialization of this object takes place only when it is needed in the program. These are the two most important features of this pattern. If a structure lacks both, it is not a singleton. It is best to imagine Singleton as a module (what it will be anyway) that encapsulates the entire mechanism that initializes an instance of that Singleton.

const mySingleton = (() => {
  // Instance stores a reference to the Singleton
  let instance;
  function init() {
    // Singleton
    // Private methods and variables
    function privateMethod() {
      console.log("I am private");
    }
    const privateVariable = "Im also private";
    return {
      // Public methods and variables
      publicMethod() {
        console.log("The public can see me!");
      },
      publicProperty: "I am also public",
    };
  }

  return {
    // Get the Singleton instance if one exists
    // or create one if it doesn't
    getInstance() {
      if (!instance) {
        instance = init();
      }
      return instance;
    },
  };
})();

// Usage:
const singleA = mySingleton.getInstance();
const singleB = mySingleton.getInstance();

console.log(singleA === singleB); // true

Scope types

Scope in JavaScript defines what variables you have access to. There are two kinds of scope – global and local scope.

A local scope can be function scope and block scope.

What is the 'this' keyword and how is it used?

this always refers to an object.
this refers to an object which calls the function it contains.
In the global context this refers to either window object or is undefined if the 'strict mode' is used.

What Are JavaScript Programming Paradigms?

JavaScript is a multi-paradigm language, supporting imperative/procedural programming along with OOP (Object-Oriented Programming) and functional programming. JavaScript supports OOP with prototypal inheritance.

Prototypal inheritance (also: prototypes, OLOO - Object Linking to Other Objects).
Functional programming (also: immutability, pure functions, function composing, cursing, closures, first-class functions, lambdas).

Functional Programming

Functional Programming is a form of programming in which you can pass functions as parameters to other functions and also return them as values. In functional programming, we think and code in terms of functions.

Object-Oriented Programming

The basic idea of OOP is that we use objects to model real-world things that we want to represent inside our programs, and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of.

Objects can contain related data and code, which represent information about the thing you are trying to model, and the functionality or behaviour that you want it to have. Object data (and often, functions too) can be stored neatly (the official word is encapsulated) inside an object package (which can be given a specific name to refer to, which is sometimes called a namespace), making it easy to structure and access; objects are also commonly used as data stores that can be easily sent across the network.

Higher-order functions

A Higher-Order function is a function that receives a function as an argument or returns the function as output.

const double = n => n * 2

[1, 2, 3, 4].map(double) // [ 2, 4, 6, 8 ]

What is Object literal syntax?

Object literal is a comma-separated list of name-value pairs wrapped in curly braces.

Object literals encapsulate data, enclosing it in a tidy package.

Write Class example in JavaScript

class Person {
  constructor(name, surname) {
    this.name = name;
    this.surname = surname;
  }
  get fullName() {
    return this.name + " " + this.surname;
  }
  set fullName(name) {
    var words = name.toString().split(" ");
    this.name = words[0];
    this.surname = words[1];
  }
  sayHello() {
    console.log(`My name is ${this.name} ${this.surname}`);
  }
}

Determine what would be logged out to the console.

// What would be logged out to the console?
var num = 50;

function logNumber() {
    console.log(num);
    var num = 100;
}

logNumber();
// Undefined

// When this function is ran in what order the four numbers will be logged out?
function logNumbers() {
  console.log(1);
  setTimeout(function(){console.log(2)}, 1000);
  setTimeout(function(){console.log(3)}, 0);
  console.log(4);
}

logNumbers();
// 1 4 3 2

// Determine what would be logged out to the console.
(() => {
  const x = y = 100;
})();

console.log('y: ', y);
console.log('x: ', x);
// y: 100
// x is not defined

Write function that checks if the number is prime

A prime number (or a prime) is a natural number greater than 1 that has no positive divisors other than 1 and itself

const isPrime = num => {
  for(let i = 2; i < num; i++)
    if(num % i === 0) return false;
  return num > 1;
}

isPrime(5) //true
isPrime(6) //false

FizzBuzz

Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and the multiples of five print “Buzz”. For numbers that are multiples of both three and five print “FizzBuzz”.

// Solution 1
for (let i = 1; i <= 100; i++) {
  const f = i % 3 == 0;
  const b = i % 5 == 0;
  console.log(f ? (b ? "FizzBuzz" : "Fizz") : b ? "Buzz" : i);
}

// Solution 2
for (let i = 1; i <= 100; i++) {
  let res = "";
  if (i % 3 === 0) {
    res += "Fizz";
  }
  if (i % 5 === 0) {
    res += "Buzz";
  }
  console.log(res || i);
}

Revers string

Write a function that reverts string

// Solution 1
function revert(string) {
  const _reverted = string.split("").reverse().join("");
  return _reverted;
}
console.log(revert("Lukasz")); //zsakuL

// Solution 2
function revertTwo(string) {
  let _reverted = "";
  for (let i = string.length - 1; i >= 0; i--) _reverted += string[i];
  return _reverted;
}

console.log(revertTwo("Interview")); //weivretnI

Interview questions: CSS, HTML & Accessibility

Lukasz Pietraszek — Mon, 26 Apr 2021 08:52:06 +0000

In this series of posts, I'll try to cover the most frequent questions I've been asked over past years or questions I ask when interviewing candidates. The level of question ranges from junior to mid-weight devs and is rather a framework agnostic.

In this part, we will go through some general questions, some CSS related and Accessibility questions. In the next post, we will focus solely on JavaScript questions.

Without further due let's start.

General Questions

A way to start an interview would be to ask about the candidate's past/current role. For example:

Tell me about your past/current role - what do you do?

At that point, the interviewer will take few notes and check if the candidate mentions keywords that you can ask more about later, ex: pre-processor, Webpack etc. Also, they will validate if what the candidate is saying is in fact listed in the CV.

So make sure that you are upfront and honest with the person who interviews you. It may sound silly but before each interview read your own CV and make sure you know answers to all keywords and aspects mentioned there.

Next, you might be asked:

What is the typical workflow from the point you get a task to its completion?

What tools and techniques do you use?

Here you can refer to your day-to-day job. The more you have to say here the better. Use this time to talk about your own findings, experiences, and suggestions on how to improve them. You might want to use this time to talk a little bit about the side projects you are working on, the ideas for new apps, etc. It will show you are passionate about technology and in case you don't have much commercial experience in setup used in the role you are open-minded and always willing to learn new things. Use this time wisely to your advantage.

Then interviewer might follow up with:

I can see you wrote you have been working with VueJS, can you elaborate a bit on it?

and

Have you used any other libraries or just this one?

Of course, it all depends on your level of confidence and experience. But again if you are a junior don't try to hide it from interviewers. If you are a senior don't brag. Talk with passion about each subject but try to be modest. Show you know technical aspects but don't dive into too many details. This is just a warm-up before more detailed questions and you can rest assured your time to shine will come at a later stage of the interview :)

How do you stay up to date with the latest technology changes?

You are going to mention websites, books, Twitter, podcasts, etc

What tools do you use for cross-browser testing?

Your answer should include some of the following options: BrowserStack, CrossBrowserTesting, Virtual Machines (eg: Virtual Box), different devices: phones, computers, laptops

HTML/CSS questions

How we can optimize site loading time?

Your answers will be around

minify code: JS, CSS HTML
load JS in the footer
image optimization - etc do not load bigger images than needed - asynchronous loading

How do you prevent errors in JS and CSS?

Answer: JSLint / JSHint, CSSLint, Prettier, pre-commit hooks, etc

What units do you use px, em, or rem?

You need to know the difference between those three and pros and cons of using one or another. But basically what you need to know is

Pixel (px) is a commonly used CSS unit on websites. px is not scalable, it is an absolute unit. Change in the value of another element does not affect the value of absolute units. The value assigned is fixed irrespective of the user setting.

Element (em) and Root element (rem) are responsive units interpreted into equivalent px unit by the browser. They are relative units. Change in the value of the parent or root element affects the value of relative units.

Name some of the commonly used pre-processor and what are the advantages/disadvantages of using CSS pre-processors?

Suggested answers will around the following points

Less, Sass, Stylus, PostCSS
In Less @ symbol is used to declare variables, however, @symbol has already meaning in CSS for example @media or @keyframes
To compile Sass you need either Ruby or libSass
the biggest challenge in using pre-processors on projects is the initial time spend to set them up

What is the 'Box Model' in CSS?

In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?

Every browser has its own default 'user agent' stylesheet, that it uses to make unstyled websites appear more legible. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that reset the styling of all HTML elements to a consistent baseline.
Normalize you might call a CSS reset alternative. Instead of wiping out all styles, it delivers a set of reasonable defaults. It doesn't unset things that are already consistent across browsers and reasonable (e.g. bold headers). In that way, organize it does some less than a reset. It also does some more than a reset in that it handles quirks you may never consider, like HTML5 audio element inconsistencies or line-height inconsistencies when you use sub and sup elements.

How do you organise your CSS - Namespace patterns?

Mentioning BEM, Smacss, OOCSS, Atomic will do the trick. Make sure that you know not only what each abbreviation means but also syntax and give a real live example of a component/module that could benefit from following those patterns.

Accessibility

How can we improve form accessibility?

surround a group of radio buttons in <fieldset> and add <legend>,
select tag to have a label, in case many options we could group them using
input field should have <label>

List some of the Aria roles and explain when would you use them

aria-labeledby - Example multiple inputs describe by the same label. For instance, in the table it can have multiple labels - aria-describedby - used to add more info to inputs eg. used in tooltips
aria-label - contains text directly and will overwrite use when text label is not available

How else would you improve site accessibility?

by using correct HTML syntax
correctly use headings h1, h2 .. h6
use appropriate contrast to make the text on site visible

Useful resources

5 Essential CSS Interview Questions by TopTal
Interview Questions and Exercises About CSS by CSS-tricks - old but valid in most cases38
CSS Interview Questions and Answers by Indeed
Accessibility by MDN
OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? by Clubmate

Summary

This is definitely not the full list of questions around HTML/CSS/Accessibility or performance but at least it should give you an idea of what to expect and how to prepare for the interview.
Some questions might sound outdated but in my opinion those are absolute basics that every UI, frontend developer should know the answers too.

In the next post, I'll cover framework free JavaScript-related questions.

Take care.

Rise of headless CMS & modern storefronts

Lukasz Pietraszek — Fri, 23 Apr 2021 08:04:17 +0000

I've been using headless CMS for over 4 years now in particular at my company we used Amplience. Initially, we used it to create a t-shirt customization component for one of the Premier League football clubs and host product images. For another client of ours, we've built a component that was a bed configurator to visually present how the end product - with all the options such as size, material, finish etc selected - will look like. In both cases, the entire frontend was done using Handlebars, JS and CSS that was integrated within our main app (Hybris) and used data that was provided there to fetched assets (SVG and PNG) from Amplience and displayed them on the storefront.

Within time our implementation evolved and become more complex. We still used SAP Hybris CMS to provide products related data (e.g. prices) but now more and more UI components such as carousels, accordions, video components and other reusable components were coming directly from Amplience either as HTML or JSON. For clients UI offered by Amplience was more intuitive and easier to get their heads around than what offered by Hybris.

This is when I realised that this is a direction frontend that will evolve towards to. Within our frontend team, we have decided that all our components should be reusable across different projects but also should remain CMS agnostic.

When I heard that SAP is working on Spartacus - a storefront framework based on Angular - I was super excited and couldn't wait to try it out.
In fact, I had the privilege to work on one of the first Spartacus integration for the high street beauty brand. I must admit it was challenging. The new storefront (Spartacus) which is based on a framework (Angular) had a steep learning curve, poor documentation and lack of a wider community around it. All of this didn't make things any easier.

Now looking at how VueStorefront (VS for short) which is another storefront to integrate with CMS approaches a market let me be optimistic about the future of frontend integrations. The VueStorefront was initially developed by the same company responsible for Spartacus and only recently become an independent company. Lesson learned from working on Spartacus and bringing it into the market must have an impact on how guys decided to introduce VueStorefront to the world.

Guys behind VS built a community around it, involved other System Integrators, joined Mach Alliance and what is most important they opened for other CMS as opposed to focusing purely on single CMS as done by Spartacus team.

Getting started with VueStroeftont is quite easy. You can spin up your local environment and use Storyblok which is free alternatively you can use CommerceTools which has 60 days free trial.

Reading above you might think I'm somehow related to the companies I just mentioned above. But I'm not. I'm just a passionate frontend developer who aims to provide the best values to clients but most importantly to end users - meaning all of us who use the eCommerce platforms on daily basis.

Useful resources

P.S.
All we need now is a Storefront based on NextJS :)