![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
With only 5 days to go until the 5th month is done and dusted, it's hard to believe that more than half of that time has been spent in isolation for many of us. So let's kick this week off looking at 5 real world projects with George Field in "5 Real World React Projects To Help you learn — No ToDo Apps!" and follow on to the pros and cons of different conditional rendering implementations in React with Chidume Nnamdi in "5 Ways to Implement Conditional Rendering in React" on Bits and Pieces.
Three favourites this week are "8 ways to use the Spread operator in JavaScript" with Javascript Jeep, learning to code faster and more easily with Amy Andrews in "9 Great JavaScript Extensions for Visual Studio Code to Speed Up Your Development" and Arthur Frank's "JavaScript Design Patterns — The Decorator Pattern."
General
The Jamstack Goes Full-Stack: RedwoodJS Tutorial
In a rush? Skip to the step-by-step tutorial or live demo I can hear it already, screaming through my screen, coming from heated dev-focused threads all over the web: "Another JavaScript framework? Really?" But trust us, we wouldn't be talking about it if we didn't think it was anything innovative and potentially special.
Authored by: Snipcart
The State of Micro Frontends
One of the more controversial topics in frontend web dev is microfrontends. Are they worth it? Should you really split up your application? Do you really need to use this now? Is this just another thing for consultants to earn money? While there are many myths, we cannot deny that they are becoming more popular each day.
Authored by: Bit
How to use GraphQL in Gatsby
Gatsby is an open-source framework based on React that helps build websites and apps. It allows you to build your website and apps using React and then generates HTML, CSS, and JS when you build for production. One of the many advantages of using Gatsby is that it allows accessing data through a query language called GraphQL.
Authored by: Robin Wieruch
ES2020 Has Been Finalized. Here is What I'm Excited About
JavaScript has been evolving very rapidly in recent years. Especially after the release of ES6 in 2015, things have been great. A lot of new features were being proposed to be included in the ES2020 version. The good news is that these proposals have been finalized.
Authored by: Bit
How to gradually migrate a large React codebase to Typescript
It's been a few weeks since me and my team have been discussing about migrating a large React codebase that we are developing written entirely with JavaScript for TypeScript because of the numerous...
Authored by: Giovanni Antonaccio
Create stunning timelines with Timeline.js
Timelines are complicated but effective tools for showing large amounts of data. TimelineJS removes the painTimelineJS (timeline.verite.co) is an easy-to-use... | Web design web development news, website design and online marketing. Web design, development, javascript, angular, react, vue, php, SEO, SEM, web hosting, e-commerce, website development and search engine optimization, social media management.
Authored by: MA-NO WebDesign&Dev
JavaScript
JavaScript Code Styling Best Practices
JavaScript is a very forgiving language. It's easy to write code that runs but has mistakes in it. In this article, we'll look at the number of statements that we should have in a function, multiline comments, newlines between ternary expressions, and issues with naming and calling constructors.
Authored by: John Au-Yeung
JavaScript Design Patterns - The Decorator Pattern
Decorator Pattern is categorised as Structural. Which means its core concepts lays in assembling Objects into larger structures while keeping these structures flexible and efficient as well as not impacting original definition.
Authored by: Arthur Frank
JavaScript Promises - Everything You Need to Know
JavaScript Promises provide cleaner and more intuitive way to deal with asynchronous code. This tutorial will help you understand what Promises are and how to create them. You will also learn how to use them with handler functions. At the end, you will also learn how to handle multiple Promises.
Authored by: Alex Devero
8 ways to use the Spread operator in JavaScript
The spread operator(...) is introduced in ES6 . Spread operator expands an iterable objects into its individual element. An iterable object is anything that you can loop over with our for of loop .
Authored by: jagathish
How to Hide Secrets in Strings- Modern Text hiding in JavaScript
Sometimes the best hiding place is the one that's in plain sight. If you were a spy in a hostile country, merely sending a message back to the US would be incriminating. If that message was encrypted, it'd probably be a whole bunch more incriminating, and things would only get worse when you, the spy, refused to decrypt the message for the authorities...
Authored by: Bit
Cheat Sheet For Cloning Arrays In JavaScript
There are 10 ways of doing something in JavaScript. And, most of the time, part of them is wrong. Like copying arrays using the = sign. Why is that? Because arrays in JavaScript are reference types...
Authored by: Piero Borrelli
9 Great JavaScript Extensions for Visual Studio Code to Speed Up Your Development
I have used many code editors. But when it comes to extensions, I have to say VSCode is a great editor with many amazing extensions. My life is a mess, so I don't want my code to be that messy. That...
Authored by: Zone of Freedom
How to Master the Proxy API in JavaScript
First, let's take a look at how we can intercept property lookup and provide custom behavior when we try to read a property. Imagine that you want to build your logic around returning an empty object, whenever one of your properties is not defined.
Authored by: Ferenc Almasi
Angular
Sharing Data Between Angular Components
Data sharing between components is an essential knowledge that everyone should have before starting their first Angular application. In this article, I'm going to discuss 3common methods that we can use to share data between Angular components.
Authored by: Frontend Weekly
Angular: Build reactive forms using Formbuilder
We are creating a reactive child component product features. We are using two-way data binding between the parent and child components. productField is two-way binding. Now add reactive form module in-app module file. Reactive form modules will enable to design reactive form the component. Complete app.module.ts will look like the below code.
Authored by: Codingindepth
How to choose between constructor and ngOnInit in your Angular apps
There are some things that you could be doing in the constructors of your classes rather than in the ngOnInit lifecycle methods. Let me tell you which ones and why. Recently, I've read the an article that concluded by advising to always use the ngOnInit method for initialization.
Authored by: Sébastien D.
React
How to Sync Your React App with the System Color Scheme
Following the trend these last couple of years, you can agree that dark mode design is gradually becoming a thing. Most of the popular applications, and even devices, have rolled out releases that feature a dark mode ( night mode) color scheme.
Authored by: Bit
Managing States with Recoil in React Applications
Now that we are already using to above two famous ways of adding global state to our application here comes something new i.e Recoil 🧨 Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components.
Authored by: Bit
React Functions, GSAP Timelines and hooks. Oh my!
I love React Hooks. Code is cleaner, developers are happier, but for the longest time I wasn't able to actually make GSAP Timelines work with them, so I defaulted to "Animated Components" as I like to call them to do the dirty work for me.
Authored by: strife
5 Ways to Implement Conditional Rendering in React
As the weight of modern web apps shifts from the backend to the frontend, we're forced to spend more of our time thinking of performance optimization. That's also true when implementing conditional rendering. So, try spending the right amount of time optimizing your code while always pushing to reuse components as much as possible.
Authored by: Bit
Computed Properties in React
Today I came across a question in my Newsletter regarding computed properties in React. I didn't know about the term computed properties before, because such a term doesn't really exist in React, but it exists in other frameworks like Vue. Maybe I would call it computed values, computed state, or derived state (not from props though) in React.
Authored by: Robin Wieruch
5 Real World React Projects to inspire growth - No TODO Apps Allowed!
So...how many tutorials have you been watching lately? I presume with most of you the answer is a lot! While I am all for learning, and would never discourage it, doing is better than watching and in this article we take a look at 5 React Projects that you can get started on right away to start apply what you are learning or to just create something cool.
Authored by: Frontend Weekly
Vue
Nuxt - Vue - and GraphQL - Daniel Roe on Real Talk Javascript #84
Ever wondered what exactly Nuxt, Vue, or GraphQL are? We've got Daniel Roe on this episode to talk about what Nuxt is? Why is SSR important? How hosting on Lambda helps? And what some of the challenges with Nuxt are for developers.
Authored by: John Papa
Node.js
How to Build a Node Application Using a Pug Template
In this tutorial, I will explain how to use a pug template and NodeJS to build a web page. We will create a Node application from scratch, set up Nodejs, express, and a pug template engine. At the end of this tutorial, you would have created an single web page and learn how to use the technologies mentioned above.
Authored by: Bit
Will Deno kill Node.js in the coming days?
Node.js, something very familiar to developer for over a decade. Does something named Deno replace this super popular runtime in coming days? Deno is secure by born. You have to explicitly specify...
Authored by: Tunvir Rahman Tusher
Develop in Docker: Node.js, Express, & PostgreSQL on Heroku
This post builds on the excellent tutorial from Tania Rascia: Create and Deploy a Node.js, Express, & PostgreSQL REST API. I want to build a little web app that can store some data! ...without installing anything new on my computer. Here's how to configure VSCode Remote Containers to do that.
Authored by: Jessica Kerr
Prevent npm install for not supported Node.js versions
Yesterday I was reviewing a pull request to Contentful's Gatsby starter and learned a nifty little detail about npm configurations. The goal of his pull request was to guarantee that people setting up the project use a specific Node.js version. You can define the engines property in your package.son to specify a version range.
Authored by: stefan judis
Libraries and Tools
Best Vue Libraries for Watching Visibility of Items and Drag and Drop
Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we'll look at how to watch for the visibility of items and do drag and drop with 3rd party packages.
Authored by: John Au-Yeung
Top JavaScript Libraries You Should Know About
JavaScript has evolved since its beginnings. There's no doubt that JS is one of the most popular languages and it will probably stay that way. Popular libraries are incredibly useful for front-end...
Authored by: Mahdhi Rezvi
14 JavaScript Animation Libraries
Well - designed and smooth animations are one of the most important things that makes an app stand out from... | Web design web development news, website design and online marketing. Web design, development, javascript, angular, react, vue, php, SEO, SEM, web hosting, e-commerce, website development and search engine optimization, social media management.
Authored by: MA-NO WebDesign&Dev
Testing
Debugging Made Easy with This New Feature in Angular 9
"If debugging is the process of removing software bugs, then programming must be the process of putting them in." -Edsger W. Dijkstra The latest version Angular 9 includes a lot of major improvements, including the Ivy compiler and the reduction of bundle size using tree-shaking. You can explore
Authored by: Syncfusion
Mocking named TypeScript imports during tests
How to stub named imports during unit tests Note: you can find the companion source code in bahmutov/mock-ts-imports repository. Imagine we have the following 2 TypeScript files. Both files use named imports and exports which causes problems trying to stub them from the tests. Let's write unit test to confirm the function add works.
Authored by: Gleb Bahmutov
3 Ways to Improve Type Safety in Jest Tests
It's often easier to overlook type safety in unit tests and use type assertions or ts-ignore comments. Over time, this can lead to outdated tests and degrade their ability to catch bugs in production. Here are some ways you can introduce better type safety using Jest as the testing framework.
Authored by: Kaylie Kwon
Error Handling in JavaScript
Knowing how to manage errors is important part of programming. This tutorial will give you an easy introduction to error handling in JavaScript. You will learn about two types of errors and how to handle each. You will also learn how to use try...catch and throw statements to make your code safer and much more.
Authored by: Alex Devero
Functional Programming
Returning Promises From Async / Await Functions In JavaScript
Ben Nadel demonstrates (to himself) that the return value of an async / await function is implicitly wrapped in a Promise.resolve() call in JavaScript and TypeScript. And, that this will implicitly flatten the Promise chain as the return value is chained.
Authored by: Ben Nadel
JavaScript Best Practices - Arrow Functions
JavaScript is a very forgiving language. It's easy to write code that runs but has mistakes in it. In this article, we'll look at how to define and use arrow functions in the cleanest way possible.
Authored by: John Au-Yeung
Dipping your toes in functional programming with JavaScript
Functions in JavaScript are one of many reasons some developers hate the language. But JavaScript functions are simply misunderstood little creatures! Once you get to know them, you won't fear them and would even love them and all their little quirks.
Authored by: JavaScript in Plain English
Understanding Machines: An Open Standard For JavaScript Functions
In this article, Kelvin Omereshone introduces you to machines, an open standard for JavaScript functions. At the end of this article, you should be familiar with what machines are and how to implement them. As developers, we always seek ways to do our job better, whether by following patterns, using well-written libraries and frameworks, or what have you.
Authored by: Smashing Magazine
Callback Functions in JavaScript
Functions are first-class citizens in JavaScript. That's why you will early on hear about callback functions in JavaScript, which are a super powerful asset when writing JavaScript code. Here I want to give you a brief introduction to them.
Authored by: Robin Wieruch
JavaScript Code Styling Best Practices - Functions Arguments, Lines, Identifiers
JavaScript is a very forgiving language. It's easy to write code that looks messy and hard to read but runs. In this article, we'll look at issues like line breaks between arguments of a function call and consistent line breaks between parentheses.
Authored by: John Au-Yeung
