Tag: Edition


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
08 Sep

What’s New With DevTools: Cross-Browser Edition

by TBSCategories: News

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.

Scroll-snapping

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.

Localization

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
  • 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
  • Chromium
    • 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!

Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
08 Sep

What’s New With DevTools: Cross-Browser Edition

by TBSCategories: News

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.

Scroll-snapping

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.

Localization

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
  • 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
  • Chromium
    • 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!

Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
07 Sep

What’s New With DevTools: Cross-Browser Edition

by TBSCategories: News

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.

Scroll-snapping

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.

Localization

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
  • 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
  • Chromium
    • 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!

Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
07 Sep

What’s New With DevTools: Cross-Browser Edition

by TBSCategories: News

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.

Scroll-snapping

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.

Localization

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
  • 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
  • Chromium
    • 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!

Articles on Smashing Magazine — For Web Designers And Developers

sep-21-finding-the-balance-preview-opt
31 Aug

Stories Of September (2021 Desktop Wallpapers Edition)

by TBSCategories: News

September is just around the corner, and, well, that means… it’s time for some new wallpapers! Since more than ten years now, our monthly wallpapers series is the perfect opportunity for artists and designers from all across the world to challenge their creative skills and dive into a little project just for fun. Telling the story they want to tell, using the tools they love. This always makes for an exciting and unique collection of wallpapers each month anew. And, of course, this month is no exception.

In this post, you’ll find wallpaper designs for September 2021, created with love by the community for the community. All of them are available in versions with and without a calendar and can be downloaded for free. A big thank-you to everyone who shared their artworks with us — this post wouldn’t exist without you!

Last but not least, to cater for some extra variety, we also compiled a little best-of from past September editions at the end of this post. Enjoy!

  • You can click on every image to see a larger preview,
  • We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Submit a wallpaper!

Did you know that you could get featured in our next wallpapers post, too? We are always looking for creative talent! Join in! →

Finding The Balance

“One evening last week I felt a little stressed, so I decided to have a short walk outside. When I went out of the door, I saw two young hares jumping around, and a bat which flew just over my head. I sat down on a garden chair and watched while Jupiter slowly rose above the trees. The crisp air of the autumn night reminded me of how the seasons keep changing. Here in Finland the differences between seasons are extremely large, as both the temperatures and the duration of sunlight vary a lot. However, twice a year on the equinoxes everything is in balance. I hope we all can find the same balance in our own lives.” — Designed by Tuomas Karjalainen from Finland.

Sunny September

“September greets us and invites us to enjoy warm and sunny days.” — Designed by LibraFire from Serbia.

Wine Harvest Season

“Welcome to the wine harvest season in Serbia. It’s September, and the hazy sunshine bathes the vines on the slopes of Fruška Gora. Everything is ready for the making of Bermet, the most famous wine from Serbia. This spiced wine was a favorite of the Austro-Hungarian elite and was served even on the Titanic. Bermet’s recipe is a closely guarded secret, and the wine is produced by just a handful of families in the town of Sremski Karlovci, near Novi Sad. On the other side of Novi Sad, plains of corn and sunflower fields blend in with the horizon, catching the last warm sun rays of this year.” — Designed by PopArt Studio from Serbia.

Back To Business

“They say September is known as the January in the fashion industry. And they’re not the only ones hitting the reset button! Kids go back to school and the workforce returns from their holidays. It takes extra effort to balance all the workload we seem to have forgotten about during the carefree summer days… But we can do it! ActiveCollab wishes you a smooth September.” — Designed by ActiveCollab from the United States.

Go Bananas

Designed by Ricardo Gimenes from Sweden.

Labor Day

“On September 6th, it’s time to celebrate the backbone of the economy, namely workers! A day to celebrate all the hard work, toil, and commitment day in and day out.” — Designed by Ever Increasing Circles from the United Kingdom.

Evening In Monaco

Designed by Viktor Hanacek from Czechia.

Meets For Speed

Designed by Ricardo Gimenes from Sweden.

Oldies But Goodies

Below you’ll find a selection of September wallpapers from our archives that are just too good to be forgotten. Please note that these designs don’t come with a calendar.

Weekend Relax

“Since we are mostly staying in this summer, I’m looking forward for the weekend to enjoy drinks with friends!” — Designed by Robert from the United States.

Terrazzo

“With the end of summer and fall coming soon, I created this terrazzo pattern wallpaper to brighten up your desktop. Enjoy this month!” — Designed by Melissa Bogemans from Belgium.

Better Days Ahead

“A hopeful message we all need right now.” — Designed by Andrew from Portugal.

Flower Soul

“The earth has music for those who listen. Take a break and relax and while you drive out the stress, catch a glimpse of the beautiful nature around you. Can you hear the rhythm of the breeze blowing, the flowers singing, and the butterflies fluttering to cheer you up? We dedicate flowers which symbolize happiness and love to one and all.” — Designed by Krishnankutty from India.

Autumn Rains

“This autumn, we expect to see a lot of rainy days and blues, so we wanted to change the paradigm and wish a warm welcome to the new season. After all, if you come to think of it: rain is not so bad if you have an umbrella and a raincoat. Come autumn, we welcome you!” — Designed by PopArt Studio from Serbia.

Summer Ending

“As summer comes to an end, all the creatures pull back to their hiding places, searching for warmth within themselves and dreaming of neverending adventures under the tinted sky of closing dog days.” — Designed by Ana Masnikosa from Belgrade, Serbia.

Funny Cats

“Cats are beautiful animals. They’re quiet, clean, and warm. They’re funny and can become an endless source of love and entertainment. Here for the cats!” — Designed by UrbanUI from India.

Finding Jaguar

“Nature and our planet have given us life, enabled us to enjoy the most wonderful place known to us in the universe. People have given themselves the right to master something they do not fully understand. We dedicate this September calendar to a true nature lover, Vedran Badjun from Dalmatia, Croatia, who inspires us to love our planet, live in harmony with it and appreciate all that it has to offer. Amazon, Siberia, and every tree or animal on the planet are treasures we lose every day. Let’s change that!” — Designed by PopArt Studio from Serbia.

Cacti Everywhere

“Seasons come and go, but our brave cactuses still stand. Summer is almost over, and autumn is coming, but the beloved plants don’t care.” — Designed by Lívia Lénárt from Hungary.

Summer Is Leaving

“It is inevitable. Summer is leaving silently. Let us think of ways to make the most of what is left of the beloved season.” — Designed by Bootstrap Dashboards from India.

Hungry

Designed by Elise Vanoorbeek from Belgium.

Summer Collapsed Into Fall

“The lands are painted gold lit with autumn blaze. And all at once the leaves of the trees started falling, but none of them are worried. Since, everyone falls in love with fall.” — Designed by Mindster from India.

Long Live Summer

“While September’s Autumnal Equinox technically signifies the end of the summer season, this wallpaper is for all those summer lovers, like me, who don’t want the sunshine, warm weather and lazy days to end.” — Designed by Vicki Grunewald from Washington.

Listen Closer… The Mushrooms Are Growing

“It’s this time of the year when children go to school and grown-ups go to collect mushrooms.” — Designed by Igor Izhik from Canada.

#Spring

“Such a lovely time of the year in Melbourne!” — Designed by Tazi from Australia.

Never Stop Exploring

Designed by Ricardo Gimenes from Sweden.

Articles on Smashing Magazine — For Web Designers And Developers

aug-21-cowabunga-preview-opt
31 Jul

Good Vibes In August (2021 Desktop Wallpapers Edition)

by TBSCategories: News

Everybody loves a beautiful wallpaper to freshen up their desktops and home screens, right? To cater for new and unique artworks on a regular basis, we started our monthly wallpapers challenge more than ten years ago, and from the very beginning to today, artists and designers from all across the world have accepted the challenge and submitted their designs to it. Just like this month.

In this post, you’ll find their wallpapers for August 2021. All of them come in versions with and without a calendar, so no matter if you need to count down the days to a big deadline (or a few days off, maybe?) or plan to use your favorite wallpaper even after the month has ended, we’ve got you covered. A big thank-you to everyone who shared their designs with us — we sincerely appreciate it!

As a little bonus goodie, we also added some “oldies” at the end of this post, timeless wallpaper treasures that we rediscovered way down in our archives and that are just too good to be forgotten. Now there’s only one question left to be answered: Which one to choose? Happy August!

  • You can click on every image to see a larger preview,
  • We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Submit a wallpaper!

Did you know that you could get featured in our next wallpapers post, too? We are always looking for creative talent! Join in! →

Cowabunga

Designed by Ricardo Gimenes from Sweden.

Work Hard, Play Hard

“It seems the feeling of summer breaks we had back in school never leaves us. The mere thought of alarm clocks feels wrong in the summer, especially if you’ve recently come back from a trip to the seaside. So, we try to do our best during working hours and then compensate with fun activities and plenty of rest. Cheers!” — Designed by ActiveCollab from the United States.

Easy Peasy Lemon Squeezy

Designed by Melissa Bogemans from Belgium.

Ivory Tower

“August 12th marks World Elephant Day, highlighting the need for the protection and conservation of wild elephants across Asia and Africa. Today, African elephants are endangered due to wildlife crime, primarily poaching for the illegal ivory trade, whereas Asian elephants face habitat loss due to human-elephant conflict. Driven to the brink of extinction, elephants rely on us to create a non-exploitive and sustainable environment where these magnificent creatures can be safe.” — Designed by PopArt Studio from Novi Sad, Serbia.

Do What You Love

“The whole purpose of life is to enjoy and do what you love. When you are not able to enjoy your life, you are missing your life’s purpose and your chance to make a difference in your world.” — Designed by Hitesh Puri from Delhi, India.

Love Is In The Air

Designed by Ricardo Gimenes from Sweden.

Senior Citizen’s Day

“It’s a day to give thanks for all the selfless support grandparents offer to their grandchildren and working parents. For all the wisdom bestowed over the years and all the love and encouragement provided. Here’s to you all, you Grandmas, Grandpas, Memas, Nanas, Pops, Granddads, and all those other fond names you’ve been given!” — Designed by Ever Increasing Circles from the United Kingdom.

Balance Of Nature

“We have been disturbing the fragile balance of nature for too long due to our own greed. The time has come to weigh what is more valuable to us, those superficial material riches or the health and well-being of our only home.” — Designed by LibraFire from Serbia.

Oldies But Goodies

Childhood memories, camping under the stars, or a simple pencil and a piece of paper — a lot of things have inspired the design community to create an August wallpaper in the last few years. Here are some favorites from our archives. (Please note that these designs don’t come with a calendar.)

Live In The Moment

“My dog Sami inspired me for this one. He lives in the moment and enjoys every second with a big smile on his face. I wish we could learn to enjoy life like he does! Happy August everyone!” — Designed by Westie Vibes from Portugal.

Childhood Memories

Designed by Francesco Paratici from Australia.

Bee Happy!

“August means that fall is just around the corner, so I designed this wallpaper to remind everyone to ‘bee happy’ even though summer is almost over. Sweeter things are ahead!” — Designed by Emily Haines from the United States.

Psst, It’s Camping Time…

“August is one of my favorite months, when the nights are long and deep and crackling fire makes you think of many things at once and nothing at all at the same time. It’s about heat and cold which allow you to touch the eternity for a few moments.” — Designed by Igor Izhik from Canada.

Hello Again

“In Melbourne it is the last month of quite a cool winter so we are looking forward to some warmer days to come.” — Designed by Tazi from Australia.

Launch

“The warm, clear summer nights make me notice the stars more — that’s what inspired this space-themed design!” — Designed by James Mitchell from the United Kingdom.

Leo

