Entries by admin

Collective #678

Original Source: http://feedproxy.google.com/~r/tympanus/~3/lnouPhIqwi4/

Inspirational Website of the Week: Miti Navi

Beautiful shapes with modern and elegant typography make this site a true masterpiece.

Get inspired


Our Sponsor
Translate designs to developer-friendly code with Anima

Use Anima to translate designs into developer-friendly React, Vue & HTML code. As in, code you can actually work with.

Learn more

Developer Decisions For Building Flexible Components

In this article, Michelle Barker walks us through the process of taking a seemingly simple design for a text-and-media component and deciding how best to translate it into code, keeping in mind the needs of both users and content authors.

Read it

Building a split-button component

A foundational overview of how to build an accessible split-button component. By Adam Argyle.

Read it

My Room in 3D

Bruno Simon finished his amazing room in 3D, a fantastic demo of a blend of technologies.

Check it out


A youtube-dl fork based on the now inactive youtube-dlc. The main focus of this project is adding new features and patches while also keeping up to date with the original project.

Check it out

Roadroller: Flattens Your JavaScript Demo

Roadroller is a heavyweight JavaScript packer designed for large demos of at least 10 KB in size, like js13kGames. Depending on the input it can provide up to 15% additional compression compared to Zopfli.

Check it out

Practice / 3.js

An amazing particle experiment by Toshiya Marukubo (smartphone not supported).

Check it out

Using the platform

Elise Hein shows how important it is to “know the platform” and be able to develop web apps without frameworks or build tools.

Read it

Learning in the Open

Michelle Barker’s article on how learning by doing is the most effective way to learn anything.

Read it


Pollen is a TailwindCSS-inspired library of CSS variables for rapid prototyping, consistent styling, and as a zero-runtime utility-first foundation for your own design systems.

Check it out

HTML checkboxes Webcam filter

Bryan Braun made this fun webcam filter out of HTML checkboxes.

Check it out

Bundling non-JavaScript resources

Learn how to import and bundle various types of assets from JavaScript in this article by Ingvar Stepanyan.

Read it

Monkey Island Tribute, a WebGL Experience

A beautiful WebGL experience by Sébastien Lempens.

Check it out


A wonderful Three.js sketch made by Ryohei Ukon.

Check it out


Jake Archibald released a new version of this great tool powered by SVGO v2.5.0.

Check it out


A super-cool CSS Houdini worklet made by George Francis.

Check it out

58% of Hacker News, Reddit and tech-savvy audiences block Google Analytics

Marco Saric investigates how much data is missing from Google Analytics due to adblockers and privacy-friendly browsers.

Check it out


Madbox is a mobile gaming company and for their new website they collaborated with Bruno Simon. There’s also this awesome little game that you can play in the browser.

Check it out

From Our Blog
Inspirational Websites Roundup #29

A new collection of the best web designs and creative websites from the past couple of weeks.

Check it out

The post Collective #678 appeared first on Codrops.

10 Creative Hamburger Menus + Tips & Tricks

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/qxI4_owCY7I/

When browsing through websites, you’ve most likely come across three horizontal lines on the top right corner of the webpage. While not present on every site, these lines are commonly referred to as “hamburger menus” by UI designers.

What is a Hamburger Menu?

A hamburger menu is a navigation tool that opens up to a side menu and is used for both mobile apps and websites. The role of these navigation bars is to help you easily maneuver anywhere on a website in a user-friendly manner and without having to scroll up to hunt for navigation.

Hamburger menus were first introduced more than three decades ago by a man named Norm Cox. He made the burger icon for Xerox Star, which was the world’s first graphical user interface. The purpose of the triple bar icon was to let users know that the button contained a list of items. However, despite it being around for quite some time, it wasn’t widely used until 2009 and has gotten a lot of criticism over the years.

The UX Designer Toolbox

Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets
Starting at only $16.50 per month!



Pros and Cons of Hamburger Menus

Before we get into the examples, let’s first explore the pros and cons of using hamburger menus.


It provides quick secondary access: Users can quickly access desired pages without having to scroll through pages.
Recognized by many users worldwide: The sign is common and can be found everywhere from mobile games to web pages to apps.
Makes the webpage appear organized: The hamburger menu helps with maintaining focus on the important web features you’d like users to see. It also keeps the web page clean.


Lower engagement: When users can’t easily access a web page, they’re less likely to click on it.
Makes pages seem less important: Because all the important information is accessed on the first page it’s less likely for users to navigate through the menu.
Hard to reach: Hamburger menus can be hard to reach or press in some mobile designs.

Tips for Making a Good Hamburger Menu

Here are a few quick tips for ensuring your hamburger menu is identifiable and effective:

1. Use Animation

A hamburger menu without an animation that turns the three horizontal lines into another shape is rarely seen. Put it to good use.

2. Use a Custom Icon

It’s important that the menu remains recognizable to ensure a great user experience. Using a custom icon helps many users identify it.

3. Responsiveness

Mobile users prefer the vertical sliding or the horizontal navigation bar while computer users prefer a more detailed menu with tabs of content, rows, and vertical links. Designing your hamburger menus to be responsive will ensure users are presented with the ideal menu option regardless of the device they’re using.

10 Worthy Examples of Hamburger Menus

What follows are 10 high-quality options of hamburger menus currently available on Codepen to choose from. Why start from scratch when you don’t have to?

Menu Toggle by Tamino Martinius

See the Pen
🍔 <-> ❌ (version 1) by Tamino Martinius (@Zaku)
on CodePen.light

Drawn Hamburger Transition by Jesse Couch

See the Pen
Drawn Hamburger Transition by Jesse Couch (@designcouch)
on CodePen.light

Hamburger Menu with Cheese by Michael Smart

See the Pen
Hamburger Menu (with cheese) by Michael Smart (@mikedevelops)
on CodePen.light

Atomic Menu by Alex Coven

See the Pen
Atomic Hamburger Menu CSS by Alex Coven (@alcoven)
on CodePen.light

Pure CSS Fullscreen Navigation Menu by Brenden Palmer

See the Pen
Pure CSS Fullscreen Navigation Menu by Brenden Palmer (@brenden)
on CodePen.light

Animated Hamburger by Steven Fabre

See the Pen
Hamburger Animated Icon by Steven Fabre (@stevenfabre)
on CodePen.light

Open Close by Vineeth TR

See the Pen
Open Close by Vineeth.TR (@vineethtrv)
on CodePen.light

Morphing Hamburger by Sergio

See the Pen
Hamburger icon with Morphing Menu by Sergio Andrade (@sergioandrade)
on CodePen.light

Animated Hamburger Menu by Mathew Ladner

See the Pen
Animated Hamburger Menu by Matthew Ladner (@netfuel)
on CodePen.light

CSS3 Only Hamburger by David Krajewski

See the Pen
Hamburger Icon CSS3 ONLY Animation by Dawid Krajewski (@DawidKrajewski)
on CodePen.light

Hamburger Menu Alternatives to Consider

If hamburger menus aren’t speaking to you, there are some alternative options worth taking a look at.

1. Scrollable Navigation

This type of navigation tool is normally used for longer lists. Making the list scrollable allows users to easily move side-to-side. For example, it’s mostly used for news websites when users are expected to scroll through news categories, and also works well for online stores and music apps.

2. Tab Bar

Tab bars are considered to be the simplest navigation option with the main navigation options easily visible. For example, if you have an app that has a limited number of web pages/features then this is definitely the way to go.

Some things to consider with this navigation include:

The home page has to be in the first tab and the rest should follow according to the level of importance.
The tab bar allows no more than five navigation options.
It’s important for at least one of the options to be highlighted and active.
Use icons with labels unless for actions that are common and easily recognizable.

3. More Option Tab Bar

The ‘more’ option tab bar is most suitable if you have more than five top-level destinations.

The extra option can work well as a dropdown menu. To improve navigation you’ll need to correctly prioritize the options for users to have at least four to five on the screen at all times.

4. The Progressively Collapsing Menu

This type of menu fits on the whole screen and shows as much of the navigation as possible. Everything else is put under the “More” button. This provides a better user experience than the tab bar design.

5. Full Screen Navigation

The full screen navigation solution takes up the whole homepage for navigation purposes. Users then swipe to access additional menu options as they scroll up or down.

This type of navigation helps designers organize huge amounts of information without overwhelming the user.


