← Back toLatest

Written in 2023 ⏳

Dec

Create a split-screen layout

Display grid items in the same area

Align items in a grid

Center align the main content and left align the sidebar

Create a holy grail layout

Create a sticky footer

Create a vertical timeline

Create an event calendar

Create a Gantt chart

Create a macOS calculator layout

Remove empty cells from the calendar

Position items in a grid

Build a calendar

Create a horizontal divider with centered text

Synchronize scroll positions between two elements

Check if an element has overflow

Check if an element has CSS overflow

Wait for the next event loop

setTimeout(0) vs requestAnimationFrame

Check if two DOMRects intersect

Check if a given DOMRect is contained within another DOMRect

Compare two DOMRects for size and position match

Get the center point of a DOMRect

Calculate the midpoint of a given range

Get the intersection range between two ranges

Display a deprecation message in a React component

Use forwardRef with a higher-order component

Swap items in a sortable list

Display a placeholder in a sortable list

Create a sortable list

Build a drop zone for file uploads

Nov

Read the content of the dropped file

Preview images before uploading them

Build a drop file indicator

Create your own ghost element

Customize the appearance of a ghost element

An introduction to HTML 5 drag and drop

Use a custom drag handle

Use vertical and horizontal lines as guides for element positioning

Create a linear gauge with discrete values

Create a time picker

Snap a draggable element to a grid

Create a radial progress bar

Drag an element along a circle

Add annotations to an image

Take a screenshot of a portion of an element

Crop a portion of an image

Select a portion of an element by clicking and dragging

Build a magnifying glass for images

Craft an image cropper

Convert an LCH color to a LAB color

Convert a LAB color to an LCH color

Build a color picker

Create an RGB to HEX color converter

Resize columns in a table

Constrain a draggable element within its container

Make a given element resizable

Build a custom scrollbar

Scroll by dragging

Create an image comparison slider

Create a drawer

Oct

Create resizable split views

Create a range slider

Create a custom draggable hook

Make an element draggable on touchscreen devices

Make a given element draggable

Build a tooltip component

Pass a ref to a child component using forwardRef()

Expose methods of a component using useImperativeHandle()

Merge different refs

Make an element draggable

Create a custom hook returning a callback ref

Save the element passed to a callback ref as a state

Pass a ref to a custom hook

Detect whether an element is in view

Build your own drawing board

Implement inline input suggestions

Change the favicon dynamically based on user's color scheme preference

Animate the removal or addition of an item in a list

Save the previous value of a variable

Persist values between renders

Drag and drop items within a list

Reference an element with React's useRef() hook

Carousel slider

Navigate to a specific item in a carousel slider

Pass refs to child components using the function as a child pattern

Implement a basic container query with callback refs

Use callback refs to access individual elements in a list

Store a reference with callback refs

Access the methods of class components

Create a reference using React.createRef()

Access a component's underlying DOM node with findDOMNode()

ele.setAttribute vs ele.attribute

HTML attributes vs DOM properties

aria-hidden vs hidden

Convert text links in a text area to clickable links

Copy variables from the browser console to the clipboard

Build a simple code editor

Remove indentation in a text area using the Shift+Tab key combination

innerText vs textContent

Truncate the content of an element

Show a toolbar after selecting text in a text area

Copy the content of an element to your clipboard

Sep

Make a text area fit its content automatically

Quickly insert alternate characters while typing

Zebra-like background

Provide a preview of the suggestion as users type in a text area

Add autocomplete to your text area

Linear scale of a number between two ranges

Highlight the current line in a text area

Create your own custom cursor in a text area

Mirror a text area for improving user experience

Calculate the coordinates of the current cursor in a text area

Jump to the beginning or end of the current line in a text area

Display the line numbers in a text area

Select a given line in a text area

Count how many lines a given string takes up in a text area

Highlight keywords in a text area

Calculate the reading time of a webpage

createDocumentFragment vs createElement

Enter full-screen mode

Make an element take up the entire page

Dynamically update CSS root variables

Create a custom cursor

Sanitize HTML strings

Insert HTML at the current position of a contentEditable element

Indent content in a text area using the Tab key

Insert text into a text area at the current position

Move the cursor to the end of a contentEditable element

Detect if users open another tab of the current page

Build a spin input

Reading progress indicator

Get or set the cursor position in a text field

Get or set the cursor position in a contentEditable element

Build an OTP input field

Animate the caret in an input field

alt vs aria-label

Display a modal when users leave website

Display a confirm modal when closing the browser

resize event vs ResizeObserver

Waiting for an element to become available

Avoid shifting layout when opening a modal

Automatically resize an iframe when its content height changes

Prevent scrolling behind a fixed header

Controlled vs uncontrolled modes

Controlled vs uncontrolled components

Stateless vs stateful components

React.useEffect() vs React.useLayoutEffect()

React.createElement() vs React.cloneElement()

NodeIterator vs TreeWalker

React.useState() vs React.useReducer()

Microtasks vs macrotasks

Animations vs transitions

Avoid using default exports

Flipping number

setInterval() vs setTimeout() vs setTimeout(0)

Call stack vs task queue

Debouncing vs throttling

Anonymous vs closure functions

HTML entities vs Unicode characters

Dynamic vs static NodeList

children vs childNodes

React.createElement() vs JSX

Make a textarea auto-expand

Scroll down indicator

Blinking cursor

font-size vs line-height

Deep compare vs shallow compare

cookie vs localStorage vs sessionStorage

Show an addition toolbar after users selects text

Check if users click outside of selected text

ReactNode vs ReactElement

JavaScript events vs synthetic React events

ceil vs floor vs round

Typing indicator

Aug

pseudo-classes vs pseudo-elements

Object constructor function vs object literals

eval() vs new Function()

__proto__ vs prototype

dev vs devDependencies vs peerDependencies in package.json

Deep copy vs shallow copy

Get the bounding rectangle of a text node

Set Git configuration conditionally

Grid lines background

object.property vs Object.defineProperty()

^a.b.c vs ~a.b.c in package.json file

Select the direct children of an element

Pass specified environments to Webpack

Object.freeze() vs Object.seal()

Object.assign() vs Object spread operator

Include properties conditionally

Highlighting target element

Add a special message when users copy text

Grid without double borders

Center align one and left align the other

Customer logos marquee

Multiple awaits vs Promise.all()

isNaN vs Number.isNaN

preload vs prefetch

blur vs focusOut

append vs appendChild

Skeleton loading

Readonly<T[]> vs ReadOnlyArray<T>

K keyof T vs K extends keyof T

standard event handler vs event delegation

default parameters vs OR operator

Pulse animation

Calculate the distance to the bottom of a page

Generate a weighted random number in given range

Apr

Capitalize a string

Feb

Returns an object with unique values by key

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn