In most leagues and tournaments, beach volleyball games have a 3-set format, with each set finishing when a team reaches 21 points (or higher if they’re not yet ahead by 2). The third set (played if needed) will go up to 15 points (again, win by 2). Some leagues/tournaments will play all three sets up to 15. It depends on the venue, tournament, etc.

I rarely watch a match live, but I often pick up the live streams a few hours after they air or possibly in the following days or weeks. Even though I’m not watching the matches live, I don’t know who the winners are, so I like to go into each viewing and be surprised with the result.

Unfortunately, that’s often not possible due to YouTube’s video duration indicator on the thumbnail. Here’s an example of a match I watched this weekend:

Just looking at the video duration and the players involved, before I even watched the video, I was about 95% sure of the result. Why? Because the duration is 42:43.

I know that Andy Benesh and Miles Partain are the most dominant team on the tour right now. I also know that a single beach volleyball set usually takes about 20-30 minutes. Since this match’s sets end at 15 points, it’s definitely about 20 minutes per set.

Simply by looking at the video duration, I know two things before watching the video:

• The match lasted only two sets
• Whoever won the first set won the match

Thus, I’m almost positive the winners were Andy and Miles because of how unlikely it is that they lost in straight sets.

This means the only time I’m genuinely surprised at the result of a match is if the video duration is about 1 hour. Since the match is a best-of-three, the fact that someone wins set one won’t tell me anything about the result.

This is a clear example where the platform being used to broadcast the event is harming the user experience. Sure, it’s still fun to watch the matches — but it’s more fun to watch when you don’t know the result.

Adding to this, even in the case where a match is about one-hour in length, there’s the possibility that the ending is spoiled before it actually ends. For example, if I’m in minute 57 of a 1-hour video and Team A has match point and is ahead by 3 points, I know there’s not going to be a comeback from Team B. Due to the nature of volleyball, it is physically impossible for team Team B to score 5 or more points in less than 3 minutes.

That latter example is less concerning. It’s the thumbnail duration spoiler that is the bigger problem.

So what’s the solution? Yes, there are browser extensions that remove the progress indicator and duration, like this one. But that’s not going to help me when I do the bulk of my watching on mobile. I haven’t been able to find a setting or other way to change this on mobile (not to mention that they would have to remove the duration for all videos, including those in your recommended, subscriptions, etc).

There are a couple of ways to resolve or improve this problem:

1. YouTube could automatically remove the duration indicator from video thumbnails for all livestreamed videos that are sports, games, etc. (this could also be an optional setting for the user or even for the channel that streamed the event).

2. Events that livestream sports or games where the result can be strongly implied by the video duration could append empty livestream time to all their videos.

I don’t see YouTube changing this anytime soon, so option 2 is what I would do if I ran the AVP tour’s livestreaming production. I would leave the stream running for each game until the duration of the video reaches one hour or more (depending on the tournament). If all the AVP livestreamed videos were one hour in length or longer, that would disguise the game result and allow all viewers to experience the event as if it were live.

What I’ve described here is specific to volleyball, but a similar principle applies to all sorts of events where duration implies spoilers. Even older videos that were never livestreamed could benefit from the lack of duration and progress bar. For example, not everyone has seen the incredible and improbable 2011 World Series Game 6 in MLB. Time spoilers completely ruin a first viewing of that game, and I’m sure there are other examples.

The post YouTube’s Time-Based UX Problem for Live Sports appeared first on Impressive Webs.

We can all agree it’s ridiculous to suggest that we should ignore a modern tool that makes it exponentially easier to finish our work.

But as I’ve learned in 20+ years of writing code, there’s always going to be a drawback to using any tool that “makes life easier”. In this case, AI-based tools that use ChatGPT or some other AI-based foundation are similar to the frameworks we’ve been using for years.

There are developers who can build incredible websites with React, Angular, Vue, or Svelte. But many of those same developers couldn’t do basic DOM manipulation or build a simple Ajax-based website (or better yet, a Fetch API-based website) with pure JavaScript.

Now ChatGPT is everywhere, in almost any tool we use, ready to do all the work for us.

I can’t see this as being a good thing in the long run. I think two things can be true at once:

• It’s productive to use AI-based tools to complete our work
• It makes us dumber to use AI-based tools to complete our work

So here are my suggestions (meant for front-end developers, but the same concept applies elsewhere):

Every once in a while, when you’re not in a time constraint, write code using a blank slate. Don’t use a framework and don’t ask ChatGPT questions. Just write HTML, CSS, and JavaScript from scratch. If you don’t know how to do something, look it up online like you did back way back in 2021.

If you’re pretty sure of what feature to use (like Flexbox) but aren’t sure about how exactly to use it, look it up on MDN or another similar resource. Or find a nice tutorial that walks through all the features. I’ve done simple but interactive ones for CSS Grid and for Flexbox that you might enjoy.

When you write a piece of code, do your best to understand what every line — and even every character — is doing. If you change the code slightly, like changing a CSS value, ask yourself, Why does it break? Why does it not break? Endeavour to understand it. Don’t just move on because “it works”.

The same applies to JavaScript. MDN’s resource is, again, invaluable. So is Stack Overflow. I’ve been writing JavaScript tips in my newsletter since 2013. Every one of those tips can be found in the newsletter archives or (if you prefer) in an e-book bundle that discusses more than 300 different JavaScript and DOM features, most of which are lesser-known.

All this being said, it is true that ChatGPT itself can be used as a search engine or question/answer engine. But there’s something lacking when we go that route. The answers it gives are often too good and turn us into brainless robots who copy and paste the answers without much thought. And I’ve already had problems when using ChatGPT myself when it comes to debugging, maintaining, and updating code. It almost feels like you save time in the beginning, but lose a lot of that time later.

Ultimately, we’re all going to do what helps us finish our jobs, makes us more money, and pleases our bosses and clients. But let’s not forget about raw coding. That’s the kind of work that I believe makes us better web developers and will help us be capable in a job interview.

The post Don’t Let ChatGPT Write Your Code appeared first on Impressive Webs.

In most cases, almost all authors use the term “CSS rules” to refer to the blocks of CSS that include the selector and the CSS declarations. Is this correct?

Way back in 2010, I wrote a full article on defining CSS terms, which I still stand by today. But I’ve updated the “CSS rulesets” portion of that article, which I thought I would explain in more detail here.

According to W3C’s latest document on CSS syntax:

A style rule is a qualified rule that associates a selector list with a list of property declarations and possibly a list of nested rules. They are also called rule sets in CSS2.

So it is technically correct to refer to these chunks of CSS as “style rules”, “rules”, or “rule sets”. Interestingly, the spec uses “rule sets” (two words) whereas MDN uses “rulesets” (one word). MDN also uses “rule” as an acceptable synonym, but doesn’t seem to mention anything on “style rules”. Maybe that needs a refresh.

As the above quote from W3C indicates, it seems like the W3C considers “rule set” to be a bit of an outdated term, preferring the term “style rule” (or possibly “rule” for short). I know some authors in the past have referred to individual lines of CSS as CSS rules, but that’s not correct. The individual lines are called declarations and the entire group of lines inside the curly braces are called a declaration block. The code below, with comments, demonstrates this:

/* Everything below is a style rule (or rule set, or just rule) */
section { /* Everything between the braces is a declaration block */
  margin: 0 20px; /* This line is an individual declaration */
  color: #888; /* Another declaration */
}

Understanding these terms isn’t crucial to writing CSS code. But I think it’s important when it comes to writing articles, tutorials, and books about the topic.

In summary:

• Style rule is the preferred official term
• Rule is considered a short version of style rule
• Rule set (or ruleset) is an acceptable but possibly outdated synonym
• An individual property/value line is a declaration, not a rule

The post CSS Rules vs. CSS Rulesets appeared first on Impressive Webs.

If you’re building an app that requires a lot of user-generated content and media that needs to be processed, tagged, filtered, or otherwise manipulated in real-time, you definitely want a solution that’s fast and seamless and doesn’t get in the way of your app’s primary functionality.

