DEV Community: Ido Shamun

🔥 What's Hot in Web Development? — Weekly Picks #162

Ido Shamun — Wed, 13 Jan 2021 13:26:16 +0000

Every week we gather the best articles on daily.dev.
This week is highly focused on React but not only. You can find in this list awesome cheatsheets. Are you looking for a new job? We got you covered with a post about the current hiring trends. And much more. Shout out to all the authors. 👏

So, let's get it started.

How to Learn React in 2021: The 7 Skills You Need To Know

⚛️ An opinionated list of steps towards learning react. It focuses mainly on learning the fundamentals of both the browser and react.

How to Learn React in 2021: The 7 Skills You Need To Know

FlexBox Cheat Sheets in 2021 || CSS 2021

🧘‍♀️ A CSS flexbox guide with all the different properties explained with beautiful cartoons.

FlexBox Cheat Sheets in 2021 || CSS 2021

My Guide to the 8 Best Dev Tools in 2021

👨‍💻 A list of dev-tools grouped by categories that include frontend, business logic, data, and source control.

My Guide to the 8 Best Dev Tools in 2021

Smart Developers Don't Code

🐫 A well-written introduction to Apache Camel and CamelK. They will help you build quickly enterprise integrations on top of Kubernetes and JVM.

Smart Developers Don't Code

Coolest 25+ Web Design Trends In 2021, that'll rock the world

🔥 If you are into web design, check out this comprehensive list of design trends. You might find it useful.

Coolest 25+ Web Design Trends In 2021, that'll rock the world

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

The React Cheatsheet for 2021 (+ Real-World Examples)

📝 A handbook for react beginners with all the relevant information divided into categories.

The React Cheatsheet for 2021 (+ Real-World Examples)

5 JavaScript Tools to Look Out For in 2021

👀 Although it sounds clickbaity, I found this list very useful. It includes Rollup.js, Snowpack, Rome, esbuild, Waypoint, and some bonus tools.

5 JavaScript Tools to Look Out For in 2021

Intro to React Server Side Rendering

🤖 Usually, when we want to develop a react SSR application we will use Next.js. But have you wondered how to build an SSR application from scratch? Check out this excellent article.

Intro to React Server Side Rendering

The most valuable software developer skills to get hired now

👨‍💼 A review of the current trends in hiring. It covers the request and demand for different skills and programming languages.

The most valuable software developer skills to get hired now

5 reasons to start using TailwindCSS

🎨 If you're searching for a new CSS framework, read this article. It will surely motivate you to try out TailwindCSS.

5 reasons to start using TailwindCSS

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.

🔥 What's Hot in Web Development? — Weekly Picks #161

Ido Shamun — Wed, 06 Jan 2021 13:25:46 +0000

🌟 This week we have many excellent walkthroughs. Short articles that aim to give you enough knowledge to solve a specific task. But that's not all, check out this awesome list.
As always, all posts were ranked by daily.dev community. Shout out to all the authors. 👏

So, let's get it started.

Design v18

😱 CSS-Tricks features a new design! Chris shares the story of the redesign including all the nitty-gritty.

Design v18

How to Design a Web Application - A Guideline on Software Architecture

👷‍♂️ A comprehensive review of software architecture patterns and when to use them.

How to Design a Web Application - A Guideline on Software Architecture

How I built my own productivity app

🚀 The author explains what it takes to build your own product at a high level. It's a short article.

How I built my own productivity app

A list of actually useful Nocode tools and I am not talking about site builders

🙅‍♀️ No-code or low-code platforms can be very useful even for developers. Usually, you will have to sacrifice flexibility for agility. Here's a curated list of brilliant tools.

A list of actually useful Nocode tools and I am not talking about site builders

Creating Browser Notification in JavaScript

💬 Here's a quick walkthrough for implementing browser notifications. It covers not only displaying the notifications but other aspects such as asking for permissions.

Creating Browser Notification in JavaScript

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Make Your Own Tools

⚙️ It's Chris's second article this week! Chris motivates us to spend some time on building internal tooling. He also gives some examples.

Make Your Own Tools

Rules of Micro-Frontends

👮‍♂️ An opinionated list of guidelines to build micro-frontends. The list covers aspects such as deployment, testing, code management, and more.

Rules of Micro-Frontends

How to Make a Side Navigation Bar in ReactJS

🧭 A tutorial for creating a sidebar using React from scratch! This includes even the create-react-app step.

How to Make a Side Navigation Bar in ReactJS

A Practical Introduction To Dependency Injection

💉 The first part of a series that provides a practical introduction to Dependency Injection.

A Practical Introduction To Dependency Injection

How to Verify Users in Express.js

🤖 Email verification is a necessary step in almost every login system. This article walks you through implementing an email verification system using Node.js and MongoDB.

How to Verify Users in Express.js

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.

Web Vitals Optimizations: Advanced Dynamic Import Patterns

