vanillajs   204

« earlier    

A modern font loading strategy with the vanilla JS FontFaceSet.load() method | Go Make Things
Custom typefaces make the web gorgeous. But, they can also be a major bottleneck for perceived performance, particularly on mobile devices and in developing nations with less reliable internet connections.
Let’s dig in.
The problem In many browsers, if a custom typeface is declared but hasn’t finished downloading and parsing yet, browsers will leave space for the text but not render it until the file is ready.
This is often called a Flash Of Invisible Text (or FOIT).
vanilla  facebook  vanillajs  fonts  javascript 
7 weeks ago by jwithy
Detecting SVG support with JavaScript | Go Make Things
Modernizr is a very popular browser support detection generator, but sometimes it can be a little heavy-handed when you just need to check one or two things.
Take SVG support, for example. You can reliably test SVG support with one line of code:
var svgSupport = !!document.createElementNS && !!document.createElementNS('', 'svg').createSVGRect; You can then do things like add a conditional class to your webpage only if SVG is supported:
var svgSupport = !</b...
js  vanillajs  tutorial  svg 
march 2019 by matthillco
How to show and hide elements with vanilla JavaScript | Go Make Things
This week in my private Vanilla JS Slack channel (available to people who purchase one of my pocket guides), one of my students asked me how to replicate jQuery’s show(), hide(), and toggle() methods with vanilla JavaScript.
Showing and hiding elements with vanilla JS is pretty straightforward. Adding transition effects like the one’s jQuery supports is a little bit harder.
Today, let’s look at how to write simple show/hide methods.
js  vanillajs  tutorial 
march 2019 by matthillco
Removing an event listener with vanilla JavaScript | Go Make Things
Yesterday, we looked at a vanilla JavaScript equivalent of jQuery’s on() method. Today, let’s look at the vanilla JS version of off(), which removes an event listener.
The completely native way With vanilla JavaScript, you can remove any named event listener with removeEventListener(). It accepts all of the same arguments as addEventListener(), and those arguments must match the ones you used to add the event.
So, for example, if you added this click event:
js  vanillajs  tutorial 
march 2019 by matthillco
A vanilla JavaScript equivalent of jQuery&#8217;s on() method | Go Make Things
In vanilla JavaScript, you can listen to browser events with the addEventListener() method.
var link = document.querySelector('#some-link'); link.addEventListener('click', function (event) { // Prevent the link from updating the URL event.preventDefault(); // Do something... }, false); If you’re used to the jQuery way, it can feel pretty verbose. Today, I want to share a vanilla JavaScript version of the on() method.
The on() method First, I’ll show you how to use it.
js  vanillajs  tutorial 
march 2019 by matthillco
A vanilla JS animation helper function | Go Make Things
Yesterday, we looked at a simple technique for creating show-and-hide animations without jQuery.
A few folks asked me:
What about animating fade outs?
Today, I wanted to share a more flexible helper function that makes doing that sort of thing easier.
A quick recap The approach here involves adding a class to an element that triggers CSS animations on the element instead of relying on complex JS to calculate and handle it.
js  vanillajs  tutorial  css  animation 
march 2019 by matthillco
When do you use new JavaScript features vs. old approaches? | Go Make Things
I often advocate for older approaches over newer ones.
I still use concatenated strings over template literals. I use XHR instead of Fetch. I always use var, never const or let.
But also uses newer methods and APIs, too. I love and Array.filter(). I’m a big fan of the CustomEvent API. I use matches() and closest() is almost every script I write.
I’m often asked:
How do you decide when to use new JavaScript features vs.
js  vanillajs  tutorial 
march 2019 by matthillco
Smooth scrolling links with only CSS | Go Make Things
My most popular open source project is Smooth Scroll, a script that lets you animate scrolling with anchor links.
Today, I want to show you how to achieve the same effect with only CSS. I’ll also talk about when and why you might want to use a JavaScript version anyways.
Scroll Behavior The scroll-behavior CSS property tells the browser how to handle scrolling triggered by anchor links and such.
js  vanillajs  tutorial 
march 2019 by matthillco
The Vanilla JS Toolkit
A growing collection of vanilla JavaScript code snippets, helper functions, polyfills, plugins, and learning resources.
js  vanillajs  tutorial 
march 2019 by matthillco
Yes, you can ditch jQuery and still support IE/Edge | Go Make Things
Last month, Ollie Williams wrote a post for CSS Tricks on why now more than ever you really don’t need jQuery. He covered a handful of modern ES5 and ES6 JavaScript and browser APIs that make working with vanilla JS just as easy as using jQuery.
The comments section was littered with people arguing that if care about IE or Edge at all, this just won’t work.
So, as always, you can’t do this in IE.
js  vanillajs  tutorial 
march 2019 by matthillco
How to add transition animations to vanilla JavaScript show and hide methods | Go Make Things
Yesterday, we looked at how to show and hide elements with vanilla JavaScript.
To recap, we can either add an inline display style with the style property, or toggle a class that controls visibility using classList.
Today, let’s learn how to add transitions.
Adding transitions Adding transitions is where things get just a bit more complicated.
Let’s say you wanted to animate the expansion or collapse of your content like jQuery does.
js  vanillajs  tutorial 
march 2019 by matthillco

« earlier    

related tags

3d  5  ajax  alternativeto  animation  babel  bestpractices  bliss  blog  bootstrap  cache  carousel  catalogue  chain  chainable  chriscoyier  click  clickoutside  code  codearchitecture  component  css  csstricks  datatables  datepicker  dev  dnd  dom  drag-and-drop  drag-n-drop  drag  draganddrop  dragdrop  drop  editor  enhancement  eventhandling  excellentmightbe  facebook  fckeditor  fonts  form  framework  gallery  game  grab  html  html5  image  input  javascript-library  javascript  jquery-plugin  jquery  js  lib  libraries  library  list  mobile  modal  modular  navigation  outside  parallax  performance  pipeline  plainjs  plugins  pre-cache  programming  rails  react  reactjs  redux  reference  screecast  scripting  scroll  scrolling  search  select  slider  snippets  solution  statemanagement  svg  swipe  swipeable  tables  tankar  template  text  tilt  tinymce  tool  toolkit  touch  tutorial  ujs  upload  vanilla  vanillajavascript  versus  vuejs  web  webdesign  webdev  webdevel  with  wysiwyg 

Copy this bookmark: