![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
Even though we're rapidly heading into the last month for 2021 ... 2021 is not quite done yet. Check out "Smashing Workshops: Winter 2021" to keep your head out of 2022 a little longer.
Other popular stories this week include "A Simple Explanation of Function Overloading in TypeScript" by Dmitri Pavlutin and Courier has released Part 2 (Scale & Reliability) and 3 (Routing Preferences) of their Notification System 2.0 series.
General
Notification System 2.0: Part 2 - Scale & Reliability
These are two distinct, yet interrelated aspects at the core of a good notification system. You achieve reliability when your customer receives all of your notifications without errors or duplicates. Retry logic, provider diversity, references, compliance, and timing all accounted for.
Authored by: Courier
Code Quality Automation: What's Around the Corner?
If you look at the coding mistakes we make, most of them are repetitive. However, the challenge is detecting them using static code analysis since some of them are contextual and need classification or continuous learning. That's where AI-Powered automation fills the void.
Authored by: Bit
GraphQL Editor - The Journey from Initial Release to Version 5.0
From the very beginning of our adventure with GraphQL, we were impressed by how great its community is. The amount of content, libraries and great tools generated by GraphQL users amazed us from the very start. The more time we spent working with GraphQL the more things we saw that could be improved to make working with it easier and better.
Authored by: David Walsh
Spy On DOM Methods And Properties
How to detect from the Cypress tests when the application is calling DOM methods and even sets innerHTML. In the bahmutov/sorted-table-example example, the application sets and removes DOM element attributes: The application updates the table body by assigning the .innerHTML property Can we a) detect when the application is calling the .removeAttribute('disabled') method on a specific DOM element and b) spy on the .innerHTML property assignment?
Authored by: Gleb Bahmutov
Notification System 2.0: Part 3 - Routing Preferences
Building a service capable of dynamically routing notifications and managing preferences is vital to any notification system. But if you’ve never built a system like this, it might be difficult to figure out what the requirements are and where the edge cases lie.
Authored by: Courier
Smashing Workshops: Winter 2021
Quick summary ↬ What's the state of CSS, Vue.js and Next.js? What are new, smart interface design patterns we could use? Let's figure it out. With our online workshops on UX, front-end and design. For many of us, personal workspace can feel quite comfortable and convenient, but nobody really wants to sign up for another full day of focused screen time.
Authored by: Smashing Magazine
Separating Build and Release Pipelines for Effective DevOps
With modern DevOps tools, we have the flexibility to break Continuous Integration(CI) and Continuous Deployment (CD) into multiple stages. And, we typically split the pipeline, looking at various factors such as: Performance - Reduce the execution time, e.g., Maximize resource usage with parallelism.
Authored by: Bit
The Importance of Semantic Elements in HTML
By seeing these tags you can guess their uses on the webpage. To clarify more we will see some websites - If you check medium.com, you will see the all tags are , there are no semantic elements. Now if you check stripe.com, you can see how they use semantic elements.
Authored by: Suman Giri
JavaScript
How To Use JavaScript Closures in 5 Minutes
If you search across the web for JavaScript interview questions, closures show up nearly every single time - and for good reason. Closures can be used as tools for data encapsulation. If a developer wants to create variables only accessible by a function, closures are the way to go.
Authored by: Kyle DeGuzman
How to detect Emojis in JavaScript strings
A snippets to detect and replace Emojis in JavaScript strings using Unicode property escapes.
Authored by: stefan judis
New in JavaScript: Array.findLast and Array.findLastIndex
An update of MDN's browser-compat-data caught my eye today. Finding values in Arrays is a common practice via find and findIndex. These methods iterate from the array beginning, though. If you wanted to search your array starting from the end, you had to reverse the array and use the provided methods.
Authored by: stefan judis
Stop using IFs in JavaScript/React/Angular
Stop using IFs everywhere! I know that the if logic is important in software engineering, but we can do better. Use this logic but write it like a senior engineer.
Authored by: Felipe Furlanetti
How to Concatenate Strings in an Array in JavaScript
Data takes many forms - and lists are a very common one. Concatenating strings is a common task and there are several ways to go about it. In the same way, concatenating strings in an array builds upon that task, for each string in that array.
Authored by: StackAbuse
TypeScript
A Simple Explanation of Function Overloading in TypeScript
Most of the functions accept a fixed set of arguments. However, some functions accept a variable number of arguments, as well as arguments of different types. To annotate the functions that accept variable arguments, TypeScript offers the function overloading feature. Let's see how function overloading works.
Authored by: Dmitri Pavlutin
React
How I Manage Flat Objects In React
I wanted to share a design pattern I like to use when updating flat objects in my React applications state. It's a great way I've found to update multiple fields in a single object with one function. My example is a React+Typescript app using Redux Toolkit to manage its global state.
Authored by: JavaScript In Plain English
How to Write an Infinite Scroll List with React
Infinite Scrolling is proper when you don't know the page size. Your items are in the stream (For example, timeline). And the only chance is to display items in an order. Then implementing Infinite Scrolling best way for usability. I wrote a simple simulation that loads new items when users access the last things of Scrolling.
Authored by: Onur Dayibasi
Node.js
How to Build A Plugin System with Node.js
If you're building a minimalist product, but want to add an extra level of customisation or expansion, then plugins are a great way to enable that. They allow each instance to be customised with additional code that anyone can create.
Authored by: JavaScript In Plain English
Libraries and Tools
Top 5 JavaScript Libraries for SVG Animation
Today, SVGs are widely used in web applications. Its ability to scale without losing quality is the main reason behind its success. BonsaiJS is an excellent option to create general-purpose graphics...
Authored by: Bit
19 Powerful React Libraries and Frameworks to Use Right Now
React, as an open-source JavaScript library, doesn't offer much on its own when it comes to features. It's not necessarily a bad thing - it's certainly a hefty benefit for those who prefer a minimalist approach. But in some cases, it won't be enough.
Authored by: JavaScript In Plain English
Testing
Create Custom Assertions For Test Readability
How to extend Cypress with custom assertions. Let's take an example page in the repo bahmutov/cypress-assertion-example. It has a list with a few items. We can confirm that the list element has the ID attribute equal to "data-attributes". We can also confirm other properties, like the list style CSS.
Authored by: Gleb Bahmutov
The Hidden Benefit of Unit Tests - Code Quality Assessment
Think about it like this: unit tests are meant to help you isolate and test a single "unit" of your code. The meaning of "unit" varies depending on who you ask, but it tends to be related to a small portion of code that makes logical sense to be tested together.
Authored by: Bit
How not to write property tests in JavaScript
Property-based tests give us more confidence in our code. They're great at catching edge-cases we may not have thought of otherwise. But this confidence comes at a cost. Property tests take more effort to write. They force you to think hard about what the code is doing, and what its expected behaviour should be.
Authored by: James Sinclair
Functional Helpers For Cypress Tests
Using functional programming to write retry-able assertion callbacks. This blog post will teach you how to write short and expressive Cypress tests using a library of tiny functional utilities cypress-should-really. Using this library you will be able to also write single functional callbacks to take advantage of Cypress built-in command retry-ability.
Authored by: Gleb Bahmutov