Filestack is a service you’ll want to consider. Here’s what Filestack offers:

• A beautiful file uploader that’s easy to integrate into your app and connects to popular storage services
• On-the-fly image transforms and file conversion via URL parameters
• Secure and reliable content delivery
• Powerful AI-based Intelligence tagging and scanning

Let’s take a closer look at some of these features so you’ll know if Filestack is a good fit for your product’s platform.

Filestack’s File Uploader

Filestack Upload is a file uploader for your app that can drastically improve how your app handles file picker functionality. And notably:

Filestack Upload gives you the same upload technology used by internet giants without the struggle of having to maintain it.

Due to concerns with security, privacy, and performance, this is definitely the kind of app feature you don’t want to build from scratch. Having a secure and reliable service that’s easy to integrate is a huge plus for getting file upload functionality working and bug-free.

Once you’ve signed up for an account, you can choose from one of three File Picker implementations: Web, iOS, and Android. Your account will give you access to your own private API key that you can use to start integrating Filestack’s features. The file pickers increase your app’s file upload speeds by up to 3.6 times. In addition to local file uploads, the file pickers integrate with many popular services, including:

• Dropbox
• Google Drive
• OneDrive
• GitHub
• Facebook
• Instagram
• Google Photos
• Box

Filestack’s service includes something called Intelligent Ingestion that guarantees upload success 99.99% of the time.

If you’re building a web app, the Filestack docs show you how to integrate a JavaScript file picker, which is part of Filestack’s open-source SDK. You can try out a live example in the JSFiddle demo below:

Notice the easy-to-use UI, along with the integrations options shown on the left side of the file picker (Dropbox, Instagram, etc). This is just one example but the file picker is fully customizable according to your app’s needs.

If you try uploading a local image to the demo page, you can see a demonstration of the image manipulation features available to the user. These include ability to crop, rotate, and decorate the image with a simple circle background/frame.

When files are uploaded, Filestack’s CDN ensures the files are accessible on mobile or desktop, with no need to fret over file quality or any other device-specific constraints.

Filestack’s Processing Engine

Another solid feature offered by Filestack’s service is their processing engine that allows you to use the Filestack API to transform files either in real time or via custom workflows.

For example, any image that’s uploaded can be manipulated via simple changes in the file URL to make the necessary transformations in real time.

As an example files are stored in Filestack’s CDN using a URL that looks like this:

https://cdn.filestackcontent.com/pdn7PhZdT02GoYZCVYeF

Note that this example doesn’t include an API key. Your real-world examples would use the URL format shown in the image above, which includes the API key.

Once the file is live, it can then be transformed using URLs like the following:

https://cdn.filestackcontent.com/resize=width:400/pdn7PhZdT02GoYZCVYeF
https://cdn.filestackcontent.com/resize=width:500/sepia=tone:80/polaroid/pdn7PhZdT02GoYZCVYeF
https://cdn.filestackcontent.com/resize=width:500/rotate=deg:180/pdn7PhZdT02GoYZCVYeF

Note the different values used to resize, rotate, add special effects, and so forth. Filestack’s documentation covering the Processing API provides more info on what’s possible with transformations.

Notably, these on-the-fly transformations have no effect on the original image. This means you can use the API to programmatically build all the different image sizes you need for your app – which might include thumbnails, different sizes for responsive images, user-edited images, and more.

Filestack’s service includes SDKs for integrating with JavaScript, Angular, React, PHP, Ruby, Python, and Java. Whatever language you’re using, you’ll have access to callbacks, webhooks, and more for doing whatever your app requires.

Filestack’s Intelligence Technology and Workflows

One of the most powerful parts of Filestack’s service is their Intelligence engine. This technology uses state-of-the-art machine learning that allows you to automatically and programmatically organize and tag your images based on various factors.

Here are some of the features of the Intelligence engine:

• Object Recognition – Allows you to auto-tag images based on objects detected. For example, a photo with a young child playing baseball could be auto-tagged with terms like bat, ball, child, sports, etc.
• Image Sentiment – This enables you to auto-detect emotions expressed in an image (e.g. happy/sad people)
• Explicit Content Detection – Easily protect users from NSFW images and videos by filtering based on an SFW Boolean returned in the API call
• Optical Character Recognition – This powerful feature allows you to extract text from images, including from both handwritten and printed characters
• Copyright Detection – Lets you detect whether an image is copyright protected or not; if it is protected, details such as purchase link, photographer name, etc. are returned in the API call
• Video Intelligence – Uses automatic video-tagging that improves your website’s SEO

All of these intelligence features can be used as part of Filestack Workflows. This no-code feature lets you build your own streamlined content tasks to automate how uploaded files are handled. Some examples of how Workflows might be used along with Filestack Intelligence include:

• An education-related app that allows students to upload assignments in different file formats. The content is automatically scanned for viruses, plagiarism, NSFW content, and items are tagged accordingly.
• A social networking app that scans and tags posts and bio photos to filter out or tag content that’s found to be against community guidelines, infringes on copyright, contains NSFW content, etc.
• A personal finance app that allows documents to be uploaded by users. Files can be automatically converted to different formats for storage purposes. Receipts and other scanned content can be automatically converted to editable text format.

That’s just a small sampling of what’s possible. With Workflows, you can automate just about any set of tasks into a single API call for an easy-to-maintain and streamlined process.

Try Filestack’s File Uploader and More

Whether it’s the file uploader, the CDN, the Intelligence engine and more — Filestack is packed with powerful features and I was only able to scratch the surface of what’s possible in this review. The documentation is pretty extensive and might require a little patience while getting to know many of the features, but the team at Filestack will be more than happy to assist you to get up and running with any of products on the Filestack platform.

You can sign up for the free plan that allows up to 1GB of view/download bandwidth per month along with 500 uploads, 1,000 transformations, and up to 1GB storage on their CDN (your own external storage integration is no charge).

The post Filestack: A File Uploader and Powerful APIs to Deliver and Transform App Content appeared first on Impressive Webs.

I still find myself wanting disabling JavaScript on pages I visit. Sometimes it’s to test a page I’m working on, but in other instances it’s simply to visit a web page that’s not functioning correctly and I want to see if JavaScript is the culprit.

So here’s a list (that I’ll keep updated) showing you how to disable JavaScript in different browsers on desktop and mobile.

• Chrome
• Firefox
• Microsoft Edge
• Brave Browser
• Opera
• Vivaldi
• DevTools in Chromium-based Browsers
• Firefox Developer Tools
• Safari Desktop on Mac
• Safari for iOS
• Internet Explorer
• Tor Browser
• Chrome for Android
• Opera Mobile or Opera Mini
• Android Browser
• Samsung Internet Browser for Android
• DuckDuckGo Privacy Browser
• UC Browser, QQ, Baidu, KaiOS, etc.
• Firefox Mobile

Disable JavaScript in Chrome

In Google Chrome, I’m sure this setting has changed places a few times over the years, but you can always do a quick keyword search to find it.

• Click the three dots menu in the top right corner
• Choose “Settings”
• On the left-side menu click “Privacy and security”
• Choose “Site settings”
• Scroll to the bottom to the “Content” section and click “JavaScript”
• Choose the option “Don’t allow sites to use JavaScript”

As mentioned, it’s not always easy to remember exactly where this is so if you forget, just type “JavaScript” in the “Search settings” box at the top when the settings page first appears. The search will indicate that you should click on the “Site settings” option and then from there the “JavaScript” feature will be highlighted.

Disable JavaScript in Firefox

Firefox has a completely different way of doing this. If you go into the settings page via the “Tools” menu, you’ll see a search option. But typing “JavaScript” into that search field doesn’t bring up anything.

Disabling JavaScript in Firefox is done as follows:

• In the browser address bar (where you type URLs), type “about:config”
• If necessary, on the “Proceed with Caution” page, click “Accept the Risk and Continue”
• In the “Search preference name” field, type “JavaScript”
• One of the preferences will be “javascript.enabled”; double click this line

You can also filter it down even more by typing “javascript.enabled” but it’s basically the same thing, it just shows you other JavaScript-related preferences.

