--- title: "#329: This week, it's all about CSS (and webpack 4.0)" publication: "Frontend Focus" issue: 329 published_at: "2018-02-28" canonical_url: "https://frontendfoc.us/issues/329" --- #329: This week, it's all about CSS (and webpack 4.0) This Week's HTML, CSS, Browser, and Frontend News — [Read this e-mail on the Web](http://frontendfoc.us/issues/329) Frontend FocusIssue 329 — February 28, 2018[webpack 4.0 Released](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4?utm_source=frontendfocus&utm_medium=email)A significant release for the popular module and asset bundler brings significantly increased performance and new ‘development’ and ‘production’ modes with pre-defined settings. Sean T. Larkin [30 Seconds of CSS](https://atomiks.github.io/30-seconds-of-css/?utm_source=frontendfocus&utm_medium=email)A growing collection of useful CSS snippets which we’re promised we can understand in _“30 seconds or less”_. Covers things like text effects, gradients, and even a popout menu. Atomiks [Styling Empty Cells With Generated Content and CSS Grid Layout](https://www.smashingmagazine.com/2018/02/generated-content-grid-layout/?utm_source=frontendfocus&utm_medium=email)Ever wondered how to style empty grid cells without adding redundant empty elements? ‘CSS Generated Content’ can help you do just that. Rachel Andrew [![Progress\](https://copm.s3.amazonaws.com/c477b3e5.png)](https://www.telerik.com/campaigns/kendo-ui/wp-javascript-future-2018?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-jquery-whitepaper-futurejs18&utm_content=primary)[The Future of JavaScript: 2018 and Beyond](https://www.telerik.com/campaigns/kendo-ui/wp-javascript-future-2018?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-jquery-whitepaper-futurejs18&utm_content=primary)What is the state of the JavaScript ecosystem? This whitepaper offers our future-looking analysis and predictions about the latest in JavaScript. We also look back at all the craziness from 2017 and neatly tie it together with a bow. [Download now](https://www.telerik.com/campaigns/kendo-ui/wp-javascript-future-2018?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-jquery-whitepaper-futurejs18&utm_content=primary). ProgressSponsor [Stunning Hover Effects with CSS Variables](https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330?utm_source=frontendfocus&utm_medium=email)Basically, you change CSS variables on mouse move via JavaScript, and underlying CSS then updates dynamically. There’s a lot of potential with this approach. Tobias Reich [CSS Centering Explorer](http://www.chunqiuyiyu.com/css-centering-explorer/?utm_source=frontendfocus&utm_medium=email)A simple online wizard for getting the right CSS to center elements in various ways, whether horizontally, vertically, or both. chunqiuyiyu [WebKit's New 'Storage Access API'](https://webkit.org/blog/8124/introducing-storage-access-api/?utm_source=frontendfocus&utm_medium=email)A way to allow third-party embeds to request access to first-party cookies upon an interaction. Already in preview versions of Safari, but future cross-browser support seems [a bit shaky](https://github.com/whatwg/html/issues/3338) for now. John Wilander [How to Make Responsiveness Super Simple with CSS Variables](https://medium.freecodecamp.org/how-to-make-responsiveness-super-simple-with-css-variables-8c90ebf80d7f?utm_source=frontendfocus&utm_medium=email)A quick tutorial on how to create responsive websites in 2018, coupled with a [free interactive course](https://scrimba.com/g/gcssvariables) if you want more. Per Harald Borgen [Third Party CSS Is Not Safe](https://jakearchibald.com/2018/third-party-css-is-not-safe/?utm_source=frontendfocus&utm_medium=email)A look at some of the ‘tricks’ untrusted CSS could attempt on a site to monitor users or change the site’s functionality in negative ways. Jake Archibald Jobs - [Sr. Fullstack Engineer (Remote)](https://www.stickermule.com/careers?utm_source=frontendfocus&utm_medium=email)Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work. Sticker Mule - [Find a Job You're Passionate About](https://www.vettery.com/tech?utm_medium=cooper-frontendfocus&utm_campaign=ad-9310&utm_source=newsletter&utm_content=grouped&utm_term=tech)Vettery connects you directly to hiring managers at over 4,000 top companies. Make a profile today and land your dream job. Vettery In Brief [CityJSConf 2018: A JS Conference in the City of London (March 26)](http://cityjsconf.org/?utm_source=frontendfocus&utm_medium=email) news CityJSConf [Faux Subgrid: Creating CSS Subgrids Without Official Support](https://zellwk.com/blog/faux-subgrid/?utm_source=frontendfocus&utm_medium=email) tutorial Zell Liew [Responsive Vertical Rhythm with CSS Custom Properties & CSS 'calc'](https://zellwk.com/blog/responsive-vertical-rhythm/?utm_source=frontendfocus&utm_medium=email) tutorial Zell Liew [Using Source Maps to Debug Production](https://rollbar.com/blog/source-maps-in-production/?utm_medium=email-nl&utm_campaign=frontend&utm_source=frontend&utm_term=sec) tutorial ROLLBARSponsor [Tables, CSS Display Properties, and ARIA](http://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html?utm_source=frontendfocus&utm_medium=email) tutorial An example of marking up a accessible, responsive table. Adrian Roselli [Using Sass to Control Scope With BEM Naming](https://css-tricks.com/using-sass-control-scope-bem-naming/?utm_source=frontendfocus&utm_medium=email) tutorial Andy Bell [Building a Voice-Activated Movie Search App Powered By Amazon Lex, Lambda, and MongoDB Atlas (Part 3)](https://www.mongodb.com/blog/post/aws-lex-lambda-mongodb-atlas-movie-search-app-part-3?jmp=cpress&utm_campaign=WW_CP_newsletter_sponsorship_FY19Q1&utm_content=brieflink&utm_medium=display&utm_source=frontendfocus20180228) tutorial MONGODBSponsor [Using 'Local Overrides' in Chrome 65+](https://developers.google.com/web/updates/2018/01/devtools#overrides?utm_source=frontendfocus&utm_medium=email) tutorial A new feature you may have missed - make changes in DevTools and keep them active across page loads. Google Chrome Team [How to Create an Accessible Autocomplete Component with Vue.js](https://alligator.io/vuejs/vue-a11y-autocomplete/?utm_source=frontendfocus&utm_medium=email) tutorial Filipa Lacerda [Efficiently Snapshotting Your Single-Page-Apps with Puppeteer](https://hackernoon.com/efficiently-snapshotting-spas-with-puppeteer-c4c77aa2831b?utm_source=frontendfocus&utm_medium=email) tutorial Chang Wang [Modern Layouts with CSS Grid: Revolutionizing Visual Design on the Web](https://www.youtube.com/watch?v=ahPRvVyw9Eo) video Hui Jing Chen [Monitor, Analyze, and Optimize Your Web App Performance](https://www.datadoghq.com/dg/apm/lpg/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-FrontEndFocusS) tools Collect and alert on real-time metrics from your web applications and infrastructure. Get started for free. DatadogSponsor [Gifski: A macOS App to Convert Videos to Great Animated GIFs](https://sindresorhus.com/gifski?utm_source=frontendfocus&utm_medium=email) tools Sindre Sorhus [Jumprock: Send Emails From Your Static Site](https://jumprock.co/?utm_source=frontendfocus&utm_medium=email) tools Dan Rovito [Konva: A 2D Canvas Library for Desktop and Mobile](https://konvajs.github.io/?utm_source=frontendfocus&utm_medium=email) code Adds niceties like layering, caching, tweening, and filters. [basicScroll: Standalone Parallax Scrolling with CSS Variables](https://github.com/electerious/basicScroll?utm_source=frontendfocus&utm_medium=email) code Allows you to change CSS variables depending on scroll position. You can then use the variables directly in your CSS to animate whatever you want. Tobias Reich [Requests-HTML: Powerful HTML Parsing for Pythonistas](https://github.com/kennethreitz/requests-html?utm_source=frontendfocus&utm_medium=email) code One for Python developers only. Kenneth Reitz Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/). [Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/329) Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK