
There's no doubt about it, media queries are one of the most useful CSS features for a modern website. They allow you to create a breakpoint for your website where you can adjust styles for larger or smaller screen sizes. While this is great for use in CSS, what if you want to utilize media queries in JavaScript?

## Recognize a Media Query in JavaScript

As with anything in JavaScript, there are multiple ways to accomplish a task. For example, a method for recognizing media queries in JavaScript is to check if an element is visible. So, if the mobile menu button is visible do a certain JS function. And you would put this in a function whenever the window resizes. While this may get the job done, there is perhaps a better and cleaner way to accomplish the same task.

## matchMedia

There is a window listener in JavaScript called `matchMedia` which will listen for a specific value and trigger when true. For example:

``` js
var mediaQuery = window.matchMedia('(min-width: 768px)');
```

When we add a listener to the variable it can run a function:

``` js
mediaQuery.addListener(console.log);
```

This opens the possibility of passing any function to the listener and only having that function run on certain screen widths.

## Browser Support

The `matchMedia` function is [widely supported](https://caniuse.com/#search=matchmedia), including full support for Internet Explorer 10 and 11.

## Credit

_Today’s Tuesday Tips was adapted from [a post on Daily Dev Tips](https://daily-dev-tips.com/posts/getting-notified-in-javascript-when-a-media-query-changes/)._



## No Media Query Responsive Layouts

[CSS-Tricks](https://css-tricks.com/) published a post today titled _[Thinking in Behaviors, Not Screen Sizes](https://css-tricks.com/thinking-in-behaviors-not-screen-sizes/)_. The main point of the post is that in modern web development we should think beyond breakpoints for a more fluid layout. The post goes on to describe how to use CSS Grid to achieve a responsive website with no media queries.

## Onboarding a Junior Developer

A recent post on the [DEV community](https://dev.to/) discussed [how to onboard a junior developer](https://dev.to/carolstran/onboarding-a-junior-developer-to-your-team-here-s-12-tips-4g3a). The post gives actionable examples of integrating your new hire into the team and practices established by the company. Some of the tips include teaching the company’s Git process, learning their style, and always being available for questions.

## Open-Source Fonts

[WIRED](https://www.wired.com/) published an article last month about [open-source fonts](https://www.wired.com/story/open-source-fonts-love-letters-design-community/) and why they are becoming more popular. The open-source font Raleway, for example, has grown to 9 font weights and is one of the most popular options on Google Fonts. This has also led to variable fonts which are gaining more publicity in the web developer community.



## No IE Support in Bootstrap 5

[A recent Themesberg post](https://themesberg.com/blog/bootstrap/bootstrap-5-ie-11-browser-support) discussed Bootstrap 5, which will be released later this spring, and how it will not support Internet Explorer 10 or 11. This decision is being made in the web community more often with many large companies already dropping support for IE. Despite the lowering usage Microsoft will continue to support IE 11 through 2025.

## Dribbble Website Redesign

[Dribbble](https://dribbble.com/), a social networking platform for designers and creatives, recently rolled out a [new website design](https://dribbble.com/stories/2020/03/16/a-brand-new-dribbble). This is the first redesign for the Dribbble website in ten years and strives to showcase the designers more. Included in the redesign is updated profiles, new collections and a new curator profile.

## New CSS Media Queries

[Logrocket released a post](https://blog.logrocket.com/new-media-queries-you-need-to-know/) a few weeks back about the forthcoming new CSS media queries. Some of the new media queries include light level, preference-based queries, and even custom media queries. These [new media queries are still in spec](https://drafts.csswg.org/mediaqueries-5/), so some are available while others are still being worked on.

## Leading a Remote Team

[Mark Boulton recently wrote](https://markboulton.co.uk/journal/found-yourself-leading-a-remote-design-team/) about leading a remote team, giving tips for leaders that are new to working remotely. Information like this is becoming increasingly important as teams are currently being forced into remote work longer than originally thought. Learn about creating rituals, asynchronous communication, and prioritizing your people.


Posts Tagged with "media-queries"

Tuesday Tips

Monday Medley

Monday Medley