Disable JavaScript in Microsoft Edge

The Edge browser is now built on Chromium, so you’ll find this is similar to disabling JavaScript in Chrome. You can do a search for the keyword on the settings page, or follow these steps:

• Click the three-dots menu icon in the top right corner
• Select “Cookies and site permissions” on the left-side menu
• Scroll down a little to the “All permissions” section
• Click “JavaScript”
• Turn off the “Allowed (recommended)” toggle

From there, similar to other browsers, you can even enable or disable JavaScript on a per-site basis if necessary.

Disable JavaScript in Brave Browser

Brave is another Chromium-based browser that’s gained popularity over the last few years because of its privacy features and Brave Rewards program. In Brave you can likewise do a search for the JavaScript setting, or follow these steps:

• Click the hamburger (three-line) menu in the top right corner
• Choose “Settings”
• Click “Security and Privacy” on the left-side menu
• Click “Site and Shield Settings”
• Scroll down to the “Content” section and click “JavaScript”
• Select the option “Don’t allow sites to use Javascript”

For some reason, all these Chromium browsers spell “JavaScript” wrong in this area of the settings, using the casing “Javascript”. You’d think Brave, the browser that was founded by the guy who invented JavaScript would correct that – but apparently not.

Disable JavaScript in Opera

Opera is another browser that has moved over to Chromium, but the options and settings are a little different from the others I’ve described above.

• Click the three-line “Easy setup” menu button in the top right corner
• At the bottom of the “Easy setup” menu, click “Go to full browser settings”
• Click “Site settings”
• Scroll down to the “Content” section and choose “JavaScript”
• Select the option “Don’t allow sites to use Javascript”

Again, once you’re on the Settings page, you can do a search if you forget where the option is.

Disable JavaScript in Vivaldi

Vivaldi is a relatively new browser launched in 2016 that was co-founded by a former CEO of Opera Software, so its features are similar to pre-Chromium Opera, though it also uses Chromium as its base.

Vivaldi is a little confusing, because there doesn’t seem to be a way to access the full settings from the browser UI. For example, there’s a cog icon in the bottom left corner, and you can also access “Settings…” by clicking the Vivaldi logo in the top left corner. But neither of these can access the JavaSript setting.

To disable JavaScript in Vivaldi, do the following:

• In the address bar type “chrome://settings/content/javascript” (notice it says “chrome” not “vivaldi”)
• Choose the option “Don’t allow sites to use JavaScript”

What’s strange is if you type “vivaldi://settings/content/javascript” you won’t get the same screen. So it seems like using “chrome://” as the URL’s protocol forces Vivaldi to bring up the Chromium-based settings that aren’t directly accessible through the browser UI. As you can see in the screenshot, the URL will still redirect to “vivaldi://” but you have to type “chrome://” to get this settings page.

That being said, since this is a Chromium-based browser that includes the same DevTools as Chrome, Brave, Edge, etc., you can also disable JavScript as follows:

• Hit F12 to open the developer tools (or use “Inspect” from the context menu)
• Click the “Settings” cog icon in the top right corner of DevTools
• On the right side under “Debugger”, check the box next to “Disable JavaScript”

Disable JavaScript in DevTools in Chromium-based Browsers

In addition to the steps listed above for various Chromium-based browsers, if you’re regularly inside your browser’s developer tools, you can disable JavaScript as follows:

• Open DevTools (F12) or use the “Inspect Element” option in the right-click menu
• Click the Settings icon, the small gray cog wheel in the top right corner
• On the “Preferences” tab, find the “Debugger” section
• Check the option to “Disable JavaScript”

For a quicker way to do this, you can do the following inside DevTools:

• Use the keyboard shortcut CTRL-SHIFT-P / CMD-SHIFT-P to open the Command Palette
• Type “JavaScript”
• Click “Disable JavaScript” from the list of items that appears

You can also open the command palette by clicking the three-dots icon next to the cog icon, and choosing the “Run command” option. These options should be more or less the same on Chrome, Edge, Opera, and Brave.

Disable JavaScript in Firefox Developer Tools

In Firefox’s developer tools, you can use the following steps:

• Open Developer Tools (F12 or Inspect an element on the page)
• Click the three-dots icon in the top right corner
• Choose “Settings”
• On the right side, under “Advanced settings”, check the box next to “Disable JavaScript”

Disable JavaScript in Safari Desktop on Mac

The Safari browser for desktop is no longer available for Windows machines, but you can disable JavaScript on Safari on MacOS as follows:

• In the menu area at the top, click “Safari”
• Choose “Preferences…”
• Uncheck the option “Enable JavaScript”

I did not try this on the latest version of Safari, but I’m assuming it’s the same basic steps.

Disable JavaScript in Safari for iOS

On an iPhone, iPad, or other iOS-based device, you can disable JavaScript as follows:

• On your home screen click the “Settings” app
• In the left-side menu, scroll down and select “Safari”
• On the right pane, scroll down to the bottom and choose “Advanced”
• Tap to toggle off the “JavaScript” option

Disable JavaScript in Chrome for iOS

It seems as though there was a way to do this in the past, but from what I can tell, there is no longer a setting that allows you to disable JavaScript in Chrome on iOS.

You can find website-related settings using the following steps:

• In Chrome, tap the three-dots icon in the top right corner
• Scroll down and select “Settings”
• Scroll down and choose “Content Settings”

According to some websites, the option used to be there, but now I only see “Block Pop-ups” and “Default apps”, neither of which leads to a JavaScript setting.

Disable JavaScript in Internet Explorer

If you must for some ungodly reason use IE11 or an older version of Internet Explorer, you can disable JavaScript as follows:

• Click the cog icon in the top right corner
• If you’re using a version older than IE11, click the “Tools” menu
• Choose “Internet options”
• This brings up the Windows Internet Options dialog, which is also accessible directly through Windows control panel
• On the “Security” tab click the button “Custom level…”
• Scroll all the way down to the “Scripting” section
• Under “Active scripting” click “Disable”

As a side point, my website looks atrocious in IE11 even with JavaScript enabled, which I assume is true of many websites that now use features like Flexbox and Grid for layout.

Disable JavaScript in Tor Browser

I don’t use the Tor browser, but I have it installed and disabling JavaScript in Tor is more or less similar to how you do it in Chromium-based browsers.

• Click the three-line hamburger menu icon in the top right corner
• Choose “Settings”
• On the left-side menu click “Privacy & Security”
• Scroll down to the section called “Security”
• Under “Security Level” select the third option “Safest”

As you can see, this isn’t an option that is specifically for JavaScript but for a number of features that can cause privacy or security concerns.

Disable JavaScript in Chrome for Android

I don’t use Android, so this is based on what other websites say, but it looks to be very similar to other Chrome browsers. You can disable JavaScript on Android using the following steps:

• In the Chrome app, tap the three-dots icon in the top right corner
• Choose “Settings”
• Scroll down and tap on “Site Settings”
• Tap “JavaScript”
• Toggle the option to enable/disable JavaScript

Disable JavaScript in Opera Mobile or Opera Mini

The mobile version of Opera works similarly to other mobile browsers. You can access the settings by clicking the hamburger menu in the bottom menu.

Unfortunately, from what I can tell, there doesn’t seem to be an option to disable JavaScript in this browser. There is an option to block ads, popups, and cookie dialogs, but nothing that’s specifically to disable JavaScript.

As for Opera Mini, the old mobile browser that hasn’t been updated in a few years, technically this browser doesn’t run JavaScript on the client. Opera Mini serves static pages that are rendered on a proxy server. This means any JavaScript on the page will run on the proxy server, then you’ll get a static page with links rendered in the viewport.

Disable JavaScript in Android Browser

You can disable JavaScript on the generic browser that comes installed on Android phones as follows:

• In the browser, tap the three-dots icon in the top right corner
• Choose “Settings”
• Choose “Advanced”
• Choose “Content settings”
• Uncheck the box next to “Enable JavaScript”

These steps might differ a little depending on the age of your Android phone.

Disable JavaScript in Samsung Internet Browser for Android