Ido Shamun — Tue, 05 Jan 2021 15:36:00 +0000

Web performance is a crucial part of the user experience of our web application. It has a direct impact on the conversion rate. Walmart found that for every 1-second improvement in page load time, conversions increased by 2% (see source). And if that's not enough, search engines favor fast websites. They rank them higher than slow websites. So improving your web application's performance can increase both the conversion rate and the organic customer acquisition rate.

Web Vitals

Web Vitals (coined by the Chrome team) are a set of metrics to measure the performance of a website. Optimizing for these metrics ensures your visitors will enjoy a much better experience.
Core Web Vitals are a subset of the aforementioned Web Vitals that is relevant to any web page. The subset focuses on three performance aspects, loading, interactivity, and visual stability. In this article, we will focus on improving two of them, loading and interactivity. They're represented by these two metrics, Largest Contentful Paint (LCP) and First Input Delay (FID). There are many strategies to improve these metrics, but we'll focus on reducing the bundle size.

Bundle size

The page bundle size significantly affects both LCP and FID. Both server-side-rendered applications and single-page-applications can end-up with bloated JavaScript bundles. The bigger the bundle, the more time it takes to download the bundle, parse the code into actionable machine commands, and eventually evaluate it. As long as the main thread is focused on any of these, it cannot do anything else, which increases LCP and FID. Addy Osmani wrote an extensive article about the cost of JavaScript if you fancy going deeper.
Even if we apply best practices such as tree shaking and code splitting in our project, the bundle can become huge. So what should we do? Dynamic import and loading prioritization!

Dynamic import

Not many know, but there are two forms of import we can use, static and dynamic. A static import is a well-known form and is our default choice. It looks like import defaultExport from "module-name"; and it tells the bundler (e.g., Webpack) that this module is mandatory to run our code. The bundler will bundle the module code with our code into a single JavaScript file. The more modules we statically import, the bigger the bundle will be. But obviously, not all imports are the same. Some are required to run our code immediately, and some can be lazy-loaded until a certain event occurs. So why do we have to load all this JavaScript at once? We don't. We can use dynamic import. Dynamic import looks like a regular function call and returns a promise that resolves to the imported module, import("module-name").then((module) => ...);. Using dynamic import, we tell the bundler to create a separate bundle for this module and load it in runtime. This makes sure the imported module will not be bundled in our main bundle, keeping the main bundle small and efficient. React lazy and Next.js dynamic utilize dynamic import to lazy-load React components easily. They are both a function that receives a function as an argument and returns a React component. The function argument must return a promise that resolves into a React component by itself. Here's an example: const DynamicComponent = dynamic(() => import('./component')). Of course, both React lazy and Next.js dynamic provide you a way to handle errors and show a fallback element while the component is loading (out of scope). So now we have two levels of import. The first is a static import, which bundles the module into our bundle. The second is a dynamic import, which imports the module as soon as requested as a separate bundle. This should boost our performance, but we can take it even further and load some JavaScript bundles only after the page is completely loaded.

Import after page load

In this section, we will see how we can use React lazy and Next.js dynamic to create a new function that imports a component only after the page is loaded. For simplicity's sake, I'll show how to implement it with Next.js, but the same concept can be easily applied to React lazy or even other frameworks such as Vue.

Let's first create a function that returns a promise that resolves once the page is loaded. A page loading process consists of three phases, loading, interactive, and completed. The function receives an argument that states at what phase we should load the resource. We use the readystatechange event to listen to changes in the loading process.

export default function onPageLoad(
  readyState: DocumentReadyState = 'interactive',
): Promise<void> {
  return new Promise((resolve) => {
    if (
      document.readyState === readyState ||
      document.readyState === 'complete'
    ) {
      return resolve();
    }

    const callback = (event: ProgressEvent<Document>) => {
      if (
        event.target.readyState === readyState ||
        document.readyState === 'complete'
      ) {
        document.removeEventListener('readystatechange', callback);
        return resolve();
      }
    };
    document.addEventListener('readystatechange', callback);
  });
}

Our onPageLoad function first returns a promise as planned. In the promise, we check for the current ready state of the document. It's an important edge case that we have to deal with; otherwise, the promise might never resolve. If the page is already loaded, we resolve the promise. Second, we create a callback function for the event listener and subscribe to the readystatechange event. In the callback, we check the new ready state of the document. If it equals the requested state or if the document is completely loaded, we can resolve the promise and unsubscribe.

This was the heavy lifting, and now the only thing that remained to do is to create our new dynamic function that will load the component on page load.

import dynamic from 'next/dynamic';
import onPageLoad from './onPageLoad';

export default function dynamicPageLoad<P>(
  loader: () => LoaderComponent<P>,
  readyState: DocumentReadyState = 'interactive',
): React.ComponentType<P> {
  return dynamic<P>(() => onPageLoad(readyState).then(loader), { ssr: false });
}

