![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
Asynchronous programming is the standard for web development. Thus every JavaScript developer should aim to learn the paradigms around it and stay up to date with the latest news and improvements. This week, Sukhjinder Arora is helping us "Understanding Asynchronous JavaScript — the Event Loop". Don't miss it.
Functional programming is a hot topic. We recommend getting "An introduction to the basic principles of Functional Programming" by "TK".
You must have heard about Progressive Web Apps by now. If not or you are interested what's new in 2018, make sure to check out "Progressive Web Apps: A Convincing Case for Native-like Apps on the Web" by Nwose Lotanna.
Finally, if you are aiming to become a full stack JavaScript developer, we recommend "10 things to learn for becoming a solid full-stack JavaScript developer" by Sean Maxwell.
General
Understanding Asynchronous JavaScript - the Event Loop
Before we dive into asynchronous JavaScript, let's first understand how the synchronous JavaScript code executes inside the JavaScript engine. For example: const second = () => { console.log('Hello there!');} const first = () => { console.log('Hi there!'); second(); console.log('The End');} first(); To understand how the above code executes inside the JavaScript engine, we have to understand the concept of the execution context and the call stack (also known as execution stack).
Authored by: Sukhjinder Arora
Promise chaining is dead. Long live async/await
While async functions have been around forever, they are often left untouched. Async/await is what some may consider an outcast. Why? A common misconception is that async/await and promises are completely different things. Spoiler alert, they are not! Async/await is based on promises.
Authored by: Alberto Gimeno🍺
JavaScript async patterns quick guide
Patterns and libraries have emerged in the JavaScript ecosystem to handle asynchronous programming. Here I'll provide a quick guide to some of our top picks to deal with async patterns.
Authored by: Imaginary Cloud
Faster web
If Virtual DOM is slow by design, and DOM API is tedious to use, how do we get the faster web? It seems like yesterday when Vue surpassed React in GitHub star wars. Of course, stars don't mean much. There are still plenty more React jobs compared to Vue.
Authored by: codeburst.io
Tech Stack 2019: Core
First, this technology stack unapologetically embraces TypeScript. The good news is that if you already are familiar with JavaScript ES2015, then adopting TypeScript is fairly easy (TypeScript in 5...
Authored by: codeburst.io
Progressive Web Apps: A Convincing Case for Native-like Apps on the Web
So its November 2018 and if you are a web developer, you must have heard about PWAs (unless you live under a rock)Alex Russel who coined the term with Frances Berriman describes a Progressive Web Application as: responsive, connectivity-independent, app-like, fresh, safe, discoverable, re-engagable, installable and linkable web experiences.
Authored by: Viclotana™
JavaScript
'this' keyword execution context in javascript
In this tutorial, we are going to learn how this keyword works in javascript at end of this tutorial you will have confidence about how it works. Let's get started. The execution context is specific to the device where it keeps track the runtime evaluation of the code you are running at any point of time there is most one execution context that actually executing the code.
Authored by: Sai gowtham
Emulating "Private" Variables in JavaScript with Closures and Factory Functions
Despite the recent implementation of classes in JavaScript, there has never been a native way of controlling the visibility of an object's property. Specifically, there has never been a way to actually make variables private. For now, workarounds are our best bets. One of the most common workarounds is the underscore notation.
Authored by: The Practical Dev
Learn how to create HTML elements with plain JavaScript
In this example, we are going to create a list of bookmarks and add them to the DOM tree using pure JS. The starting point is an index.html file that has a div element with an attribute of id="bookmarks" like.
Authored by: codeburst.io
Adding pipelines to JavaScript
The usage of pipes to transport water, air, gas, or any other fluid substance has enabled tons of things we take for granted. Pipes allow us to transport water to our homes so that we can use things like the sink and bathtub. Our ovens and heating systems rely on pipes transporting gas.
Authored by: LogRocket
Javascript eval - Is eval evil? Just In Time (JIT) compiling
There is a high chance that you've stumbled across the JavaScript eval function. It is a common knowledge that in JavaScript, eval is something that is a bad practice. Have you ever wondered how it works and why exactly a lot of people discourage it?
Authored by: Marcin Wanago
TypeScript
Runtime type checking with io-ts in Typescript
Typescript can statistically analyze your code, by compiling it to Javascript and throwing errors while doing it, if it sees something...
Authored by: Otto Kivikärki
Is Typescript on Node.js good enough for Java developers?
Assuming you'll never convince the crankiest, most grizzled programmers that JavaScript isn't the worst, is it possible to at least propose a middle ground solution? Maybe. Enter Typescript.
Authored by: David Herron
How to do generic type transferring with jsx in TypeScript
So I just encountered a problem where I want to make a better type checking in a props of a React component. It's about one prop takes an array of certain type, and in another prop callback, where this type needs to be the parameter. Let's see how to do that in TypeScript.
Authored by: Albert Gao
Angular
So what's New in Angular v7?
Angular, Google's javascript (typescript) framework for building web applications, mobile or desktop with over 42,000 ⭐️ on github. Maintained by the Angular Team at Google and a host of community...
Authored by: Viclotana™
Using Presentation Components In Order To Hide Async Pipe Complexity In Angular 7.0.3
CAUTION: This post is really just me thinking out loud on state management concepts in Angular 7. Consider this nothing but a work in progress from the mind of someone who barely understands what they are doing.
Authored by: Ben Nadel
Understanding The Limitations Of Template Syntax Desugaring In Angular 7.0.4
Ben Nadel digs into the "ng-template" syntax and the apparent limitations of the "*" desugaring in Angular 7.0.4. It appears that the first slot of the "*" template cannot be a secondary input binding. This influences the way in which short-hand notations like "let" and "as" can be applied.
Authored by: Ben Nadel
Using Router Events To Detect Back And Forward Browser Navigation In Angular 7.0.4
Ben Nadel looks at the addition of the "navigationTrigger" and "restoredState" properties on the NavigationStart event emitted by the Router in Angular 6+. These properties allow us to differentiate navigation actions that were triggered imperatively by our application code; or, as a location-based change such as clicking the browser's Back and Forward buttons.
Authored by: Ben Nadel
React
React Material UI Example Tutorial
React Material UI Example Tutorial. Material-UI components work in isolation. It is the React components that implement Google's Material Design.
Authored by: KrunalDLathiya
Understanding React Serverside Rendering - Part 2
How To Use NextJS to Render React on the Server This is the Part 2 of a 2 Part Series on React Serverside Rendering. Click here to read Part 1. In Part 1, we set up a simple React Project and installed the dependencies.
Authored by: Rajat S ⌨️
React Hooks - let's not get too attached
After the React team announced the proposal of a new feature called Hooks at React Conf 18, there was a strange reaction in the React community: a flurry of tutorials describing how to use it, as if it was already in React core.
Authored by: Adam Boro
The React Lifecycle
In the last article, we took an in-depth look at events inside of React components and how to manage them, thereby managing the state as well. When we learned about stateful components we looked at componentDidMount which was activated when the component was ready. But where does the method come from?
Authored by: DiscoverSDK
5 Ways to Convert React Class Components to Functional Components w/ React Hooks
In the latest alpha release of React, a new concept was introduced, it is called Hooks. Hooks were introduced to React to solve many problems as explained in the introduction to Hooks session however, it primarily serves as an alternative for classes. With Hooks, we can create functional components that uses state and lifecycle methods.
Authored by: Scotch Development
React Context API
Back in 2015, I was developing applications using Backbone and Marionette, when a young developer approached me to tell me something exciting. "Check out React", he said. I have heard this before with AngularJs, with KnockoutJs, and during that time, every second developer was developing a framework anyway.
Authored by: Zsolt Nagy
Vue
Offline-First Vue Apps with Hoodie & Workbox
Learn how to build an Offline-First application in Vue with Hoodie and Workbox. You will learn about Offline-First, Service Workers, and a few caching strategies. Offline-First is an approach to software development where a lack of network connection is not treated as an error.
Authored by: Telerik
How We Use Redux & Redux-Observable with Vue (v3.0 journal)
We often claim caution when it comes to refactoring a tech stack. But there always comes a time when it needs to get done. When that happens, you want to pick the right tools: Unless you've got stupid amounts of VC money, you can't afford a complete refactoring every quarter.
Authored by: Snipcart
Learn How to Use Vuex by Building an Online Shopping Website
Learn how to build an eCommerce site that uses Vue for dynamically handling products and utilizes Vuex to correctly manage the state of your shopping cart. Some people view the use of Vuex, a state management library, as quite a big step up from using Vue on its own.
Authored by: Telerik
Vue Laravel CRUD Example Tutorial From Scratch
Vue Laravel CRUD Example Tutorial From Scratch. We use Vue 3 and Laravel 5.7 For this CRUD demo application. We do not create separate projects for frontend
Authored by: KrunalDLathiya
Node.js
Create a Real-Time App with Socket.IO, Angular, and Node.js
WebSocket is the internet protocol that allows for full duplex communication between a server and clients. This protocol goes beyond the typical HTTP request/response paradigm; with WebSockets, the server may send data to a client without the client initiating a request, thus allowing for some very interesting applications.
Authored by: Alligator
Build, Deploy and Host a Customizable Status Page in Under 10 Minutes with Standard Library and...
It's hard to believe that it's been over a year since we published our first article on building a status page with Standard Library. Much has changed about the company and our platform. With the introduction of Code on Standard Library, it's never been easier to build, ship, and integrate scalable APIs right from your web browser.
Authored by: Steve Meyer
Libraries and Tools
Get Started w/ Prisma for Super Simple GraphQL
Almost every week we get to see a new tool or product being released for GraphQL development. Yeah, that's how hot the GraphQL ecosystem is currently is. Today, we'll be looking at one of the tools, which is Prisma. We'll be looking at how to get started with Prisma.
Authored by: Scotch Development
Magic Grid
The Problem Implementing a grid layout can quickly turn into a tricky task. If you have grid items that are always the same height, then you can probably make do with a Flexbox grid or some other CSS grid implementation. However, if you're dealing with user-generated content, chances are, you don't have the luxury of equal height components.
Authored by: codeburst.io
Most Popular Node.js Frameworks in 2018
Developers are continuously working to create frameworks for Node.js development. Get a list of the best and most common Node.js frameworks.
Authored by: Stackify
Testing
Element coverage for end-to-end tests
How to see which UI elements the end-to-end tests have interacted with. Let us take a simple TodoMVC application, from cypress-example-todomvc for example, and add a single Cypress end-to-end test like this one The test passes. But what did this test cover? Code coverage is only useful for unit tests.
Authored by: Gleb Bahmutov
Build a Unit-Testing Suite with Mocha and Mongoose
Over a period of time, your application will have more lines of code for testing than the actual application logic. So I feel it's a good investment to learn to write tests and follow a Test Driven Development or TDD approach. There are 4 main types of tests namely: End to End, Integration, Unit and Static.
Authored by: Priyesh Patel
Functional Programming
An introduction to the basic principles of Functional Programming
After a long time learning and working with object-oriented programming, I took a step back to think about system complexity. " Complexity is anything that makes software hard to understand or to modify." - John Outerhout Doing some research, I found functional programming concepts like immutability and pure function.
Authored by: Codementor
Other
Why Facebook's api starts with a for loop
If you ever inspected your requests to big company's API's in the browser, you might have noticed some weird javascript before the JSON itself: Facebook Gmail Why would they waste few bytes to invalidate this JSON? Without those important bytes, it could be possible for any website to access this data.
Authored by: Antony Garand
How to use Async module to control API requests
Asynchronous program execution is beauty of the Node. We attach a callback and leave the task to complete the execution. Sometimes this can be tricky. We can wait for the results of the asynchronous events but we can not predict the sequence of completion of the events.
Authored by: Swarupbam
5 Reasons Static Sites Rock!
Static Sites are the new hotness in Web Development and rightfully so. Every day on podcasts, blog articles, and tweets I see and hear more and more people converting their sites. Let's check out five reasons why so many people are moving to static sites!
Authored by: Scotch Development
The Power of Web Components
Web Components comprises a set of standards that enable user-defined HTML elements. These elements can go in all the same places as traditional HTML. Despite the long standardization process, the ...
Authored by: Mozilla Hacks
Web workers vs Service workers vs Worklets
Web workers, service workers, and worklets. All of these are what I would call "Javascript Workers", and although they do have some similarities in how they work, they have very little overlap in what they are used for. Broadly speaking, a worker is a script that runs on a thread
Authored by: Ire Aderinokun
10 things to learn for becoming a solid full-stack JavaScript developer
In the world of programming, finding beauty in simplicity means we want to reuse the same tool/language wherever possible and avoid as much boiler plate code as we can. If you're a web developer, you're probably aware of the fact that JavaScript can be used as both a front and a back-end language.
Authored by: Sean P Maxwell