The Samsung Internet browser that comes installed on Samsung Galaxy devices has about 2-3% usage worldwide. You can disable JavaScript in Samsung Internet as follows:

• Tap the hamburger menu in the bottom right corner
• Choose “Settings”
• Under “Advanced”, select “Sites and downloads”
• Under “Sites” toggle off the “Allow JavaScript” option

Disable JavaScript in DuckDuckGo Privacy Browser

DuckDuckGo, well-known for its privacy-focused search engine, has an iOS and Android app called DuckDuckGo Privacy Browser that is also slated to include a desktop version soon.

While there is a “Settings” option accessible via the three-dot icon in the top-right area of the browser, I don’t see a way to disable JavaScript there or through the system settings for the app.

Disable JavaScript in UC Browser, QQ, Baidu, KaiOS, etc.

There are browsers popular in China, India, and other areas that I have not been able to find any definitive sources or do any testing of my own on how to disable JavaScript.

If you know how to disable JavaScript in any of these browsers, feel free to post a comment. Otherwise, in most cases you should be able to track down the settings by clicking the hamburger menu or a similar icon on the browser’s UI.

Disable JavaScript in Firefox Mobile

I installed Firefox Mobile on iOS and I cannot see a way to disable JavaScript in that browser, either through the browser’s “Settings” button or through the OS’s settings for that app.

There are options to block pop-up windows, block images, and some tracking protection settings but nothing specific to disable JavaScript in Firefox Mobile.

Anything I Missed?

If there’s a browser not listed here and you know how to disable JavaScript in it, feel free to let me know in the comments and I’ll add it to the post.

You can also post any corrections since I wasn’t able to test on all these devices.

The post How to Disable JavaScript in Almost Any Browser appeared first on Impressive Webs.

If you’re building an app that requires delivering a dynamic experience based on the user’s location or other location-related data, a fast and easy-to-use Geolocation API will certainly come in handy. One such option is ipwhois.io. The service, which is free for small non-commercial projects that need fewer than 10,000 requests per month, is easy to integrate with your tech stack.

As usual, it’s always best to look at a few examples so you can see it in action. Their documentation is short and easy to follow, so I’ll demonstrate using the following example request:

http://ipwhois.app/json/52.149.246.39

Notice a few things in the above URL:

• It’s using the ipwhois.app domain, which is different from the primary domain ipwhois.io
• I’m requesting JSON data, but I could alternatively use “xml” or “csv” by adjusting the URL
• I’ve appended the IP address that I want to get info for

You can run the request as a cURL command in your terminal or visit the URL directly in your browser. Try one of the following links:

• http://ipwhois.app/json/52.149.246.39
• http://ipwhois.app/xml/52.149.246.39
• http://ipwhois.app/csv/52.149.246.39

The payload that’s returned for the JSON request looks something like this (I’ve prettified it for readability):

{
  "ip":"52.149.246.39",
  "success":true,
  "type":"IPv4",
  "continent":"North America",
  "continent_code":"NA",
  "country":"United States",
  "country_code":"US",
  "country_flag":"https:\/\/cdn.ipwhois.io\/flags\/us.svg",
  "country_capital":"Washington",
  "country_phone":"+1",
  "country_neighbours":"CA,MX,CU",
  "region":"Virginia",
  "city":"Ashburn",
  "latitude":39.0437567,
  "longitude":-77.4874416,
  "asn":"AS8075",
  "org":"Microsoft Corporation",
  "isp":"Microsoft Corporation",
  "timezone":"America\/New_York",
  "timezone_name":"Eastern Standard Time",
  "timezone_dstOffset":0,
  "timezone_gmtOffset":-18000,
  "timezone_gmt":"GMT -5:00",
  "currency":"US Dollar",
  "currency_code":"USD",
  "currency_symbol":"$",
  "currency_rates":1,
  "currency_plural":"US dollars",
  "completed_requests":15
}

For demonstration purposes in this instance, the IP I used was the IP address for DuckDuckGo. (As a side point, it’s interesting that the “org” in this payload is listed as “Microsoft Corporation”; I’m assuming this is because DuckDuckGo uses Bing as the basis for its search results as they aren’t a Microsoft-owned company.)

The above JSON payload includes a lot of info, but you can immediately see how it can be useful in your apps. Some of the bits of data you might be interested in include:

• Continent and two-letter continent code
• Country and two-letter country code
• Country phone code (e.g. +1)
• 5 different bits of time zone-related values
• 5 different bits of currency-related values

Each request also returns a success Boolean representing whether the request was successful along with an accompanying error message when the value is false.

As mentioned, there’s quite a bit of info on each request. But you don’t need to request all of it – you can limit which fields are returned by using query string parameters:

http://ipwhois.app/xml/52.149.246.39?objects=country,city,timezone,currency

The payload for the above request (which asks for XML instead of JSON) would be:

<query>
  <country>United States</country>
  <city>Ashburn</city>
  <timezone>America/New_York</timezone>
  <currency>US Dollar</currency>
</query>

The request is also available as a JSONP callback. Simply change the URL to include the callback parameter, which you can set to the name of your callback function:

http://ipwhois.app/json/52.149.246.39?objects=country,city,timezone,currency&callback=myIPInfo

The above would return the following:

myIPInfo({
  "country":"United States",
  "city":"Ashburn",
  "timezone":"America\/New_York",
  "currency":"US Dollar"
});

Lastly, you can also append a lang parameter for localization:

http://ipwhois.app/json/52.149.246.39?objects=country,continent,success,currency&lang=fr

The result:

{
  "success":true,
  "continent":"Am\u00e9rique du Nord",
  "country":"\u00c9tats-Unis",
  "currency":"US Dollar"
}

Notice for the request I used “fr” (French) as the language, so this is reflected in the data returned.

As mentioned, if you’re building something for non-commercial use that’s under 10,000 requests per month, you can use ipwhois.io free of charge. For details on commercial usage or projects that require 10,000 request or more, check out the pricing page.

ipwhois.io is a continuously reliable service – they use a neural network that analyzes dozens of sources to update their database in almost real-time. Overall, this is a solid solution for integrating IP-based geolocation data into your JavaScript, Python, PHP, or jQuery apps (there’s code examples for each in the docs).

The post A Review of ipwhois.io for Reliable Geolocation Data appeared first on Impressive Webs.

The page displays a secret message based on specific text input. Ok, that’s no big deal, right? Well this is done using pure HTML and CSS – no JavaScript. I’ve seen stuff like this before, but I thought it would be cool to break down exactly how this works. There are a few notable things happening in the code so I’ll break down each of the parts. Here’s the demo:

See the Pen
Add secret website button codes with vanilla CSS (NO JS!) by Jane (@propjockey)
on CodePen.

Just make sure, as the instruction says, that your cursor is focused inside the CodePen preview window.

Using HTML’s accesskey

As the revealed secret message points out, the demo is using HTML’s accesskey attribute. That’s a bit of a blast from the past for some of us. It’s an old feature that:

provides a hint for generating a keyboard shortcut for the current element.

This means the user can trigger focus on the targeted element using a browser- or platform-specific key combination along with the specified accesskey value (which can be any “printable” character generated by the keyboard).

You can set up an accesskey value like this:

<input accesskey="c">

MDN’s article on accesskey has a handy chart showing how the accesskey can be triggered by the user on different browsers and platforms. The most likely combination is either ALT-KEY (Windows) or CTRL-ALT-KEY (Mac) – though there are a lot of variations depending on the browser.

In Jane’s demo, the input is visually hidden but still accessible. I’ll get to more on accesskey in a moment but let’s also look at the other interesting things in the demo.

Using the pattern Attribute

The other thing that makes this trick work is the use of the pattern attribute on the hidden text field. Strangely, MDN’s article doesn’t display the browser compatibility for pattern, but the attribute seems to be safe to use. If I recall correctly, this feature was added a little later than other HTML5 forms features.

This attribute accepts a regular expression that should be matched for the form field to validate. It can be used on text, tel, email, url, password, and search inputs.

In this instance, the demo isn’t using any special regex characters to do anything fancy – it’s just straight text that’s matched.

