![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
The war between JavaScript frameworks and, respectively their users, is still active. Abhay Srivastav shared with us why he prefers Vue over React in his interesting article "Why I Chose Vue over React".
This week "React is on Hooks". Everybody is talking, and writing about it. You can, for example, take a look at "Using React Hooks To Create Awesome Forms" by Rajat S and learn more about this technique.
Angular developers, on the other hand, have an opportunity to learn "How to use Axios with JavaScript" with Paul Halliday.
Finally, we are recommending "Pure JavaScript Functions as a Replacement for Lodash" by "RC" because we strongly believe that pure JavaScript is the way to go whenever it's possible.
General
Understand Scope in JavaScript
Scope means access to a variable within a program. We have different scopes since we have functions in a program. In the above example, you can see the variable aa = 10 has the window/root scope and...
Authored by: Bit
WebSockets Tutorial With Example
WebSockets Tutorial With Example | Getting Started With WebSockets
Authored by: KrunalDLathiya
Conservation of Energy in Web Development
Over the last few years, I've taken a zealous interest in improving my developer experience. In particular - reducing the background noise, tedium, keystrokes, and interrupts to flow state generally associated with the role. The following are some tips, tricks, and tools that make my day just that tad bit easier and help me focus on actual creativity and problem solving.
Authored by: gitconnected
JavaScript Notifications - SuperJavascipt
JavaScript Notifications - Show popup alerts in the taskbar for your visitors and users, to let them know of new messages or remind them of something.
Authored by: Martin Capodici
Real-Time Interaction Between Maps with Socket.io and JavaScript
I was doing some thinking recently. I was thinking how I could make maps more useful than just displaying visual content on the screen when requested. While displaying map information on a screen is useful in many circumstances, it doesn't make for the most exciting of examples.
Authored by: HERE Developers at Disrupt 🌉
JavaScript
Using flatMap in ES2019
Since it's already April, looks like it's time to start talking about the new JavaScript standard, ES2019. This new JS standard includes a few interesting extras but nothing too dramatic. The most interesting new addition is called flatMap, and though it may not be revolutionary, it is quite useful in many situations.
Authored by: DiscoverSDK
JavaScript Fundamentals: Mastering Arrays
An array in JavaScript can be looked at as a kind of special variable, which is able to hold more than one value at a time. Arrays can contain any data type, including numbers, strings, Booleans and objects.
Authored by: Tim Robards
Rocking JS data structures!
Boom! 💥 Long-forgotten ES6 structures now well-supported in all browsers! It's time to take a look at what they're capable of! 😎 #javascript #webdev #webdevelopment #data #structures #api #programming #code
Authored by: areknawo
Angular
How to use Internationalization (i18n) in Angular
The consumption of modern web and mobile experiences is a worldwide thing. It isn't just related to the locals around you and the surrounding culture. Therefore, just as you'd ensure that your design is aestheticly-pleasing and accessible, you should also ensure that your text is localized.
Authored by: Alligator
Alligator.io Code Kata: Defaulting Theme Based On Time-Of-Day In Angular 7.2.11
Ben Nadel draws inspiration from the Alligator.io website and partakes in a fun code kata in which he defaults the theme of an Angular application based on the user's local time-of-day. This allows the CSS theme to default to "dark" when the Angular application is being accessed outside of working hours.
Authored by: Ben Nadel
Creating A "position: sticky" Header Component Using IntersectionObserver In Angular 7.2.11
Ben Nadel takes his first look at the CSS property, "position: sticky". And, creates a custom component in Angular 7.2.11 that allows a CSS class to be conditionally added and removed from the host element when it enters and leaves the "sticky" state, respectively.
Authored by: Ben Nadel
Using NgModel With Input Type="File" And A Custom ControlValueAccessor In Angular 7.2.12
Ben Nadel demonstrates how to create a custom ControlValueAccessor that targets File Inputs (type="file") and synchronizes File references with the view-model using NgModel in Angular 7.2.12. This is in contrast to the default value-accessor, which only synchronizes the "value" property of the File Input.
Authored by: Ben Nadel
React
Using React Hooks To Create Awesome Forms
Learn How To Build Custom React Hooks and Use Them to Create Great Forms In one of my previous posts, I showed you how to use React's latest feature that everyone is talking about - React Hooks! If you have read this post, then you now know how to use the useState, useEffect, and the useContext hooks in your React App.
Authored by: Bit
How to create React custom hooks for data fetching with useEffect
Background React 16.8 added a new API, Hooks. If you haven't learned hooks yet, go to the official site and read the entire document before continuing this article. This article is about how to create custom hooks for data fetching. As described in the roadmap, React is planning to release react-cache and Suspense for data fetching in the near future.
Authored by: Daishi Kato
How to create an accessible React modal
A modal dialog is a window overlaid on top of the main application. It's an inert window where the user can't interact with the rest of the application. Creating a modal in React is fairly easy. There are dozens of resources that explain how to do so, including the React documentation.
Authored by: Seif Ghezala 🇩🇿
Validating a Login Form With React
For almost every form that you create, you will want some sort of validation. In React, working with and validating forms can be a bit verbose, so in this article we are going to use a package called Formik to help us out!
Authored by: Scotch Development
React State with Hooks: useReducer, useState, useContext
If you haven't used state management excessively in React Function Components, this tutorial may help you to get a better understanding of how React Hooks - such as useState, useReducer, and useContext - can be used in combination for impressive state management in React applications.
Authored by: Robin Wieruch
Vue
Why I Chose Vue over React
In my last article, we made a comparison of Angular, React and Vue by building a small web application using each. That concluded with React and Vue being the champion. In this article, I would like to share my views on why I have become a big fan of Vue.
Authored by: Bit
Node.js
Node.js inside-out
Since its first release in 2011, has greatly changed, or should I say revolutionized JavaScript development and its use-cases. Being able to write code in their favorite language, and run in on the server-side, many web developer quickly notice the huge potential of the project.
Authored by: areknawo
Simple Websocket Example with Nodejs
Today topic is WebSocket example with nodejs. WebSocket help to communicate the servers with clients in async manner.The server and client can communicate and exchange data at the same time. WebSocket help to create real-time communication between web servers and clients.
Authored by: js-tutorials
Libraries and Tools
Introducing ZephJS
ZephJS is an extremely easy to use, simple to understand, ultra-light framework for defining and using Web Components. ZephJS is perfect for people writing component libraries, teams building applications or sites that just require a few custom components, or projects building whole applications that do not want the gigantic weight of a modern JavaScript browser framework. ZephJS simplifies the process of defining custom Web Components into a highly readable declarative structure that uses standard JavaScript, standard HTML markup, and standard CSS styling. And ZephJS weighs in at less than 20k minified!
Authored by: arei
An intro to Zero Server, a new tool to simplify web development
In this tutorial, we will learn how to set up an application with Zero Server and demonstrate the process by building a small React e-commerce application. Let's dive in. To follow this tutorial, you'll need a basic understanding of React and Node.js. Also, ensure that you have at least Node v8+ installed on your machine before you begin.
Authored by: Ogundipe Samuel Ayo
Add Authentication and Authorization to Next.js 8 Serverless Apps using JWT and GraphQL
- Deploy a Node.js Express JWT service for authenticating requests to Hasura GraphQL Engine. - Authorization using JWT and Hasura GraphQL permissions - A sample Next.js 8 app with login,signup and articles listing page - Deploy to Now.sh using serverless target
Authored by: Praveen Durairaj
How to use Axios with JavaScript
Axios is an open source library that allows us to easily make HTTP requests. It's effectively just fetch with extra superpowers! Let's see this in action by creating a new HTML5 project: NOTE: Axios can also be added via a CDN like so: As you may be able to see from our npm install calls, we'll be using Parcel to bundle and serve our code.
Authored by: Alligator
Solid - The Best JavaScript UI Library You've Never Heard Of
The last thing anyone is looking for is another JavaScript UI Library/Framework. It's beyond fatigue from the crippling weight of constant decision making and chasing Unicorns. It's just gotten so easy to make something. Web Components are responsible for a new "framework" every other day it seems like. So why even bother?
Authored by: gitconnected
Testing
Unit vs E2E Testing for Vue.js
Writing tests when developing Vue.js apps can save you a lot of time which would be otherwise spent fixing bugs. The bigger and more complex your app gets, the truer this becomes. There are two types of tests that are commonly performed for web applications: unit tests and end-to-end (E2E) tests.
Authored by: Anthony Gore
Testing for Visual Regressions with Percy
While this post is not sponsored (it is based on Paul's own personal experience), we have worked with Percy before on a sponsored video, that also goes through the process of setting up Percy on a site. It's fascinating, powerful, useful stuff and I highly recommend checking it out.
Authored by: CSS-Tricks
Functional Programming
You don't need Lodash or How I started loving JavaScript functions
1. find The first function we will illustrate is the one that we use often. Let's try to find the first element in a collection that satisfies a condition So, this is a very simple example and let's investigate the performance of both these functions: You can inspect the benchmark code and play with variations using the playground below: This is not to conclude that native functions are always performant over their Lodash counterparts.
Authored by: Bit
Functional Programming
If there's one programming style I like a lot, it's functional programming. Although it's not the best fit for all problems, often having means to decompose a problem into smaller parts to be solved separately through composition has proven to be useful.
Authored by: SurviveJS
Other
Building a Custom Sitemap for Your Gatsby.js Site
Building static sites with React.js using Gatsby.js seem to be more and more a topic of debate when you require an easy to deploy setup, blazing fast speed and smooth developer experience.
Authored by: Scotch Development
Why I Publish and Manage Shared JavaScript Code with Bit
I love NPM and Lerna is useful. Bit is a different beast altogether... I'll share from my own experience. NPM has traditionally been an online registry for sharing code from snippets, components to full frameworks (Angular, React, etc). While it has it faults, I use NPM every day.
Authored by: Bit
The Journey from SPA to Isomorphic
This article is based upon my journey of moving a single page application (SPA) to isomorphic. Isomorphic: It is a Single Page Application(SPA) with server-side rendering. We all are familiar with the features of SPA - highly interactive website, quick response time and ability to use it as offline once the page loads.
Authored by: Sujaan Singh
