Hashnode·5yThe best approach to lazy load images for maximum performance
Native lazy loading for images and iframes was released for Chrome and other major browsers. Image lazy loading is one of the more popular approaches of optimizing websites due to the relatively easy implementation and large performance gain. Around 73% of currently used browsers support this feature which is not bad but we don't want to make the website image content inaccessible and unusable to 27% of potential users.
DevDojo·5yModern Javascript - III
Every year, Javascript update adds new features. ES2021 (also known as ES12) is planned to be released in June this year. New features that are added each year go through a four-stage process. All the features listed below have already reached the last stage and are very much ready for release.
Hashnode·5yHow I Built My Perfect Score Portfolio Website
I recently published the fourth version of my portfolio jemimaabu.com. I've always built my portfolios from scratch with HTML and CSS, using as little JavaScript dependency as possible. With this version, I tried to make the code as performant and accessible as possible but still have an interactive site. This article will be about how I managed to achieve that.
daily.dev·5yWhy I moved from styled-components to Tailwind CSS and what's the future of CSS-in-JS?
Styled-components is an open-source JS library that uses the power of JavaScript to create styled React components easily. Tailwind CSS follows the Atomic CSS methodology, where every class sets only one styling rule. The only difference is that you write your CSS in your JS files or even JSX.
JavaScript in Plain English·5y50 VS Code Extensions That Will Make You a Better Developer
50 VS Code Extensions That Will Make You a Better Developer. The extensions in the VS code run in their own process and are lazily loaded. There are plenty of extensions available and can be browsed in the visual studio market place. Here is the curated list of the most useful extensions that help developers to increase their productivity.
Hashnode·5y4 JavaScript ES2018 Features You Should Know
The ES2018 specification introduced four new features. These features are asynchronous iteration, rest/spread properties, Promise.prototype.finally() and regular expression improvements. This tutorial will help you learn how these features work and how to use them. Asynchronous iteration is one of the lesser discussed ES2018 features. With asynchronous iteration we get asynchronous iterables and iterators.
DevDojo·5yModern Javascript
ECMAScript 2015 (also known as ES6) is a major update to Javascript since ES5, which was standardized in 2009. Since then, Javascript has come up with incremental updates every year. These significant updates from ES6 and beyond are commonly referred to as Modern Javascript.
freeCodeCamp·5yReact Tutorial – Learn React and JavaScript Programming Basics with Example Code
TAPAS ADHIKARY. React Tutorial – Learn React and JavaScript Programming Basics with Example Code. TAPAS. Adhikary. React tutorial – learn React andJavaScript Programming basics with Example code. T APAS. ADHikary, React Tutorial. React tutorials – Learnreact and JavaScript programming basics with example code.
Medium·5yDependency injection in Javascript
Dependency injection (DI) is a programming pattern in which a dependency is passed using the parameters instead of instantiating it within the function or class. DI enables creating isolated individual components within application code and makes it easy to switch those dependencies in the future as the requirement changes. This article explores dependency injection in Javascript using higher-order functions.
Hashnode·5yComplete web development roadmap for newbies
This list consists of beginner languages and tools. Advanced topics are not covered. HTML is by far the easiest to learn. JavaScript is a multi-paradigm, high-level language which has evolved to become one of the most popular languages not just in web development but in many other fields.
Hashnode·5yUltimate React Resources
React.js resources include blog posts, free e-books, Github Repos with curated lists, practical implementation of React.js in the real world with working code. I have also included recommended free and paid courses by the React team and a React community you can join.
DEV·5y5 daily resources for Web Developers
This week i want to share some tools i use on pretty often (almost daily) while working as a Web Developer. My top tools include Unsplash, Dribbble, Carbon, Hashnode and Typescript. If you have other resources that you use on a daily basis / pretty often please feel free to drop it in the comments.
DevDojo·5yHow to drag an element using javascript
Post Image Generator lets you drag and move HTML elements inside of another element. To demonstrate how this works, we will first need to add a container with a relative position, and an absolute positioned box that we want to move inside the container. We will then show you the full javascript code to apply this functionality, and then we will break it apart.
CSS-Tricks·5yA Super Flexible CSS Carousel, Enhanced With JavaScript Navigation
The Easy Carousel is a simple carousel component that allows you to scroll smoothly, navigate with the dynamic buttons, and is responsive. We’re going to be working with quite a bit of JavaScript, React and the DOM API from here on out. Let’s start by bootstrapping a simple React application with styled-components tossed in for styling.
SitePoint·5y9 Best JavaScript and TypeScript ORMs for 2021
Object relational mapping (ORM) makes it possible for you to write queries in the language of your choice. An ORM is beneficial for medium- to large-scale projects that source data from hundreds of database tables. Using an ORM library to build your data layer helps ensure that the database will always remain in a consistent state.
freeCodeCamp·5yCreate Pixel Effects with JavaScript and HTML Canvas
Beau Carnes is the author of the book, "The Secret Life of Beau Carnes" The book is based on Carnes' experiences in South Africa in the 1970s and 1980s. Carnes was born and raised in the town of Carnes, South Africa. He is the son of former South African Prime Minister Jacques Carnes.
Hashnode·5yUpcoming Interesting JavaScript ES2021 (ES12) Features to Look for
The ES2021 (ES12) will be released in the middle of 2021. In this tutorial, you will learn about the five most interesting features from this specification. They are String.prototype.replaceAll() , numeric separators, logical assignment operators, Promise.any() , WeakRef and Finalizers.
Hashnode·5yUseful Javascript patterns: Revealing Module Pattern
The Revealing Module Pattern is used by JavaScript developers to keep their codebase clean. It prevents malicious JavaScript manipulation from the browser console. It can be really useful for both performance and security. The pattern can be used to create an interface that will not be accessed outside the scope of a function.
Bits and Pieces·5y5 Different Tools for Frontend Monitoring
5 Different tools to monitor the web application frontends live in the user’s browser. Avoiding runtime errors using frontend monitoring tools is a must. Isuri Devindi compares the five tools to find the best one for you. The tools are provided by Microsoft using the Application Insights SDK for Azure Monitor.
SitePoint·5yBeyond Console.log() – Level up Your Debugging Skills
A common developer workflow is to write code in an editor, save it, then switch to the browser and load the product to see if everything works. We only use a small percentage of the tools at our disposal, and we may miss out on opportunities to work better. We’ll look at a few features of freely available developer tools you probably use but don’t know about.
Hashnode·5yReact Clean Code for Beginners
React developers often use code patterns that are commonly used by Front-End developers, especially React developers. In this post, I will share with all of you 4 tips to write a clean (and better) code.ESLint and Prettier are two tools that can help you write React best practices.
Typescript·5yAnnouncing the New TypeScript Handbook
The TypeScript Handbook is out of beta and is now our website’s primary resource for learning TypeScript. The handbook aims to help engineers understand the way TypeScript builds on JavaScript. The new handbook project started out in 2018, with an additional set of constraints applied to how we teach.