<input accesskey="c" pattern="wow!">

But there’s no form submission going on here, so how is this form field being “validated”?

The :valid and :placeholder-shown Pseudo-classes

In order to check if the form field is valid, the demo makes use of the :valid CSS pseudo-class. So you can do something like the following to apply different styles to a form field that’s valid but hasn’t been submitted yet:

:valid {
  border: solid 1px green;
}

This will instantly place a green border on any valid form field, no need for form submission. There’s also a pseudo-class of :invalid which does the opposite. Both have good browser support, so don’t be afraid to use these.

The demo also uses the :placeholder-shown pseudo-class. This pseudo-class targets elements that are using the HTML placeholder attribute and whose placeholder value is visible (i.e. the user hasn’t inserted text to remove the placeholder value).

:placeholder-shown {
  background: white;
}

This feature isn’t important to the overall technique, but it’s part of the big selector that I’ll discuss next.

The Big Fancy CSS Selector

Once we understand those two pseudo-classes, then we can begin to grasp the big selector used in the demo:

.secret-code:not(:placeholder-shown):valid ~ * {
  --secret_code: ;
}

In addition to the :valid and :placeholder-shown pseudo-classes, the selector is using the more common :not() pseudo-class along with a sibling selector and a universal selector. That’s quite a bit to digest in a single CSS selector, but here’s what it means in plain English:

• Target all sibling elements
• Of every element with a class name of .secret-code
• That has no placeholder text showing
• That’s valid

And once we grasp that selector, then we can move on to the main CSS trick used to toggle the secret message on and off.

The --var() Space-toggle Hack

The demo is using a trick referred to as the space-toggle hack (or var-toggle hack), which Lea Verou nicely explained a year ago and apparently was first used/discovered by Ana Tudor. This trick uses CSS custom properties (i.e. CSS Variables). In fact, Jane has used it in multiple projects including CSS Mine Sweeper and a library called Augmented UI.

This technique is a way to easily toggle a set of CSS property/value pairs on a single element using a single property value.

Take note of the inline styles present on the div element in the demo:

<div style="--wow: var(--secret_code) green; color: var(--wow, black);">

The odd thing here, and the thing that makes the space-toggle hack work, is the value for the --wow custom property. Before the selector criteria is met, the value of this custom property is invalid. This is because the --secret_code variable has no value set (yet). The value of green that appears after the invalid custom property will take effect once the space character is put in place (hence the name “space-toggle hack”).

This essentially means --wow: var(--secret_code) green; will compute to --wow: green; (because the space is just extra white space, which is fine inside a CSS value).

To make it more clear, in plain English the inline style reads like this:

• Define the --wow variable with a non-existent custom property followed by a space and the color green
• Set the color property to whatever the --wow variable is set to (currently invalid), with a fallback of black
• Since --wow is currently invalid, use its fallback

This is why the color of the text starts out black when you first load the page.

The key to the toggle, then, is to add a space character as a value for --secret_code. This makes the initial definition of --wow valid, so the fallback color of black isn’t used. Once the space character is inserted, the logic is like this:

• Define the --wow variable with a space character, followed by another space and the color green
• Set the color property to whatever the --wow variable is set to (currently a valid space), with a fallback of black
• Since --wow is currently valid, and doesn’t break the value of green, the color is computed to green

The same logic applies to the hidden span element that shows the secret message:

<span style="--wow: var(--secret_code) block; display: var(--wow, none);">

Again, the value of “block” won’t take effect until the selector criteria is met, thus making var(--secret_code) valid (and, by extension, --wow is valid).

One of the things that first tripped me up about the space-toggle hack is the value that follows the invalid variable. In this case it was green. To me this looked like a fallback value, so the logic didn’t make sense at first glance. But this isn’t a fallback value; it’s a value that gets toggled “on” when the variable next to it gets validated by the space character passed in from the selector’s variable definition.

And one final thing about the space-toggle hack: It’s really not recommended in a lot of cases and will cause problems with some CSS minifiers. A minifier is usually going to delete unwanted space characters like the one set as the value in this hack. I tested it on a few online minifiers and it does indeed cause problems for some, but not all. So be aware of that if you choose to use this technique.

Final Warning About Using accesskey

As mentioned, this trick uses the accesskey attribute, which seems like a useful feature to take advantage of. As the original Tweet by Šime mentions, WebAIM provides a warning when discussing this subject:

Despite good intentions and because of varied and insufficient browser implementations, accesskey very often does not provide a viable solution for keyboard shortcuts on the web.

They go on to offer a whole slew of reasons why using accesskey is problematic and conclude with:

Due to numerous problems with implementation, accesskey is typically best avoided. If used, they must be implemented carefully. The bottom line: some users will benefit and some will not, and some may even be disadvantaged.

While the accesskey part of this trick is the primary reason it works, I hope the rest of it (which is more likely to be used) was somewhat educational to those of you who weren’t as familiar with it all.

The post Detecting Specific Text Input with HTML and CSS appeared first on Impressive Webs.

This year wasn’t all that different from previous years. I’ve learned that clicks happen for basically one of two reasons:

• Curiosity
• Will Make My Life Easier

And ultimately, that latter reason is why people check out any web developer tool.

And notice the title of this post. I’m not claiming that these are the “best” or “most popular” tools (and some of them aren’t even all that new, they were just new to me). But they are possibly the most interesting, even if not necessarily the most useful.

So with that in mind, here’s a big superficial roundup of my newsletter’s 60 most-clicked tools of 2020 — and potentially the most interesting choices for 2021. I’m pretty sure you’ll find at least a few items here that you’ll find useful for a future project.

Partner Link: Strikingly is a website builder platform for creatives and entrepreneurs. With zero code or design skills you can build professional websites on custom domains with all the features you’ll need.

60. Pikwizard

Anything that resembles the super-popular Unsplash project is going to get a lot of clicks. This library offers over 1 million stock images and videos that are royalty free and safe for commercial use, with no attribution required.

It’s hard to see anyone uprooting Unsplash as the leader in this space, but Pikwizard seems like a good alternative if you’re looking for free stock media without needing to worry about price or giving credit. But note the main drawback to Pikwizard is the fact that “Premium” photos from Adobe are also included in searches.

59. Tailwind Starter Kit

Tailwind appears early in this list and often, not surprisingly. I’d say Tailwind is the CSS tool that’s most on the rise at the moment, so I’m constantly finding tools and frameworks associated with it in my research.

This toolkit is an open source add-on for Tailwind that features multiple HTML elements and comes with dynamic components for React, Vue, and Angular.

58. Spider

Web scraping tools always seem to do well in my newsletter, as do things like HTML to PDF conversion utilities. This one claims to be “the easiest tool to scrape the internet”. It’s not free, but a small one-time fee seems like a good investment if it’s as effective as they claim.

Just a few clicks to turn a website into organized data that can be downloaded as JSON/CSV with no coding or configuration required.

57. Van11y

This is one that wasn’t exactly new in 2020, but it was new to me. It’s a collection of customizable, accessible scripts that includes lots of stuff you probably include often in your UIs: Accordion, tab panel, carousel, tooltips, modals, and more — all built using progressive enhancement.

There aren’t a lot of components here, but since the ones included are so common, there’s enough here to make this well worth a bookmark.

56. CSS to TailwindCSS

Once again Tailwind is in the spotlight, this time with an online tool to convert standards CSS to the best possible Tailwind CSS equivalents.

I’m not entirely sure this one is going to be super practical for a lot of projects, but I’m guessing this got a lot of curiosity clicks due to the number of developers currently using Tailwind and probably just wondering what this sort of thing would entail.

55. Radius

Design systems have been a hot topic for a few years now, so this toolkit isn’t a surprise on the list.

This collection of open-source tools and libraries has the goal of helping you and your team to build a design system from scratch without all the typical roadblocks you might normally face, speeding up the zero-to-hero process that a design system often involves.

54. Sail UI

Once again Tailwind is the main focus here. This collection of basic UI components is pretty small. Personally, I don’t see anything too groundbreaking here, so the Tailwind factor probably played a major role in the initial burst of clicks for this one.