“I’m always interested in learning more about the zodiac signs. July 23 to August 23 is the time of the Lion, Leo. I based my wallpaper design around this and included the constellation of Leo as well. Enjoy!” Designed by Franny Van Eyck from Wisconsin, USA.

Dessert First

Designed by Elise Vanoorbeek from Belgium.

Happiness Happens In August

“Many people find August one of the happiest months of the year because of holidays. You can spend days sunbathing, swimming, birdwatching, listening to their joyful chirping, and indulging in sheer summer bliss. August 8th is also known as the Happiness Happens Day, so make it worthwhile.” — Designed by PopArt Studio from Serbia.

Ahoy

Designed by Webshift 2.0 from South Africa.

A Bloom Of Jellyfish

“I love going to aquariums – the colours, patterns and array of blue hues attract the nature lover in me while still appeasing my design eye. One of the highlights is always the jellyfish tanks. They usually have some kind of light show in them, which makes the jellyfish fade from an intense magenta to a deep purple – and it literally tickles me pink. On a recent trip to uShaka Marine World, we discovered that the collective noun for jellyfish is a bloom and, well, it was love-at-first-collective-noun all over again. I’ve used some intense colours to warm up your desktop and hopefully transport you into the depths of your own aquarium.” — Designed by Wonderland Collective from South Africa.

Rain, Rain Go Away!

“Remember the nursery rhyme where the little boy pleads the rain to go away? It is one of the most pleasant and beautiful seasons when the whole universe buckles up to dance to the rhythm of the drizzles that splash across the earth. And, it is August, the time of the year when monsoons add a lot of color and beauty to nature. We welcome everyone to enjoy the awesomeness of monsoons.” — Designed by Acodez from India.

World Alpinism Day

“International Day of Alpinism and Climbing.” Designed by cheloveche.ru from Russia.

Olympic Summer

“The Summer Olympic Games promise two weeks of superhuman struggle for eternal glory. Support your favorites and enjoy hot August.” — Designed by PopArt Studio from Serbia.

The Ocean Is Waiting

“In August, make sure you swim a lot. Be cautious though.” — Designed by Igor Izhik from Canada.

Handwritten August

“I love typograhy handwritten style.” — Designed by Chalermkiat Oncharoen from Thailand.

Embrace Summer!

“You’ve waited 300 days for summer, better hold on to it!” — Designed by Mira Hoayek from Lebanon.

Oh La La…. Paris’ Night

“I like the Paris’ night! All is very bright!” — Designed by Verónica Valenzuela from Spain.

Monsoon Sale!

“Hey monsoon is here! So grab your umbrella in this monsoon sale, and don’t miss the fun in the rain.” Designed by Debobrata Debnath from India.

Searching for Higgs Boson

Designed by Vlad Gerasimov from Russia.

Articles on Smashing Magazine — For Web Designers And Developers

july-21-against-the-current-preview-opt
30 Jun

The Many Shades Of July (2021 Desktop Wallpapers Edition)

by TBSCategories: News

Often, it’s the little things that inspire us and that we treasure most. The sky shining in the most beautiful colors as a seemingly endless summer day comes to an end, riding your bike through a light rain shower on a hot July afternoon, or maybe it’s a scoop of your favorite ice cream that refuels your batteries? No matter what big and small adventures July will have in store for you this year, our new batch of wallpapers is bound to cater for some inspiration along the way.

More than ten years ago, we started this wallpapers series to bring you a new selection of beautiful, unique, and inspiring wallpapers every month. It’s a community effort, made possible by artists and designers from all across the globe who challenge their creative skills to cater for some good vibes on your screens. And, well, it wasn’t any different this time around.

In this post, you’ll find their wallpapers for July 2021. All of them come in versions with and without a calendar and can be downloaded for free. A huge thank-you to everyone who submitted their artworks — we sincerely appreciate it! As a little bonus goodie, we also compiled some favorites from past July editions at the end of this post. Maybe you’ll discover one of your almost-forgotten favorites in there, too? Happy July!

  • You can click on every image to see a larger preview,
  • We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Submit a wallpaper!

Did you know that you could get featured in our next wallpapers post, too? We are always looking for creative talent! Join in! →

Against The Current

“‘I don’t care that they stole my idea. I care that they don’t have any of their own.’ July 10th marks 165 years since the birth of Nikola Tesla, inventor, engineer, and futurist who helped shape the world as we know it today. Tesla’s inventions brought electricity to all corners of the world, paved the way for wireless communication, and revolutionized energy production. But underneath all the discoveries and the good they brought, Tesla’s life is shrouded in mystery. His dream of free wireless energy, research on understanding the aether, and the enigmatic disappearance of his records leaves many questions unanswered.” — Designed by PopArt Studio from Serbia.

Less Busy Work, More Fun!

Designed by ActiveCollab from the United States.

Summer Season

“I’m an avid runner, and I have some beautiful natural views surrounding my city. The Smoky Mountains are a bit further east, so I took some liberties, but Tennessee’s nature is nothing short of beautiful and inspiring.” — Designed by Cam Elliott from Memphis, TN.

Flamingos

“Well, if I think about the month July, the first thing what comes up is summer. So I wanted a theme about summer and I went looking on the internet for summer things. And after a few ideas, I saw a flamingo and I just started to draw some things. And I loved the idea that if you put two flamingos together like I did here, a heart shape will grow.” — Designed by Froukje from the Netherlands.

Nightly Carnival

“July brings the yearly carnival near my hometown, so I decided to design a summer evening carnival.” — Designed by Bregje Damen from the Netherlands.

Surfer Cat

Designed by Ricardo Gimenes from Sweden.

Space

“In July, the earth is farthest from the sun. That’s what inspired me to make a space-themed calendar for the month July.” — Designed by Rosalie Toorians from the Netherlands.

The Ancient Device

Designed by Ricardo Gimenes from Sweden.

Sweet As A Peach

