Author
Mateusz Rybczonek
1 Comment
Join Conversation
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
Sponsored by
Frontend Masters
We just linked up the idea that offset-path can be cleverly used to set type on a path. Don't miss Michelle Barker's experimentation either, with drawing paths or animating text along a path.
Dan Wilson has also been following this tech for quite a while and points out why the sudden surge of interest in this:
… Read articleWith the release of Firefox 72 on January 7, 2020, CSS Motion Path is now in Firefox, new Edge (slated for a
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 A new podcast from Sean Fioritto inspired by Joel Califa's term "Full Stack Anxiety".
... the little voice in your head says ... “I should know all of this. Do I even know what I'm doing?” Why do web developers the world over feel like this?
There is an episode with Joel talking about it as well as other interesting angles like an episode with psychologist Dr. Sherry Walling. … Read article
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
Short story: Philip Walton has a clever idea for using service workers to cache the top and bottom of HTML files, reducing a lot of network weight.
Longer thoughts: When you're building a really simple website, you can get away with literally writing raw HTML. It doesn't take long to need a bit more abstraction than that. Even if you're building a three-page site, that's three HTML files, and your programmer's mind will be looking for ways to not repeat … Read article
If you're interested in leveling up your knowledge and skill of web performance, you can't do better than learning directly from Scott Jehl.… Read article
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
… Read articleSometimes you need to type a long reply that consists of many paragraphs and wrapping that text within a tiny textarea box makes it hard to understand and to follow as you type. There were many times when I had to write that text within Notepad++ for example and then just paste the whole reply in that small textarea. I admit I also opened the DevTools to override the
resize: nonedeclaration but that’s not really a
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 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
Take your JavaScript to the next level and find out what it’s fully capable of with the JavaScript path on Frontend Masters.