When picking out a hamburger menu, make sure you pick one that’s most suitable for your website or app. Making navigation within an app seamless and user-friendly will encourage users to engage with it more than once and even attract new users. Just make sure you test the speed and efficiency before implementing. But then you should be good to set your visitors browsing. Good luck!

Collective #679

Original Source: http://feedproxy.google.com/~r/tympanus/~3/wVXynvvTJrc/

Collective 679 item image

Inspirational Website of the Week: Foam Talent 2021

An overall great audiovisual browsing experience with nice details and view switching.

Get inspired

Collective 679 item image

Doodle Ipsum

The lorem ipsum of illustrations where you can simply customize your doodles, grab the code, and use them on your web prototypes, landing pages, or no-code tools.

Check it out

Collective 679 item image

Grainy Gradients

Jimmy Chion shows how to generate colorful noise to add texture to a gradient with only a small amount of CSS and SVG.

Read it

Collective 679 item image

Designing Beautiful Shadows in CSS

Josh W Comeau shows us how CSS offers the tools to create rich, lush, lifelike shadows.

Read it

Collective 668 image

Our Sponsor
Instant websites for your clients with Divi Layout Packs

With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.

Check it out

Collective 679 item image


A WebGL-Memory tracker that you can add to your page before you initialize WebGL and then you can probe how much WebGL memory you’re using for a given context.

Check it out

Collective 679 item image

JavaScript Eventing Deep Dive

Stephen Stchur and Thomas Steiner show when to use preventDefault and stopPropagation and explain what each method does.

Read it

Collective 679 item image

Reducing The Need For Pseudo-Elements

Learn how we can now leave pseudo-elements behind in some scenarios, thanks to newer CSS properties in this article by Marcel Moreau.

Read it

Collective 679 item image

W3C Design System

The World Wide Web Consortium’s new design system available for public use.

Check it out

Collective 679 item image

Less Absolute Positioning With Modern CSS

Ahmad Shadeed writes how to use use position:absolute less by leveraging modern CSS.

Read it

Collective 679 item image

The Future of CSS: Cascade Layers (CSS @layer)

Learn what Cascade Layers are, and how we can use them to our benefit.

Read it

Collective 679 item image

Dan Flashes Complicated Shirt Generator

An amazing p5.js and html2canvas procedural shirt generator by Adam Kuhn.

Check it out

Collective 679 item image

A Gentle Introduction to Graph Neural Networks

Learn about the components needed for building a graph neural network.

Read it

Collective 679 item image


A Mac web-browser for research that helps programmers think clearly.

Check it out

Collective 679 item image

Focusss v2

Super-cool form focus idea by Hakim El Hattab.

Check it out

Collective 679 item image

13.8 billion years ago

A beautiful globe with surface sampling made by Louis Hoebregts.

Check it out

Collective 679 item image

BookWyrm: Social Reading and Reviewing

BookWyrm is a social network for tracking your reading, talking about books, writing reviews, and discovering what to read next.

Check it out

Collective 679 item image

Orchestrating Complexity With Web Animations API

This article will walk you through the main points and techniques that might help you deal with complex animations using the Web Animations API while staying flexible. By Kirill Myshkin.

Read it

Collective 679 item image


A collection of all paper sizes of the world as CSS variables with or without units (to use with CSS aspect-ratio).

Check it out

Collective 679 item image


A privacy-first, open source chat app.

Check it out

Collective 679 item image

Art Data — Artnome

A collection of art data sources for running analytics.

Check it out

Collective 679 item image

FanZone36: Alpine Elf Matmut Endurance Team

Some well-made fun little fan games to explore.

Check it out

Collective 679 item image


A sci-fi hypertext game: Solve a murder in a near future world by diving into the Wikipedia of that world.

Check it out

The post Collective #679 appeared first on Codrops.

10 Tips to Help Video Content Succeed in 2021

Original Source: https://www.webdesignerdepot.com/2021/09/10-tips-to-help-video-content-succeed-in-2021/

According to a recent Hubspot survey, more than 85% of marketers believe video content is essential for any marketing strategy. This percentage is more than 20% higher than in 2016.

Understanding why this is the case is not hard. Modern digital marketing is all about engaging with your audience and sharing personal stories. And there’s simply no better way to do that than video content.

Videos are engaging for people of all ages and less boring than other types of content. However, it’s not easy to create or optimize video content. That’s why we have created a list of the top 10 video content tips and tricks you should follow.

Top 10 Tips and Tricks to Succeed in Video Content Marketing 

Whether you are an influencer, blogger, or business owner, video content is important for promoting your services or products. The following tips will help you improve your video content strategies.

Plus, you can apply these tactics across all websites and platforms: from your website or YouTube channel to social media platforms like Instagram or Twitter.

1. Utilize Video SEO

Contrary to what many believe, SEO does not only apply to written content. In fact, video SEO is just as important for drawing organic traffic to your website or social network account.

You can achieve this in several ways. When you upload a new video, you need to consider things like keywords, tags, file names, and descriptions. However, this is only part of what you can do to optimize your videos for SEO purposes.

There are plenty of video SEO guides for beginners that can help you improve your online presence through your video content. 

2. Identify Your Goals and the Scope of Your Videos

As with written and visual content in general, it is critical to identify your business goals for video content. This is one of the first things you should think about when launching a new video content campaign.

Think about what you want to achieve. For example, do you need to generate new customer leads or expand your audience? Considering the reach of your videos can help you stand out from your competitors.

When it comes to video content, planning is key. For this reason, setting the goals of your strategy should be a priority.

3. Schedule Your Video Content

While it’s important to set goals, no video content strategy will work without consistency. Planning your video content is the best way to be consistent when creating, uploading, and promoting.

There are many online apps and tools that can help you organize your video content strategy. For example, scheduling tools like Buffer or MeetEdgar can help you keep everything organized and save time uploading your videos.

In addition to these social media scheduling tools, you can also use apps like Trello to help you organize your content creation in general.

4. Use Premade Material like Instagram Templates

If you are a professional video creator or video editor, you’ll have no problem creating top-notch video content. But what happens if you have no experience with video content at all?

Luckily, there are plenty of tools out there to make your life easier. For example, if you want to create video stories for Instagram, you can use captivating pre-made Instagram templates.

Editing such templates using software like Photoshop can save you both time and money. However, if you do not have Photoshop experience, you can also create videos using simple online editors like Canva. 

5. Make Your Videos Engaging and Emotional

There are a few tips we would like to share when it comes to the content of videos. An important thing to keep in mind is that your videos should always be engaging. If you don’t try to engage with your audience through your videos, there is a big chance of failure. 

Therefore, whether you own a personal blog or an enormous corporate website, your video content should connect you emotionally with your audience. Adding a personal feel to your videos is a fantastic approach to consider. 

By doing so, your customers/readers will feel the need to engage by sharing their stories with you.  

6. Create Educational and Relevant Video Content

There are a few tips we’d like to share with you when it comes to video content. One important thing to keep in mind is that your videos should always be engaging. If you are not trying to engage your audience through your videos, there is a high chance of failure.

Whether you have a personal blog or a huge corporate website, your video content should connect emotionally with your audience. Adding a personal touch to your videos is an excellent approach to consider.

This way, your customers/readers will feel the need to engage by sharing their stories with you.

7. Implement CTAs

Calls to action are one of the most effective marketing strategies for written content. Although most websites only include CTAs on the homepage, it’s a brilliant thing to also use them in blog posts, videos, and visual content in general.

You should let your customers know how they can interact with your brand. For example, let them know about your website or how they can follow you on social media for more information.

CTAs are the best way to keep your customers and ultimately increase your conversion rates.

8. Focus on Storytelling

Videos that focus on sales often bore viewers. For this reason, you should add some value to your video content. Creating videos that act like stories is a great thing to do.

When you tell a personal story, your customers can better understand your brand and how it can help them. Remember, storytelling makes your content more engaging and interesting.

9. Promote your Content

Say you have developed a great video content strategy and have already created some top-notch videos. What should be your next step? Well, maximizing your target audience is a smart approach.

You can achieve this by promoting your videos on platforms like Facebook, YouTube, Instagram, etc. Another smart move is to incorporate your video content into other content like blog posts, your website, etc.

10. Occasionally Evaluate your Video Content Strategy

Since you have already established your goals and the scope of your videos, you know exactly what you want to achieve with your video content strategy. Therefore, it’s important to evaluate how your plan is working. If you are happy with the analytics of your videos, that’s great.

If not, you can always consider what’s going wrong. For example, maybe you need to promote your videos better or include more CTAs.

Wrap Up

In this article, we analyzed how important video content has become for marketing. For this reason, implementing videos into your marketing strategies is a great thing to do.

If you follow the tips and tricks above, you will increase your video content strategy’s chances of success.


Featured image via Unsplash.


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

The post 10 Tips to Help Video Content Succeed in 2021 first appeared on Webdesigner Depot.

What’s New With DevTools: Cross-Browser Edition

Original Source: https://smashingmagazine.com/2021/09/devtools-cross-browser-edition/

Browser developer tools keep evolving, with new and improved features added all the time. It’s hard to keep track, especially when using more than one browser. With that much on offer, it is not surprising that we feel overwhelmed and use the features we already know instead of keeping up with what’s new.

It’s a shame though, as some of them can make us much more productive.

So, my goal with this article is to raise awareness on some of the newest features in Chrome, Microsoft Edge, Firefox and Safari. Hopefully, it will make you want to try them out, and maybe will help you get more comfortable next time you need to debug a browser-specific issue.

With that said, let’s jump right in.

Chrome DevTools

The Chrome DevTools team has been hard at work modernizing their (now 13 years old) codebase. They have been busy improving the build system, migrating to TypeScript, introducing new WebComponents, re-building their theme infrastructure, and way more. As a result, the tools are now easier to extend and change.

But on top of this less user-facing work, the team did ship a lot of features too. Let me go over a few of them here, related to CSS debugging.


CSS scroll-snapping offers web developers a way to control the position at which a scrollable container stops scrolling. It’s a useful feature for, e.g., long lists of photos where you want the browser to position each photo neatly within its scrollable container automatically for you.

If you want to learn more about scroll-snapping, you can read this MDN documentation, and take a look at Adam Argyle’s demos here.

The key properties of scroll-snapping are:

scroll-snap-type, which tells the browser the direction in which snapping happens, and how it happens;
scroll-snap-align, which tells the browser where to snap.

Chrome DevTools introduced new features that help debug these key properties:

if an element defines scroll-snapping by using scroll-snap-type, the Elements panel shows a badge next to it.

You can click on the scroll-snap badge to enable a new overlay. When you do, several things are highlighted on the page:
the scroll container,
the items that scroll within the container,
the position where items are aligned (marked by a blue dot).

This overlay makes it easy to understand if and how things snap into place after scrolling around. This can be very useful when, e.g., your items don’t have a background and boundaries between them are hard to see.

While scroll snapping isn’t a new CSS feature, adoption is rather low (less than 4% according to chromestatus.com), and since the specification changed, not every browser supports it the same way.

I hope that this DevTools feature will make people want to play more with it and ultimately adopt it for their sites.

Container queries

If you have done any kind of web development in recent years, you have probably heard of container queries. It’s been one of the most requested CSS features for the longest time and has been a very complex problem for browser makers and spec writers to solve.

If you don’t know what container queries are, I would suggest going through Stephanie Eckles’ Primer On CSS Container Queries article first.

In a few words, they’re a way for developers to define the layout and style of elements depending on their container’s size. This ability is a huge advantage when creating reusable components since we can make them adapt to the place they are used in (rather than only adapt to the viewport size which media queries are good for).

Fortunately, things are moving in this space and Chromium now supports container queries and the Chrome DevTools team has started adding tooling that makes it easier to get started with them.