Like Next.js dynamic function, we receive a loader function that returns a promise with a React component and an optional ready state to prioritize the loading. In the function, we use the good-old dynamic function, but before providing the loader function, we chain it to the onPageLoad function that we created earlier. This makes sure the import statement will not be called before the page is loaded. The second parameter to the dynamic function disabled evaluating this expression in the server. This is required because we use the document object, which is available only to the client.

We can use our function to make sure our components will be imported after the page load as follows:
const DynamicComponent = dynamicPageLoad(() => import('./component')).

Now, a lot of JavaScript code can be downloaded, parsed, and evaluated only after our page is loaded. It makes sure the main thread will have more time for critical resources, thus improving our LCP and FID metrics.

Conclusion

Good web performance can improve our conversion rate and SEO. One of the ways to improve performance is to reduce the initial bundle size. By utilizing dynamic import, we can lazy-load JavaScript modules, which shrinks the initial bundle size. We also learned how to prioritize dynamic imports by loading some of the modules only after the page is loaded using our custom dynamic function.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

🔥 What's Hot in Web Development? — Weekly Picks #160

Ido Shamun — Wed, 30 Dec 2020 13:00:00 +0000

Every week we publish the top 10 popular posts on daily.dev.

Shout out to all the authors 👏

Thanos.js Tutorial – Restore Balance to your Project

🧤 Would you like to randomly delete half of your files? If so, give Thanos.js a go.

Thanos.js Tutorial – Restore Balance to your Project

We rendered a million web pages to find out what makes the web slow

🤯 The author rendered 1M pages and tracked every possible metric and information such as errors, protocols, libraries, and performance metrics. He crunched the numbers and share the insights in this article. By the way, it's also available on Kaggle.

We rendered a million web pages to find out what makes the web slow

React Server Components

🔥 The React team has recently previewed a new concept called React Server Components. Everyone seems super excited about it. Read Addy Osmani's introduction.

React Server Components

Public APIs - Find a public API for your next project

🕵️‍♀️ The title already says it all. If you look for an API this is the place.

Public APIs - Find a public API for your next project

2 months of Learning React.js and The project I worked on

👨‍🎓 The author shares his takeaways from learning React. He did some online courses and went over freeCodeCamp. Check out what he has to say.

2 months of Learning React.js and The project I worked on

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

My Advice to New Programmers After Coding for the Last 3 Years

🐣 This is a guest post on our blog that got a lot of attention from the community. Fahad shares some insights for codenewbies.

My Advice to New Programmers After Coding for the Last 3 Years

HTML tags every frontend developer should know

🤓 Semantic HTML is important for the accessibility and readability of your code. Knowing as many HTML elements as possible, otherwise, we will fall back to our default choice div.

HTML tags every frontend developer should know

Continuous Performance Analysis with Lighthouse CI and GitHub Actions

🚀 An excellent walkthrough to set up a performance analysis for every commit. This makes it so much easier to find performance bottlenecks.

Continuous Performance Analysis with Lighthouse CI and GitHub Actions

React Best Practices with Kent Dodds (Repeat)

🥇 Kent shares his React best practices in a podcast. There's also a transcript for those of you, like me, who don't like podcasts.

React Best Practices with Kent Dodds (Repeat)

Build a Chat Room With Node.js and Socket.io

💬 Learn about WebSocket and how to build a real-time application that includes a server and a client.

Build a Chat Room With Node.js and Socket.io

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.

🔥 What's Hot in Web Development? — Weekly Picks #159

Ido Shamun — Wed, 23 Dec 2020 13:06:55 +0000

Every week we publish the top 10 popular posts on daily.dev.

Shout out to all the authors 👏

Develop a Food Delivery Application: (It’s Features, Cost, and Functionality)

🍔 This is not a technical article but rather explains what it takes to develop a food delivery application and also shows a comprehensive market analysis.

Develop a Food Delivery Application: (It’s Features, Cost, and Functionality)

100 Days of Code – A Complete Guide For Beginners and Experienced

🐣 When they say "complete" they really mean it. This article presents two roadmaps. One for beginners and the other for experienced. It's very focused and includes all the references you need to get it going.

100 Days of Code – A Complete Guide For Beginners and Experienced

Typescript Mistakes To Avoid

🚫 This is a fine list of TypeScript patterns to avoid. Even if you're an experienced developer, I recommend checking out this article.

Typescript Mistakes To Avoid

How to Use the Locomotive Scroll for all Kinds of Scrolling Effects

🤪 Unique scrolling effects can create unforgettable user experiences. This article will get you started with Locomotive Scroll and teach you how to create these unique experiences.

How to Use the Locomotive Scroll for all Kinds of Scrolling Effects

How I Easily Code For 8+ Hours Without Feeling Tired (My Productivity System)

🥱 Coding for a long time can be tiresome. Nick developed a method to stay sharp during the long days.

How I Easily Code For 8+ Hours Without Feeling Tired (My Productivity System)

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Cyberpunk 2077 Inspired Menu in CSS only! Video Tutorial!

👨‍🎤 Cyberpunk 2077 is so hyped right now. This hype made its way to web development with this awesome menu implementation.

Cyberpunk 2077 Inspired Menu in CSS only! Video Tutorial!

Centering in CSS

🖼 There are so many ways to center elements using CSS. This article compares them according to five criteria. It's like a stress test for centering techniques.

Centering in CSS

Python in Visual Studio Code – December 2020 Release

🐍 A new release to VS Code Python support! They closed 13 issues and explain them in detail in this post.

Python in Visual Studio Code – December 2020 Release

5 Common Mistakes Developers Do that Affect Page Load Time

🚀 Delivering your application fast improves the user experience and conversion rate. These 5 tips will give you a kickstart to what you should optimize.

5 Common Mistakes Developers Do that Affect Page Load Time

5 Big Lies Junior Programmers Are Told

💬 The tech industry is full of myths. This article busts five of them.

5 Big Lies Junior Programmers Are Told

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.

Server-Side-Rendering Renaissance

Ido Shamun — Thu, 17 Dec 2020 13:53:34 +0000

In the early days of the internet, web development was very straightforward. There was no JavaScript, which means no React or Vue, no endless debates. The only tool at our disposal for creating websites was HTML.
To create dynamic websites, we had to generate the HTML dynamically in the server. This technique is called server-side-rendering (SSR). For example, upon a user request for a page, the server had to query the database and generate an HTML file and serve it to the client based on the results. Whenever the user navigates to a new page, the page is fully reloaded with the new HTML file. SSR as mentioned was the only way to build websites at the time.
As the internet evolved, the need to create more complex websites increased. This led to introducing CSS and JavaScript. Together they were used to create dynamic websites that can react to user interactions.
A singular point that changed web development forever is the invention of AJAX by Microsoft. AJAX provided a way to modify the DOM on the client-side and dispatch asynchronous HTTP requests back to the server. This opened the door to improve the performance of websites drastically. We no longer need to do a full reload to the page. We can dispatch a request and, based on the response, modify on the client-side the page. Today, AJAX requests are very popular, but at the time, this was innovative and revolutionary.

The Birth of Single Page Applications

In the search for improving the performance of the web, developers started to wonder if SSR can be replaced with a new technique that will be more performant. SSR's problem is that it delays the rendering of the whole page until all the required data is resolved. This means that the first paint might take a lot of time. Thanks to AJAX, we no longer need to load the page as a whole. We can load parts of it. With the essence of this concept and the frameworks at the time, such as Backbone, Ember, and Angular 1, the Single Page Application (SPA) was born.
SPA takes care of everything on the client-side, this includes even routing. We can store all our assets in a CDN and deliver them to our users, with no need to dynamically generate a single HTML file. No matter what page the user requests, they will always get the same index.html file as a response.
To provide data dynamically for the SPA, Web API was introduced. Web API consists of HTTP endpoints that only delivers data, usually in JSON format. Some modern implementation of Web API might follow the REST API convention or GraphQL. The SPA can send a request to any of these endpoints to receive the data it needs and modify the DOM accordingly.

Server-Side-Rendering 2.0

Although single-page-applications seemed very promising, they sacrificed an important aspect of the web, which is SEO. Suddenly, search engines could not index the different pages of a SPA correctly. At the time, the search engine bots heavily relied on the meta tags in the HTML's head. And now, with SPA, the meta tags can only be set in the client because there's no server. Unfortunately, the bots didn't execute JavaScript, so the meta tags cannot be updated. Thus it caused the bots to misbehave on these sites. By now, the bots have evolved and some of them do execute JavaScript but it still not bullet-proof. It's worth noting that SEO is essential for the growth of many products, such as Stackoverflow and GitHub.
This calls for a new solution that will combine the pros of both worlds of SSR and SPA. The hybrid model, or as I love to call it, SSR 2.0, delivers different HTML for every page but does not necessarily render everything on the server-side. You render only the bare minimum required for SEO and then let the client-side do the rest incrementally.
Next.js is one of the frameworks that push server-side-rendering to the front line and keep innovating in this domain. Next.js made it more user-friendly to build a server-side-rendering application that follows the best practices of performance and includes a modern framework (React) inside.
One of their latest inventions is called Incremental Static Generation (ISG). With ISG, you can render the page on the server and then cache it in the CDN so the following visitors will get it almost instantly. Of course, you could have done it before, but Next.js made it all so simple. Cache invalidation is one of the hardest problems to solve for a developer, and they do it for you. You can also set a cache policy. For example, refresh the page every 1 minute.
When I migrated daily.dev from SSR to ISG, it dramatically increased the Lighthouse score. And it was super easy to do.
ISG is an important step to make SSR applications much more performant and I believe it will be embraced by more SSR frameworks.

What's Next?

The growing popularity of web development will not stop any time soon, which means new frameworks and techniques will emerge. If I read the map correctly, we're about to do a full cycle. We started with SSR, one application for both back-end and front-end. Followed by SPA, one application for the front-end, and another one for the Web API. And the next trend is going to be Zero-API, with no need for a dedicated application for Web API. This is what Ruby on Rails and Elixir Phoenix are all about. For some reason, this idea didn't penetrate the JavaScript community. But now it seems that it does, have a look at RedwoodJS and Blitz.js that would like to achieve exactly this.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

🔥 What's Hot in Web Development? — Weekly Picks #158

Ido Shamun — Wed, 16 Dec 2020 11:55:34 +0000

Every week we publish the top 10 popular posts on daily.dev.

This week's articles will help you move your development environment to the cloud, become a web developer, and learn cool new libraries.

Shout out to all the authors 👏

10 Clean Coding Practices

🏅 Clean Coding is all about readability. Help others or even your future-self to maintain this code you just wrote. Here 10 guidelines for you to follow.

10 Clean Coding Practices

5 Things I Didn’t Know About JavaScript Operators

📝 Mainly basic facts about operators but there are also some cool easter-eggs that you probably didn't know about some operators.

5 Things I Didn’t Know About JavaScript Operators

Create a crazy input interaction with lax.js. 🤪

🤯 A walk-through with code-snippets to lax.js. A super cool library if you ask me.

Create a crazy input interaction with lax.js. 🤪

Smaller, Faster, and Cheaper Coding Laptops via AWS

☁️ A cost-efficient method to migrate your development environment to the cloud.

Smaller, Faster, and Cheaper Coding Laptops via AWS

Don’t Choose Your Main Programming Language Before Reading This

🤔 Overcoming the clickbait title, this article extracts some information from the StackOverflow's survey. The data is laid out nicely, not sure if this will help you to choose your next language.

Don’t Choose Your Main Programming Language Before Reading This

Why is Go overtaking Node.js?

🆚 A slightly biased comparison of Go and Nodejs. It includes some aspects such as performance and development tools.

Why is Go overtaking Node.js?

How I Learned to Code and Built a Real Software Product in 6 Months

🧙‍♂️ The journey of a 30-years-old guy that never wrote a line of code for building his first product. This post includes useful resources, courses, and tools.

How I Learned to Code and Built a Real Software Product in 6 Months

How to Learn Web Development in 2021 - a Web Developer Roadmap

🛣 A comprehensive roadmap for becoming a web developer. It includes 3 parts tools, languages, and libraries. Every step has a reference for a course or tutorial to learn from.

How to Learn Web Development in 2021 - a Web Developer Roadmap

Announcing Squoosh v2

🗜 Squoosh is an image compression tool. The Chrome team just launched a new version with great new features and perks.

Announcing Squoosh v2

GitHub Dark Mode is too Dark

🌑 GitHub recently launched a dark mode but could it be too dark? Apparently, yes.

GitHub Dark Mode is too Dark

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

🔥 What's Hot in Web Development? — Weekly Picks #157

Ido Shamun — Wed, 09 Dec 2020 08:00:15 +0000

Every week we publish the top 10 popular posts on daily.dev.

This week we have articles about making money, optimizing our development environment, react tips and tricks, and many more.

Shout out to all the authors 👏

A Better Way to Structure React Projects

📦 The author proposes a new project structure that is based on a concept called Atomic Design. The new structure should be cleaner, scalable, and unified.

A Better Way to Structure React Projects

A terminal-based workflow for research, writing, and programming

🗒 Many devs never leave their terminal. They can accomplish any task using this tool solely. Jacob shares his tools and plugins to make your terminal experience so much better.

A terminal-based workflow for research, writing, and programming

8 ways to make money as a developer

💰 A YouTube video by Emma Bostian that covers ways to make money. Blogs, ebooks, YouTube, GitHub, courses, podcasts, conferences, and freelancing, she shares tips on all of them

8 ways to make money as a developer

UI Design Trend of 2021

👩‍🎤 This is actually a guide to Glassmorphism and how to design it using Figma

UI Design Trend of 2021

My Mac setup for work 👩‍💻

🖥 We always look for new tools to improve our computer setup. Maybe you can find here some.

My Mac setup for work 👩‍💻

Learn Dynamic Programming to Solve Coding Challenges

👨‍🎓 freeCodeCamp released a new course and it's all about dynamic programming. Understanding dynamic programming can help you solve problems faster.

Learn Dynamic Programming to Solve Coding Challenges

Dark Mode Is Not Enough! Here Is an Alternative…

🎨 Learn to build multiple themes support for your React app. Because why do we have to settle on light and dark modes only?

Dark Mode Is Not Enough! Here Is an Alternative…

Build Beautiful Documentation Websites with Docusaurus

📒 Docusaurus is an open-source tool by Facebook that generates documentation sites powered by React. Victoria guides you through your first steps.

Build Beautiful Documentation Websites with Docusaurus

12 Best Alternatives To Angular, React and Vue

🐣 Everyone heard about the well-known frameworks such as React. But this article puts the spotlight on the new or less popular frameworks. They might even be a better fit for your next project.

12 Best Alternatives To Angular, React and Vue

A Microsite Showcasing Coding Fonts

✏️ An open-source website that demonstrates different coding fonts. Built by Chris Coyer.

A Microsite Showcasing Coding Fonts

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Docker Compose: The Perfect Development Environment

Ido Shamun — Fri, 04 Dec 2020 13:55:48 +0000

Local environments are complex

Working on a full-scale project and keeping our local development environment up-to-date is definitely not a simple task! Today, microservices are all around, we write less code, but the environment gets more complex. Every service needs to connect to at least one database (if not more). It might also need other services to work properly. One might say that the staging environment is the solution to all our problems, but I beg to differ. Because every developer might need a different version of a given service to complete their work, or need to populate different values in the database.

How can we keep track of these dependencies? How can we collaborate with our teammates on the correct settings? or share our work to set up the environment so others won't have to?

Docker Compose to the rescue! 🦸‍♂️

What's Docker Compose anyway?

Before jumping to Compose, we have to understand the containers revolution. Container is a standardized artifact for software packaging. The same container can be used for development, testing, and production. It doesn't matter what language or framework you use, containers can package everything. It's a technology that has been around for a long-time but Docker made it super easy for developers to build and use them.

So Docker is a unified way to ship and run every service without having to install its runtime, OS dependencies, and libraries. And Compose is the glue that ties many containers together with a proper configuration, and infrastructure. It's a tool for defining and running multi-container Docker applications.

Compose comes down to a single YAML file that we can add to our repository so others or even our future-self will easily get a local environment up and running as simple as running docker-compose up -d.

Installing Docker Compose

Mac users, if you have Docker Desktop For Mac installed, it comes bundled with Compose.
Otherwise, install Docker Compose by following the official guide

Simple use-case

Let's get down to the nitty-gritty! As an example, we have a NodeJS service that needs a PostgreSQL instance to store data. That's it, only one dependency.

version: "3.1"

volumes:
  db_vol:

services:
  db:
    image: postgres:11.6-alpine
    environment:
      - POSTGRES_DB=app
      - POSTGRES_PASSWORD=12345
    volumes:
      - db_vol:/var/lib/postgresql/data
    ports:
      - "5432:5432"

This is how our Compose YAML file should look like. The convention is to save it in the root folder of our project under the name docker-compose.yml.

We first start by defining the schema version of this Docker Compose YAML schema. This way, Compose can keep backward compatibility with legacy schemas.