“One of my favorite summer fruits for a few years now is the peach. It always reminds me of vacation and that brings me joy. Hope you all enjoy this month, too!” — Designed by Melissa Bogemans from Belgium.

Independence Day

“When you hear the word ‘July’, what comes to your mind? For us, it’s the ‘Fourth of July’, so our design team made a stunning wallpaper in commemoration of the Declaration of Independence of the United States.” — Designed by Ever Increasing Circles from the United Kingdom.

Sun At Dawn

“I created a wallpaper that reminded me of late summer nights when the sun is slowly setting.” — Designed by Bibi Goelema from the Netherlands.

Ocean Full Of Stars

“I wanted to make something that reminded me of summer but I wanted to keep that dark and cozy vibe, so I decided to go with a whale swimming through space. Summer for me is a time to be free from responsibilities like school and to just hang around, which is what I wanted to make.” — Designed by Ilse van Dinther from the Netherlands.

Artemis And Athena

“Artemis has the sign Cancer as a zodiac sign and this is also a zodiac sign in July. Athena was always celebrated during the month of July, in ancient Athens. Since I knew this, I decided to put those two together in a wallpaper. The way Athena and Artemis look are inspired by Lore Olympus.” — Designed by Gigi Kim from the Netherlands.

4th Of July And Apollo 11

“I’m a huge space nerd and wanted to celebrate the Apollo 11 moon landing in tandem with Independence Day.” — Designed by Jelle Guit from the Netherlands.

Colorful Summer

“Two weeks ago, I got the school assignment to make a wallpaper and send this to you. I have made this picture at Kronenburgerpark in Nijmegen, the Netherlands. Since the coronavirus is on its way back, we can go back to the ‘old normal’ and do things we haven’t been able to do in over a year. So it will be a colorful summer. And that was my inspiration to take this picture and send it as a wallpaper.” — Designed by Jorn Meijs from the Netherlands.

4th Of July

“Our teacher told us about the Smashing Magazine wallpapers. So we participated with our class to make a wallpaper.” — Designed by Jarno van der Linden from the Netherlands.

Bentley Bentayga Speed

“If everything goes according to plan, the Bentley Bentayga Speed will drop on the first of July. I made this Bentley because I wanted to make something that I’m interested in myself. In my spare time I like to make car illustrations so I knew immediately the style that I wanted to use. I’m personally very excited for the drop of the Bentley.” — Designed by Nick Geurds from the Netherlands.

Oldies But Goodies

To make your July even more colorful, we compiled some wallpaper goodies from past years’ editions below. Please note that these designs don’t come with a calendar.

Birdie July

Designed by Lívi Lénárt from Hungary.

Eternal Summer

“And once you let your imagination go, you find yourself surrounded by eternal summer, unexplored worlds and all-pervading warmth, where there are no rules of physics and colors tint the sky under your feet.” — Designed by Ana Masnikosa from Belgrade, Serbia.

Riding In The Drizzle

“Rain has come, showering the existence with new seeds of life. Everywhere life is blooming, as if they were asleep and the falling music of raindrops have awakened them. Feel the drops of rain. Feel this beautiful mystery of life. Listen to its music, melt into it.” — Designed by DMS Software from India.

Summer Cannonball

“Summer is coming in the northern hemisphere and what better way to enjoy it than with watermelons and cannonballs.” — Designed by Maria Keller from Mexico.

Strive For Progress, Not Perfection

“I created this wallpaper as a daily reminder that it’s better to take one small step towards my goal every day than to do nothing at all out of fear that it won’t be perfect. I hope you enjoy it and it helps you keep motivated every day!” — Designed by Andrew from the United States.

Taste Like Summer!

“In times of clean eating and the world of superfoods there is one vegetable missing. An old, forgotten one. A flower actually. Rare and special. Once it had a royal reputation (I cheated a bit with the blue). The artichocke — this is my superhero in the garden! I am a food lover — you too? Enjoy it — dip it!” — Designed by Alexandra Tamgnoué from Germany.

Island River

“Make sure you have a refreshing source of ideas, plans and hopes this July. Especially if you are to escape from urban life for a while.” — Designed by Igor Izhik from Canada.

Day Turns To Night

Designed by Xenia Latii from Germany.

Captain Amphicar

“My son and I are obsessed with the Amphicar right now, so why not have a little fun with it?” — Designed by 3 Bicycles Creative from the United States.

Tropical Lilies

“I enjoy creating tropical designs, they fuel my wanderlust and passion for the exotic. Instantaneously transporting me to a tropical destination.” — Designed by Tamsin Raslan from the United States.

July Rocks!

Designed by Joana Moreira from Portugal.

Alentejo Plain

“Based in the Alentejo region, in the south of Portugal, where there are large plains used for growing wheat. It thus represents the extensions of the fields of cultivation and their simplicity. Contrast of the plain with the few trees in the fields. Storks that at this time of year predominate in this region, being part of the Alentejo landscape and mentioned in the singing of Alentejo.” — Designed by José Guerra from Portugal.

Fire Camp

“What’s better than a starry summer night with an (unexpected) friend around a fire camp with some marshmallows? Happy July!” — Designed by Etienne Mansard from the UK.

Summertime

“Since I’m a big fan of Mid-Century Modern design, I changed George Nelson’s Starburst clock with 12 points — a fitting schematic of the sun with a spot-on summertime color palette — into a ‘sundial calendar’ with 31 points, one for each day of July. Illustrator’s Polar Grid tool helped get the spacing just right, and I retained the construction lines because the extra layer appealed to me. The warm yellow background is borrowed from his Kangaroo chair, and the typographic choice references the cover of Pentagram’s monograph, ‘George Nelson On Design.’” — Designed by Brian Frolo from Cleveland, Ohio, USA.

Hot Air Balloon

Designed by Studcréa from France

Ice Cream vs. Hot Dog

