Another year has passed and if you’re like many web developers in the industry, you’ve probably discovered a whole slew of new front-end tools that you’ve considered incorporating into your workflow. I’m in the same boat, especially since I’m deeply involved in regularly researching what’s new in the tools landscape.
In this post, I’m going to round up (with some screenshots and demos) some of the most interesting front-end tools I’ve found that I think you’ll find useful in 2020. These aren’t necessarily the most popular tools or the hottest tools, but I think each of them is unique in their use case and deserve a little more attention. These are essentially my favorite finds of the year in front-end tools.
Detecting keystrokes with JavaScript isn’t an overly complex task, but this little utility from the team at GitHub makes it super simple.
With it you can trigger an action on an element with a keyboard shortcut.
The types of shortcuts include a key, key combo, or even key sequence. You can also have multiple shortcuts for a single action.
The JavaScript is just one declaration along with an import:
import {install} from './hotkey.js';
for (const el of document.querySelectorAll('[data-hotkey]')) {
install(el)
}
Once that code is in place, the main work is done in the HTML. Here’s a list of links that I created to display some content depending on the shortcut used:
<ul> <li><a href="https://www.codeinwp.com/#a" data-hotkey="a">Example</a></li> <li><a href="#b" data-hotkey="Control+b">Example</a></li> <li><a href="#f" data-hotkey="f,p">Example</a></li> <li><a href="#and" data-hotkey="& *">Example</a></li> <li><a href="#enter" data-hotkey="Enter">Example</a></li> </ul>
Notice the data-hotkey attributes added to each of the links. These are what enable the hotkeys for the targeted actions (in this case, triggering a :target selector via CSS). Multiple hotkeys are separated by a comma; key combinations are separated by a plus symbol; and key sequences are separated by a space.
Here’s a live demo:
See the Pen Hotkey Demo Page by Louis Lazaris
(@impressivewebs) on CodePen.
Try out each of the shortcuts and notice that the code in the JavaScript panel is minimal. Very simple to set up, once the module is imported. And as a side point here, if you have an app with multiple shortcut keys that you want to display in a modal window (as is done on Twitter, GitHub, etc.), you might want to check out QuestionMark.js, and old project of mine.
Of course, with keyboard shortcuts, you’ll want to take note of accessibility concerns so be sure to check out the repo’s README for info on that.
Embedding brief videos in web pages is common to show an action taking place. Sometimes an animated GIF is also appropriate. But GIFs tend to be distracting because they play their content automatically.
This little utility allows you to add video-like functionality to animated GIFs embedded in your HTML.
Once you include the Freezeframe.js source in your page, you need only a single JavaScript declaration:
new Freezeframe('.freezeframe', {
trigger: 'hover',
overlay: false
});
If you leave out the second argument (e.g. new Freezeframe('.freezeframe')) it will default to no play button and the animation triggers on hover. The only flaw with this is that, because it’s an animated GIF, you technically can’t “pause” it, you can only “stop” it (which means it starts again from the beginning). But usually with GIFs, this isn’t a big deal.
Here’s a demo with three different examples:
See the Pen Freezeframe.js Demo Page by Louis Lazaris
(@impressivewebs) on CodePen.
Using this tool alone, however, might not save on performance as it seems the full GIF loads behind the scenes. But I’m assuming this could be used along with a lazy load library if the GIF is off screen when the page loads.
Your go-to front-end tools should include plenty of accessibility options.
This is a Chrome extension that adds a tab to your developer tools to help you find accessibility errors and warnings related to the WCAG 2.1 Level A and AA guidelines.
Two reasons why this tool is so great:
- It integrates with your existing testing/debugging workflow inside the developer tools
- It’s made by the The Paciello Group, who are well known in the developer community for their accessibility insights
Once the extension is installed, just choose the tab in your developer tools and select “Run Tests”. The initial output will be similar to what you see in the previous screenshot. From there you can drill down to view any potential accessibility problems related to a specific feature, as shown in the next screenshot:
Notice the “Links” option on the left has the checkmark next to it. That’s what I’ve chosen to examine in this instance. This also adds an overlay on the page showing where all the selected objects are, as you can see above the developer tools on the live page.
Every year there seems to be a new animation library of sorts on the front-end tools landscape.
My pick for this year is Scene.js.
This is not one you can just pick up and work with in a matter of minutes like the others featured so far.
There’s a learning curve to get used to the API, which looks something like this:
let scene = new Scene({
".searchbox": {
"0%" : "width: 50px",
"70%": "width: 300px",
},
".line": {
"30%" : "width: 0%",
"100%": "width: 100%",
}
}, {
duration: 1,
easing: Scene.EASE_IN_OUT,
selector: true,
}).exportCSS();
scene.setTime(0);
let toggle = false;
document.querySelector(".submit").addEventListener("click", function() {
toggle = !toggle;
scene.setDirection(toggle ? "normal" : "reverse");
scene.play();
});
That’s the code for one of the examples on the home page. It’s a simple little animated search box. Here’s their CodePen demo:
See the Pen Scene.js example search box animation by Daybrush
(@daybrush) on CodePen.
Again, this won’t be an easy tool to learn quickly, but if you’re interested in trying out a new animation library with what seems to be a pretty straightforward API, this might be a good option.
The current privacy-aware online landscape could use more tools like this one. I’ve been considering options for improved commenting systems on my WordPress website for a while now and Commento looks solid.
I like the functionality of something like Disqus (upvotes/downvotes, top comments, etc.) but it has too much bloat.
I also like that WordPress comments are self-hosted by default, but they lack those extra features of Disqus. I think Commento is a step in the right direction to fix these problems.
If you are considering switching from an existing commenting platform to Commento, it is quite a bit of work from what I’ve read, so that’s a big downside.
Also, although Commento allows you to import from Disqus, you won’t be able to import the “votes” on old comments from Disqus or the avatars from the users who posted comments.
There’s also no way to import old WordPress comments into Commento unless you first export to Disqus, then import from Disqus to Commento (which can be done using a Disqus import tool when you sign up for Commento).
The final drawback is the fact that Commento is not free unless you self-host it. But when you consider the bloat and privacy issues of Disqus, the small monthly fee is worthwhile.
Although this is not solely in the front-end tools category, it’s one of my favorites on this list because of its simplicity and novelty in the way it works.
Git History allows you to view the history for any file in a public Git repo (GitHub, GitLab, or Bitbucket).
For example, let’s say you want to view the history of changes to the source file for Normalize.css. The file is located at:
https://github.com/necolas/normalize.css/blob/master/normalize.css
In order to view its history, replace github.com in the URL with github.githistory.xyz:
https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css
The output at the new URL loads up a neat, interactive way to view the file’s changes over time. Some cool animations are triggered every time you choose a history point, allowing you to see which changes took place and which user committed them.
If you’re still working in an environment where you have to do some legacy browser testing, this might be a nice little Chrome extension to add to your testing toolbox.
CSS Feature Toggles, similar to ARC Toolkit mentioned above, adds a new tab to your browser’s developer tools.
In the tab, you’ll notice a list of modern CSS features.
You can toggle these to instantly see how your page looks when a user visits the page in a browser that doesn’t support that particular feature. This is a great way to get a quick overview of how your layouts degrade in older environments.
When selecting the different features, the page will update automatically to display the changes. A site built with Flexbox, for example, will benefit from some older CSS to keep the layout sane while progressively enhancing in newer browsers.
No doubt your front-end tools workflow includes plenty of options for builds. This website is a combination of a learning site and a project generation tool for developers using (or wanting to learn how to use) webpack or Parcel, the popular asset bundlers.
Drill down into the categories on the left to choose the options you want for your build, then see the necessary files and configuration options appear in the main window.
The page is fully interactive, so you can click on any of the virtual files to view their contents, or you can hover over a selected option to view a description along with highlighted portions of the build that are relevant to that option.
Very useful both for learning and for creating new projects!
In the area of internationalization, this is an online tool that allows you to convert stylesheets from left-to-right to right-to-left, and vice-versa.
This allows you to easily create stylesheets for right-to-left (rtl) languages like Arabic and Hebrew.
Here’s a CSS example:
.example {
float: left;
text-align: left;
padding: 1px 2px 3px 4px;
margin-left: 1em;
background-position: 5% 100px;
cursor: ne-resize;
border-radius: 1px 2px;
}
The above will get converted to the following:
.example {
float: right;
text-align: right;
padding: 1px 4px 3px 2px;
margin-right: 1em;
background-position: 95% 100px;
cursor: nw-resize;
border-radius: 2px 1px;
}
Notice that the differences include not only lines like float: left and text-align: left but others like horizontal padding declarations and background-position values.
And usefully, if you want the tool to ignore a style block or a single declaration, you can use the @noflip directive:
/* @noflip */ .ignored {
float: left;
}
.not-ignored {
float: left;
/* @noflip */ background: #fff (poster-ltr.png);
}
Color Thief is really neat and fairly simple to use but is very specific in its use cases.
Basically, using this utility, you can use JavaScript to grab a color palette of anywhere from 2 to 20 colors based on a given image.
This isn’t something you’ll use on every website or app, but it’s a nice idea and apparently has been around for a while and was updated over the past year.
Using the simple API, you can grab a palette from the image with a single line:
let myPalette = colorThief.getPalette(img, 10);
From there, it’s just a matter of manipulating the array that’s returned. You can see a demo I built in CodePen below that grabs a user-entered number of colors from the image shown. The code I’m using on the array is:
myPalette.forEach(
element => colors.innerHTML += "<div class='color' style='background-color: rgb(" + element + ")'></div>"
);
I’m building the palette using <div> elements and inline styles. The colors are returned as RGB values.
See the Pen Color Thief Demo by Louis Lazaris
(@impressivewebs) on CodePen.
In the CodePen demo, I’m using a workaround to get around the cross-origin problems I ran into on CodePen, but normally you won’t need those lines (commented) in a customary environment.
It seems like every year I find a cool interactive app to add to my collection of front-end tools that helps build regular expressions, so here’s this year’s entry. And if you’re like me, you’ll take all the help you can get building these.
This one is a little odd to get your head around at first because it goes through the steps one by one, like a wizard.
When you’re done and have all conditions in place, you’re able to try different values to meet the specified conditions and the page will interactively indicate what works.
These kinds of tools are always some of my favorites because they work not only as a way to create code that would otherwise be tedious, but they help you learn the syntax too.
Front-end tools: honorable mentions
So those are, in my opinion, some of the more interesting front-end tools I’ve found that I think didn’t get enough attention over the past year. I’m sure you have your own such finds so feel free to drop them in the comments below. Meantime, here’s a final list of stuff that didn’t quite make the main list but I thought were worth mentioning:
- wehatecaptchas – A captcha alternative with no image or letter/number deciphering, not even a checkbox to “confirm I’m not a robot”
- simpleParallax – An easy way to do parallax effects with JavaScript.
- Lite YouTube Embed – Apparently 224X faster than the traditional embed code.
- Browser Default Styles – Enter any HTML element and this tool will tell you each browser’s default CSS for that element.
- Who Can Use – Enter a two-color combination and this tool will tell you which kinds of visually impaired users can use that combo for text/background.
…
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:
Layout and presentation by Karol K.
Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!
Keep reading the article at CodeinWP. The article was originally written by Louis Lazaris on 2020-01-21 06:39:41.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.