Going directly to the services node (we'll come back to volumes later), we first have to name our dependency. In our case, we'll name it db. It doesn't have any major impact, mostly for logging, networking, and reference purposes.

Now, we need to choose an image for our service. Luckily the Docker community is so awesome that you can find any image you need. We'll proceed with the official Postgres image.

Followed by setting environment variables for configuring our database. For a full list of variables, see the link above. In the example, we set the database name and default user password. Feel free to change it to whatever you would like, maybe a more secured password.

Next, we would like to store the data of our database permanently. If not defined explicitly, the data will be cleaned whenever we shut the container down. The PostgreSQL data is stored in /var/lib/postgresql/data in the container file-system. Using the volumes property, we can bind this directory to a persistent volume that we defined before, db_vol. Going back to the volumes node that we skipped, we define an empty object db_vol. This tells Docker Compose that whatever we bind to db_vol should be persisted between runs. In our case, it's Postgres data folder.

Lastly, we need to expose ports so our NodeJS application can connect to the database. By default, Docker Compose creates a dedicated network adapter for service communication. Only ports that we ask to expose will be available to other networks. Here, we request to bind port 5432 (Postgres default port) in the dedicated network to port 5432 in localhost.

Once the file is ready and Docker Compose is installed, we can run docker-compose up in the root folder of our project. This will provision a Docker container for every service listed in the YAML file and create a dedicated network. We can add an argument to run it in the background docker-compose up -d. If we're done, simply running docker-compose down will shut down all the services.

Now we have a PostgreSQL instance available for our local development with all the relevant configurations inside.

Advanced use-case

version: "3.1"

volumes:
  db_vol:

services:
  db:
    image: postgres:11.6-alpine
    environment:
      - POSTGRES_DB=app
      - POSTGRES_PASSWORD=12345
    volumes:
      - db_vol:/var/lib/postgresql/data
    ports:
      - "5432:5432"
  api:
    image: gcr.io/daily-ops/daily-api
    depends_on:
      - db
    ports:
      - "3000:3000"
    environment:
      - DATABASE_HOST=db
      - PORT=3000

In real-life we might need more than just a database. For example, when building the front-end of our project, we need both a database and an API server. In this example, we instantiate two services. A database like before, and our API server that depends on the database. Like we did for the database, we name our service and define the image, ports, and environment variables. Not only that, but we want to let Compose know that our API depends on the db service. Compose can then prioritize the start-up order of every service.

Remember the dedicated network that we talked about before? The cool thing is that every service can be referred with its name inside the network. See that we set the database host in the environment variables to be db, which is the exact name of our database service. We don't need to mess with IP or a complex discovery system. It's as simple as the service name.

That's it, now can run docker-compose up to make sure we have all the services for our front-end development. We don't have to know anything about how to set-up exactly Postgres or the API server. This can be a very complex process, and it's all encapsulated by Docker Compose.

And we're done! Now you can easily share your development environment with your teammates or open-source contributors with Docker Compose. 🤘

Useful links

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

🔥 What's Hot in Web Development? — Weekly Picks #156

Ido Shamun — Wed, 02 Dec 2020 15:02:43 +0000

Every week we publish the top 10 popular posts on daily.dev.

This week features a lot of code newbies resources, AI bots, JavaScript quirks, and more.

Shout out to all the authors 👏

This Person Does Not Exist

🕵️‍♂️ This Person Does Not Exist is a website that generates faces of people that do not exist using AI. Barry raises some of the social concerns and potential abuse of such technology.

This Person Does Not Exist

10 Awesome Github Repos Every Web Developer Should Know

😎 A list of GitHub repos for beginners to boost your web development knowledge. They're mostly theoretical and will help you to ace your next job interview.

10 Awesome Github Repos Every Web Developer Should Know

10 Coding principles that no one will teach you

🎩 I've seen many articles that list coding tips. But although this list targets data scientists, some of these principles are unique and can serve well any developer.

10 Coding principles that no one will teach you

Why Is {} > []?

🤯 JavaScript has its quirks, we all love to find them. Every now and then there's a discovery. Here's the latest one that explains why {} is greater than [].

Why Is {} > []?

I made 100 high-quality illustrations, totally free. Use it anywhere without attribution.

🎨 The title says it all. If you're looking for high-quality illustrations, check out this awesome resource.

I made 100 high-quality illustrations, totally free. Use it anywhere without attribution.

Web Developer Roadmap for 2021

🐣 If you're a code newbie or looking to get into web development, this is a great resource for you. It gives you references to topics you need to learn and in the exact order you have to learn it.

Web Developer Roadmap for 2021

Stop Using "data" as a Variable Name

✋ Unindicative names are all around, I often do it myself because it can so hard to name things. This article explains why it's so important to name correctly and gives you some tips.

Stop Using "data" as a Variable Name

Building a Scalable API in Node

🚀 An in-depth review including code snippets for building an API using NodeJS and TypeScript.

Building a Scalable API in Node

Reveal.js: HTML presentation framework

🎬 An incredible library for creating HTML-based presentations. Brilliant transitions combined with the flexibility of programming.

Reveal.js: HTML presentation framework

How i automated my WhatsApp chats

💬 Learn how to use the Python library, ChatterBot, to create a bot that impersonates you and reply to people on WhatsApp.

How i automated my WhatsApp chats

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

GraphQL Terminology - Cheatsheet

Ido Shamun — Thu, 26 Nov 2020 14:11:47 +0000

GraphQL is an API query language. Originally developed by Facebook, and now it's part of the Linux Foundation. It is used by giants like Facebook (duh... 😉), GitHub, and Pinterest. Its community is growing fast, and it's probably the most popular alternative to the good old REST.

Practically, GraphQL is only a specification, and it has many implementations for different languages, JavaScript, Go, Elixir, Ruby, Java, Python, and more.

In this article, I would like to explain the terms of GraphQL. Just like other specs, they had to come up with their own language and terms, so I'm here to the rescue.

I'm not going to cover all the terms but only the most popular ones. The ones you're probably going to see when you build your very own GraphQL server or client.

Type - GraphQL is a type-based query language. As such, Type is the basic building block to model our domain. Just like in any other typed language such as Java, C#, and TypeScript. Every type consists of one or more fields.
Field - A Field defines what data a given Type holds. Other languages might refer to it as property or getter. The only difference is that a field can also get arguments just like a function. This enables us to create complex logic for resolving the field.
Query - A prebuilt type for querying our data. Every field in the Query type can be perceived as a query on its own. Think of it as a GET request in REST API. A Query field only returns data but doesn't change it.
Mutation - A prebuilt type for manipulating our data. Every field in the Mutation type can be thought of as a POST/PUT/DELETE/PATCH request in REST API. A Mutation field can return data, but its primary purpose is to manipulate data.
Subscription - A prebuilt type for describing real-time events the client can subscribe to. Every field is an event that the client can ask to receive updates in real-time. Think of it as a chat room that you receive all the new messages once you joined it.
Fragment - A reusable unit for grouping together a set of fields often used in a Query, Mutation, or a Subscription. You can think of it as a View in a SQL database. If you find yourself querying for the same fields repeatedly in different queries, you can create a Fragment to encapsulate it. A Fragment can also get arguments.
Directive - Just like arguments, directives can be used to change a field's fulfillment. A directive can be attached to a field or fragment inclusion. The server has to implement the directive and what they will exactly do. The main concept is to create reusable logic to apply to the resolver of every field. For example, an authentication directive can drop a specific field if the request is not authenticated. The specs include two directives, which must be supported by any GraphQL server, include and skip.
Schema - A document that defines our API. This is the essence of a GraphQL server. It defines the types, queries, mutations, subscriptions, directives, and everything that is needed. A schema is just a definition with no implementation. The schema can be written either in code or in GraphQL SDL (schema definition language).
SDL (Schema Definition Language) - The language we use to define our GraphQL schema (see above).
Code-first - As mentioned above, you can either write your GraphQL schema programmatically or using the SDL. Code-first refers to the first, where the developer creates the schema in the programming language of its choice, for example, TypeScript. The GraphQL schema is then generated automatically by a script.
Schema-first - The exact opposite of code-first. In schema-first, the developer writes the schema in SDL and only then writes the types and resolvers in its choice language. They can also use existing tools to generate it automatically from the schema rather than doing it manually.
Resolver - A server function that fulfills a request of a certain field. Usually, the first resolver to be called is the query/mutation resolver, followed by the resolver of every field returned in the response.
AST (Abstract Syntax Tree) - Every GraphQL request can be translated into a big nested tree object. AST is the binary representation for the text-based query. As soon as the server receives the query, it's compiled to an AST that can be used by the resolvers. The resolvers use it to determine what types to return, arguments, directives, and basically everything. AST is a generic concept in programming but can be seen a lot in advanced topics of GraphQL.
Context - A value that is passed to all the resolvers of the same request. Usually, the Context will hold information such as the authenticated user, database connection, and other shared data.
Schema Federation (Apollo Federation) - Today, everyone wants micro-projects, micro-frontend, and microservice. Schema Federation is the process of merging many GraphQL schemas while separating concerns. Each schema can refer to another service schema's types without worrying about the implementation. The references will be resolved at runtime by the Gateway.
Gateway - a smart GraphQL proxy. The Gateway uses schema federation to expose a single schema composed of at least one federated schema. Upon a request, the Gateway knows how to route split it between the services to fulfill it completely.

That's it. We made it! Now you can probably understand any GraphQL discussion or get started with your first GraphQL service. You know the fundamental terminology to get it going.

daily.dev is the easiest way to stay updated on the latest programming news. It's a feed of articles that's ranked by a community of +60,000 developers. Get the best content from the top tech publications on any topic you want. All in one extension.

🔥 What's Hot in Web Development? — Weekly Picks #155

Ido Shamun — Wed, 25 Nov 2020 14:04:46 +0000

Every week we publish the top 10 popular posts on daily.dev.

This week features tailwind 2.0 release, Layr introduction, console.log pro tips, and some inspirational codepens.

Shout out to all the authors 👏

10 best JavaScript practices recommended by Top Developers

🥇 This is one of the most viewed articles in our feed and for a good reason. These are fundamental tips for JavaScript developers.

10 best JavaScript practices recommended by Top Developers

The Perfect Dark Mode

🌓 This article explains how to get rid of the common flickering issue when loading a website set to dark mode.

The Perfect Dark Mode

Top 7 Best Frontend Development Frameworks and When To Use Them

🧨 A review of 7 frontend frameworks, such as React, Vue, Svelte, and Angular. I'm not highly convinced by the "when to use" part of each but it will definitely show the bigger picture of pros and cons.

Top 7 Best Frontend Development Frameworks and When To Use Them

10 Inspiring Ideas for Your Next Front-End Project

💡 10 legendary codepens that will leave your mouth wide open...

10 Inspiring Ideas for Your Next Front-End Project

How We Build Our Design System

🖍 A detailed explanation by Bit's co-founder about how they built their design system and used their very own product.

How We Build Our Design System

My Top Dev Tools in 2020

🐧 Kisan shares his favorite development tools. Hint he loves Linux.

My Top Dev Tools in 2020

Use console.log() like a pro!

📝 Developers have a love-hate relation with consle.log. But if you do use it, at least know all its features.

Use console.log() like a pro!

Good Bye Web APIs

👋 An introduction to Layr, a new framework for building web applications. Instead of relying on Web API, it uses an RPC library, called Deepr.

Good Bye Web APIs

Improve your CSS with these 5 principles

🆙 Adrian covers the fundamental CSS tips that will help you avoid the CSS specificity mess.

Improve your CSS with these 5 principles

Tailwind V2 Released 🎉

🥳 Tailwind 2.0 is here! Check out this review with everything you need to know about the latest release.

Tailwind V2 Released 🎉

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.