“It’s both ‘National Ice Cream Month’ and ‘National Hot Dog Month’ over in the US, which got me thinking — which is better? With this as your wallpaper, you can ponder the question all month!” — Designed by James Mitchell from the UK.

Night Sky Magic

Designed by Ricardo Gimenes from Sweden.

My July

Designed by Cátia Pereira from Portugal.

Floral Thing

“The wallpaper which I created consists of my personal sketches of Polish herbs and flowers. I wanted it to be light and simple with a hint of romantic feeling. I hope you’ll enjoy it!” — Designed by Beata Kurek from Poland.

Sunset

“I decided to create a wallpaper to bring this summer feeling to the desktop.” — Designed by Mladen Milinovic from Germany.

Spectate

Designed by Tekstografika from Russia.

An Intrusion Of Cockroaches

“Ever watched Joe’s Apartment when you were a kid? Well, that movie left a soft spot in my heart for the little critters. Don’t get me wrong: I won’t invite them over for dinner, but I won’t grab my flip flop and bring the wrath upon them when I see one running in the house. So there you have it… three roaches… bringing the smack down on that pesky human… ZZZZZZZAP!!” — Designed by Wonderland Collective from South Africa.

Summer Never Ends!

“July is a very special month to me — it’s the month of my birthday and of the best cherries.” — Designed by Igor Izhik from Canada.

Melting July

“July often brings summer heat and we all wish for something cold to take it away… If you take a closer look, you will see an ice cream melting from the sunset. Bon appetite!” — Designed by PopArt Studio from Serbia.

Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
june-21-mother-nature-new-preview-opt
31 May

Happy June Vibes For Your Screen (2021 Desktop Wallpapers Edition)

by TBSCategories: News

There’s an artist in everyone. Some bring their creative ideas to life with digital tools, others capture the perfect moment with a camera, or love to grab pen and paper to create little doodles or pieces of lettering. And even if you think you’re far away from being an artist, well, it might just be hidden somewhere deep inside of you. So why not explore it?

Since more than ten years, our monthly wallpapers series is the perfect opportunity to do just that: to challenge your creative skills and break out of your daily routine to do something just for fun, fully immersing yourself in the creative process.

For this post, folks from across the globe once again took on the challenge and designed beautiful and unique wallpapers to cater for some good vibes on your screens. All of them come in versions with and without a calendar for June 2021 and can be downloaded for free. At the end of this post, we also compiled some wallpaper goodies from our archives that are just too good to be forgotten. A big thank-you to everyone who shared their designs with us — this post wouldn’t exist without you. Happy June!

  • You can click on every image to see a larger preview,
  • We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Submit a wallpaper!

Did you know that you could get featured in our next wallpapers post, too? We are always looking for creative talent! Join in! →

Mother Nature

“Rain, fog, and winter jackets have been our companions for the last couple of weeks, but we are challenging the gloomy weather with this colorful, vibrant, picturesque calendar design. Spring is the most wonderful time of the year, intense, powerful, and vivid. We hope to summon sunny June with our desktop wallpaper – join us!” — Designed by PopArt Studio from Novi Sad, Serbia.

Reef Days

“June brings the start of summer full of bright colors, happy memories, and traveling. What better way to portray the goodness of summer than through an ocean folk art themed wallpaper. This statement wallpaper gives me feelings of summer and I hope to share that same feeling with others.” — Designed by Taylor Davidson from Kentucky.

Happy Father’s Day

“Whatever you call them, Pa, Dad, Daddy, Pops, they all have one thing in common: they are our superheroes. So, to honor superhero fathers this Father’s Day, we created this super calendar for you to enjoy.” — Designed by Ever Increasing Circles from the United Kingdom.

Bikini Season

“June reminds me of growing up on the lake. For me, this month is the official start of bikini season! I wanted to create this wallpaper to get everyone excited to put on their favorite suit and find their favorite body of water.” — Designed by Katie Ulrich from the United States.

Summer Party

Designed by Ricardo Gimenes from Sweden.

Happy Squatch

“I just wanted to capture the atmosphere of late spring/early summer in a fun, quirky way that may be reflective of an adventurous person during this time of year.” — Designed by Nick Arcarese from the United States.

Dancing In The Summer Moonlight

“If you’re happy and you know it – show some dance moves – because summer is finally here!” — Designed by ActiveCollab from the United States.

Love Yourz

“J Cole is one of the most inspiring hip hop artists and is known for his famous song ‘Love Yourz’. With all of the negativity and hate we have been having the past year, this is a message to remind people to love your life (love yourz) because there is no such thing as a life that is better than yours.” — Designed by James from Pennsylvania.

Made For Greatness

“Inspiring to more than mediocrity.” — Designed by Katherine Bollinger from the United States.

Summertime

Designed by Ricardo Gimenes from Sweden.

This Is How You Start The Day

“When I think of June, I think of what summer items make you happy. For the 21+ club, summer means grabbing a drink with your friends on a hot summer day. The preferred drink of the summer is bottomless mimosas! And what better time to start drinking than the beginning of the day (responsibly of course)!” — Designed by Carolyn Choates from the United States.

Under The Starlight

“After being cooped up inside for so long, everyone needs a little nature break! And what’s more calming than a crackling campfire on a cool midsummer night, looking up at the shining stars and full moon!” — Designed by Hannah Basham from the United States.

Oldies But Goodies

Ready for more? Below you’ll find a little best-of from past June wallpapers editions. Enjoy! (Please note that these designs don’t come with a calendar.)

Summer Coziness

“I’ve waited for this summer more than I waited for any other summer since I was a kid. I dream of watermelon, strawberries, and lots of colors.” — Designed by Kate Jameson from the United States.

Wildlife Revival

“In these turbulent times for men, we are witnessing the extraordinary rebirth of nature, especially of the wildlife around the planet. Maybe this situation is a blessing in disguise? Either way, one thing is for sure, this planet is the home that we share with all other forms of life and it is our obligation and sacred duty to protect it.” — Designed by LibraFire from Serbia.