That being said, I can see this one growing and gaining popularity with some proper oversight and maintenance in the coming year.

53. Control

This has free and paid versions. The free version includes 100+ illustrations that can be customized to create the specific scene you’re looking for. Only PNG for the free version but 100% vector and compatible with AI, Figma, and Sketch for the paid versions.

You can slightly alter a particular illustration’s subject/theme and also change the style of the illustration (solid or linear). This comes from a startup called Craftwork who offer a number of different graphic-related products.

52. Public APIs

This is a directory of free public APIs for software developers. Might be a good place to look if you’re just getting started with API-based development or maybe you want some inspiration on a new product or service to build that uses one of the APIs.

Categories include Open Data, Cryptocurrency, Science, Finance, Sports & Fitness, and lots more.

51. css-media-vars

This is definitely unique in the list. If you’re already familiar with CSS variables and media queries, then you’ll be fascinated by the idea of combining the two concepts.

The page offers a live editable demo so you can see exactly how the technique works and how you might customize the various breakpoints.

50. guijs

As I mentioned at the outset, anything that claims to make life easier for developers always gets tons of clicks in my newsletter. This one literally has that as its tagline.

It’s a multi-purpose native Windows and Mac app to help you manage your development projects. Includes features for projects, package installation, script management, and more.

49. Wicked Templates

Sick of Tailwind yet? Yeah, unlikely. This is a set of four Tailwind templates are easy to customize and can be integrated with whatever your full-stack toolset is (Next.js, Vue, Laravel, Gatsby, React, etc).

Only a single template is free, but for the small price of the bundle you can have lifetime support.

48. H3

This microframework comes in at under 4KB minified and will help you build client-side single-page applications (SPAs) in modern JavaScript.

How small is it? The API is composed of just seven methods and two properties. Certainly not for every project but maybe the source code alone would be useful to learn from, should you want to delve into developing something like this in the future.

47. Line Awesome

A free alternative to Font Awesome that consists of 1300+ flat-line icons and boasts complete coverage of the main Font Awesome icon set.

Also includes the option to import into Figma, Sketch, or Photoshop.

46. BEM Naming Cheat Sheet

When I first started the newsletter, I used to include an occasional “Learning Tools” issue that would include stuff like this. While I don’t do that anymore, I decided to include this one and it did quite well.

It’s a nicely designed guide to using the BEM naming method that’s been popular among CSS developers for a number of years.

45. Embla Carousel

Carousels are always popular and get lots of clicks, so no surprise here. This one is a bare-bones, extensible carousel library with great fluid motion and swipe precision.

It’s library agnostic, dependency free, and open source so it looks like a good option for vanilla JavaScript projects.

44. Open Peeps

A hand-drawn illustration library to create scenes with people, with each drawing made available in PNG or SVG format.

You can grab some of them directly on the site or download the whole graphics package that allows you to bring it into your graphics tool of choice. Then mix-and-match for over 500,000 possible combinations of illustrations.

43. CSS Section Separator Generator

This is one of the simplest tools in the list. It’s an easy way to generate a pure CSS fancy section separator to add to your pages.

You can interactively adjust the look and size of the separator and its pattern, then grab the HTML and CSS to drop into your stylesheet.

42. Lion Web Components

A set web components that feature three things all developer want in a UI toolkit: performance, accessibility, and flexibility.

I like how each component on the demo/docs site shows you the accessibility violations (spoiler: there aren’t many) as well as the accessibility “passes”, so you can see how each component is accessible to all users.

41. Debug Visualizer

This VS Code extension has over 31,000 installs and a strong Marketplace rating, telling me a lot of people like it so far.

As the name suggest, it allows you to visualize data structures while debugging. Works best with JavaScript/TypeScript and has been tested with C#, Java, PHP, Python, and more. In theory it should work with any language you can debug in VS Code.

40. Geist UI

This open source design system features a UI library for React and Vue, providing yet another option for building modern interfaces.

The main site links to separate docs pages for both versions and there’s also a typography stylesheet and general stylesheet for a number of opinionated but elegant defaults.

39. sysend.js

Here’s another one that’s unique in this list: It’s a small library that allows you to send messages between pages that are open in the same browser.

It has no dependencies, supports cross-domain communication, and uses either HTML5 LocalStorage or the newer BroadcastChannel API — whichever one the browser supports.

38. Hero Generator

I come across lots of online generators for various front-end coding problems, but this one is a little different. It’s an interactive tool to generate a hero image header section for a web page, a common design pattern that you’ll usually reinvent over and over unnecessarily.

The page live updates as you adjust the settings, then you can grab the full CSS which you can later extend or modify even after you’ve generated it here.

37. Toy Faces

This is definitely not for every website you’ll build but if you need some fun, diverse 3D avatars for a design mockup or a full-blown project, this might work.

These 120+ avatars feature a toy-like appearance. They’re not free but you get lifetime access to new releases in the set, available in high-res JPEG and transparent PNG.

36. Halfmoon

I’m guessing this one grabbed a lot of people’s attention due to it being marketed as having a “built-in dark mode” which a lot of developers are into nowadays.

But that’s just one feature. It’s a full-blown front-end framework similar to Bootstrap with lots of components and utilities.

35. V-Dashboard

Admin dashboard starter templates and frameworks always seem to do well in my newsletter, so no surprise that this was one of the most clicked tools.

This one is built with Vite, Vue 3, Tailwind CSS, and TypeScript.

34. broider

Here’s yet another unique entry in this list. This interactive generator creates “9-patch” borders that use CSS’s border-image syntax.

You can draw on the page then copy the CSS that includes a data URI using the border images standard. You can be one of the 20 people in the world who found a use for border images!

33. Falcon

This was not a new tool but this year was the first time I’d come across it, so it gets the nod in this list. This is an open-source SQL editor for Mac, Windows, and Linux.

Supports connecting to RedShift, MySQL, PostgreSQL, IBM DB2, Impala, MS SQL, Oracle, SQLite, and more. According the GitHub repo, it hasn’t been updated for a couple of years, but I doubt that poses any major problems for something like this.

32. Neumorphism.io

Remember when Neumorphism was everywhere? Well, it still has its place. This online generator will help you interactively produce code for elements that have ‘soft UI’ (i.e. 3D box shadows and lighting).

Offers lots of fine-grained options to perfect the look you’re after.

31. Meraki UI

Another UI library and once again this is based on Tailwind CSS. Buttons, cards, forms, dropdowns, hero components, and more.

The one cool thing about this one is that it features the ability to easily switch a UI element to right-to-left (RTL), for support of RTL languages. You can try the RTL feature interactively while testing out the various component demos.

30. calcolor.co

This website provides a dedicated page for every color code with info, various syntaxes for the color (hex, RGB, etc.)

Use it to find matching color variants, learn more about color properties, or convert color values.

29. tailblocks

How many Tailwind tools are we up to now? I believe it’s 7. This one is a set of Tailwind UI components divided into 15 categories.

The categories include stuff like e-commerce, blog, CTA, footer, gallery, and lots more.

28. Good Email Code

This is the first of three HTML email code tools to crack the top 30 in this list. This is a small library HTML email components built with best practices for maximum email client support.

There’s a description for each of the components and they include a template, preheader, container, columns, button, and more.

27. Pixel Lite

This beautifully crafted, responsive UI kit based on Bootstrap 4 includes 80 components, 3 sections, 4 example pages, and an optional premium version.

Uses Sass variables so you can easily customize the look to suit your needs.

26. Coded Mails

These hassle-free responsive HTML email starters include 60+ templates divided into 6 categories, along with 12 themes.

You can preview all templates and themes on both mobile and desktop email views. Free only for non-commercial projects, but worth considering the modest price tag for the full version with extra features.

25. Big Heads

This library of illustrated heads includes a random character generator that you can then interactively customize on the fly.

Once you’ve selected your settings, the character can be included in your project with React or as an SVG (which also offers a direct URL to the customized graphic).

24. Codemap

This is yet another code visualization tool, which makes me wonder if this is something that’s in demand now.

This one is a Mac, Windows, or Linux app that lets you navigate code with a graph, visualizing function calls in an intuitive way.

23. signature.email

This is not typically the kind of tool I usually come across, but it was one of the most-clicked tools of the year.

It’s a visual drag-and-drop editor for email signatures, to help with consistent branding across team emails. You can pick from various templates, then customize as you see fit.

22. Leaf PHP

Not a front-end tool, but useful for full stack: Create clean, simple, and powerful web applications and APIs quickly.

Besides a few WordPress tools, this is probably the only PHP that I included and — surprise, surprise — it’s one of the most-clicked tools.

21. Blunt

This CSS framework is a little different: It helps with layouts and leaves your styling alone. It only provides helper classes to make positioning and responsive design easier.

The author made it to fit his own needs due to the fact that other frameworks did either too much or too little.

20. Arwes

This is definitely the coolest project in this whole list. I think the only reason it didn’t get even more clicks is due to the fact that it was already making the rounds in the industry by the time I had included it in mine.

It’s a futuristic sci-fi and cyberpunk-inspired graphical UI framework for web apps and includes some neat animations and audio, so be sure to try out the various components if you haven’t seen this one yet. Not likely you’ll use it on more than one project in a lifetime, but it’s just so fun to play with!

19. Free Illustrations

This isn’t just a single illustration pack like the others on this list, but a directory of various free illustration sites with info on license, file types, etc., so you can figure out which graphics pack is right for you.

You can filter by file type (AI, SVG, GIF, SKETCH, PNG, EPS, etc.) so it’s easy to find something that matches your needs.

18. MoreToggles.css

CSS utilities that style form elements tend to be pretty popular. This one includes a whole slew of styles for toggles that are checkboxes under the hood.

Be sure to check out the gallery that showcases all the different styles and colors.

17. PatternFly

Another entry in the design system category. This open source design system includes dozens of components and layouts.

Components are available in HTML/CSS or React, with plenty of demos and documentation to help you along.

16. Screenshot.Rocks

This is a great tool for creating attractive browser and mobile mockups in just a few clicks. Might be useful for slides in presentations.

Enter a URL to capture, then customize the device and background, then download as PNG, SVG, or JPEG.

15. Kickstand UI

This UI framework is another one built with accessibility as a focus and includes about dozens of components and utilities.

This one is well worth delving into, as it has quite a nice array of components with good documentation and demos.

14. NoDesign.dev

I’m not surprised this was as popular as it was. It’s advertised as “a collection of tools for developers who have little to no artistic talent.”

To be honest, the collection of tools is pretty standard and isn’t only for the non-artistic among us.

13. Aeon

I find lots of date picker components, so kudos to this one for making it near the top of the list.

This lightweight, dependency-free date/time picker is built with web components and can be used anywhere.

12. Frontendor

This is another type of front-end toolkit, similar in popularity to the admin dashboards: landing page UI libraries.

This one is a library of reusable HTML blocks and templates to help you build beautiful and professional landing pages quickly and easily by simply copying and pasting. Not free, but includes 100+ blocks and 6+ templates.

11. Wireflow

Here’s yet another unique entry in the list: A free online and open source tool for creating beautiful user flow prototypes.

Once you’ve dragged and dropped and customized your ‘flow’ diagram, just download the exported image. Great for presentations and you can also install the tool as a PWA.

10. Remake

This tool offers a bold promise: To help you build apps and prototypes by going straight from HTML/CSS to dynamic web app.

Includes data syncing, built-in CRUD features, built-in file uploading, built-in user accounts, and more. You’ll have to really delve into their docs to see exactly what this is all about, but like I said, the promised result is pretty bold.

9. CSS Scan Pro

I included this one in the newsletter way back in February but it’s recently been updated to version 2.0.

It’s an extension to “Inspect Element” for Chrome, Firefox, and Safari that lets you instantly get styles, font info, dimensions, animations, and selector for any element on the page. Not free, but developers seem to love it so far.

8. Web Code Tools

This is a large set of code generators that includes CSS effects (gradients, animation, shadows, etc.), HTML tools (audio, video, etc.), Microdata, Twitter Cards, and more.

As shown by a few of the entries above, developers love online interactive generators, so there’s a lot to choose from in this collection.

7. Shadows

Here’s another code generator in the top ten. This online tool is based on an article (linked at the bottom of the tool’s page) that explains how using layered shadows can provide more fine-grained control on shadow smoothness.

Pretty neat that someone was willing to bring a concept to life like this to make it much easier to use the technique that the original author came up with.

6. FAST

This offering from Microsoft is a suite of tools to build enterprise-grade websites, applications, and more.

Built with standards-based web components compatible with a number of technologies, including React, Angular, ASP.NET, Aurelia, and more.

5. CSS Scroll Shadows

This is one of my favourite finds of the year. Scrolling areas are sometimes hard to notice at a glance. This online tool lets you create shadows to make those scrollable page areas more obvious that they’re scrollable.

The tool lets you interactively adjust the background color and shadow color before you grab the code.

4. CSS Layout

This is a really great collection of popular components, layouts, and patterns made with CSS. Not exactly a framework, just individual components that don’t have any dependencies and just use pure CSS.

Consists of 91 components that you can easily customize seeing as they’re just CSS.

3. Exoteric

