February 28, 2018 Frontend Focus Issue 329 — February 28, 2018 webpack 4.0 ReleasedA 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. Larkin30 Seconds of CSSA 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. AtomiksStyling Empty Cells With Generated Content and CSS Grid LayoutEver wondered how to style empty grid cells without adding redundant empty elements? ‘CSS Generated Content’ can help you do just that. Rachel AndrewThe Future of JavaScript: 2018 and BeyondWhat 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. Progress SponsorStunning Hover Effects with CSS VariablesBasically, 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 ReichCSS Centering ExplorerA simple online wizard for getting the right CSS to center elements in various ways, whether horizontally, vertically, or both. chunqiuyiyuWebKit’s New ‘Storage Access API’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 for now. John WilanderHow to Make Responsiveness Super Simple with CSS VariablesA quick tutorial on how to create responsive websites in 2018, coupled with a free interactive course if you want more. Per Harald BorgenThird Party CSS Is Not SafeA 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 ArchibaldJobs Sr. Fullstack Engineer (Remote)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 AboutVettery connects you directly to hiring managers at over 4,000 top companies. Make a profile today and land your dream job. VetteryIn BriefCityJSConf 2018: A JS Conference in the City of London (March 26) newsCityJSConfWikipedia Experimenting With New Hyperlink Preview Effect news An animated GIF of the effect in action.Faux Subgrid: Creating CSS Subgrids Without Official Support tutorialZell LiewResponsive Vertical Rhythm with CSS Custom Properties & CSS ‘calc’ tutorialZell LiewUsing Source Maps to Debug Production tutorialROLLBAR SponsorTables, CSS Display Properties, and ARIA tutorial An example of marking up a accessible, responsive table.Adrian RoselliUsing Sass to Control Scope With BEM Naming tutorialAndy BellBuilding a Voice-Activated Movie Search App Powered By Amazon Lex, Lambda, and MongoDB Atlas (Part 3) tutorialMONGODB SponsorUsing ‘Local Overrides’ in Chrome 65+ tutorial A new feature you may have missed – make changes in DevTools and keep them active across page loads.Google Chrome TeamHow to Create an Accessible Autocomplete Component with Vue.js tutorialFilipa LacerdaEfficiently Snapshotting Your Single-Page-Apps with Puppeteer tutorialChang WangModern Layouts with CSS Grid: Revolutionizing Visual Design on the Web videoHui Jing ChenMonitor, Analyze, and Optimize Your Web App Performance tools Collect and alert on real-time metrics from your web applications and infrastructure. Get started for free.Datadog SponsorGifski: A macOS App to Convert Videos to Great Animated GIFs toolsSindre SorhusJumprock: Send Emails From Your Static Site toolsDan RovitoKonva: A 2D Canvas Library for Desktop and Mobile code Adds niceties like layering, caching, tweening, and filters.basicScroll: Standalone Parallax Scrolling with CSS Variables 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 ReichRequests-HTML: Powerful HTML Parsing for Pythonistas code One for Python developers only.Kenneth Reitz Source link