Summer Is Coming

“Imagine a sunny beach and an endless blue sea. Imagine yourself right there. Is it somewhere in Greece? The Mediterranean? North Africa? Now turn around and start wandering through those picturesque, narrow streets. See all those authentic white houses with blue doors and blue windows? Feel the fragrance of fresh flowers? Stop for a second. Take a deep breath. Seize the moment. Breathe in. Breathe out. Now slowly open your eyes. Not quite there yet? Don’t worry. You will be soon! Summer is coming…” — Designed by PopArt Studio from Serbia.

Solstice Sunset

“June 21 marks the longest day of the year for the Northern Hemisphere — and sunsets like these will be getting earlier and earlier after that!” — Designed by James Mitchell from the United Kingdom.

Ice Creams Away!

“Summer is taking off with some magical ice cream hot air balloons.” — Designed by Sasha Endoh from Canada.

Deep Dive

“Summer rains, sunny days and a whole month to enjoy. Dive deep inside your passions and let them guide you.” — Designed by Ana Masnikosa from Belgrade, Serbia.

The Call Of Koel

“The peak of summer is upon us, and June brings scorching heat to most places in India. Summer season in my state also reminds me of the bird songs, especially the Koel bird. A black bird with a red eye, this bird’s elegant voice rings through the trees on hot summer afternoons. This June, I have created a wallpaper to give life to this experience — the birds singing in scorching heat give us some respite!” — Designed by Anuja from India.

Oh, The Places You Will Go!

“In celebration of high school and college graduates ready to make their way in the world!” — Designed by Bri Loesch from the United States.

Bauhaus

“I created a screenprint of one of the most famous buildings from the Bauhaus architect Mies van der Rohe for you. So, enjoy the Barcelona Pavillon for your June wallpaper.” — Designed by Anne Korfmacher from Germany.

Join The Wave

“The month of warmth and nice weather is finally here. We found inspiration in the World Oceans Day which occurs on June 8th and celebrates the wave of change worldwide. Join the wave and dive in!” — Designed by PopArt Studio from Serbia.

Flamingood Vibes Only

“I love flamingos! They give me a happy feeling that I want to share with the world.” — Designed by Melissa Bogemans from Belgium.

Shine Your Light

“Shine your light, Before the fight, Just like the sun, Cause we don’t have to run.” — Designed by Anh Nguyet Tran from Vietnam.

Summer Surf

“Summer vibes.” — Designed by Antun Hirsman from Croatia.

Ice Cream June

“For me, June always marks the beginning of summer! The best way to celebrate summer is of course ice cream, what else?” — Designed by Tatiana Anagnostaki from Greece.

Lavender Is In The Air!

“June always reminds me of lavender — it just smells wonderful and fresh. For this wallpaper I wanted to create a simple, yet functional design that featured — you guessed it — lavender!” — Designed by Jon Phillips from Canada.

Strawberry Fields

Designed by Nathalie Ouederni from France.

Start Your Day

Designed by Elise Vanoorbeek from Belgium.

Pineapple Summer Pop

“I love creating fun and feminine illustrations and designs. I was inspired by juicy tropical pineapples to celebrate the start of summer.” — Designed by Brooke Glaser from Honolulu, Hawaii.

<img loading=”lazy” decoding=”async” src=”https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16db22ee-c7f8-47a3-856c-992c82cd61f9/june-16-pineapple-summer-pop-preview-opt.png” alt=”Pineapple Summer Pop”

Nine Lives!

“I grew up with cats around (and drawing them all the time). They are so funny… one moment they are being funny, the next they are reserved. If you have place in your life for a pet, adopt one today!” — Designed by Karen Frolo from the United States.

Articles on Smashing Magazine — For Web Designers And Developers

may-21-from-nope-to-hope-preview-opt
30 Apr

May Is In The Air (2021 Wallpapers Edition)

by TBSCategories: News

We always try our best to challenge your creativity and get you out of your comfort zone. In all these years we’ve been running it, our monthly wallpapers challenge has turned out to be the perfect occasion to do just that: to put your creative skills to the test, try out a new technique you haven’t tried before, tell a story that matters to you, or indulge in a little project just for fun. And, well, the submissions that reach us every month always make for a unique collection of community artworks, adorning desktops and phone screens and, who knows, maybe even sparking new ideas.

It wasn’t any different this time around. Created with love by designers and artists from across the globe, the wallpapers in this collection all come in versions with and without a calendar for May 2021. For some extra variety, we also compiled a little best-of with designs from our archives at the end of this post. Thank you to everyone who took on the challenge and shared their wallpapers with us — you’re smashing! Happy May!

  • You can click on every image to see a larger preview,
  • We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Submit a wallpaper!

Did you know that you could get featured in our next wallpapers post, too? We are always looking for creative talent! Join in! →

From Nope To Hope

“Hope helps us define what we want in our futures and is part of the self-narrative about our lives we all have running inside our minds. Whether we think about it or not, hope is a part of everyone’s life. Everyone hopes for something. It’s an inherent part of being a human being.” — Designed by Hitesh Puri from Delhi, India.

Night Falls In Cairo

“Night falls in Cairo and it is the perfect moment to walk through its streets and its pyramids.” — Designed by Veronica Valenzuela from Spain.

Working From Home

“After more than a year of working remotely, we have developed a lasting connection between our decorated home offices, our outdoor spaces, and our beloved pets. Our diverse environments play a role in our newfound identities as we learn to navigate a remote world.” — Designed by Mad Fish Digital from Portland, OR.

The Off-Hours Guardian

“In May, we are marking Labour Day, the international holiday celebrating workers’ achievements and urging fair pay and better working conditions. But for many, this day will be a reminder of countless hours of overtime, stress, and strain caused by tight deadlines, lack of workers’ rights for freelancers, and a paycheck that covers just the basics. Our thoughts are with all of you who will spend International Workers’ Day at their jobs, with freelancers fighting for their rights, and with anyone who feels difficulty maintaining their work-life balance.” — Designed by PopArt Studio from Serbia.

