Before everyone starts easing into holiday mode, now would be a great time to take the 2019 State of Javascript survey! If you'd like to know what's new this year, check out Sacha Greif's article on freeCodeCamp, "What's New In The 2019 State of JavaScript Survey". Then have a look at Facundo Corradini's "Web layouts like it’s 2020" and Aditya Prakash's "Top JavaScript Frameworks to learn in 2020" to get ahead before the new year rings in.
Looking to simplify web development? Francis Cote shows us how Snipcart has mastered the Vue.js framework in the last few months in "How Vue Components Work (& How They Simplify Web Development)" and John Au-Yeung takes us through the ins and outs of Parallax Scrolling in "How To Add Parallax Scrolling to Your Vue.js App."
General
Web layouts like it's 2020 Blog
If you ever get the feeling that designers and developers are from different worlds, you should have seen what it was like 10 or 20 years ago. In the early days of the internet, we were building websites while trying to figure out what a website was and how it should work.
Authored by: LogRocket
Build a GraphQL + React App with TypeScript
Create a React app from scratch using TypeScript that calls the SpaceX GraphQL API GraphQL and TypeScript have both exploded in adoption, and when the two are combined with React, they create the ideal developer experience.
Authored by: Trey Huffine
How to Setup a JS Monorepo Like a Professional
I have traditionally hated ESLint, Babel, Prettier, and the like. Don't get me wrong, they are fantastic tools; it's simply a nightmare to navigate setting up a new project with a conglomeration of...
Authored by: gitconnected
ES6 Generators in JavaScript, a Real-World Use Case
Developers have difficulty understanding when to use generators - learn how to integrate them by understanding this real-world use case. I don't mind admitting that since Generators were introduced, I've had a hard...
Authored by: gitconnected
Updating your existing apps for accessibility Blog
The web has an ever-growing user base, and more activities than ever are centered around web applications. It's important for developers and product managers to build interfaces that are applicable to not only a lot of use cases, but a wide range of abilities as well.
Authored by: LogRocket
Jank-free page loading with media aspect ratios Blog
Responsive webpages often rearrange content while loading. This can lead to considerable frustration for users when the text they are reading is suddenly moved off-screen. In this article, we'll look at several new and existing ways to solve this performance problem.
Authored by: LogRocket
What is globalThis, and why should you start using it? Blog
The JavaScript language is increasingly used in a wide variety of environments. In addition to the web browser, which is the most common type of host environment for JavaScript, you can run JavaScript programs in servers, smartphones, and even robotic hardware. Each environment has its own object model and provides a different syntax to access the global object.
Authored by: LogRocket
JavaScript
What's New In The 2019 State of JavaScript Survey
We just opened the 2019 State of JavaScript survey [http://survey.stateofjs.com/?source=fcc]. Go take it [http://survey.stateofjs.com/?source=fcc] if you haven't done so already! It's now the fourth time we're doing this survey, and each time we take a deep look at our big YAML file containing all our questions to see what stays and what goes.
Authored by: freeCodeCamp.org
A Common JavaScript Interview Question Asked By Google & Amazon
I have seen this question asked by Google, Amazon and even smaller tech companies to weed out JS developers. Interviewers are asking this type of question to really test your knowledge of important JavaScript concepts. By answering this question correctly, you can display your understanding of block scope, closures, anon functions, and Immediately Invoked Function Expressions (IIFE).
Authored by: JavaScript in Plain English
Top JavaScript Frameworks to learn in 2020
As quick as it was here, 2019 is going away. Today I will be discussing the top JavaScript frameworks to learn in 2020 to take your game to a whole another level The programming scenario is ever-changing, and that is true for JavaScript as well.
Authored by: JavaScript in Plain English
Handy JavaScript Array Tips
JavaScript, like any other programming language, has many handy tricks that let us write our programs more easily. In this article, we will look at how to do different things that involve arrays, like checking if an object is an array and combining arrays.
Authored by: John Au-Yeung
Let's Clean Up: Ugly Try-Catches in JavaScript!
We've all been there. We have all used await on async methods, forgetting to wrap them in try-catch just to be told off about an Unhandled Error 😱 But it's not just these aysnc methods that might throw.
Authored by: Colum Ferry
What's new in GSAP 3 Blog
GreenSock has been around for more than a decade, making it one of the oldest JavaScript animation libraries. It works anywhere JavaScript runs and animates both DOM elements and JavaScript objects while maintaining its performance. GreenSock is backward-compatible, framework-agnostic and easy for developers across all skill levels to pick up.
Authored by: LogRocket
Async/Await: The Simplicity of Writing Asynchronous JavaScript
One of the defining qualities of JavaScript is that it is synchronous. It is single-threaded, meaning that at any one time only one block of JavaScript code on a page can be executed, and each line is executed one after the other. Seems simple enough, right?
Authored by: Bryn Bennett
TypeScript
Blogged Answers: Learning and Using TypeScript as an App Dev and a Library Maintainer
2019 has been the first year where I really learned and began to understand TypeScript. I feel that my experience as both a Redux maintainer and an application developer has given me some potentially interesting insights and opinions on learning and using TypeScript, and I'd like to share those thoughts.
Authored by: Mark Erikson
Angular
3 Steps to Creating Dynamic Views in Angular
Before we can insert a view, we would have to first know how to create one. Angular supports two types of views, namely host views and embedded views. This is the view that we use most frequently and are probably most familiar with.
Authored by: JavaScript in Plain English
How to Use Custom Pipes in Angular
So, let's write some code and try to demonstrate how to use a couple of custom pipes: Filter pipe; takes an array as input and returns a subset of that array based on the term enter in a search input. Sort\orderBy pipe; takes an array as input and returns a sorted subset of that array.
Authored by: Bit
Game Development with Angular: How to Build Your Own Tetris Clone
This is the first of (hopefully) many parts on game development with Angular. The first part will give you some background on the project I'm working on. A few months ago, my wife was complaining that she could not find a good Tetris version for Xbox. "You are a software developer", she said.
Authored by: Mathias Raacke
Create Ionic 4/Angular 8 HTTP Service - positronX.io
A complete step by step Ionic 4 HTTP tutorial, In this tutorial, we will learn how to create Ionic 4/Angular 8 Service using HTTP & HttpClientModule and communicate with remote server using REST API. As we know, most of the applications render data from the remote server like YouTube has to fetch videos and display ...
Authored by: Digamber Singh
React
Handling React Forms and Validation with Formik and Yup
Handling and managing forms in React apps are too much of a hassle. There are many different libraries out there, but they do much more than you actually want. Here comes Formik to the rescue...
Authored by: Bit
Rendering sibling elements in React using Fragments Blog
React Fragments solve the issue of rendering a sibling element with no parent, and there's a useful shorthand syntax for them that you may not know.
Authored by: LogRocket
Experimental React: Using Suspense for data fetching Blog
If you're a React developer, by now you've most likely heard of Concurrent Mode. If you're still wondering what that is, you're in the right place. The React docs do a really good job of explaining it, but I'll summarize it here.
Authored by: LogRocket
Vue
How Vue Components Work (& How They Simplify Web Development)
In a rush? Skip to Vue component examples. With the latest version of our shopping cart built on top of Vue.js, I think it's fair to say we've mastered this framework in the last few months. And we still love it as much as the first day.
Authored by: Snipcart
Animating Vue with GreenSock Blog
The average cognitive load capacity of humans (the amount of information a person can process in an instant) is seven plus or minus two units of information, and the amount of information in the working memory lasts around 10 seconds.
Authored by: LogRocket
How To Add Parallax Scrolling to Your Vue.js App
Parallax scrolling is the effect where the background image scrolls slower than the elements in the foreground, creating an illusion of depth of the page. Websites often use this for informational pages, where you have some text in the foreground and an image in the background that scrolls more slowly to create a more interesting experience for the user.
Authored by: John Au-Yeung
Bootstrap Vue Introduction
How do you use Bootstrap with Vue? In this video I discuss what I did to get both working together!
Authored by: Erik Hanchett
Node.js
How To Set Up Scheduled MongoDB Backups with a Bit of Node.js
With a couple of dependencies and some JavaScript, you can set up automatic backups on your servers for your MongoDB instances. This tutorial describes the process of setting up automatic backups for MongoDB using Node.js. Before we dive into this two-step process, you need a couple of prerequisites.
Authored by: gitconnected
The best unit testing frameworks for Node.js Blog
In this post, we will compare some of the most popular and widely used frameworks used when working with Node; Jasmine, Jest, AVA, and Karma.
Authored by: LogRocket
Know yarn before learning Node.js
I want to learn Node.js because I've heard it is so simple to set up it as a server. Like anyone else, I start by doing a search for "Node.js Tutorial" on Google. I frankly have to say the tutorial...
Authored by: Elye Project
Streams, Piping, and Their Error Handling in Node.js
A writable stream is a stream of data that is created to write some streaming data. For example, creating a write stream to write a text file for some streaming data. Let's consider the following example for creating a writable stream in Node.js. I am using TypeScript instead of JavaScript.
Authored by: JavaScript in Plain English
Node Event Emitters - For Beginners and Experts
Everything you need to know about event emitters in Node.js The core of NodeJS is event-driven programming. In NodeJS, we achieve event-driven programming with the event-emitter class. In this article, we'll discuss everything about the event-emitter class. The following are the topics that I'll be covering in this article.
Authored by: gitconnected
Libraries and Tools
6 best React component libraries by category
Love it or hate it, React is undoubtedly one of, if not the most popular front-end JavaScript framework right now, and that's unlikely to change for the foreseeable future. But, the framework can't do much on its own.
Authored by: areknawo
The complete guide to building a smart data table in React Blog
Table UIs are very common in web products because they're one of the easiest way to organize complex data in the UI. Many companies use data tables to show complex reports. Some common use cases for table UIs include displaying data for finance reports, sports leaderboards, and pricing and comparison pages.
Authored by: LogRocket
5 Ways to Improve UI Consistency
Useful developer workflows and tools for maintaining UI consistency across screens and apps. Building a consistent UI/UX is more than just doing things the right way. It creates a consistent and predictable experience for your users, which in turn feels trust in navigating and interacting with your applications.
Authored by: Bit
Do you need GraphQL with Django? Blog
Read up on the advantages of using GraphQL with Django and see how GraphQL's powerful and extensive features compare to Rest API.
Authored by: LogRocket
Testing
Basics of Testing JavaScript with Jest
In this article, we will be talking about testing our code in JavaScript. We will then proceed with the explanation through Q&A's as I hope this approach would be better than writing a long story. Let's dive in without wasting much time. It's as simple as the name suggests.
Authored by: Bit
Reusing JavaScript Tests
Writing tests is hard. 😤Why do we need them in the first place? 🤔 Code defines a set of instructions to perform a specific operation. Consider this function as performing the well-defined mathematical operation y = a + b.Assuming the developer understands the underlying principles, he can write this correct implementation in machine code: However, noise from human error, system constraints, or other bugs may damage the code: This is where tests come in.
Authored by: Bit
Static vs Dynamic Type Checking in React
Learn what is type-checking and when it's best to use each of its two forms. The question of dynamic vs static data type checking in the world of JavaScript (and thus React) has been around for years now. And honestly, I don't see a way for it to be finally resolved without taking external factors into account.
Authored by: Bit