February 7, 2018 Frontend Focus Issue 326 — February 7, 2018 Using Media Queries for Responsive Design in 2018Explores the use of media queries in responsive design today, how they work alongside Flexbox and Grid Layout, and what’s coming in the future. Rachel AndrewHere’s How Google Chrome’s New Ad Blocker WorksGoogle Chrome will soon begin to block ads on some sites by default. Here’s a closer look at how it will work. Daniel AleksandersenDebugging JavaScript with the New Firefox JS DebuggerFirefox’s new JS debugger is pretty powerful, and will help you write fast, bug-free code. Smashing MagazineNew Course ? Master CSS Grid and FlexboxMaster CSS Grid and Flexbox, the latest tools and tricks to layout beautiful, responsive web applications with less code. Frontend Masters SponsorModern CSS Explained For DinosaursHistorical context on how CSS approaches/tooling have evolved to what we have today. Peter JangDeveloping Games with React, Redux, and SVGA meaty first step in a series on creating a game built around the mechanic of React and Redux controlling SVG elements. Bruno KrebsA Look at the State of Progressive Images and User PerceptionWe all want images to load fast: “Choosing the right image format, optimizing the quality and using responsive images are important tasks, but what can we do beyond that?” Smashing MagazineStimulus 1.0: A JS Framework for HTML You Already HaveWe linked to the code a few weeks ago but now the CTO of Basecamp and creator of Ruby on Rails shares his vision for an alternative to single-page client-side MVC apps. David Heinemeier HanssonCSS Grid Gutter Properties Unprefixed in Chrome, Safari & EdgeThe grid- prefix is no longer required for properties such as grid-gap and grid-row-gap, (although Firefox still needs it right now). Manuel Rego on TwitterJobs Frontend Web Engineer at Citymapper – Junior and SeniorWe’re looking for more incredible frontend web engineers to help with our React powered consumer websites and complex map based tools. Citymapper Frontend Developer/UI DesignerDesign for social impact. We’re seeking a UI Designer to work across ideation, prototyping & coding for international development. Catalpa International Frontend Dev Jobs at 4,000+ CompaniesTry Vettery and we’ll connect you directly with thousands of companies looking for talented front-end devs. VetteryIn BriefCSS Grid Layout Module Level 2: First Public Working Draft news Level 2 expands Grid by adding ‘subgrid’ capabilities and aspect-ratio–controlled gutters.W3CHow W3C is Fast-Forwarding Media Support on the Web newsFrançois Daoust (W3C)Welcoming Progressive Web Apps to MS Edge and Windows 10 news Edge now supports Service Workers and push notifications.MicrosoftProject Tracking, Teamwork & Client Reporting Like You’ve Never Seen Before monday.com SponsorGet a Parallax Effect on the Cheap tutorial It’s pretty neat just how simple this approach is.Dave RupertAutomatic Visual Diffing of Web Pages with Puppeteer tutorial How to set up Puppeteer to automate both taking screenshots of your project and comparing them.Monica DinculescuHyperapp + Parcel = A Neat Way to Create Frontend Apps tutorial Beat that JavaScript fatigue with a tiny Elm-inspired frontend library plus a new, no-config asset bundler?Adam BoroThree ‘Superpowers’ of the Flexbox Model tutorial How flex-basis, flex-shrink and flex-grow work.Maciej NowakowskiUsing the ‘initial’ Keyword in CSS tutorial It can act something like a ‘reset’ for CSS properties.Adam LakiCounting with CSS Counters and CSS Grid tutorial Cleverly using CSS Grid to work around a CSS counter limitation.Preethi SamFive Things Episode 4: Five Things About RxJS in Angular, with Ward Bell video In this episode learn how Angular uses RxJS and how RxJS helps with cloud development with Ward Bell.Microsoft SponsorCSS Best Practices: Scaling CSS in a Fast-Growing SaaS Startup storySqreenA History of WaSP and Why Web Standards Matter storyJason HoffmanFrontend Frameworks: Custom vs Ready-to-Use Solutions opinionIvaylo Gerchev30 Scalable and Customizable SVG Backgrounds for Web Pages tools These are really neat.Matthew LipmanAccessLint Hooks into GitHub, and Comments on Your Pull Requests toolsAccessLint SponsorFont Awesome Free 5 Now Available on GitHub toolsFort AwesomeLCUI: A C Library for Building Desktop UIs with C, XML and CSS code Like C? Like Web technologies? Here’s a lightweight way to marry the two if building small desktop apps.Liu Chao Source link