Image for post
Image for post
Photo by Mark Tuzman on Unsplash

CSS is an easy and declarative tool to implement styling and quick. For the most part, you can make an app look great without touching a single line of code. Awesome! But it does raise a few limitations with animations, however. Without having the ability to obtain a reference to the target element itself, and/or the data that is bound to it, animations cannot be pixel perfect. Indeed, some developers are aware of that, and consequently, have come up with various libraries and frameworks, of which D3 is included.

D3 allows you to bind arbitrary data to a Document Object…


Image for post
Image for post

It’s no secret that remote work has been getting a lot more popular since the beginning of COVID era, and even though vaccines are already here, many companies and teams have fully embraced the idea of working online and are not planning to let go. As a result, the demand for online collaboration tools has been increasing; especially video conferencing solutions. For reference, Zoom stock price has jumped from 66.64USD in January 2020 to 559.00USD in October 2020, an increase of ~838% in 10 months:


Image for post
Image for post
Thanks to Adrià Tormo for sharing their work on Unsplash.

JavaScript strings are held by value, and behave exactly like any other primitive. This means that each time we slice a string, we actually occupy extra memory slots. Although this trade off makes coding more comfortable and a whole lot easier, it’s very inefficient in memory:

edit: After investigating around I have found out that some browsers use string interning which means that the browser will hold a pool of string literals with references to its sub strings, so memory management might result in something different, however; this is not officially a part of TC39 specification and might vary…


Image for post
Image for post
Photo by Sebastian Herrmann

The #1 mistake people make and how to correct it

Handling async tasks is a necessity. In my opinion, React docs aren’t exactly elaborating about it as it should, at least in the context of effects. Let’s take the following code snippet as an example:

We’re fetching some records from an API and updating the component’s state, expecting them to eventually appear in the view, this way or another. We’re waiting for the promise to resolve, and in the meantime, there’re other tasks running in the background. Even though we wait for the promise, React doesn’t pause its execution.


Image for post
Image for post
Photo by Alex Kondratiev on Unsplash

Tested with React-Native and Firebase Test Lab

Every invention starts with a need. I’ve been working on a personal app for quiet a while now, and as part of the process I hand it out to few people so they can test it (most of them were overseas). One of the major complaints that I got was that the map component didn’t load. On most devices it did, but in many others it didn’t.

This issue had to be addressed, obviously, if I wanted to take my app seriously. Virtual devices using Android emulator didn’t seem to reproduce the issue, so I had to get a hold…


Image for post
Image for post

There will be times when we would like to pass props and control the behavior of child elements. Let me explain. Let’s take the following modal for example:


Image for post
Image for post

Custom selectors, custom rules and custom events. You determine its behavior

For some things CSS is simply not enough, we need JavaScript. I’m sure that we all experienced it not once, nor twice, the feeling of wanting to have a specific behavior or style that aren’t supported by CSS. An arbitrary example: selecting an element based on regular expression, playing a transition dynamically to the element’s changes in dimension, or sticky positioning (which is arguably working in some browsers based on my personal experience). However, this is not why I wrote the CSS engine.

I wrote the engine to repeat the same thinking process that the original developers went through, and…


Image for post
Image for post

How they’re implemented and their similarities with Angular services

React provides a fantastic API for building components. It’s light-weight and intuitive, and became a sensation in the dev community for a reason. With the introduction of the most recent API features: hooks and context/provider, components have became not only more functional, but also more testable. Let me explain.

So far, when we wanted a component to use an external service, we would simply implement it in a separate module, import it, and use its exported methods, like so:

Keep in mind that this is NOT how I would actually write my code in production, there’s no error…


Image for post
Image for post
babel-plugin-scoped-styled-components

TL;DR: Use private class names instead of a dedicated component. **experimental**

Styled-Components has brought something new to the table when in was first introduced and is one of the most popular CSS-related libraries out there with over 20k stars on GitHub. Style encapsulation has always been an issue in the web world, and people tried to solve it in many ways, of which Shadow DOM and Angular’s emulated view encapsulation.

I like the approach of Styled-Components, mostly because it’s compatible with React which seems to be the leading UI library in the echo system as for now, but also because of how nicely it sits in the virtual DOM tree.

For…


Image for post
Image for post

An open-source full-stack example app made with React 16.7 (Hooks & Suspense), TypeScript, GraphQL-Subscriptions/Codegen/Modules and PostgreSQL

You might have seen it around already — an open-source WhatsApp Clone tutorial; a project which was originally started in 2015 by Urigo based on Angular-Meteor and Ionic, and have been throughout different incarnations ever since.

This time around, I’m happy to announce that a new version of the WhatsApp Clone is coming, and it’s based on React 16.7 (Hooks & Suspense), Styled-Components, Material-UI, TypeScript, Apollo, GraphQL-Subscriptions/Codegen/Modules, PostgreSQL and TypeORM.

Click me to go to the tutorial page

A more in depth step-by-step tutorial is expected in the near future

Eytan Manor

Eytan is a JavaScript artist who comes from the land of the Promise(). His hobbies are eating, sleeping; and open-source… He loves open-source.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store