Podcasts about media queries

Does forcing users from the website to the app make the web devs feel sad? How do browser devs decide what to add? Having fun with Notion, custom media queries, and Dave's epic Surprise Chain blog post.

What's the best way to include tabs as part of a component library? D-d-d-discord update on Alex's CSS-Trickz clone. Do you group your @media query items together or spread them around? And is software ever truly finished?

Today is September 1, 2020, and for this Tuesday Tips episode we're covering How to Integrate Media Queries into JavaScript Let's dive in! ---- 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? ---- 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. ---- There is a window listener in JavaScript called matchMedia which will listen for a specific value and trigger when true. For example: var mediaQuery = window.matchMedia('(min-width: 768px)'); When we add a listener to the variable it can run a function: 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. ---- The matchMedia function is widely supported, including full support for Internet Explorer 10 and 11. ---- Today's Tuesday Tips was adapted from a post on Daily Dev Tips. ---- Want to know more? Head to fewdaily.com for more of today's topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow! --- This episode is sponsored by · Anchor: The easiest way to make a podcast. https://anchor.fm/app

Today is April 13, 2020, and for this Monday Medley episode we're covering: No Media Query Responsive Layouts Onboarding a Junior Developer Open-Source Fonts Let's dive in! ---- CSS-Tricks published a post today titled 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. ---- A recent post on the DEV community discussed how to onboard a junior developer. 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. ---- WIRED published an article last month about open-source fonts 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. ---- Want to know more? Head to fewdaily.com for more of today's topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow! --- This episode is sponsored by · Anchor: The easiest way to make a podcast. https://anchor.fm/app

Today is March 30, 2020, and for this Monday Medley episode we're covering: No IE Support in Bootstrap 5 Dribbble Website Redesign New CSS Media Queries Leading a Remote Team Let's dive in! ---- A recent Themesberg post 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, a social networking platform for designers and creatives, recently rolled out a new website design. 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. ---- Logrocket released a post 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, so some are available while others are still being worked on. ---- Mark Boulton recently wrote 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. ---- Want to know more? Head to fewdaily.com for more of today's topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow! --- This episode is sponsored by · Anchor: The easiest way to make a podcast. https://anchor.fm/app

Today is March 17, 2020, and for this Tuesday Tips episode we're covering Media Queries and Selectors to Write CSS for a Specific Version of Internet Explorer Let's dive in! ---- Did you know that you can target specific versions of Internet Explorer right in your CSS stylesheet? There are several media queries and selectors that can combine to allow you to write CSS for a version of Internet Explorer. There are even queries that can select multiple versions in one fell swoop. This changes the game for how many designers and developers create their websites. Check out some examples below and view more at browserhacks.com! ---- _:-ms-fullscreen, :root .ie11up { property: value; } ---- _:-ms-lang(x), .ie10 { property: value9; } ---- @media screen and (min-width: 0) and (min-resolution: 0.001dpcm) { // IE9 CSS .ie9 { property: value; } } ---- @media screen { .ie8 { property: value; } } ---- * + html .ie7 { property: value; } ---- .ie6 { _property: value; } ---- @media screen, screen9 { .ie678 { property: value; } } ---- @media screen { .ie8910 { property: value; } } ---- @media screen and (min-width: 0) { .ie910 { property: value9; } /* backslash-9 removes ie11+ */ } ---- @supports (-ms-ime-align: auto) { .selector { property: value; } } ---- Want to know more? Head to fewdaily.com for more of today's topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow! --- This episode is sponsored by · Anchor: The easiest way to make a podcast. https://anchor.fm/app

It’s another potluck episode in which Wes and Scott answer your questions! This month - Media Queries, NPM Vulnerabilities, Web VR and AR, Fullstack JS vs JAMstack for freelancers, switching jobs, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:46 Q: I recently started a static site so I want as much of the site as possible to change layout with just CSS for responsive design. I am comfortable with media queries but find often times the design is very different between sizes. It is easy to tame the complexity of repeated data for the different component views keeping everything in sync but is it good practice to put two completely different component level views in a single HTML file? Does the repeated data in the static HTML have any effect on SEO? 7:08 Q: How should a mid developer know when its time to leave the current company? Is tech stack (e.g frameworkless) a decent reason even though he/she is happy at the place, but feels like they are not growing enough? 11:19 Q: Should I worry about the critical vulnerabilities when installing an NPM package? 15:06 Q: I’ve had the idea for styling one site two different ways (professional/artistic) and giving visitors a button to toggle between the two. Too gimmicky? Secondary: how did you pick your brand colors? 20:19 Q: Any SICK TIPS on career change? I’m a full-time employee with two kids and a lovely wife, who wants a fulfilling career. I throw as much time in as I can to study, but I feel like it isn’t enough to apply for jobs. 20:49 Q: Within the next two years, how well do you think WebVR and WebXR technologies would fit within mainstream web development (think A-Frame, SparkAR, React 360 in normal websites and applications)? 30:39 Q: Should I learn Fullstack JS or JAMstack for freelancing? 35:34 Q: Is front-end development dying? 37:30 Q: How do you deal with CSS-in-JS when you have one-off stuff, or coupled components/selectors like a [CSS] grid container and a grid child (think grid-area)? CSS-in-JS feels very verbose for this use case. 42:07 Q: Scott always talks about Meteor. I thinks its really cool too. What’s the future of it and why didn’t it take off? It seems to have slowed down. They seem to have moved on to other projects like GraphQL stuff. Links Influx WebVR WebXR Google Maps will use a core Waze feature to improve public transit ××× SIIIIICK ××× PIIIICKS ××× Scott: The Making of a Manager Wes: DeWalt Oscillating Tool Shameless Plugs Wes: Wes’ Courses — use coupon code “syntax” at checkout and get and extra $10 off. Scott: Animating React Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Sponsors Sentry- use the code “devchat” for $100 credit Netlify Clubhouse CacheFly   Episode Summary   In this episode of JavaScript Jabber, the panelists talk with Tommy Hodgins who specializes in responsive web design. He starts with explaining to listeners what it means by a responsive web layout and goes on to discuss the techniques in using JavaScript in CSS in depth. He elaborates on dynamic styling of components, event-driven stylesheet templating, performance and timing characteristics of these techniques and describes different kinds of observers – interception, resize and mutation, and their support for various browsers. He also talks about how to go about enabling certain features by extending CSS, comparison to tools such as the CSS preprocessor and Media Queries, pros and cons of having this approach while citing relevant examples, exciting new features coming up in CSS, ways of testing the methods, caffeinated stylesheets, along with Qaffeine and Deqaf tools. Links JS in CSS – Event driven virtual stylesheet manager Qaffiene Deqaf Tommy’s Twitter Fizzbuzz   Picks Joe The Captain Is Dead Aimee Developer on Call Tip – Try to follow a low-sugar diet Chris Tommy’s snippets on Twitter – JS in CSS All things frontend blog Gulp project Charles Coaching by Charles in exchange of writing Show Notes or Tags Tommy JS in CSS

Sponsors Sentry- use the code “devchat” for $100 credit Netlify Clubhouse CacheFly   Episode Summary   In this episode of JavaScript Jabber, the panelists talk with Tommy Hodgins who specializes in responsive web design. He starts with explaining to listeners what it means by a responsive web layout and goes on to discuss the techniques in using JavaScript in CSS in depth. He elaborates on dynamic styling of components, event-driven stylesheet templating, performance and timing characteristics of these techniques and describes different kinds of observers – interception, resize and mutation, and their support for various browsers. He also talks about how to go about enabling certain features by extending CSS, comparison to tools such as the CSS preprocessor and Media Queries, pros and cons of having this approach while citing relevant examples, exciting new features coming up in CSS, ways of testing the methods, caffeinated stylesheets, along with Qaffeine and Deqaf tools. Links JS in CSS – Event driven virtual stylesheet manager Qaffiene Deqaf Tommy’s Twitter Fizzbuzz   Picks Joe The Captain Is Dead Aimee Developer on Call Tip – Try to follow a low-sugar diet Chris Tommy’s snippets on Twitter – JS in CSS All things frontend blog Gulp project Charles Coaching by Charles in exchange of writing Show Notes or Tags Tommy JS in CSS

Sponsors Sentry- use the code “devchat” for $100 credit Netlify Clubhouse CacheFly   Episode Summary   In this episode of JavaScript Jabber, the panelists talk with Tommy Hodgins who specializes in responsive web design. He starts with explaining to listeners what it means by a responsive web layout and goes on to discuss the techniques in using JavaScript in CSS in depth. He elaborates on dynamic styling of components, event-driven stylesheet templating, performance and timing characteristics of these techniques and describes different kinds of observers – interception, resize and mutation, and their support for various browsers. He also talks about how to go about enabling certain features by extending CSS, comparison to tools such as the CSS preprocessor and Media Queries, pros and cons of having this approach while citing relevant examples, exciting new features coming up in CSS, ways of testing the methods, caffeinated stylesheets, along with Qaffeine and Deqaf tools. Links JS in CSS – Event driven virtual stylesheet manager Qaffiene Deqaf Tommy’s Twitter Fizzbuzz   Picks Joe The Captain Is Dead Aimee Developer on Call Tip – Try to follow a low-sugar diet Chris Tommy’s snippets on Twitter – JS in CSS All things frontend blog Gulp project Charles Coaching by Charles in exchange of writing Show Notes or Tags Tommy JS in CSS

A lot of folks have been looking into the CSS keylogging demo that Max Chehab has put out. On the heels of that, Jake Archibald has written up a nice look on why it’s a...

Eva und ich haben die Grippe, daher ist NG012 nur ein Quickie, eine Krankheitsfolge. Wir sprechen unter anderem über eine Alternative zum Arbeiten im Sitzen, Kaffee am Bett und Fake News. Viel Spaß damit. Arbeiten im Sitzen, Kaffee am Bett, InspiroBot Die Themen sind Evas Grippe geschuldet und dem Umstand, dass sie ans Bett gefesselt ist. Fake News Google Faktencheck und WikiTribune blieben wir bisher schuldig – unter der Überschrift Fake News sprechen wir über diese Themen. CSS Media Queries Ich bin auf ein praktisches Tool zur Erstellung von Media Queries gestoßen.

Window Resizer Chrome Extension –  After installing it shows up in the upper right hand corner of your Chrome window at the end of the address bar. It allows you to see the “Viewport Size” and “Window Size” of the current browser window in pixels.   This code goes into the HTML The post Eps 15: Media Queries – Talking HTML appeared first on Schaffen Creative - Make. Manage. Achieve..

Window Resizer Chrome Extension –  After installing it shows up in the upper right hand corner of your Chrome window at the end of the address bar. It allows you to see the “Viewport Size” and “Window Size” of the current browser window in pixels.   This code goes into the HTML The post Eps 15: Media Queries – Talking HTML appeared first on Schaffen Creative - Make. Manage. Achieve..

Mit Schepp, Stefan, Peter, Hans und Anselm ging es diesmal nach einem kurzen Schlenker in die CSS-Zukunft mit voller Kraft auf die Meta-Ebene. Schaunotizen [00:00:15] Proposing CSS input modality Wir bespechen einen Vorschlag für Media Queries für Eingabe-Verfahren. Dabei tangieren wir Selectors Level 4, Schepps DIY-Spezial-Lösung für Touch-Detection, Focus-Styles und Barrierefreiheit und das nicht ganz […]

Welcome to The Treehouse Show, your weekly dose of Internets. Join Nick Pettit (@nickrp) and Jason Seifer (@jseifer) as they talk about the latest in web design, web development, and more!

Welcome to The Treehouse Show, your weekly dose of Internets. Join Nick Pettit (@nickrp) and Jason Seifer (@jseifer) as they talk about the latest in web design, web development, and more!

Show notes: http://betweenscreens.fm/episodes/81

Show notes: http://betweenscreens.fm/episodes/32

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about the latest in web design, web development, HTML5, front end development, and more.

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about the latest in web design, web development, HTML5, front end development, and more.

For this Snippet, we discuss Techniques For Responsive Typography by Sara Soueidan.(http://www.pagebreakpodcast.com/snippets/responsive-typography)

Hans, Schepp und Anselm fanden dieses mal zwei spannende Themen, die uns als responsive Webentwickler mehr oder weniger betreffen und es gibt eine Menge Linktipps. Schaunotizen [00:00:19] The Future of Media Queries Nachdem in neuen Spezifikationen immer mehr neue Media Query Typen auftauchen, nehmen wir dies als Anlass, um über den Sinn und Unsinn von […]

Mangels Themen zockten sich Hans, Schepp und Peter durch vier Runden CSS-Glücksrad. Nachdem sie dort keine großen Erfolge feiern konnten, verlasen sie die Links und ließen es gut sein. HTML5-Glücksrad [00:00:50] CSS Conditionals Eine Spezifikation aus der Abteilung CSS-Fundament, zu deren Unterpunkt @media-Syntax uns nicht viel einfiel. Schepp erklärte das only-Keyword in Media Queries und […]

For this Snippet, we discuss Responding to Environmental Lighting with CSS Media Queries Level 4 by Jordan Moore. (http://www.pagebreakpodcast.com/snippets/css-media-queries-level-4-luminosity)

Ex tempore -jakso, jossa haetaan omaa näkökulmaa erilaisiin aiheisiin. Tapaamista ei edellisen jakson jälkeen järjestetty, joten luvassa on luovaa kaaosta aiheiden osalta. Uutisia Selainmaailman muutokset Opera vaihtaa WebKitiin Jonka jälkeen Google forkkaa WebKitin (nimeltä Blink) Blink rendering engine for chromium Chromium.org/blink VentureBeat: Google forks Webkit to give the Chrome browser its own rendering engine Engadget: Google’s Blink engine (gently) hints at a more streamlined future for Chrome Ja Opera seuraa perässä Paul Irish: WebKit for Developers Webshaped-tapahtuma Helsingissä lähestyy Webshaped.fi Puhujat Jake Archibald, Google Chrome Jonathan Smiley, ZURB Vitaly Friedman, Smashing Magazine Darrell Stephenson, Soundcloud Holger Bartel , uforepublic Yves Peters, FontFeed Andrew Nesbitt, Forward Pari videota Brad Frost : Death to Bullshit Brad Frost käskee keskittymään sisältöön. Unohtakaa hälinä (mainokset, QR-koodit ym) ja keskittykää sisältöön. Mike Monteiro : Fuck you. Pay me Asiallinen ja kärkevä “puhe” Mike Monteirolta mm. asianajajien tärkeydestä, sopimusasiakirjoista ja muista vaikeista asioista. Erityisen hyvä webbiyrittäjille. Breaking the 1000ms Time to Glass Mobile Barrier Todella mielenkiintoinen pureutuminen siihe, miten webbisivu saadaan nopeaksi. Ei vain mobiilissa vaan ihan yleensä. Läpi käydään mm. se kuinka paljon aikaa menee pelkkään verkkoneuvotteluun puhelimen ja maston välillä. Creative JavaScript in advertising Muita aiheita Media Queries are a Hack by Ian Storm Taylor Ovatko media queryt liian laajoja RWD sivujen tekoon? Tarvitaanko element queryjä? Responsive Nav Viljami Salmisen js-kirjastoriippumaton responsiivinen valikkoplugari Advanced cross-browser flexbox Edellisen podcastin flexbox käytännössä. Saavutettuja etuja (myös demossa) mm. media query -vapaa layout. Haasteena on kolme erilaista syntaksia (ns. vanha, hybridi ja speksin mukainen) Can I Use Frontend Friday Meillä on webbisivut osoitteessa ouluweb.github.io Seuraava miitti on sovittu tiistaille 30.4. Paikkana Business Kitchen, Torikatu 23 (4. krs.), 90100 Oulu Podcastia voi kommentoida Branchissa Sähköpostitse voi lähestyä ouluweb@gmail.com Miitti-ideoita otetaan vastaan Podcast-aiheita ja ideoita otetaan vastaan

Eigentlich haben wir alle keine Zeit, aber das ist keine Ausrede – jedenfalls nicht für Schepp, Peter und Frederic. [00:00:23] News Google and MPEG LA Agree, Free VP8 Der VP8-Codec (verwendet in WebM) wird auch in Zukunft nicht in die Nichtexistenz geklagt werden. Opera 14 Beta Der erste Opera mit Webkit. Besonders schön: Läuft anders als […]

This week Jim talks to Aaron Gustafson about adaptive web design, the Chattanooga tech scene, and Web Standards Sherpa.

This week, we flip the table as Jeff Bruss puts Tim on the hot seat to talk about responsive design. We talk about Google's stance on responsive design, retina displays, the importance of proper planning for a responsive project and whether "caughten" is a word.

Mit allen Mann an Deck stürzten wir uns auf die Themen der Woche. Jedenfalls auf die, die nichts mit Semikolons zu tun hatten. Schaunotizen [00:00:20] Meteor Ein recht beeindruckend anmutendes Echtzeit-Web-Framework. Wir finden, dass es höchste Eisenbahn wurde, dass mal jemand so etwas baut. Dumm nur, dass man den Security-Aspekt komplett vergessen hat und auch, […]

Frohes Neues wünschen wir Euch allen! Peter und Schepp reden über: Schaunotizen [00:00:19] Firefox Die nächsten Feuerfüchse warten mit einer ganzen Reihe wünschenswerter Neuerungen auf: Der Firefox Nightly arbeitet nun wie Chrome mit Silent Updates Ab Firefox 10 sind Add-ons, umgekehrt zu früher, per se kompatibel Firefox 11 verbessert das Verhalten der Fullscreen API Firefox […]