It's the month of love, and as always, there is a lot to love in our newsletter! If you've been struggling to choose a static site generator, Mathieu Dionne breaks it down for you this week in "How to Choose the Best Static Site Generator in 2020" on Snipcart's blog.
Sticking with the 2020's, Nwose Lotanna goes in depth on CSS technologies in "The most in-demand CSS technologies in 2020" on Bits and Pieces and Quincy Larson helps us out with programming languages, with a spoiler alert, in "Which programming language should you learn first in 2020? ʇdıɹɔsɐʌɐɾ :ɹǝʍsuɐ" on freeCodeCamp.
General
How to Choose the Best Static Site Generator in 2020
What's the best static site generator in 2020? Read this guide on top current SSGs with tips for picking the right one for your project.
Authored by: Snipcart
What is the Difference Between a Junior and a Senior Developer?
A senior developer earns an average of $40k/year more than a junior developer (Source: Indeed.com), and often more than double. So what is the difference, and is it possible for a junior developer to climb faster up the ranks? Yes, a junior developer can climb much faster up the ranks to senior developer skills, title, and pay.
Authored by: Eric Elliott
A Friendly Guide to Promise.all
Promise.all always felt like the last step in the asynchronous JS journey to me. First you learn what promises are, which lets you use fetch, and then you clean things up with async/await. But there's one last hiccup on your journey: dealing with multiple promises at once.
Authored by: gitconnected
The most in-demand CSS technologies in 2020 Blog
Over the years, CSS and its community have grown from just stylesheets to a whole ecosystem of technologies that spans frameworks like Bootstrap and Materialize to preprocessors like Sass and Less and even recent concepts like CSS-in-JS. Frontend web development in 2020 no longer involves simply writing CSS, but also knowing the technologies and which to use in any given scenario.
Authored by: LogRocket
11 Popular Misconceptions About Micro Frontends
Microfrontends are a new trend that goes back for many years. Equipped with new ways and solved challenges they are now slowly entering the mainstream. Unfortunately, a lot of misconceptions are...
Authored by: Bit
5 Best Practices to Write Quality Arrow Functions
The arrow function deserves its popularity. The arrow function syntax is concise, binds this lexically, fits great as a callback function. In this post, you'll read 5 best practices to get even more benefits from the arrow functions. The arrow function in JavaScript is an anonymous function.
Authored by: Dmitri Pavlutin
The Keys to Effective Pair Programming
There's much more to pair programming than finding a partner. We break down pair programming and identify the keys to an effective session. From how to find a partner, how to conduct the session, to the pros and cons different methods of pair programming.
Authored by: Codementor
JavaScript
File Explorer in JavaScript
The file explorer control for JavaScript provides a Windows Explorer-like interface within a web application, allowing end-users to browse, upload, and download files. Folder structure can be changed by renaming, moving, or deleting folders and files, and the control's layout and folder management
Authored by: Syncfusion
Which programming language should you learn first in 2020? ʇdıɹɔsɐʌɐɾ :ɹǝʍsuɐ
Most people's journey toward learning to program starts with a single late-night Google search. Usually it's something like "Learn ______" But how do they decide which language to search for? > "They always joke about Java on Silicon Valley. I guess I should learn that." Or: > "Haskell. So hot right now.
Authored by: freeCodeCamp.org
How to Capitalize the First Letter of a String in JavaScript
To capitalize the first letter of a random string, you should follow these steps: 1. Get the first letter of the string; 2. Convert the first letter to uppercase; 3. Get the remainder of the string; 4. Concatenate the first letter capitalized with the remainder of the string and return the result; 1.
Authored by: freeCodeCamp.org
Use the JavaScript Notification API to Display Native Popups
The Notifications API lets us display popups that show up as a native desktop or mobile notification. The functionality varies across platforms but they generally provide a way to asynchronously provide information to the user. We can create a new notification with the Notification constructor. It takes 2 arguments.
Authored by: John Au-Yeung
JavaScript ES6 Tutorial: A Complete Crash Course on Modern JS
In June 2015, there was a significant update to JavaScript, ushering in tons of new features including arrow functions, class destruction, and template strings, and more. Over the past years, these...
Authored by: Fahim ul Haq
Exception handling in JavaScript Blog
Errors are part of the programming journey. By producing errors, we actually learn how not to do something and how to do it better next time. In JavaScript, when code statements are tightly coupled and one generates an error, it makes no sense to continue with the remaining code statements.
Authored by: LogRocket
10 Uses for JavaScript's Spread Operator
With the introduction of ES6, JavaScript gained several new features that improve efficiency and offer new functionality. One of these new features is the spread operator. It's simple to write and has a lot of different handy uses. Writing the spread operator could not be easier - you just need to type three periods ....
Authored by: Amanda Treutler
Understanding Javascript Execution Context, Call Stack and Stack Overflow
JavaScript is weird. It is possible to use JavaScript without fully understanding JavaScript, and most times JavaScript lets you get away with it. If you are an aspiring JavaScript ninja like me, then you will definitely want to understand JavaScript. This will help you debug your code better and understand how your code works.
Authored by: Olusola
TypeScript
Why You Should Be Using TypeScript + GraphQL
I thought I understood API development, but GraphQL and TypeScript have made me a better API developer. Here are some of the outcomes you can expect from learning TypeScript and GraphQL. I've tried to emphasize concepts that I consider beyond REST and traditional JavaScript. I've been developing APIs (Application Programming Interfaces) since before REST.
Authored by: Sean Dearnaley
Babel Module Resolver with TypeScript
In this brief walkthrough, we will use Babel Module Resolver to convert relative paths to aliases for your entire JavaScript application. You can install it via the command line: And use it in your...
Authored by: Robin Wieruch
Typing objects in TypeScript
In this blog post, we will explore how objects and properties are typed statically in TypeScript. Table of contents: In JavaScript, objects can play two roles (always at least one of them, sometimes mixtures): Records: A fixed amount of properties that are known at development time. Each property can have a different type.
Authored by: Axel Rauschmayer
TypeScript Nullish Coalescing Operator: Always Have a Fallback Value
A fallback value without null and undefined with the Nullish Coalescing operator Released in TypeScript 3.7 version, we have a new logical operator available. It's called nullish coalescing and looks like this ??. But what does it do? To use it you need to have two values, one on the left and one on the right.
Authored by: Jeroenouw
Introduction to TypeScript Classes - More Access Modifiers
Classes in TypeScript, like JavaScript are a special syntax for its prototypical inheritance model that is a comparable inheritance in class-based object oriented languages. Classes are just special functions added to ES6 that are meant to mimic the class keyword from these other languages.
Authored by: John Au-Yeung
Angular
3 Ways to Debounce HTTP Requests in Angular
How to improve your Angular app's performance with debouncing. Debouncing is the delay of a function/method execution or an action for a period of the specified time. During this specified time, calls to the method/function or action are collected and executes each one when the specified has elapsed.
Authored by: Bit
Angular vs React: A Component -Based Battle
In the modern world of web development we can see how, during the years, new patterns and trends in technologies have emerged. The increasing use of the Internet has made web applications more...
Authored by: JavaScript in Plain English
Using Angular ActivatedRoute to Send Objects and Arrays in Ionic
Like you, I am sometimes nostalgic on ye olde Ionic 2/3 where it was very easy to send objects and arrays between pages using a magical invention called NavParams. This has been (controversially, in my opinion) deprecated in Ionic 4+ in favor of Angular Routers.
Authored by: Razman Sarit
React
4 Ways to Reuse React Components
Useful methods for sharing components between React apps. Resuing React components is a great way to improve on your dev workflow. It helps in keeping your codebase clean of duplications, in speeding delivery times, and in keeping a consistent UI for your users across pages and apps.
Authored by: Bit
React Native Modal Tutorial with Examples - positronX.io
A comprehensive step by step tutorial on how to work with React Native Modal component. In this tutorial, we will learn how to show essential content such as text and image with Modal popup in React Native application. A Modal is a pre-defined component that helps in creating the modal popup to React Native.
Authored by: Digamber Singh
Integrating web workers in a React app with Comlink Blog
Google's Comlink library makes interacting with web workers much more elegant. Explore a real-world use case by integrating a web worker into a React app.
Authored by: LogRocket
Writing Scalable Code with Shared React Components
How to build scalable and maintainable React Apps. In this post, I'll demonstrate how to turn your frontend code from a monolith into a modular composition of independent components that are versioned individually, shared on bit.dev and collaborated on from anywhere. Sharing and versioning components as independent pieces of code are a way for simpler maintenance and greater scalability.
Authored by: Bit
Aurelia
Solace and Aurelia Battleship Game Course
Today, I'm excited to introduce you to Thomas Kunnumpurath, from Solace. Solace has put together a free course on creating a game of Battleship with Aurelia (TypeScript), Spring Cloud Stream (Java), and Solace PubSub+. It's a great way to learn the basics of messaging and event-driven architecture with the Aurelia framework.
Authored by: Aurelia
Vue
Charting with Vue: A comparison Blog
In this tutorial, you'll learn how to create stunning data visuals using chart engines vue-chartjs, vue-plotley, and vue-apexcharts with Vue.js.
Authored by: LogRocket
Getting Smart with Vue Form Validation - Vuelidate Tutorial
Vue Form Validation is an essential part of any app. You need to be sure that people are submitting data that your app can work with! Whether it's ensuring users have a strong password or checking that a message isn't too long, input validation is everywhere in web apps.
Authored by: matt maribojoc 🇵🇭
Advanced localization techniques in Vue.js Blog
Localization is a great way to make your web application more accessible to a wider audience and provide a better user experience. For businesses in particular, localization helps strengthen global presence, thus creating potential for greater revenue. Let's look at some techniques to implement localization in Vue.js.
Authored by: LogRocket
Node.js
NodeOS: disgrace upon the JS community
The number and variety of npm packages were always a topic for irony and ridicule. If you are not getting what I am talking about, check out the is-odd npm package with 76 million downloads...
Authored by: JavaScript in Plain English
Node: Is it a Language or a Framework?
Even after years of experience in JavaScript, many developers get confused about the basic NodeJS question. What is NodeJS? Is it a Framework or a Language? You are also here to know this basic understanding of NodeJS. So let's dig up some jar of knowledge and see what is heck in NodeJS.
Authored by: Prateek Kumar Singh
How to enable ES6 (and beyond) syntax with Node and Express
Have you ever tried to write front-end apps using ES6 syntax, but then when you decided to learn back-end development with Node.js and Express, you realized that you can't use stuff like import from andexport default? If so, you came to the right place!
Authored by: Jonathan Cunanan
Node: Call Stack Explained
About one year ago, I was a Senior JavaScript developer as my portfolio stated. But in a lonely time when I ask my self how JavaScript works or what is JavaScript. I wasn't entirely sure.
Authored by: Prateek Kumar Singh
Libraries and Tools
Why we still need to use state management libraries in React?
Why using just React's state mechanism is a bad idea Now that we have hooks and the Context API , it may seem appealing to forgo a state management library when starting a new project in React - should we give in to the temptation? Let's find out by looking at a simple shopping...
Authored by: JavaScript in Plain English
Top free JavaScript User Authentication Libraries
We are keen on security: authentication is an important issue when creating a dynamic web applicationAuthentication is for identifying users... | Web design web development news, website design and online marketing. Web design, development, javascript, angular, react, vue, php, SEO, SEM, web hosting, e-commerce, website development and search engine optimization, social media management.
Authored by: MA-NO WebDesign&Dev
11 Recommended Tools for Frontend Developers
A list of my favorite frontend tools. As you gain experience as a front end developer, you realize that using the right set of tools is often crucial in increasing the efficiency in your work and getting things done faster.
Authored by: Bit
9 Vue Input Libraries to Power Up Your Forms
A poorly designed form can turn visitors away from your site. Luckily for Vue developers, there are tons of Vue input libraries available to make prettying up your forms a breeze. There are several benefits to having an intuitive and user-friendly form, including Higher conversion rate Better user experience
Authored by: matt maribojoc 🇵🇭
Kubernetes toolbox Blog
Managing software infrastructure is always a challenge. Kubernetes (also known as K8s) is an excellent platform that leverages containers to manage all stages of your project pipeline. It was originally an internal project at Google called Borg before it was made open source.
Authored by: LogRocket
Frontend Development with Docker: A simplified guide
Docker is a great tool that helps developers build, deploy, and run applications more efficiently in a standardized way. For frontend applications, we only need the Docker image for local development, because we deploy it to a static hosting provider. In this case, can we live without a custom Docker image?
Authored by: Soós Gábor
Testing
Testing Node serverless applications - AWS Lambda functions Blog
We all know that tests are critical to writing maintainable, high-quality code. It's never easy to implement them, but it's an important part of the development process. The rise of serverless architecture has introduced new challenges. We now have functions that run in an environment we don't control.
Authored by: LogRocket
Functional Programming
JavaScript Functions - All You Need to Know Pt.3
In the world of JavaScript functions there are topics that may sound more difficult than they are. This article will help you understand them. Learn about advanced topic such as recursions, immediately-invoked functions, callbacks and also the latest arrival, arrow functions. JavaScript Functions - All You Need to Know Part 1.
Authored by: Alex Devero
Other
What's new in Next.js 9.2? Blog
The Next.js user base is expanding, and the latest version, Next.js 9.2, shipped with myriad new features designed to optimize the developer experience.
Authored by: LogRocket