Container queries are not enabled by default in Chromium yet (to enable them, go to chrome://flags and search for “container queries”), and it may still take a little while for them to be. Furthermore, the DevTools work to debug them is still in its early days. But some early features have already landed.

When selecting an element in DevTools that has styles coming from a @container at-rule, then this rule appears in the Styles sidebar of the Elements panel. This is similar to how media queries styles are presented in DevTools and will make it straightforward to know where a certain style is coming from.

As the above screenshot shows, the Styles sidebar displays 2 rules that apply to the current element. The bottom one applies to the .media element at all times and provides its default style. And the top one is nested in a @container (max-width:300px) container query that only takes effect when the container is narrower than 300px.

On top of this, just above the @container at-rule, the Styles pane displays a link to the element that the rule resolves to, and hovering over it displays extra information about its size. This way you know exactly why the container query matched.

Hover over the container query to know why and where it matched.

The Chrome DevTools team is actively working on this feature and you can expect much more in the future.

Chromium Collaboration

Before going into features that other browsers have, let’s talk about Chromium for a little bit. Chromium is an open-source project that Chrome, Edge, Brave, and other browsers are built upon. It means all these browsers have access to the features of Chromium.

Two of the most active contributors to this project are Google and Microsoft and, when it comes to DevTools, they collaborated on a few interesting features that I’d like to go over now.

CSS Layout Debugging Tools

A few years ago, Firefox innovated in this space and shipped the first-ever grid and flexbox inspectors. Chromium-based browsers now also make it possible for web developers to debug grid and flexbox easily.

This collaborative project involved engineers, product managers and designers from Microsoft and Google, working towards a shared goal (learn more about the project itself in my BlinkOn talk).

Among other things, DevTools now has the following layout debugging features:

Highlight multiple grid and flex layouts on the page, and customize if you want to see grid line names or numbers, grid areas, and so on.

Flex and grid editors to visually play around with the various properties.

Play with the various flex alignment properties visually. (Large preview)

Alignment icons in the CSS autocomplete make it easier to choose properties and values.

Highlight on property hover to understand what parts of the page a property applies to.

Highlight various CSS properties independently to understand how they affect the layout. (Large preview)

You can read more information about this on Microsoft’s and Google’s documentation sites.


This was another collaborative project involving Microsoft and Google which, now, makes it possible for all Chromium-based DevTools to be translated in languages other than English.

Originally, there was never a plan to localize DevTools, which means that this was a huge effort. It involved going over the entire codebase and making UI strings localizable.

The result was worth it though. If English isn’t your first language and you’d feel more comfortable using DevTools in a different one, head over to the Settings (F1) and find the language drop-down.

Here is a screenshot of what it looks like in Chrome DevTools:

And here is how Edge looks in Japanese:

Edge DevTools

Microsoft switched to Chromium to develop Edge more than 2 years ago now. While, at the time, it caused a lot of discussions in the web community, not much has been written or said about it since then. The people working on Edge (including its DevTools) have been busy though, and the browser has a lot of unique features now.

Being based on the Chromium open source project does mean that Edge benefits from all of its features and bug fixes. Practically speaking, the Edge team ingests the changes made in the Chromium repository in their own repository.

But over the past year or so, the team started to create Edge-specific functionality based on the needs of Edge users and feedback. Edge DevTools now has a series of unique features that I will go over.

Opening, Closing, and Moving Tools

With almost 30 different panels, DevTools is a really complicated piece of software in any browser. But, you never really need access to all the tools at the same time. In fact, when starting DevTools for the first time, only a few panels are visible and you can add more later.

On the other hand though, it’s hard to discover the panels that aren’t shown by default, even if they could be really useful to you.

Edge added 3 small, yet powerful, features to address this:

a close button on tabs to close the tools you don’t need anymore,
a + (plus) button at the end of the tab bar to open any tool,
a context menu option to move tools around.

The following GIF shows how closing and opening tools in both the main and drawer areas can be done in Edge.

Easily open the tools you need and close the ones you don’t. (Large preview)

You can also move tools between the main area and drawer area:

right-clicking on a tab at the top shows a “Move to bottom” item, and
right-clicking on a tab in the drawer shows a “Move to top” item.

Move tools between the main top area and the bottom drawer area. (Large preview)

Getting Contextual Help with the DevTools Tooltips

It is hard for beginners and seasoned developers alike to know all about DevTools. As I mentioned before, there are so many panels that it’s unlikely you know them all.

To address this, Edge added a way to go directly from the tools to their documentation on Microsoft’s website.

This new Tooltips feature works as a toggleable overlay that covers the tools. When enabled, panels are highlighted and contextual help is provided for each of them, with links to documentation.

You can start the Tooltips in 3 different ways:

by using the Ctrl + Shift + H keyboard shortcut on Windows/Linux (Cmd + Shift + H on Mac);
by going into the main (…) menu, then going into Help, and selecting “Toggle the DevTools Tooltips”;
by using the command menu and typing “Tooltips”.

Display contextual help on the tools. (Large preview)

Customizing Colors

In code editing environments, developers love customizing their color themes to make the code easier to read and more pleasant to look at. Because web developers spend considerable amounts of time in DevTools too, it makes sense for it to also have customizable colors.

Edge just added a number of new themes to DevTools, on top of the already available dark and light themes. A total of 9 new themes were added. These come from VS Code and will therefore be familiar to people using this editor.

You can select the theme you want to use by going into the settings (using F1 or the gear icon in the top-right corner), or by using the command menu and typing theme.

Customize DevTools with one of 9 VS Code themes. (Large preview)

Firefox DevTools

Similar to the Chrome DevTools team, the folks working on Firefox DevTools have been busy with a big architecture refresh aimed at modernizing their codebase. Additionally, their team is quite a bit smaller these days as Mozilla had to refocus over recent times. But, even though this means they had less time for adding new features, they still managed to release a few really interesting ones that I’ll go over now.

Debugging Unwanted Scrollbars

Have you ever asked yourself: “where is this scrollbar coming from?” I know I have, and now Firefox has a tool to debug this very problem.

In the Inspector panel, all elements that scroll have a scroll badge next to them, which is already useful when dealing with deeply nested DOM trees. On top of this, you can click this badge to reveal the element (or elements) that caused the scrollbar to appear.

You can find more documentation about it here.

Visualizing Tabbing Order

Navigating a web page with the keyboard requires using the tab key to move through focusable elements one by one. The order in which focusable elements get focused while using tab is an important aspect of the accessibility of your site and an incorrect order may be confusing to users. It’s especially important to pay attention to this as modern layout CSS techniques allow web developers to rearrange elements on a page very easily.

Firefox has a useful Accessibility Inspector panel that provides information about the accessibility tree, finds and reports various accessibility problems automatically, and lets you simulate different color vision deficiencies.

On top of these features, the panel now provides a new page overlay that displays the tabbing order for focusable elements.

To enable it, use the “Show Tabbing Order” checkbox in the toolbar.

You can find more documentation about it here.

A Brand New Performance Tool

Not many web development areas depend on tooling as much as performance optimization does. In this domain, Chrome DevTools’ Performance panel is best in class.

Over the past few years, Firefox engineers have been focusing on improving the performance of the browser itself, and to help them do this, they built a performance profiler tool. The tool was originally built to optimize the engine native code but supported analyzing JavaScript performance right from the start, too.

Today, this new performance tool replaces the old Firefox DevTools performance panel in pre-release versions (Nightly and Developer Edition). Take it for a spin when you get the chance.

Among other things, the new Firefox profiler supports sharing profiles with others so they can help you improve the performance of your recorded use case.

You can read documentation about it here, and learn more about the project on their GitHub repository.

Safari Web Inspector

Last but not least, let’s go over a few of the recent Safari features.

The small team at Apple has been keeping itself very busy with a wide range of improvements and fixes around the tools. Learning more about the Safari Web Inspector can help you be more productive when debugging your sites on iOS or tvOS devices. Furthermore, it has a bunch of features that other DevTools don’t, and that not a lot of people know about.

CSS Grid Debugging

With Firefox, Chrome, and Edge (and all Chromium-based browsers) having dedicated tools for visualizing and debugging CSS grids, Safari was the last major browser not to have this. Well, now it does!

Fundamentally, Safari now has the same features just like other browsers’ DevTools in this area. This is great as it means it’s easy to go from one browser to the next and still be productive.

Grid badges are displayed in the Elements panel to quickly find grids.
Clicking on the badge toggles the visualization overlay on the page.
A new Layout panel is now displayed in the sidebar. It allows you to configure the grid overlay, see the list of all grids on the page and toggle the overlay for them.

What’s interesting about Safari’s implementation though is that they’ve really nailed the performance aspect of the tool. You can enable many different overlays at once, and scroll around the page without it causing any performance problems at all.

The other interesting thing is Safari introduced a 3-pane Elements panel, just like Firefox, which allows you to see the DOM, the CSS rules for the selected element, and the Layout panel all at once.

Find out more about the CSS Grid Inspector on this WebKit blog post.

A Slew of Debugger Improvements

Safari used to have a separate Resources and Debugger panel. They have merged them into a single Sources panel that makes it easier to find everything you need when debugging your code. Additionally, this makes the tool more consistent with Chromium which a lot of people are used to.

Consistency for common tasks is important in a cross-browser world. Web developers already need to test across multiple browsers, so if they need to learn a whole new paradigm when using another browser’s DevTools, it can make things more difficult than they need to be.

But Safari also recently focused on adding innovative features to its debugger that other DevTools don’t have.

Bootstrap script:
Safari lets you write JavaScript code that is guaranteed to run first before any of the scripts on the page. This is very useful to instrument built-in functions for adding debugger statements or logging for example.

New breakpoint configurations:
All browsers support multiple types of breakpoints like conditional breakpoints, DOM breakpoints, event breakpoints, and more.

Safari recently improved their entire suite of breakpoint types by giving them all a way to configure them extensively. With this new breakpoint feature, you can decide:

if you want a breakpoint to only hit when a certain condition is true,
if you want the breakpoint to pause execution at all, or just execute some code,
or even play an audio beep so you know some line of code was executed.

queryInstances and queryHolders console functions:
These two functions are really useful when your site starts using a lot of JavaScript objects. In some situations, it may become difficult to keep track of the dependencies between these objects, and memory leaks may start to appear, too.

Safari does have a Memory tool that can help resolve these issues by letting you explore memory heap snapshots. But sometimes you already know which class or object is causing the problem and you want to find what instances exist or what refers to it.

If Animal is a JavaScript class in your application, then queryInstances(Animal) will return an array of all of its instances.

If foo is an object in your application, then queryHolders(foo) will return an array of all the other objects that have references to foo.

Closing Thoughts

I hope these features will be useful to you. I can only recommend using multiple browsers and getting familiar with their DevTools. Being more familiar with other DevTools can prove useful when you have to debug an issue in a browser you don’t use on a regular basis.

Know that the companies which make browsers all have teams working on DevTools actively. They’re invested in making them better, less buggy, and more powerful. These teams depend on your feedback to build the right things. Without hearing about what problems you are facing, or what features you lack, it’s harder for them to make the right decisions about what to build.

Reporting bugs to a DevTools team won’t just help you when the fix comes, but may also be helping many others who have been facing the same issue.

It’s worth knowing that the DevTools teams at Microsoft, Mozilla, Apple and Google are usually fairly small and receive a lot of feedback, so reporting an issue does not mean it will be fixed quickly, but it does help, and those teams are listening.

Here are a few ways you can report bugs, ask questions or request features:

Firefox DevTools
Firefox uses Bugzilla as their public bug tracker and anyone is welcome to report bugs or ask for new features by creating a new entry there. All you need is a GitHub account to log in.
Getting in touch with the team can either be done on Twitter by using the @FirefoxDevTools account or logging in to the Mozilla chat (find documentation about the chat here).

Safari Web Inspector
Safari also uses public bug tracking for their WebKit bugs. Here is documentation about how to search for bugs and report new ones.
You can also get in touch with the team on Twitter with @webkit.
Finally, you can also signal bugs about Safari and the Safari Web Inspector using the feedback assistant.

Edge DevTools
The easiest way to report a problem or ask for a feature is by using the feedback button in DevTools (the little stick figure in the top-right corner of the tools).
Asking questions to the team works best over Twitter by mentioning the @EdgeDevTools account.

Chrome DevTools
The team listens for feedback on the devtools-dev mailing list as well as on twitter at @ChromeDevTools.

Since Chromium is the open-source project that powers Google Chrome and Microsoft Edge (and others), you can also report issues on the Chromium’s bug tracker.

With that, thank you for reading!

Popular Design News of the Week: August 30 2021 – September 5, 2021

Original Source: https://www.webdesignerdepot.com/2021/09/popular-design-news-of-the-week-august-30-2021-september-5-2021/

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

Next.js and Drupal Go Together Like PB & Jelly

Couleur.io – Harmonizing Color Palettes for Your Web Projects

11 Open-Source Static Site Generators You Can Use to Build Your Website

Buttons Generator – 100+ Buttons You Can Use In Your Project

3 Essential Design Trends, September 2021

12 CSS Box Shadow Examples

The Fixed Background Attachment Hack

The Internet ‘Died’ Five Years Ago

Media Queries in Responsive Design: A Complete Guide (2021)

The 7 Core Design Principles


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

The post Popular Design News of the Week: August 30 2021 – September 5, 2021 first appeared on Webdesigner Depot.