![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
Let's kick the new week off with a few things shiny and new! Starting with the updated ECMAScript standard which has added new features in ES2019 and Laurie Barth giving us her Tips and Tricks in "All the New ES2019 Tips and Tricks" while Brian Vaughn is excited to announce a new release of the React Developer Tools in "Introducing the New React DevTools" and Nathan Sebhastian looks at notable new features, deprecations, and bug fixes that have been added to React 16.9 on LogRocket's blog in "What’s new in React 16.9: Profiler API, bug fixes, and more."
Jonathan Saring focuses on components this week on the Bits and Pieces Blog, first by showing us how to let marketers view all the components your team has in "Build Marketing Websites and Pages Faster With Reusable Components" and then how to filter components by bundle-size and dependencies before installing them in your application in "Keep it Small: Find Components By Bundle-Size and Dependencies."
If you're not sure where you stand on the CSS-in-JS debate, have a look at both Chris Coyier's "The Differing Perspectives on CSS-in-JS" and Colby Fayock's "You Don't Need CSS-in-JS: Why (and When) I Use Stylesheets Instead" for some outside input!
General
Microfrontends - when they aren't the answer (React, Angular, Vue etc)
Taking a look at potential drawbacks of using Microfrontends and when it doesn't make sense to adopt them. Frontend development has become complex... a passing awareness of throwing together HTML, CSS and JavaScript is no longer enough to get you by in the world of modern web app development (React/Angular/Vue etc).
Authored by: Chris Kitson
Authenticating HTTP Requests in Modern Web Apps
Ensure your users are authenticated using modern technologies like Axios, JWT, and TypeScript. Ensuring a user is authenticated is an essential part of creating a modern web application. Today, we'll be looking at a common approach using JWT access and refresh tokens with Axios.
Authored by: gitconnected
What are the differences between Promises, Observables, and Streams?
Explanation of the differences between promises, observables and streams with real life example.
Authored by: Rakia Ben Sassi
4 Practical Use Cases for Regular Expressions
How to stop fearing the RegExp object and learn to love it Regular expressions are often feared by new developers, they see the strange syntax and opt to avoid them adding extra logic to solve their needs instead of trying to understand the logic behind them.
Authored by: Bit
Keep it Small: Find Components By Bundle-Size and Dependencies
New: filter components by bundle-size and dependencies before installing them in your application. Imagine having to search booking.com for a hotel without being able to filter the hotel, location... it won't work. You want to choose the right hotel for your needs and pay as little as possible.
Authored by: Bit
Build Marketing Websites and Pages Faster With Reusable Components
How to let marketers view all the components your team has so you can design and build multiple websites and pages faster. "How can marketing view the components our company already has?" Many marketing teams seek a way to build their websites and apps faster.
Authored by: Bit
JavaScript
How to Manipulate Arrays in JavaScript
Set is a object that cannot have duplicate entries. You can create a new Set from an array then convert it back to an array. const array = [1,2,2,3];const arrayWithDups = Array.from(new Set(array)); //returns new array without duplicates, [1,2,3] Returns a new array from startIndex to endIndex - 1 .
Authored by: John Au-Yeung
An overview of classes in JavaScript
In this article, I will talk about the class in JavaScript. We will cover the following topics: Classes Highlight Hoisting Subclassing / Inheritance Mixins Getters and Setters JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. Classes are actually just a special function.
Authored by: gitconnected
Three dots ( ... ) in JavaScript 😃
Learn about spread and rest operators Hey! I'm Sagar. I love to write tutorials and articles to help developers better understand the magic of JavaScript. If you have any questions about the article, leave a comment and I'll get back to you, or find me on twitter @sagar_dev44.
Authored by: Bit
The Differing Perspectives on CSS-in-JS
Some people outright hate the idea of CSS-in-JS. Just that name is offensive. Hard no. Styling doesn't belong in CSS, it belongs in CSS, a thing that already exists and that browsers are optimized to use. Separation of concerns. Anything else is a laughable misstep, a sign of not learning from the mistakes of the past (like the tag and such.)
Authored by: Chris Coyier
You Don't Need CSS-in-JS - Why I Use Stylesheets
CSS-in-JS is all the rage. But is it really the best option? Don't get me wrong, CSS-in-JS is a great solution, but it's for a problem most people don't have.
Authored by: freeCodeCamp.org
Creating a Pomodoro Timer in JavaScript in 10 Lines of Code
Algorithm: Create a function that executes every second using setInterval. Get the total number of minutes. Convert that into seconds and store in a global variable. Decrement the seconds by "1" for each second. Check if the seconds reaches 0. If true then alert the user and clear the timer.
Authored by: jagathish
All the New ES2019 Tips and Tricks
The ECMAScript standard has been updated yet again with the addition of new features in ES2019. Now officially available in node, Chrome, Firefox, and
Authored by: Laurie
TypeScript
Writing a TypeScript Custom AST Transformer (Part 3)
This is the continuation of Part 2 and a deeper dive into a couple of advanced techniques I've used in writing my transformers. Non-TS import allows me to declare explicit dependencies on static resources such as CSS/png/svg, other non-JS files, and even external build toolchain.
Authored by: Long Ho
How to set up a TypeScript + Gatsby app
Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps. It allows you to build apps using modern web technologies with no headaches at all. Gatsby also comes shipped with features like server-side rendering and the ability to generate static progressive web apps (PWAs).
Authored by: LogRocket
React
Introducing the New React DevTools
We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge! What's changed? A lot has changed in version 4! At a high level, this new version should offer significant performance gains and an improved navigation experience.
Authored by: React
What's new in React 16.9: Profiler API, bug fixes, and more Blog
When the results of the "State of JavaScript 2018" survey were published, React emerged as the winner for the front-end framework category, with a 91 percent satisfaction rate and more than 16,000 users: React is today's most popular library for building user interfaces, and in this post, we will look at notable new features, deprecations, ...
Authored by: LogRocket
How to Build a Phone Authentication Component with React and Firebase
Learn how to build a reusable phone authentication component with React and Firebase. this stories is the third part of series Clone FireBase web-ui with React and Bit here the list of previous part First part: Building a Reusable Firebase Facebook Login Component Second part: Building a Reusable React Login Component In this chapter, we will continue with our FireBaseWeb-UI clone in React series and integrate Phone Authentication with OTP into it.
Authored by: Bit
You're overusing useMemo: Rethinking Hooks memoization Blog
In my experience, there are two main categories where I've found useMemo to be irrelevant, overused, and likely harmful to the performance of your application. The first category is easy to reason about; however, the second category is quite subtle and easily ignored.
Authored by: LogRocket
Vue
Accessing the virtual DOM using render functions in Vue JS Blog
In this post, we will look at how to use render functions to unleash the power of JavaScript by using templates in Vue. This post is suited for developers of all stages including beginners. Here are a few things you should already have before going through this article.
Authored by: LogRocket
Node.js
Use Node.js to To Create Directories and Files
Start generating files in the right directory within seconds This will be a short article because it is quite simple. The code could be much more optimized or be reusable but this is just for a demonstration to get you started right away.
Authored by: gitconnected
How to Build a Command Line (CLI) Tool in NodeJS
Learn how to build a command-line app in NodeJS. Since the advent of Nodejs, command-line tools have been built using the JavaScript programming language, the most popular and widely used language in the world. There are many popular CLI tools built using JS: These are popular CLI tools we have in npmjs.org.
Authored by: Bit
Libraries and Tools
Top 5 Animation Libraries in React Native
My list of top 5 React Native animation libraries. Animations have a great impact on mobile to create better the user experience, they are mostly used to interact with user's actions and that keeps the user more engaged with your app.
Authored by: Bit
How to use RxJS operators to consume Observables in your workflow Blog
RxJS is a framework for reactive programming that makes use of Observables, making it really easy to write asynchronous code. According to the official documentation, this project is a kind of reactive extension to JavaScript with better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.
Authored by: LogRocket
The history and legacy of jQuery Blog
jQuery is the most widely used JavaScript library in the world. The web development community embraced it in the late 2000s, creating a rich ecosystem of websites, plugins, and frameworks that use jQuery under the hood. But in the past several years, jQuery's status as the number one tool for web development has diminished.
Authored by: LogRocket
Using jQuery in 2019 Blog
In this post, I will give a run through of jQuery, its strengths, weaknesses, why you might still want to use it, and how to get started in 2019.
Authored by: LogRocket
Other
Figma Tutorial: How (and Why) To Use It For Your Next Project
In a rush? Skip to the Figma Tutorial or the live demo. I love Italy. Everything about it from the architecture to the pizza... it's all good. And while there's loads to love about the Bel Paese, one marvel tends to stand out: The leaning tower of Pisa.
Authored by: Snipcart
