Skip to main content
Fresh Article

How to Create an Animated Countdown Timer With HTML, CSS and JavaScript

Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more straightforward to make one than you might think and only requires the trifecta of HTML, CSS and JavaScript. Let’s make one together!… Read article

Link

Get Moving (or not) with CSS Motion Path

Snippet

Test if String Starts With Certain Characters in PHP

We can test if a certain string is the exact start of another string:

<?php 
  
function startsWith($string, $startString) { 
  $len = strlen($startString); 
  return (substr($string, 0, $len) === $startString); 
} 

// usage
echo startsWith("cat", "c"); // true
echo startsWith("dog", "x"); // false

?

Testing the position in the string, making sure it's at 0, works too:

function startsWith($string, $startString) {
  return strpos($string, $startString) === 0;
}
Read article
Link

Full Stack Panic

Article

Innovation Can’t Keep the Web Fast

Every so often, the fruits of innovation bear fruit in the form of improvements to the foundational layers of the web. In 2015, HTTP/2 became a published standard in an effort to update an aging protocol. This was was both necessary and overdue, as HTTP/1 rendered web performance as an arcane sort of discipline in the form of strange workarounds of its limitations. Though HTTP/2 proliferation isn’t absolute — and there are kinks yet to be worked out — I … Read article

Link

Smaller HTML Payloads with Service Workers

Link

Lightning-Fast Web Performance

Article

Sticky Table of Contents with Scrolling Active States

Say you have a two-column layout: a main column with content. Say it has a lot of content, with sections that requires scrolling. And let's toss in a sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that content in the main column. A fairly common pattern for documentation.

Bramus Van Damme has a nice tutorial on all this, starting from semantic markup, implementing most of the … Read article

Link

“resize: none;” on textareas is bad UX

Article

Understanding Immutability in JavaScript

If you haven’t worked with immutability in JavaScript before, you might find it easy to confuse it with assigning a variable to a new value, or reassignment. While it’s possible to reassign variables and values declared using let or var, you'll begin to run into issues when you try that with const.

Say we assign the value Kingsley to a variable called firstName:

let firstName = "Kingsley";

We can reassign a new value to the same variable,

firstName = 
Read article
Article

Uses This

A little interview with me over on Uses This. I'll skip the intro since you know who I am, but I'll republish the rest here.… Read article

Keep browsing in the archives

Monthly Mixup

Article

Leveling up with React: React Router

Article

Making the Move from jQuery to Vue

Snippet

Get URL and URL Parts in JavaScript

Monthly Sponsor
Thanks, Frontend Masters!