February 14, 2018 Frontend Focus Issue 327 — February 14, 2018 Replacing jQuery With Vue.js: No Build Step NeededSome developers aren’t keen on complex workflows that involve build tools and they’re not mandatory to use the latest JS tech anyway. Here’s how to use Vue.js in a similarly detached way as you might use jQuery now. Sarah DrasnerHow to Hand Code Scalable Vector Graphics (SVG)You can export to SVG from drawing tools, but building graphics in a structured, code-based way has its own appeal, and with SVG being supported in every browser, it’s worth trying for your small icons and visual touches. Kezz BraceyHEAD: A List of Things That Go In The ‘head’ ElementMeta tags, link tags, Twitter card info, browser-specific directives, and more. Josh BucheaPower Your Apps with Angular UI Components and SpreadsheetsBuild complete enterprise web applications with GrapeCity’s dependency-free, Angular JavaScript solutions. Includes Spread’s full-featured Excel-like spreadsheets and Wijmo’s collection of IntelliSense-enabled grids, charts, and input controls. GrapeCity JavaScript Solutions SponsorPhaser 3.0: The 2D HTML5 Game FrameworkNo official release notes yet but it’s here. Phaser is a fast 2D game framework for building HTML5 games supporting Canvas and WebGL rendering. Richard DaveyUnderstanding Media Queries in HTML Email As well as helping you target mobile email clients, unpredictable support for modern Web tech on desktop and webmail clients makes media queries useful there too. Jason RodriguezA Guide to Web Performance Optimization with WebpackFrom Ivan Akulov and Addy Osmani comes a guide to using the popular asset bundling tool to make pages smaller to download and quicker to use. Google DevelopersVideo: Into The Weeds of CSS LayoutA serious look at the algorithms browsers are using to lay things out using Flexbox & Grid. Rachel AndrewWeb Assembly Studio: A Simple Online WebAssembly IDEA really cool way to initially play with WASM and see how the various parts work together. MozillaJobs Frontend Developer at X-Team (Remote)We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team. X-Team Front End Developer (React Native & Rails)Join us, work remotely from North America, and help build software that matters. Our team is hiring. Aha! Front-end Dev Jobs at 4,000+ CompaniesTry Vettery and we’ll connect you directly with thousands of companies looking for talented front-end devs. VetteryIn BriefChrome 68 to Mark All HTTP Sites as ‘Not Secure’ newsGoogleSEO Audit Category Added To ‘Lighthouse’ Chrome Extension news The SEO audit in Lighthouse enables devs to run a basic SEO check for any page.GoogleMessaging Between Tabs Using Service Worker tutorialJames MilnerBringing Virtual Reality to the Browser with ReactVR tutorial Getting started with ReactVR, a combination of the React framework and WebVR API.Miros?aw CiastekBuilding a Voice-Activated Movie Search App Powered By Amazon Lex, Lambda, and MongoDB Atlas (Part 2) tutorialMONGODB SponsorHow I Design with CSS Grid tutorialChen Hui JingDirection Aware Hover Effects tutorial Several Codepen demos of a striking visual effect.Chris CoyierPatterns for Writing Manageable CSS Without a Framework tutorialTen BitcombWhy Your Site is Slow Pantheon SponsorMaking A Browser Fast: The Story of Firefox Quantum videoJean-Yves PerrieFunkify: A Disability Simulator for Accessibility Testing tools A Chrome plugin to experience the web through the eyes of differently abled users.Funkify$20 Free On A New Linode Account tools Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account.Linode Cloud Hosting SponsorPushy Button: CSS Pressable 3D Buttons codeDronca RaulQuark: A Tiny ‘Atomic CSS’ Polyfill code Classes like color-red fontSize-20 get converted to appropriate CSS.Tommy HodginsCSS ‘Coding’ Animation code ..made with pure CSS – demo here.Chris Dermody Source link