That’s Cracking

Designed by Ricardo Gimenes from Sweden.

Love Japanese Food

Designed by Ricardo Gimenes from Sweden.

American French Fries

Designed by Ricardo Gimenes from Sweden.

Oldies But Goodies

Some bold, others delicate, some minimalist, others witty — the May wallpapers which reached us in the past few years are as diverse as the artists who created them. Here are some of our favorites from the past. Which one is yours? (Please note that these designs come from our archives and, thus, don’t include a calendar.)

Today, Yesterday, Or Tomorrow

“During the last few months we have experienced significant and profound changes in our lifestyle and work habits due to the pandemic. One of the most signifcant changes is how we relate to time. Our day to day blurs as we try to make the best of this situation while hoping for a better tomorrow. While working on my daily lettering practice, I lost track of time and thought what day is it today? From there, I wondered if it was today, yesterday, or tomorrow. The rest followed as I kept thinking how time and routine or the new routine of being home blurs the days for each of us.” — Designed by Alma Hoffmann from the United States.

Sweet Lily Of The Valley

“The ‘lily of the valley’ came earlier this year. In France, we celebrate the month of May with this plant.” — Designed by Philippe Brouard from France.

Spring Gracefulness

“We don’t usually count the breaths we take, but observing nature in May, we can’t count our breaths being taken away.” — Designed by Ana Masnikosa from Belgrade, Serbia.

Spring Is In The Air

“Spring is the most inspiring time of the year, so I’ve decided to create this wallpaper to celebrate this beautiful season.” — Designed by Hristina Hristova from Bulgaria.

Enjoy May!

“Springtime, especially Maytime is my favorite time of the year. And I like popsicles — so it’s obvious isn’t it?” — Designed by Steffen Weiß from Germany.

Poppies Paradise

Designed by Nathalie Ouederni from France.

May The Force Be With You

“Yoda is my favorite Star Wars character and ‘may’ has funny double meaning.” — Designed by Antun Hirsman from Croatia.

Birds Of May

“A little-known ‘holiday’ on May 4th known as ‘Bird Day’. It is the first holiday in the United States celebrating birds. Hurray for birds!” — Designed by Clarity Creative Group from Orlando, FL.

April Showers Bring Magnolia Flowers

“April and May are usually when everything starts to bloom, especially the magnolia trees. I live in an area where there are many and when the wind blows, the petals make it look like snow is falling.” — Designed by Sarah Masucci from the United States.

Cool As An Octopus

“A fear I need to conquer inspired this wallpaper design. I never really liked the ocean because of how much we don’t know about it or anything that lives in it. However, I have decided to try and focus on the beautiful parts of this great unknown by choosing an octopus.” — Designed by Alexandra Covaleski from the United States.

Mental Health Awareness Day

Designed by Kay Karremans from Belgium.

Leaves Of Grass

“For many, the month of May is the preferred month of the year. Nature blossoms, birds sing, and leaves of grass sprout all around us. Coincidentally, this is the month at the end of which the poet Walt Whitman was born. As he said in his famous poetry collection: ‘Spontaneous me, Nature, The loving day, the mounting sun, the friend I am happy with, The arm of my friend hanging idly over my shoulder.’ Sounds like a perfect setting to fly a kite — so, let’s get to it!” — Designed by PopArt Studio from Novi Sad, Serbia.

Asparagus Say Hi!

“In my part of the world, May marks the start of seasonal produce, starting with asparagus. I know spring is finally here and summer is around the corner when locally-grown asparagus shows up at the grocery store.” — Designed by Elaine Chen from Toronto, Canada.

Celestial Longitude Of 45°

“Lixia is the 7th solar term according to the traditional East Asian calendars, which divide a year into 24 solar terms. It signifies the beginning of summer in East Asian cultures. Usually begins around May 5 and ends around May 21.” — Designed by Hong, Zi-Cing from Taiwan.

Stone Dahlias

Designed by Rachel Hines from the United States.

Hope Shakes The Branches

“The promise of the return of spring feels normal in our new strange and abnormal world.” — Designed by Jeffrey Berg from the United States.

Make A Wish

Designed by Julia Versinina from Chicago, USA.

Old vs. New

Designed by Wannes De Roy from Belgium.

Be On Your Bike!

“May is National Bike Month! So, instead of hopping in your car, grab your bike and go. Our whole family loves that we live in our bike-friendly community. So, bike to work, to school, to the store, or to the park — sometimes it is faster. Not only is it good for the environment, but it is great exercise!” — Designed by Karen Frolo from the United States.

Mondriaan