I’m pretty sure this one got as many clicks as it did because it was originally included under its old name: Dumbass. (Note: Link is now broken, used to be at https://github.com/c9fe/exoteric)

Nonetheless, it’s a decent tool that lets you build components from cross-browser web standards. No JSX, no Shadow DOM, no fancy frameworks.

2. css.gg

This was the 2nd-most clicked tool of the year and was originally a CSS-only icon set that’s been expanded.

Now it includes 700+ open-source CSS, SVG, and Figma UI Icons. Available in SVG sprite, styled-components, and more.

1. Hacker UI

I’m not surprised that the #1 most-clicked tool of the year was yet another UI library. This one is React-based and was originally advertised as one that isn’t closely coupled with any kind of branding, so it’s easy to integrate it with your own project.

Interestingly, the GitHub repo says the project’s development is currently on hiatus. I hope that’s only temporary, as the interest in this one does seem to be moderately strong, showing signs of potential for a good permanent option.

What Was Your Favourite Tool of the Year?

I’m always on the lookout for new stuff so if there’s anything in particular that you’ve enjoyed discovering, using, or even something you’ve personally made, feel free to drop it in the comments or hit me up via DM on Twitter.

And be sure to subscribe to the newsletter for a weekly roundup of the latest and the greatest in front-end tools and more.

The post Are These the Most Interesting Front-end Developer Tools for 2021? appeared first on Impressive Webs.

I know nowadays we’re obsessed in this industry with gaining every millisecond in page performance. But in a couple of projects that I recently overhauled, I added a subtle and clean loading mechanism that I think makes the experience nicer, even if it does ultimately slightly delay the time that the user is able to start interacting with my page.

The two websites I’m talking about are Web Tools Weekly and CSS Values. Visit each of those home pages and you’ll notice in each case the content fades in rather than loading up in a clunky fashion. It’s more noticeable on CSS Values because there’s a lot more content on there and some JavaScript that has to load. Also, it happens on every “page” for CSS Values, but only on the home page for Web Tools Weekly (though technically the CSS Values pages are more like “states”).

Steps I Want to Accomplish

I’m sure there are a few ways to accomplish this but I think my method is clean and easy to understand. I’m basically doing two things:

1. As soon as the <body> element is ready, set it to opacity: 0 in CSS.
2. When the DOM is ready and any scripts finish running, set the <body> element back to opacity: 1, animating it so it comes in gracefully.

I’m also ensuring that the page is fully visible and accessible to anyone viewing with JavaScript turned off. Those users shouldn’t notice anything wrong. This means I have to set the opacity using JavaScript.

The concept here is basically the same as if I was adding a loading spinner to the page, but because the page shouldn’t be loading for long, I don’t care about indicating what’s happening to the user. In other cases, a loading spinner might be more appropriate, but here I’m happy with a simple fade-in.

The Code

I could have used classes in my HTML that are pulled in from my stylesheet. But the stylesheet is external and I’m not inlining it. So if I’m trying to interact with the page before the stylesheet finishes loading, this might not work as well. Because of this, I opted for adding some CSS in the <head> of the document.

Here’s what my HTML looks like:

  <style>
    .hidden {
      opacity: 0;
    }

    .visible {
      opacity: 1;
      transition: opacity 1s ease-out;
    }
  </style>
</head>
<body>
  <script>
    document.body.className = 'hidden';
  </script>

Notice what’s happening above:

• I’ve added two declaration blocks in a <style> element, just above the opening <body> tag
• I’m using a CSS transition for the subtle animation that causes the fade-in effect
• I’ve put a <script> element right after the opening <body> tag
• The JavaScript adds the hidden class, which removes the body’s content

I’m doing this right at the top of the body element because I want the content to disappear as soon as possible. If I wait for this to happen in my external JavaScript, then it’s not going to happen quickly enough.

In my external JavaScript, I have something like the following:

function doStuff (callback) {
  // do all app scripts here...
  callback();
}

doStuff(function () {
  document.body.className = 'visible';
});

In this instance I’m using a simple callback structure. I suppose you could also use Promises for this, but I didn’t really look into that much since I’m not yet that familiar with Promises. I believe the concept would be the same.

I’m basically ensuring all the app or website code that initializes any functionality is completely loaded before I set the <body> element back to visible.

To enhance it a little more, I could also wrap the whole thing in a jQuery-like document.ready handler:

window.addEventListener('DOMContentLoaded', function () {
  // do everything here...
});

This means I’d be waiting for the DOM to be ready before running my scripts. Then the scripts run and after they finish I make the page visible. I can alternatively use the load event, which means I’d be waiting for the full page resources to load, rather than just the DOM to be ready.

Conclusion

If you want a stripped down demo version of this, you can check out this page. Note that it’s intentionally a very large page, so maybe avoid it on mobile. I’m also running some useless JavaScript (adding a bunch of classes to the HTML) just to pretend something’s happening to give the appearance of a pause before the fade-in happens.

As mentioned, you can also see how this works on Web Tools Weekly and CSS Values.

You could easily switch this up and put a loading spinner in place instead while the page is “getting ready”. I chose to do the fade-in because I think it looks good and I’m not concerned that either website is going to take a long time to load.

If you know of a way to improve on this, I’m glad to hear your feedback.

The post Fading in a Page on Load with CSS & JavaScript appeared first on Impressive Webs.

I’ve been running this blog since May 2008. If you’ve run a content-driven site for even a fraction of that, you know that link rot is a problem. In this post I’ll go over some of the suggestions in that thread along with some tools to use to check for broken links.

Linking to Archives by Default?

The gist of Leo’s original post was that he prefers to link to archive.org versions of links, essentially snapshots of the intended resource. In theory this sounds like a good idea, but as some in the thread pointed out, it’s not optimal.

First of all, the page has to exist in an archived snapshot. Fortunately, archive.org makes this easy to do. To save any page, just visit the following URL with the link you want to archive appended to it:

https://web.archive.org/save/

For example, if I want to save the home page for this blog I would visit:

https://web.archive.org/save/https://www.impressivewebs.com

Or I could visit web.archive.org/save and enter the page manually, with the option to save error messages too.

This is possible from a reader/blogger perspective, but due to takedowns and preventative measures by many websites, archive.org is not completely reliable for finding older pages. There are a number of other services for archiving pages, many that have gained popularity in recent years (e.g archive.is). But I’m not sure of the long-term reliability of those either and they’re not as popular as archive.org. For that reason, I tend to favour using archive.org.

As mentioned, many in the discussion on Hacker News disagreed with defaulting a link to the archived version. The primary reason not to do this is because it takes traffic away from the original content, which seems unethical and may even affect page rank for the resource (I can’t imagine Google is giving ranking juice to a site as a result of inbound links to archived pages).

HTML Solutions for Preventing Link Rot

A few of the comments in the discussion that caught my eye proposed alternative solutions to this problem.

Mark Graham, who manages the Wayback Machine at the Internet Archive wrote the following:

We suggest/encourage people link to original URLs but ALSO (as opposed to instead of) provide Wayback Machine URLs so that if/when the original URLs go bad (link rot) the archive URL is available, or to give people a way to compare the content associated with a given URL over time (content drift).

Interestingly, he also said:

BTW, we archive all outlinks from all Wikipedia articles from all Wikipedia sites, in near-real-time… so that we are able to fix them if/when they break.

Good to know!

Mark’s solution is mainly a content solution. For example, you might include a link then put the archived link in parentheses next to it. But that’s a messy and tedious solution. I don’t want my content littered with unnecessary links. The discussion went on to suggest HTML solutions that I think are much better.

A workable HTML solution similar to one that one user presents looks something like this:

<a href="https://www.impressivewebs.com/"
   data-archive-url="https://web.archive.org/web/20201124215517/https://www.impressivewebs.com/"
   data-archive-date="2020-12-01"
   >My Blog</a>

This uses HTML’s data-* attributes (which can be anything you want as long as they begin with data-) to store the archived URL and the date it was archived. I think this is the best and cleanest solution. Of course, this won’t ensure that the user visits the archived page in the event of link rot (or “content drift” as Mark put it).

Ideally, browsers would be able to recognize that the link is down and automatically direct the user to the archived URL. But this presents problems of its own. What if the page isn’t down, but only changed? How would the browser detect this? What if the page is redirected to another URL. This too wouldn’t necessarily be detected.

To combat this, others proposed new HTML standards that would address these, which would be similar to using the data-* attributes:

It’s interesting to think about how HTML could be modified to fix the issue. Initial thought: along with HREF, provide AREF- a list of archive links. The browser could automatically try a backup if the main one fails. The user should be able to right-click the link to select a specific backup.

But again, while this seems effective in theory, it feels like you’re asking the browser to do too much, which could have performance or even security implications. I don’t know if there’s a perfect technical solution to this, but the HTML solution I presented seems simple enough for those who are concerned about link rot.

Tools for Handling Broken Links

Even with a data-* attribute in place, you may need a way to discover if bad links even exist. True, it will be much harder and more tedious to discover broken links that aren’t actually broken but that redirect to a new page. And it’s even more difficult to find pages that have updated content that make the link less relevant. But you can do your part by incorporating any of a number of tools.

First of all, as a reader, if you come across an outdated or broken link, you can check the web archive for existing snapshots. Browser extensions make this easier.

• Wayback Machine Firefox Add-on
• Wayback Machine Chrome Extension

If you use Brave a broken page will display a bar at the top allowing you to check the Wayback Machine for an archived version.

This is a setting you can enable or disable:

I’m not sure if other browsers have this ability, but the extensions linked above will accomplish the same thing.

Of course, those are solutions from a reader’s perspective. From a developer perspective, in addition to some extra HTML, you’ll also want to do a check for broken links. This can be automated or handled manually every so often with any number of tools. Below are a few that I’ve come across over the years.

Broken Link Checker by Sitechecker

This tool can be used in two ways: Scan an entire domain or a specific page. The tool also scans both internal and external hyperlinks.

broken-link-checker

Can be used as a CLI tool or programmatically via JavaScript.

linkinator

Similar to previous, can be used as a CLI tool or programmatically via JavaScript.

Checkbot

Tests for broken links in addition to a number of SEO and security checks. Free for small websites.

Dead Link Checker

Online dead link checker that tests the first 2000 links free.

Broken Link Checker

A popular WordPress plugin for checking dead links.

There are also a number of website monitoring solutions, usually not free, that include broken link checks as part of their service. I won’t list any of those here, but you can try this search in my newsletter’s archives that should pull up lots of issues that included monitoring tools.

Any Other Ideas?

If you have any other suggestions or know of another tool to deal with broken links in web pages or even the potential for broken links in the future, feel free to post a comment below.

The post Solutions and Tools for Dealing with Broken Links in Web Pages appeared first on Impressive Webs.