Hashnode·6yAn easy React 17 + TypeScript + Tailwind CSS + NextJS setup
NextJS is becoming a de facto framework for modern web development. In this article we will build a starter repo that you can use for every new project. We'll add the TypeScript packages first, so later we can immediately add the typings. First, we'll need to install the tailwindcss package. Then we'll create a new file for the types file.
Hashnode·6y24 modern ES6 code snippets to solve practical JS problems
Here I have hand-picked some of the most useful code snippets from 30 seconds of code. It's an awesome resource, go ahead and show it some love. In this article I tried to sort them based on their practical use, answering common questions you may face in your project.
daily.dev·6yStop Using console.log()!
console.log() forces you to select which information to log before the debugging consciously. What you display in the first place is not sufficient or even completely irrelevant sometimes. You usually don’t yet have any idea of what’s going on. As a workaround, you will need to either clone the information or serialize snapshots of it.
Hashnode·6yFunctional vs Object-Oriented Programming
Programming paradigms are approaches in which code is organized to implement solutions in a program. In the world of JavaScript, there are typically 2 programming paradigm: Functional and Object-Oriented Programming (OOP) Let's take a look at the OOP approach and illustrate an example.
DEV·6y5 Javascript Projects You Should Build as Junior Frontend Developer
When looking for a first job as a Junior Front-end developer it's very hard to show your experience as a programmer. Your projects used as a playground for learning new skills will rarely also offer good code quality. Here is a list of project examples you could build to show off your skills.
Hashnode·6yI can't write a JavaScript for loop, and it does not matter
I've been using JavaScript daily for 7 years, and I'm not able to remember the syntax of a JavaScript for loop. Despite this fact, I'm a rather successful freelance developer. Recently I worked for Facebook, as the Docusaurus lead maintainer, writing the code for the framework that powers Babel, Prettier, Jest, ReactNative...
Hashnode·6yChrome find unused code 🔎
Chrome has a Code Coverage tool. It shows you what CSS and JavaScript is being used on a page. You can run a coverage by re-indexing the page. This gives you a high-level overview of the scripts and css loaded. You could then use another tool to remove these lines from your code.
Hashnode·6yES6 - Higher-Order Functions
In JavaScript, functions are treated as 'First Class' citizens. A function is fundamentally an object. We can assign properties to a function like 'Namaste' or 'Hello' The forEach function was introduced with ES5 as Array.prototype.forEach and with ES6, it's simply referenced as. Array.map. The map function returns a function applied to every element of the original array.
The Startup·6yData Visualization With React & Chart.js
This article helps you to plot & understand some basic visualization of the dummy data with React and Chart.js. React is an open-source JavaScript library, maintained by Facebook for building user interfaces or UI components. Chart.JS is a free open- source JavaScript library for data visualization, which supports 8 chart types.
daily.dev·6y🔥 What's Hot in Web Development? — Weekly Picks #150
This week we have brilliant articles about web development and even some inspirational resources. As always, all posts were ranked by daily.dev community. Shout out to all the authors.So, let's get it started. Let's get to the bottom of this week's list.
Medium·6y24 modern ES6 code snippets to solve practical JS problems
Useful snippets to keep in a file for quick reference. 24 Modern ES6 Code Snippets to Solve Practical JavaScript Problems. Use these snippets to help you solve common problems. Use this article to learn more about how to use these snippets in your own code.
Bits and Pieces·6yTop 5 JavaScript Frameworks: Past, Present and Future
Each year, the tech industry evolves at a fast pace. A technology trend that sprang up last year may not even exist this year. It is vital to know the industry trends. I will be providing a comparison of a few JavaScript frameworks based on the following facts. How the leading JavaScript Frameworks and Libraries changed over time and trending towards the future.
Medium·6yThe Difference of “var” vs “let” vs “const” in Javascript
Let and const are two new features of ES6, which came out in 2015. Before that, var was the only way to declare a variable. var var can do so many things since the variable declared under var can be scoped globally and locally. Hoisting is a JS way to call a variable/function on top of the scope. With the convenience of scoping and updating a var variable, it is easy to spot when writing small programs.
Hashnode·6y#SadJavaScript Comics Are Now Open Source!
I thought this would be a fun and cute way to talk about some of the parts of JavaScript that people often lulz at. The flow of the #SadJavaScript comic has two coffee cups are laughing at JavaScript's quirks. The next panel reveals a sad JavaScript, trying to explain how they are misunderstood.
Hashnode·6yEpic React: Javascript You Need To Know For React
This is the second article of the My Review of Kent C. Dodds's EpicReact.Dev series. In the previous article, you looked at the different topics that are going to be covered in EpicRe.Dev workshop. In this article, I am going to explain the basic javascript concepts that you need to know before you start learning React.
Hashnode·6yWhy you should choose to learn 'React'?
React is one of the most popular JavaScript frameworks ever. It is possible to build React components by composing them together. The idea of having the power to create a UI by combining any one or more components makes it incredibly powerful. It follows a Unidirectional Data Flow concept which means that data has one, and only one, way to be transferred.
Hashnode·6yAsync/Await in JavaScript Explained
With the introduction of Async/Await in ES7, the code looks and behaves more like a synchronous code. 'Async' is basically syntax sugar built on top of promises. The 'await' tells the JavaScript engine to ensure that the execution is paused until the function completes execution and returns a promise.
Hashnode·6yHow To Use Async/Await in JavaScript
Async/await is a new way of writing asynchronous code, besides promises and callbacks. The most significant benefit is that it makes the code more readable and cleaner by removing the promise chains. The code snippets below are basic, and they do not handle errors. Their sole purpose is to show the difference between Promises and Async/AWait when using conditionals.
Hashnode·6yVanilla JavaScript palindrome checker in 3 lines
A palindrome is a word or sentence like mom that you can reverse, and it's still mom. To check for palindromes in JavaScript we need to convert our input string to lowercase and remove all whitespace. We we split every character and reverse the array, then we rejoin that array in reversed order. The last step is to check if they are equal.
JavaScript Weekly·6yNode 15, React 17, and a cool JavaScript demo
We don't ever get to use all of the great links we have because we don't want to overwhelm you each week. We thought it'd be neat to feature some of them in case the titles jump out at you – so we'll be including this special section from time to time for you to skim through. Enjoy!
Hashnode·6yDemystifying var, let and const in JavaScript
With the release of ES6, two new ways of variable declaration were introduced in JavaScript. These new ways use the keywords ‘let’ and ‘const’ These were basically improvements to the old way of declaring variables using ‘var’ To understand each of these 3 ways, we need to understand two important concepts in JavaScript — Scope and Hoisting.
The Startup·6yThe Difference of “var” vs “let” vs “const” in Javascript
Let and const are two new features of ES6, which came out in 2015. Before that, var was the only way to declare a variable. var var can do so many things since the variable declared under var can be scoped globally and locally. Hoisting is a JS way to call a variable/function on top of the scope. With the convenience of scoping and updating a var variable, it is easy to spot when writing small programs.
Medium·6ySolving a stupid JavaScript problem.
Alexander Troup explains how to solve a stupid JavaScript problem. He uses Operator Precedence and Associativity to solve the problem. Troup also streamed the process of solving this problem on Twitch.com. The full article can be found at: http://www.joshtroup.com/solve-a-stupid-js-problem.