Designed by Siemon Donvil from Belgium.

  • preview
  • without calendar: 1024×768, 1280×800, 1920×1080, 2560×1440

    • Articles on Smashing Magazine — For Web Designers And Developers

    apr-21-european-capital-of-culture-2021-preview-opt
    31 Mar

    The Small Joys Of April (2021 Wallpapers Edition)

    by TBSCategories: News

    Starting off the new month with a little inspiration boost — that’s the motivation behind our monthly wallpapers series which has been going on for more than ten years already. Each month, the wallpapers are created by the community for the community and everyone who has an idea for a design is welcome to submit it — experienced designers just like aspiring artists. Of course, it wasn’t any different this time around.

    For this edition, creative folks from all across the globe once again challenged their skills to cater for some good vibes on your screens. The wallpapers all come in versions with and without a calendar for April 2021 and can be downloaded for free. A huge thank-you goes out to everyone who shared their designs with us — you’re smashing!

    Last but not least, you’ll also find a selection of April favorites from our archives at the end of this post. Because, well, some things are just too good to be forgotten, right? Enjoy!

    • You can click on every image to see a larger preview,
    • We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

    Submit a wallpaper

    Did you know that you could get featured in our next wallpapers post, too? We are always looking for creative talent! Don’t be shy, join in! →

    European Capital Of Culture 2021

    “The festivities marking Novi Sad as the European Capital of Culture may have been postponed to 2022, but to us, Novi Sad is the cultural, artistic, and educational hub every day. Novi Sad is a wonderful mix of various cultures and traditions, unhurried days, and memorable nights. From hiking endeavors on Fruška Gora Marathon and laid-back picnics in many of our city’s parks and Danube quay, the sounds of tambura coming from local restaurants to Petrovaradin fortress, jumping to the rhythm of global hits on Exit festival, museums and galleries, pubs and nightclubs in Laze Telečkog, the upbeat street of Novi Sad’s urban and night life — Novi Sad welcomes you with its diversity, uniqueness, and passion.” — Designed by PopArt Studio from Serbia.

    Sunset In Sydney

    “I can see a ship sailing in the river while I am hearing a beautiful opera.” — Designed by Veronica Valenzuela from Spain.

    Spring Time

    Designed by Ricardo Gimenes from Sweden.

    Happy Easter

    “Easter always feels like the start of Spring! And this year, after a particularly hard winter of lockdowns, it’s needed more than ever. Time to start living the outdoor life again and feeling the warmth of the sun! Happy Easter everyone!” — Designed by Ever Increasing Circles from the United Kingdom.

    April Showers

    “Inspired by the old saying, April Showers bring May flowers!” — Designed by Milica from Serbia.

    I’m Ready For Spring

    Designed by Ricardo Gimenes from Sweden.

    Smashing Time

    Designed by Ricardo Gimenes from Sweden.

    Our Only Home

    “In April, we celebrate World Health Day. This year’s celebration is perhaps more relevant than ever before. In addition to caring for the health of humanity, let us also take care of the health of the planet, because it is our only home.” — Designed by LibraFire from Serbia.

    Oldies But Goodies

    Sakura, rainy days, imagination filling up one’s mind with ideas — often it was the little things that inspired the community to design a wallpaper for April. Below you’ll find a selection of some of these almost-forgotten favorites from our archives. Maybe you’ll rediscover an old acquaintance in there, too?

    Spring Awakens

    “Despite the threat that has befallen us all, we all look forward to the awakening of a life that spreads its wings after every dormant winter and opens its petals to greet us. Long live spring, long live life.” — Designed by LibraFire from Serbia.

    Clover Field

    Designed by Nathalie Ouederni from France.

    Fairytale

    “A tribute to Hans Christian Andersen. Happy Birthday!” — Designed by Roxi Nastase from Romania.

    Happy Easter

    Designed by Tazi Design from Australia.

    Sakura

    “Spring is finally here with its sweet Sakura’s flowers, which remind me of my trip to Japan.” — Designed by Laurence Vagner from France.

    Good Day

    “Some pretty flowers and spring time always make for a good day.” — Designed by Amalia Van Bloom from the United States.

    April Insignia

    “April — its first day reminds us that laughter makes life better. Nature also laughs, but it does so in daisies!” — Designed by Ana Masnikosa from Belgrade, Serbia.

    Rainy Day

    Designed by Xenia Latii from Berlin, Germany.

    Spring Serenity

    “My inspiration was the arrival of spring that transmits a sense of calmness and happiness through its beautiful colors.” — Designed by Margarida Granchinho from Portugal.

    Dreaming

    “The moment when you just walk and your imagination fills up your mind with thoughts.” — Designed by Gal Shir from Israel.

    April Flowers

    “While April showers usually bring May flowers, we thought we all deserved flowers a little early this year. During a stressful time in the world, spending time thinking about others is an antidote to some of the uncertainty. We thought this message, Lift Others Up, reflected the energy the world needs.” — Designed by Mad Fish Digital from Portland, Oregon.

    You’re Smashing

    Designed by Ricardo Gimenes from Sweden.

    A Time For Reflection

    “‘We’re all equal before a wave.’ (Laird Hamilton)” — Designed by Shawna Armstrong from the United States.

    The Perpetual Circle

    “The Black Forest, which is beginning right behind our office windows, so we can watch the perpetual circle of nature, when we take a look outside.” — Designed by Nils Kunath from Germany.

    Purple Rain

    “This month is International Guitar Month! Time to get out your guitar and play. As a graphic designer/illustrator seeing all the variations of guitar shapes begs to be used for a fun design. Search the guitar shapes represented and see if you see one similar to yours, or see if you can identify some of the different styles that some famous guitarists have played (BTW, Prince’s guitar is in there and purple is just a cool color).” — Designed by Karen Frolo from the United States.

    Egg Hunt In Wonderland

    “April is Easter time and I wanted to remind us that there’s a child inside all of us. My illustration is based on the story that fills our imagination since childhood, Alice in Wonderland, and joined to one of the most traditional customs in America at this time of year, the egg hunt. That’s how we get an ‘egg hunt in wonderland’.” — Designed by Patrícia Garcia from Portugal.

    Space Travel

    “In April 1961, Yuri Gagarin became the first traveler who had a round trip to outer space.” — Designed by Igor Izhik from Canada.

    Fusion

    Designed by Rio Creativo from Poland.

    Citrus Passion

    Designed by Nathalie Ouederni from France.

    Shakespeare’s Birthday

    “April 23 sees the anniversary of William Shakespeare’s Birthday, arguably the finest writer England has ever produced. Here’s a jolly little wallpaper featuring some of his most famous quotes.” — Designed by Daniel Rooms from England.

    Abril Lluvias Mil

    “We were inspired by the rain and a popular Spanish adage which says: ‘April a thousand rains’, which means a lot of rain in April.” — Designed by Colorsfera from Spain.

    Articles on Smashing Magazine — For Web Designers And Developers

    Newer postsOlder posts
    ×

    Powered by WhatsApp Chat

    WhatsApp Chat is free, download and try it now here!

    × Chat with Us