--- title: "#327: Replacing jQuery With Vue.js" publication: "Frontend Focus" issue: 327 published_at: "2018-02-14" canonical_url: "https://frontendfoc.us/issues/327" --- #327: Replacing jQuery With Vue.js This week's HTML, CSS, browser, and frontend news — [Read this e-mail on the Web](http://frontendfoc.us/issues/327) Frontend FocusIssue 327 — February 14, 2018[Replacing jQuery With Vue.js: No Build Step Needed](https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/?utm_source=frontendfocus&utm_medium=email)Some 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 Drasner [How to Hand Code Scalable Vector Graphics (SVG)](https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368?utm_source=frontendfocus&utm_medium=email)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](https://caniuse.com/#feat=svg), it’s worth trying for your small icons and visual touches. Kezz Bracey [HEAD: A List of Things That Go In The 'head' Element](https://gethead.info/?utm_source=frontendfocus&utm_medium=email)Meta tags, link tags, Twitter card info, browser-specific directives, and more. Josh Buchea [![GrapeCity JavaScript Solutions\](https://copm.s3.amazonaws.com/df331c96.png)](https://www.grapecity.com/en/javascript-solutions?utm_source=FrontEndFocus&utm_medium=Newsletter&utm_campaign=Wijmo_02-18)[Power Your Apps with Angular UI Components and Spreadsheets](https://www.grapecity.com/en/javascript-solutions?utm_source=FrontEndFocus&utm_medium=Newsletter&utm_campaign=Wijmo_02-18)Build 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 SolutionsSponsor [Phaser 3.0: The 2D HTML5 Game Framework](https://github.com/photonstorm/phaser?utm_source=frontendfocus&utm_medium=email)No 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 Davey [Understanding Media Queries in HTML Email](https://litmus.com/blog/understanding-media-queries-in-html-email?utm_source=frontendfocus&utm_medium=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 Rodriguez [A Guide to Web Performance Optimization with Webpack](https://developers.google.com/web/fundamentals/performance/webpack/?utm_source=frontendfocus&utm_medium=email)From 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 Developers [Video: Into The Weeds of CSS Layout](https://vimeo.com/254679499?utm_source=frontendfocus&utm_medium=email)A serious look at the algorithms browsers are using to lay things out using Flexbox & Grid. Rachel Andrew [Web Assembly Studio: A Simple Online WebAssembly IDE](https://webassembly.studio/?utm_source=frontendfocus&utm_medium=email)A really cool way to initially play with WASM and see how the various parts work together. Mozilla Jobs - [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q3-18)We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. [Join X-Team](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q3-18). X-Team - [Front End Developer (React Native & Rails)](https://www.aha.io/company/careers/current-openings/front_end_developer_us/?utm_campaign=People_Success&utm_source=cooperpress&utm_medium=paid_people_success_job_ad)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+ Companies](https://www.vettery.com/tech?utm_medium=cooper-frontendfocus&utm_campaign=ad-1713&utm_source=newsletter&utm_content=grouped&utm_term=tech)Try Vettery and we’ll connect you directly with thousands of companies looking for talented front-end devs. Vettery In Brief [Chrome 68 to Mark All HTTP Sites as 'Not Secure'](https://security.googleblog.com/2018/02/a-secure-web-is-here-to-stay.html?utm_source=frontendfocus&utm_medium=email) news Google [SEO Audit Category Added To 'Lighthouse' Chrome Extension](https://webmasters.googleblog.com/2018/02/seo-audit-category-in-lighthouse.html?utm_source=frontendfocus&utm_medium=email) news The SEO audit in [Lighthouse](https://developers.google.com/web/tools/lighthouse/) enables devs to run a basic SEO check for any page. Google [Messaging Between Tabs Using Service Worker](https://www.loxodrome.io/post/tab-state-service-workers/?utm_source=frontendfocus&utm_medium=email) tutorial James Milner [Bringing Virtual Reality to the Browser with ReactVR](https://medium.com/swinginc/bring-virtual-reality-to-your-browser-with-reactvr-fd9dc62aa8b1?utm_source=frontendfocus&utm_medium=email) tutorial Getting started with [ReactVR](https://facebook.github.io/react-vr/), a combination of the React framework and WebVR API. Mirosław Ciastek [Building a Voice-Activated Movie Search App Powered By Amazon Lex, Lambda, and MongoDB Atlas (Part 2)](https://www.mongodb.com/blog/post/aws-lex-lambda-mongodb-atlas-movie-search-app-part-2?jmp=cpress&utm_campaign=WW_CP_newsletter_sponsorship_FY19Q1&utm_content=brief&utm_medium=display&utm_source=frontendfocus&utm_date=20180214) tutorial MONGODBSponsor [How I Design with CSS Grid](https://www.chenhuijing.com/blog/how-i-design-with-css-grid/?utm_source=frontendfocus&utm_medium=email) tutorial Chen Hui Jing [Direction Aware Hover Effects](https://css-tricks.com/direction-aware-hover-effects/?utm_source=frontendfocus&utm_medium=email) tutorial Several Codepen demos of a striking visual effect. Chris Coyier [Patterns for Writing Manageable CSS Without a Framework](https://medium.com/kpcc-labs/patterns-for-writing-manageable-css-without-a-framework-109779743c41?utm_source=frontendfocus&utm_medium=email) tutorial Ten Bitcomb [Why Your Site is Slow](https://pantheon.io/resources/why-your-site-slow?utm_medium=Online%20Advertising&utm_source=Front%20End%20Focus&utm_content=Why%20Your%20Site%20Is%20Slow%20webinar&utm_ad_group_name=Brief%20link&utm_campaign=2018%20Front%20End%20Focus) PantheonSponsor [Making A Browser Fast: The Story of Firefox Quantum](https://www.youtube.com/watch?v=aDtPHXs9ze8) video Jean-Yves Perrie [Funkify: A Disability Simulator for Accessibility Testing](http://www.funkify.org/?utm_source=frontendfocus&utm_medium=email) tools A Chrome plugin to experience the web through the eyes of differently abled users. Funkify [$20 Free On A New Linode Account](https://welcome.linode.com/frontendfocus/?utm_source=cooperpress&utm_medium=sponsored&utm_campaign=frontendfocus-sponsored) tools Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account. Linode Cloud HostingSponsor [Pushy Button: CSS Pressable 3D Buttons](https://github.com/iRaul/pushy-buttons?utm_source=frontendfocus&utm_medium=email) code Dronca Raul [Quark: A Tiny 'Atomic CSS' Polyfill](https://tomhodgins.github.io/quark/?utm_source=frontendfocus&utm_medium=email) code Classes like `color-red fontSize-20` get converted to appropriate CSS. Tommy Hodgins [CSS 'Coding' Animation](https://github.com/Chippd/css_loading_animation?utm_source=frontendfocus&utm_medium=email) code ..made with pure CSS - [demo here](https://chippd.github.io/css_loading_animation/). Chris Dermody 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/327) Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK