Latest Tips
-
Check the reason make your page re-render by changed props and state
The approach of the post is we will console.log at componentDidUpdate. Find out the reason make our component re-render (specifically is look for those states and props changed).
-
What is the JavaScript ternary operator?
The ternary operator is a shortcut for the if statement.
-
What is the promise executor?
The method received as an argument for the promise.
-
What is a void operator?
The void operator returns an undefined value from an evaluated expression
-
What is a spread operator?
The spread operator is a useful syntax for manipulating arrays and objects.
-
What is the difference between Target and currentTarget in the event context?
target refers to the element that triggers an event. currentTarget to the element that the event listener is listening on.
-
What is the Temporal Dead Zone?
Temporal Dead Zone is a JavaScript behavior while using variables declared using
let
andconst
keywords. -
What is a currying function?
A currying function is a function that takes multiple arguments and turns it into a sequence of functions having only one argument at a time.
-
What is Functional Inheritance?
Functional inheritance is the process of inheriting features by applying an augmenting function to an object instance.
-
What is Functional Inheritance?
Functional inheritance is the process of inheriting features by applying an augmenting function to an object instance.
-
Creating immutable objects in native JavaScript
With the latest versions of JavaScript it’s possible to create immutable objects. I’ll walk you through how to do it in three different ways.
-
Hash maps without side effects
Create hash maps(without side effects) using
Object.create(null)
. -
Looping over arrays
There’s a few methods for looping over arrays in Javascript. We’ll start with the classical ones and move towards additions made to the standard.
-
Immutable structures and cloning
Object cloning is a tricky, full of edge-cases, endeavor. The reason is simple enough. Objects maintain internal state, and that is much abused. There are countless techniques, or better phrased, countless derivations of the same technique.
-
Closures inside loops
Closure in a loop is an interesting topic and this is the tip to be a master of it
-
Upping Performance by Appending/Keying
React uses a mechanism called reconciliation for efficient rendering on update.
-
Improving your Async functions with WebWorkers
JS runs in a single thread in the browser, this is the truth. In this tip I’ll show you how to unleash the full power of asynchronous processing with Web Workers.
-
Protocols for the Brave
You might have heard about the old ways gaining hype recently, and we don’t mean praying to the gods of the north. Today we’re introducing a feature found in Clojure which allows you to define interfaces for your classes.
-
Adventurers Guide to React (Part I)
So you’ve heard of this React thing, and you actually peeked at the docs, maybe even went through some of the pages. Then you suddenly came across mysterious runes that spelled somewhat along the lines of Webpack, Browserify, Yarn, Babel, NPM and yet…
-
VueJS, How VueJS makes a copy-update-replace inside the data binding.
In this tip, I will introduce an example to show you how it might conflict with other software.
-
Picking and rejecting object properties
Sometimes we need to whitelist certain attributes from an object, say we’ve got an array representation of a database table and we need to
select
just a few fields for some function. -
Enhancing React components, Composition
React is extremely flexible in terms of how you can structure your components, but this pattern will make your apps more efficient.
-
Why you should use Object.is() in equality comparison
A good solution for the looseness of equality comparisons in javascript
-
Recursion, iteration and tail calls in JS
If you’ve been on the business for some time, you have, most likely, come across the definition of recursion, for which the factorial of a given number
n! = n * n - 1 * ... * 1
is a standard example… -
State to Props maps with memory
You’ve been building your React apps with a Redux store for quite a while, yet you feel awkward when your components update so often. You’ve crafted your state thoroughly, and your architecture is such that each component gets just what it needs from…
-
Tapping for quick debugging
This little beastie here is tap. A really useful function for quick-debugging chains of function calls, anonymous functions and, actually, whatever you just want to print.
-
3 Array Hacks
Arrays are everywhere and with the new spread operators introduced in ECMAScript 6, you can do awesome things with them. In this post I will show you 3 useful tricks you can use when programming.
-
Working With Websocket Timeout
A trick to control the timeout
-
Preventing Unwanted Scopes Creation in AngularJs
In this tip I am going to show how to pass data between scopes preventing unwanted scopes created by
ng-repeat
andng-if
-
Binding objects to functions
Understanding how to use
Bind
method with objects and functions in JavaScript -
Three useful hacks
Three very useful and syntax sugar hacks to speed up your development.
-
ES6, var vs let
In this tip, I will introduce the block-scope difference between keyword var and let. Should I replace var by let? let’s take a look
-
Breaking or continuing loop in functional programming
A common task for us is iterate over a list looking for a value or values, but we can’t return from inside a loop so we will have to iterate the whole array, even if the item we search is the first in…
-
Comma operator in JS
When placed in an expression, it evaluates every expression from left to right and returns the last one.
-
Copy to Clipboard
This week I had to create a common “Copy to Clipboard” button, I’ve never created one before and I want to share how I made it.
-
Create an easy loop using an array
Sometimes, we need to loop endlessly over an array of items, like a carousel of images or an audio playlist. Here’s how to take an array and give it “looping powers”
-
How to use optional arguments in functions (with optional callback)
You can make function arguments and callback optional
-
Get File Extension
How to get the file extension more efficiently?
-
Return Values with the 'new' Operator
Understand what gets returned when using new vs. not using new.
-
State to Props maps with memory
You’ve been building your React apps with a Redux store for quite a while, yet you feel awkward when your components update so often. You’ve crafted your state thoroughly, and your architecture is such that each component gets just what it needs from…
-
DOM event listening made easy
An elegant and easy way to handle DOM events
-
Preventing Unwanted Scopes Creation in AngularJs
In this tip I am going to show how to pass data between scopes preventing unwanted scopes created by
ng-repeat
andng-if
-
Helpful Console Logging Tricks
Helpful logging techniques using coercion and conditonal breakpoints.
-
Easiest way to extract unix timestamp in JS
In Javascript you can easily get the unix timestamp
-
How to `reduce()` arrays
Some reminders about using
reduce()
-
Basics declarations
Understand and work with declarations.
-
Detect document ready in pure JS
The cross-browser way to check if the document has loaded in pure JavaScript
-
Calculate the Max/Min value from an array
Ways to use the built-in functions Math.max() and Math.min() with arrays of numbers
-
Know the passing mechanism
JavaScript technically only passes by value for both primitives and object (or reference) types. In case of reference types the reference value itself is passed by value.
-
Use destructuring in function parameters
Did you know that you can use destructuring in function parameters?
-
Preventing Unapply Attacks
Freeze the builtin prototypes.
-
Array average and median
Calculate the average and median from array values
-
Using JSON.Stringify
Create string from selected properties of JSON object.
-
Advanced Javascript Properties
How to add private properties, getters and setters to objects.
-
Flattening multidimensional Arrays in JavaScript
Three different solutions to merge multidimensional array into a single array.
-
Deduplicate an Array
How to remove duplicate elements, of different data types, from an Array.
-
Observe DOM changes in extensions
When you develop extensions to existent sites it’s not so easy to play with DOM ‘cause of modern dynamic javascript.
-
Assignment Operators
Assigning is very common. Sometimes typing becomes time consuming for us ‘Lazy programmers’. So, we can use some tricks to help us and make our code cleaner and simpler.
-
Implementing asynchronous loop
You may run into problems while implementing asynchronous loops.
-
Create array sequence `[0, 1, ..., N-1]` in one line
Compact one-liners that generate ordinal sequence arrays
-
Create array sequence `[0, 1, ..., N-1]` in one line
Compact one-liners that generate ordinal sequence arrays
-
Map() to the rescue; adding order to Object properties
An Object it is an unordered collection of properties… that means that if you are trying to save ordered data inside an Object, you have to review it because properties order in objects are not guaranteed.
-
Avoid modifying or passing `arguments` into other functions — it kills optimization
Within JavaScript functions, the variable name
arguments
lets you access all of the arguments passed to the function.arguments
is an array-like object;arguments
can be accessed using array notation, and it has the length property, but it doesn’t have many of the… -
Converting truthy/falsy values to boolean
Logical operators are a core part of JavaScript, here you can see a a way you always get a true or false no matter what was given to it.
-
Speed up recursive functions with memoization
Fibonacci sequence is very familiar to everybody. we can write the following function in 20 seconds.it works, but not efficient. it did lots of duplicate computing works, we can cache its previously computed results to speed it up.
-
Currying vs partial application
Currying and partial application are two ways of transforming a function into another function with a generally smaller arity.
-
Short circuit evaluation in JS.
Short-circuit evaluation says, the second argument is executed or evaluated only if the first argument does not suffice to determine the value of the expression, when the first argument of the AND
&&
function evaluates to false, the overall value must be false,… -
Filtering and Sorting a List of Strings
You may have a big list of names you need to filter in order to remove duplicates and sort them alphabetically.
-
Using immediately invoked function expression
Called as “Iffy” ( IIFE - immediately invoked function expression) is an anonymous function expression that is immediately invoked and has some important uses in Javascript.
-
Use === instead of ==
The
==
(or!=
) operator performs an automatic type conversion if needed. The===
(or!==
) operator will not perform any conversion. It compares the value and the type, which could be considered faster (jsPref) than==
. -
Converting to number fast way
Converting strings to numbers is extremely common. The easiest and fastest way to achieve that would be using the + operator.
-
Two ways to empty an array
In JavaScript when you want to empty an array, there are a lot ways, but this is the most performant.
-
Shuffle an Array
Fisher-Yates Shuffling it’s an algorithm to shuffle an array.
-
Return objects to enable chaining of functions
When creating functions on an object in Object Oriented Javascript, returning the object in the function will enable you to chain functions together.
-
Safe string concatenation
Suppose you have a couple of variables with unknown types and you want to concatenate them in a string. To be sure that the arithmetical operation is not be applied during concatenation, use concat
-
Truncating the fast (but risky) way
.
~~X
is usually a fasterMath.trunc(X)
, but can also make your code do nasty things. -
Node.js - Run a module if it is not `required`
In node, you can tell your program to do two different things depending on whether the code is run from
require('./something.js')
ornode something.js
. This is useful if you want to interact with one of your modules independently. -
Passing arguments to callback functions
By default you cannot pass arguments to a callback function, but you can take advantage of the closure scope in Javascript to pass arguments to callback functions.
-
Even simpler way of using `indexOf` as a contains clause
JavaScript by default does not have a contains method. And for checking existence of a substring in a string or an item in an array you may do this.
-
Fat Arrow Functions
Introduced as a new feature in ES6, fat arrow functions may come as a handy tool to write more code in fewer lines
-
Tip to measure performance of a javascript block
For quickly measuring performance of a javascript block, we can use the console functions like
console.time(label)
andconsole.timeEnd(label)
-
Pseudomandatory parameters in ES6 functions
In many programming languages the parameters of a function are by default mandatory and the developer has to explicitly define that a parameter is optional.
-
Hoisting
Understanding hoisting will help you organize your function scope.
-
Check if a property is in a Object
These are ways to check if a property is present in an object.
-
Template Strings
As of ES6, JS now has template strings as an alternative to the classic end quotes strings.
-
Converting a Node List to an Array
Here’s a quick, safe, and reusable way to convert a node list into an array of DOM elements.
-
use strict and get lazy
Strict-mode JavaScript makes it easier for the developer to write “secure” JavaScript.
-
Writing a single method for arrays and a single element
Rather than writing separate methods to handle an array and a single element parameter, write your functions so they can handle both. This is similar to how some of jQuery’s functions work (
css
will modify everything matched by the selector). -
Differences between `undefined` and `null`
Understanding the differences between
undefined
andnull
. -
Sorting strings with accented characters
Javascript has a native method sort that allows sorting arrays. Doing a simple
array.sort()
will treat each array entry as a string and sort it alphabetically. But when you try order an array of non ASCII characters you will obtain a strange result…. -
Improve Nested Conditionals
How can we improve and make a more efficient nested
if
statement in javascript? -
Keys in children components are important
The key is an attribute that you must pass to all components created dynamically from an array. It’s a unique and constant id that React uses to identify each component in the DOM and to know whether it’s a different component or the…
-
AngularJs - `$digest` vs `$apply`
JavaScript modules and build steps are getting more numerous and complicated, but what about boilerplate in new frameworks?
-
Insert item inside an Array
Inserting an item into an existing array is a daily common task. You can add elements to the end of an array using push, to the beginning using unshift, or to the middle using splice.