February 28, 2018


Frontend Focus

Issue 329 — February 28, 2018
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
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
Ever wondered how to style empty grid cells without adding redundant empty elements? ‘CSS Generated Content’ can help you do just that.
Rachel Andrew

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.
Progress
  Sponsor
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
A simple online wizard for getting the right CSS to center elements in various ways, whether horizontally, vertically, or both.
chunqiuyiyu
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 Wilander
A quick tutorial on how to create responsive websites in 2018, coupled with a free interactive course if you want more.
Per Harald Borgen
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)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. Vettery

In Brief

CityJSConf 2018: A JS Conference in the City of London (March 26) news
CityJSConf

Wikipedia Experimenting With New Hyperlink Preview Effect news
An animated GIF of the effect in action.

Faux Subgrid: Creating CSS Subgrids Without Official Support tutorial
Zell Liew

Responsive Vertical Rhythm with CSS Custom Properties & CSS ‘calc’ tutorial
Zell Liew

Using Source Maps to Debug Production tutorial
ROLLBAR  Sponsor

Tables, CSS Display Properties, and ARIA tutorial
An example of marking up a accessible, responsive table.
Adrian Roselli

Using Sass to Control Scope With BEM Naming tutorial
Andy Bell

Building a Voice-Activated Movie Search App Powered By Amazon Lex, Lambda, and MongoDB Atlas (Part 3) tutorial
MONGODB  Sponsor

Using ‘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 Team

How to Create an Accessible Autocomplete Component with Vue.js tutorial
Filipa Lacerda

Efficiently Snapshotting Your Single-Page-Apps with Puppeteer tutorial
Chang Wang

Modern Layouts with CSS Grid: Revolutionizing Visual Design on the Web video
Hui Jing Chen

Monitor, 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  Sponsor

Gifski: A macOS App to Convert Videos to Great Animated GIFs tools
Sindre Sorhus

Jumprock: Send Emails From Your Static Site tools
Dan Rovito

Konva: 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 Reich

Requests-HTML: Powerful HTML Parsing for Pythonistas code
One for Python developers only.
Kenneth Reitz





Source link