spaceninja + javascript   785

Don't touch my clipboard · Caffeinspiration
You can (but shouldn't) change how people copy text from your website.
fridayfrontend  cssbasics  javascript  clipboard  copy  paste  getselection 
3 days ago by spaceninja
It may not be your fault that you're struggling to learn a framework
If you’re struggling to learn a language or a framework or accessibility, remember that many times it’s *not* you or your lack of effort.
fridayfrontend  cssbasics  javascript  frameworks  learning  teaching  documentation 
3 days ago by spaceninja
When CSS Blocks
In this client’s case, the first step to fixing this issue was pretty straightforward: ditch the preload/polyfill pattern. Preloading non-critical CSS kind of defeats the purpose and switching to using a print stylesheet instead of a preload, as Filament Group themselves now recommend, allows us to remove the polyfill entirely.
fridayfrontend  css  javascript  preload  print  performance 
3 days ago by spaceninja
How to Build Vue Components in a WordPress Theme | CSS-Tricks
The whole thing felt complex enough that I didn't want to handle all that state manually. I remembered reading Sarah Drasner’s article "Replacing jQuery With Vue.js: No Build Step Necessary” which shows how to replace classic jQuery patterns with simple Vue micro-apps. That seemed like a good place to start, but I quickly realized that things would get messy on the PHP side of WordPress.
javascript  vue  wordpress  components 
3 days ago by spaceninja
Moving from Vanilla JavaScript to a Reusable Vue Component | CSS-Tricks
I recently wrote an article explaining how you can create a countdown timer using HTML, CSS and JavaScript. Now, let’s look at how we can make that a reusable component by porting it into Vue using basic features that the framework provides.
javascript  vue 
3 days ago by spaceninja
Binding CSS Variables in Vue - shayneo
Binding to style and class in Vue.js can be extremely handy for making styles respond to state in your application. This state might be data fetched through an Ajax request, user input, or any other type of data source that is made available at run time. Binding a CSS Variable to style is a clever way to push this pattern a little bit further, while gaining all the benefits of writing variable driven css.
javascript  vue  variables  customproperties  css 
3 days ago by spaceninja
MicroModal: Tiny javascript library for creating accessible modal dialogs
The aim of this library is to make modal dialogs accessible and easy to include in your project with minimum configuration. It's only ~1.8kb minified and gzipped - A tiny library for big change.
javascript  modals 
3 days ago by spaceninja
Building an application with Vue and TypeScript. Best practices, thoughts and recommendations. |
Some years ago, my team and I were tasked to create an embeddable checkout system for one of our applications. Angular, React and Vue were relatively new, and we did not have any prior experience with these frameworks. At this point, all of our apps were built with jQuery and RequireJS, and we knew that we definitely wanted to move away from that. I know that jQuery is still fine for simple CRUD apps and landing pages. However, a single page application (SPA) with complex state, routing, code splitting etc. is simply too much for it.
javascript  vue  typescript 
3 days ago by spaceninja
Why JavaScript is Eating HTML | CSS-Tricks
In recent years, JavaScript developers have realized that by defining a page’s structure in JavaScript instead of in HTML (using frameworks such as React), they can simplify the development and maintenance of user interaction code that is otherwise much more complex to build. Of course, when you tell someone that the HTML they wrote needs to be chopped up and mixed in with JavaScript they don’t know anything about, they can (understandably) become frustrated and start asking what the heck we’re getting out of this.
fridayfrontend  javascript  cssbasics  html  html-in-js  react 
10 days ago by spaceninja
A Complete Guide to Links and Buttons
Let's take a look at the whole world of links and buttons, and all the considerations at the HTML, CSS, JavaScript, design, and accessibility layers that come with them. There are plenty of pitfalls and bad practices to avoid along the way. By covering it, we’ll have a complete good UX implementation of both elements.
fridayfrontend  css  cssbasics  buttons  links  javascript  accessibility 
10 days ago by spaceninja
Designing a ripple effect for UI feedback
In this tutorial, we will learn how to create a simple micro-interaction for the popular ripple effect to provide users with touch feedback. This effect was made popular by Google’s Material Design and can be used on virtually any kind of surface users can interact with.
fridayfrontend  css  cssbasics  javascript  ripple  material 
10 days ago by spaceninja
Styled Components vs. CSS Stylesheets
There’s a hot debate around standard CSS stylesheets vs. “CSS-in-JS” solutions when building in modern front-end frameworks. In this post, I’m going to weigh up the pros and cons of CSS vs. Styled Components and how it affects the way I write React components.
fridayfrontend  css  cssbasics  css-in-js  styled-components  emotion  react  javascript 
10 days ago by spaceninja
6 things I wish I knew about state management when I started writing React apps
The frontend “knows” a lot of things, and these things interact with each other in non-trivial ways. So in my view, state management is the core problem when developing a UI. Here are some things I wish I knew about state management earlier.
fridayfrontend  javascript  react  state  redux  flux  vuex 
10 days ago by spaceninja
Getting Acquainted With Svelte, the New Framework on the Block
There’s another player in the framework space that’s gaining attention and operates very much in the same spirit as Vue… Svelte. This article is going to zoom out a bit and provide a little more context about Svelt, as well as how it differentiates itself from other frameworks, and how to implement it in your own projects.
fridayfrontend  javascript  svelte  vue  frameworks 
10 days ago by spaceninja
Building my New Site with VuePress
I'm so happy to finally launch my new website! In terms of the tech stack, I stayed within my favorite world -- Vue 😆. But this time I decided to use VuePress instead. In this article, I want to share how this decision came to be and what my thoughts are on using VuePress.
fridayfrontend  javascript  vue  vuepress 
10 days ago by spaceninja
Async + Await in JavaScript
Flow Control in JavaScript is hard! Native Promises in JavaScript have helped immensely, but the syntax is still a little callback-y. With Async + Await, we can write synchronous looking code without losing any of the benefits of JavaScript's asynchronous nature. Wes Bos explores how async + await works, best practices for flow control, and explores several solutions for handling errors.
fridayfrontend  video  javascript  promises  async  await 
10 days ago by spaceninja
Promises From Scratch In A Post-Apocalyptic Future
In this installment of Low Level JavaScript we build a Promise implementation from scratch in order to understand exactly how asynchronous abstractions can be built on top of lower level primitives like callbacks.
fridayfrontend  video  javascript  promises  howto  tutorials 
10 days ago by spaceninja
javascript - Trying to use fetch and pass in mode: no-cors - Stack Overflow
But if a site sends no Access-Control-Allow-Origin header in its responses, there’s no way your frontend code can directly access responses from that site. In particular, you can’t fix it by specifying mode: 'no-cors' (in fact that’ll ensure your frontend code can’t access the response contents).
fetch  cors  no-cors  access-control-allow-origin  frontend  javascript 
16 days ago by spaceninja
Getting Fancy with position: sticky; | CSS-Tricks
Mike Solomon worked on a fancy scrollytelling post for Esquire and blogged about it. It has GIFs of each step along the way of figuring out not just position: sticky; but also using negative margins, wrapper divs, backgrounds, and even a smidge of JavaScript measuring to get it all right.
fridayfrontend  css  cssbasics  position  sticky  javascript 
17 days ago by spaceninja
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more straightforward to make one than you might think and only requires the trifecta of HTML, CSS and JavaScript. Let’s make one together!
fridayfrontend  css  cssbasics  html  javascript  countdown  timer  svg 
17 days ago by spaceninja
Tiny Web Stacks
A lot of my day to day work involves design systems. These can get pretty complex, with a lot of moving parts. Perhaps as a reaction to that, I’ve grown to love small, simple tech stacks for those occasional side projects, micro-sites and one-off experiments that don’t demand as many features or justify such diligent maintenance.
fridayfrontend  parcel  eleventy  javascript  build  cssbasics 
17 days ago by spaceninja
Building an accessible autocomplete control
I've been looking for a way to let users enter a destination country. Unfortunately, native HTML form controls just aren't good enough for this type of interaction. And so we need to build a custom autocomplete control from scratch.

A word of warning though: this is one of the hardest UI components I’ve ever had to make—they’re just way harder than they look.
fridayfrontend  accessibility  javascript  forms  autocomplete 
17 days ago by spaceninja
A new technique for making responsive, JavaScript-free charts
For a recent New York Times article, I wanted to see if it was possible to create SVG charts that would work without JS. I haven't seen the same combination of techniques used elsewhere, so I figured I'd write up the process. I've also created an experimental Svelte component library called Pancake to make these techniques easier to use.
fridayfrontend  svg  javascript  svelte  charts 
17 days ago by spaceninja
How To Create A Headless WordPress Site On The JAMstack
In this post, we’ll set up a demo site and tutorial for headless WordPress, including a starter template! We’ll use the WordPress dashboard for rich content editing, while migrating the front-end architecture to the JAMstack to benefit from better security, performance, and reliability. We’ll do this by setting up a Vue application with Nuxt, pulling in the posts from our application via the WordPress API.
fridayfrontend  wordpress  jamstack  vue  nuxt  api  javascript 
17 days ago by spaceninja
JavaScript Libraries Are Almost Never Updated Once Installed
Cloudflare helps run CDNJS, a very popular way of including JavaScript and other frontend resources on web pages. With the CDNJS team’s permission we collect anonymized and aggregated data from CDNJS requests which we use to understand how people build on the Internet. Our analysis today is focused on one question: once installed on a site, do JavaScript libraries ever get updated?
javascript  library  security  cloudflare  cdn 
17 days ago by spaceninja
5 Best Practices to Write Quality Arrow Functions
The arrow function deserves the popularity. Its syntax is concise, binds this lexically, fits great as a callback. In this post, you’ll read 5 best practices to get even more benefits from the arrow functions.
javascript  es6  arrow  functions  bestpractices 
17 days ago by spaceninja
Why use a form element when submitting fields with JavaScript? | Go Make Things
There are two reasons why you should still use a form element:

It makes your life easier.
Semantics (and the accessibility that happens as a result).
fridayfrontend  javascript  forms  accessibility 
24 days ago by spaceninja
What React Does (and Doesn't Do)
React doesn’t do a whole lot. Don’t get me wrong – it’s great at what it does! But the things React is actually responsible for, in a fully-functioning production app? That list is pretty small. The universe of things you might call “a React problem” or “a React thing” is probably smaller than you think.
fridayfrontend  javascript  react 
24 days ago by spaceninja
Magical Rainbow Gradients with CSS Houdini and React Hooks
A deep-dive look at how we can use CSS Houdini + React Hooks to animate gradients. It relies on a trick that absolutely blew my mind when I discovered it.
fridayfrontend  css  javascript  react  houdini  animation  gradients  radial 
24 days ago by spaceninja
How to (unit) test in React - ITNEXT
This guide explains what unit testing is, why it’s needed and the best practices for small to large React applications.
react  javascript  testing 
24 days ago by spaceninja
Honkify.js — the goose is loose!
Need a little more chaos in your life? Inspired by Untitled Goose Game, you can now set a goose loose on your site to act like a jerk.

When activated, all links on the site will stop working, instead triggering a “honk!” sound effect.

Honk. Honk honk honk.
javascript  goose  games  humor 
26 days ago by spaceninja
Tiny Helpers
A collection of free single-purpose online tools for web developers...
css  html  tools  javascript  development 
4 weeks ago by spaceninja
On let vs const — Overreacted
I don’t care.

I would use whatever convention already exists in the codebase.

If you care, use a linter that automates checking and fixing this so that changing let to const doesn’t become a delay in code review.

Finally, remember that linters exist to serve you. If a linter rule annoys you and your team, delete it. It may not be worth it. Learn from your own mistakes.
javascript  variables  const  let 
4 weeks ago by spaceninja
Material design style click effects with pointer events and CSS Custom Properties – Ben Frain
These days I’m getting a kick remaking things with more modern approaches that used to be problematic. Here’s a little example: a material design style click/selection. What I mean is where you have a button and where you click it creates an effect that starts from the point you clicked/touched.
fridayfrontend  css  cssbasics  material  click  javascript  animation 
5 weeks ago by spaceninja
How to Animate on the Web With Greensock | CSS-Tricks
There are truly thousands of ways to animate on the web. We’ve covered a comparison of different animation technologies here before. Today, we’re going to dive into a step-by-step guide of one of my favorite ways to get it done: using GreenSock.
fridayfrontend  cssbasics  css  animation  greensock  javascript  gsap 
5 weeks ago by spaceninja
Test Driven Development: what it is, and what it is not.
Test driven development has become popular over the last few years. In this article I will go through the fundamentals of Test Driven Development, addressing common misconceptions about the TDD technique.
fridayfrontend  tdd  testing  javascript 
5 weeks ago by spaceninja
10 JavaScript Concepts You Need to Master React (+ Cheatsheet)
Aside from a few unique features that it has, such as JSX, React is at it’s core plain JavaScript. That means we can always use the best and most appropriate parts of JavaScript to enhance and better develop our React applications. In short, the better you become at JavaScript the better you’ll be at React.
fridayfrontend  javascript  react  let  const  literals  arrowfunctions  map  filter  reduce  arrays  destructuring  spread  ternary  promises  async  await 
5 weeks ago by spaceninja
Transitioning Hidden Elements
There are a ton of ways to hide elements with CSS. You can use visibility, opacity, transforms, positioning, or even clip-paths. However, while all of these techniques visually hide the element, the elements are still in the accessibility tree, and screen readers will treat them as if they were visible.

Instead, you should use the hidden attribute or display: none;. But there’s one major downside to hiding elements this way: you can’t transition their properties when you’d like to show them. How can we work around this in an accessible way? I set out to write an npm package to handle this, and ended up learning a lot about document flow, transition events, and more along the way!
fridayfrontend  hidden  transitions  animation  javascript  css  accessibility  transitionEnd  setTimeout 
5 weeks ago by spaceninja
How to move your project to TypeScript - at your own pace - Twilio
This post is structured in a way that will allow you to gradually incorporate TypeScript into your project at your own pace and how much you want to. After any chapter you should be able to to stop and have a working codebase and hopefully a bit of improved developer experience.
javascript  typescript 
5 weeks ago by spaceninja
Everything you need to know about React Hooks - Carl Vitullo - Medium
React just announced a new feature: Hooks. It’s a brand new set of APIs that enables powerful new ways to share stateful logic between components, optimize performance without significant rewrites, get some of the benefits of Redux-style separation of concerns, and more. They also deliver on a promise that the React team made years ago — stateful…
react  javascript  hooks 
5 weeks ago by spaceninja
What to Pay JavaScript Developers in 2020 - JavaScript Scene - Medium
The software industry has the highest turnover rate of any industry at over 13% due to large constantly growing demand, leaving many developers feeling undervalued when their employer fails to keep up with the market and their increasing skills.
javascript  developers  salary  benefits  compensation 
5 weeks ago by spaceninja
What is this guide? | Vue Testing Handbook
This is a collection of short, focused examples on how to test Vue components. It uses vue-test-utils, the official library for testing Vue components, and Jest, a modern testing framework. It covers the vue-test-utils API, as well as best practises for testing components.
vue  javascript  testing  jest 
5 weeks ago by spaceninja
Understanding Async Await
When writing code for the web, eventually you'll need to do some process that might take a few moments to complete. JavaScript can't really multitask, so we'll need a way to handle those long-running processes. Async/Await is a way to handle this type of time-based sequencing. It’s especially great for when you need to make some sort of network request and then work with the resulting data. Let's dig in!
fridayfrontend  javascript  async  await  promises 
6 weeks ago by spaceninja
Taking Isomorphic Apps Offline With Service Workers
By combining isomorphic applications and service workers we can build app-like experiences that used to be impossible on the web. We just need a little help from an offline fallback page.
fridayfrontend  javascript  pwa  serviceworkers  offline  isomorphic  nuxt  vue  react 
6 weeks ago by spaceninja
Working with GraphQL using Vanilla JS
Let’s build a simple form that can communicate with a GraphQL API and search titles of books. We will only use HTML5, CSS3 and ES6 JavaScript.
javascript  es6  graphql  fetch  async  vanilla 
6 weeks ago by spaceninja
What Is JavaScript Made Of?
During my first few years of using JavaScript, I felt like a fraud. Even though I could build websites with frameworks, something was missing. I dreaded JavaScript job interviews because I didn’t have a solid grasp on fundamentals.

Over the years, I’ve formed a mental model of JavaScript that gave me confidence. Here, I’m sharing a very compressed version of it. It’s structured like a glossary, with each topic getting a few sentences.
fridayfrontend  javascript  cssbasics 
7 weeks ago by spaceninja
Gotta Select'em all
The following table contains some cells that are easy to copy, and some that are a bit harder to copy. For the next few minutes, we will explore how we can make all the cells with data easy to copy for most of the browsers in use today!
fridayfrontend  css  cssbasics  tables  select  user-select  accessibility  cursor  javascript  polyfills 
7 weeks ago by spaceninja
Adding Dynamic And Async Functionality To JAMstack Sites
Does that mean that JAMstack sites can’t handle dynamic interactions? Definitely not! JAMstack sites are great for creating highly dynamic, asynchronous interactions. With some small adjustments to how we think about our code, we can create fun, immersive interactions using only static assets!
fridayfrontend  jamstack  serverless  javascript  async 
7 weeks ago by spaceninja
Running Code Over Time – Eric’s Archived Thoughts
I’m posting this on the last day of 2019.  As I write it, the second post I ever made on meyerweb says it was published “20 years, 6 days ago”.  It was published on the second-to-last day of 1999, which was 20 years and one day ago. …The five-day error is there because in the two decades since I posted it, there have been five leap days.  When I wrote the code to construct those relative-time strings, I either didn’t think about leap days, or if I did, I decided a day or two here and there wouldn’t matter all that much.
fridayfrontend  dates  leapyears  relativetimeformat  javascript 
7 weeks ago by spaceninja
How to Build Your Resume on npm
Just yesterday, Ali Churcher shared a neat way to make a resume using a CSS Grid layout. Let’s build off that a bit by creating a template that we can spin up whenever we want using the command line. The cool thing about that is that you’ll be able to run it with just one command.
fridayfrontend  howto  javascript  npm  resumes  json  node  cli 
7 weeks ago by spaceninja
Accessible form error auto-focus with Vuelidate in Vue - DEV Community 👩‍💻👨‍💻
Vuelidate makes it very simple for developers to handle even the most complex cases of form validation, but what about accessibility UX? Let's take a look at some very simple practices that you can implement on your Vuelidate powered forms that will make them behave a lot more nicely for accessibility tools like screen reade
vue  javascript  forms  validation  errors  focus  vuelidate 
7 weeks ago by spaceninja
Create a React app from scratch with Webpack and Babel • Sentinel Stand
This article will guide you through the process of creating a React app from scratch. It is meant for developers who want a better understanding of how tools like Babel, Webpack, DevServer, React, loaders, and presets make up a modern React app. We’ll try to understand how they all fit together by incrementally piecing together an application.
react  javascript  webpack  babel  buildyourown  tutorials  howto 
7 weeks ago by spaceninja
eslint-plugin-jsx-a11y - npm
Static AST checker for accessibility rules on JSX elements.
accessibility  jsx  react  javascript  eslint 
7 weeks ago by spaceninja
eslint-plugin-vue-a11y - npm
Static AST checker for accessibility rules on elements in .vue.
accessibility  vue  javascript  eslint 
7 weeks ago by spaceninja
It is 2020. Update Your Website Footer.
Change your static timestamp to an automatically updating copyright year or other dynamic timestamp. Just copy a code snippet from below or read more.

What dynamic timestamp? »
fridayfrontend  cssbasics  javascript  dynamic  dates  footer  copyright 
8 weeks ago by spaceninja
Highlights of the HTTP Archive Web Almanac
I spent my Sunday reading the HTTP archive web almanac and shared the surprising and interesting pieces in a Twitter thread. I like to own my data – so here we have the thread on my own site. Enjoy!
fridayfrontend  cssbasics  archive  almanac  statistics  javascript 
8 weeks ago by spaceninja
Move Fast & Don’t Break Things
Webpage performance is a high priority for any site of scale today, but it can be easier to build a fast site than it is to maintain one. As a site's features and design evolves, its performance is often threatened for a number of reasons, making it hard to ensure fast, broad access to services. In this article, Scott will consider common conflicts between performance and features such as advertising, personalization, A/B testing, CMSs, and JavaScript frameworks, and share some practices that have helped major sites defend their speed without compromises.
fridayfrontend  css  javascript  performance  frameworks  bestpractices 
8 weeks ago by spaceninja
Applied Accessibility, by Sara Soueidan
As front-end developers, we are tasked with building the front end of a Web site or application — in other words, we are building the user's end of an interface. This is why it is crucial that we ensure that the front-end foundations that we build are as inclusive of and accessible to as many users as possible. To do that, we must build with accessibility in mind from the get-go. This, in turn, means that the way we approach writing HTML, CSS, SVG and JavaScript *might* need to change as we take into consideration many factors that affect how (in)accessible our UIs are.
fridayfrontend  video  accessibility  html  css  svg  javascript 
8 weeks ago by spaceninja
6 tips for better React performance - ITNEXT
In this article I will try and list out a few easy ways to achieve better performance in your React app through simple development hacks. Under no means does this mean that you need to always apply these techniques, but it’s always good to know that they are there.
javascript  react  performance 
8 weeks ago by spaceninja
14 Beneficial Tips to Write Cleaner Code in React Apps – JSManifest
Writing clean code is something that becomes mandatory at some point in your career especially while you're trying to obtain your first developer job. It's essentially what makes you a team player and can either break or make your success from a job interview. How you write code is one of the things they want to look at before making the hiring decision. Your code should be understandable by humans and not just by a machine.
javascript  react  bestpractices  tips  howto 
8 weeks ago by spaceninja
Mutable vs. Immutable in JavaScript | Go Make Things
If an item is mutable, modifying the copy also modifies the original. If it’s immutable, modifying the copy does not affect the original.

It’s confusing because immutable sounds like the item can’t be changed. What it actually means, though, is that the original is not changed when the copy is.
javascript  mutable  immutable 
8 weeks ago by spaceninja
JavaScript: Import & Export Statements - RWieruch
The import and export statements in JavaScript help you to share code across multiple files. Historically there were already several solutions for this in the JavaScript environment, but it was a mess because there wasn't standardized method of performing this task. JavaScript ES6 added it as a native behavior eventually.
javascript  import  export  default  modules 
8 weeks ago by spaceninja
How to Avoid the “Boolean Trap” When Designing React Components
We learnt this years ago, but it seems we need to re-learn it in React where the same problem takes a different form. I call it “the Boolean trap.”
javascript  react  vue  components  boolean  props 
8 weeks ago by spaceninja
Web Design And Development Advent Roundup For 2019 — Smashing Magazine
A roundup of Advent Calendar sites of interest to web designers and developers. From accessibility to UX, coding challenges to Perl, there really is something for everyone this December.
fridayfrontend  css  javascript  advent  performance  ux  accessibility  cssbasics 
9 weeks ago by spaceninja
The State of JavaScript 2019
We were pretty sure 2018 would be the last time we did this survey. After all, the JavaScript ecosystem can’t very well keep changing again, can it? But what do you know, turns out JavaScript isn’t quite done changing just yet! And so after over 21,717 respondents took this year's survey we had to dig up our components and charts, curse us-from-a-year-ago for writing such crappy code, and get to work digging through the data.
fridayfrontend  javascript  surveys  frameworks 
9 weeks ago by spaceninja
Web Performance Calendar » Bundling JavaScript for Performance: Best Practices
I’ll be looking at three approaches with bundling a simple React.js “hello world” app. Some of these examples assume some basic knowledge of module bundlers such as Webpack, which still seems to be the most popular of the module bundler options out there today.
javascript  bundlers  performance  react  cdn 
9 weeks ago by spaceninja
Error handing when using the vanilla JS fetch() method with async and await | Go Make Things
Today, we’re going to look at how to handle errors when using the fetch() method with async and await.
javascript  fetch  async  await  catch  errors 
10 weeks ago by spaceninja
Adding Line Highlighting to your Code Examples using Prism.js
Company blogs, tutorials, and many other websites have code examples on them to help users learn about their product, perform some cool integration, or highlight some specific problem they found and solved. These code examples help tell a story for the reader. They also serve as nice snippets to just take with you to solve your own coding-related issues. Heck that's how StackOverlow finds itself doing the best work. So how can we improve the experiences of code examples? We are going to introduce line highlighting!
fridayfrontend  css  cssbasics  javascript  prism  syntax  highlight 
10 weeks ago by spaceninja
When should you add the defer attribute to the script element?
If you have any any noncritical JavaScript file, or any code that depends on the DOM being rendered to run, load it in the head with the defer attribute. This will result in the best performance on most browsers.
fridayfrontend  cssbasics  javascript  defer  html  performance 
10 weeks ago by spaceninja
It All Starts with a Humble <textarea>
Andy Bell rings out a fresh call in support of the timeless concept of progressive enhancement. What does it mean to build a modern JavaScript-focussed web experience that still works well if part of the stack isn’t supported or fails? Andy shows us how that might be done.
fridayfrontend  cssbasics  progressive  enhancement  textarea  forms  mvp  javascript 
10 weeks ago by spaceninja
How to Choose the Best JavaScript Editor for Web Development
There are a number of options for developers who are looking for a good JavaScript editor that provides a more efficient and pleasant working environment. Leading JavaScript code editors share many of the same great major features you might expect, including autocompletion (code completion), git integration, and plugin support. But it's the little things that can make one editor a better fit than another for a given developer.
fridayfrontend  cssbasics  javascript  editors  vscode  atom  sublime  vim  webstorm 
10 weeks ago by spaceninja
Web Development in 2020: What Coding Tools You Should Learn
Today one of my favorite teachers, Brad Traversy, published an overview of what he recommends you learn to become a web developer in 2020. Brad cuts through a lot of the hype you hear on social media. His advice is practical and realistic. And I agree with him on pretty much everything he recommends you learn. The main thing Brad emphasizes - and that I always emphasize - is don't feel daunted or let yourself get overwhelmed.
fridayfrontend  cssbasics  frontend  training  learning  frameworks  javascript  pwa 
10 weeks ago by spaceninja
A Recap of Frontend Development in 2019
The world of frontend development once again evolved at a rapid pace over the past year, and this article recaps all the important events, news, and trends from 2019.
fridayfrontend  recap  frontend  npm  javascript  vue  react  angular  accessibility  css-in-js 
10 weeks ago by spaceninja
The unseen performance costs of modern CSS-in-JS libraries in React apps
CSS-in-JS is becoming a popular choice for any new front-end app out there, due to the fact that it offers a better API for developers to work with. Don’t get me wrong, I love CSS, but creating a proper CSS architecture is not an easy task. Unfortunately though, besides some of the great advantages CSS-in-JS boasts over traditional CSS, it may still create performance issues in certain apps. In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on occasion and finally consider techniques that we can employ to mitigate them. So, without further ado, let’s jump straight in.
css  javascript  css-in-js  performance  react 
10 weeks ago by spaceninja
Self-hosting third-party resources: the good, the bad and the ugly
If you want to implement self-hosting tomorrow, my two cents are: Self-host your critical JS libraries, Fonts and CSS. This will reduce the risk of SPOF or degraded performance on the critical path. Before caching a third-party resource on a CDN, be sure that it is versioned or that you can manage its life cycle by flushing manually or even automatically the CDN when a new version is published. Double check your CDN/proxy/cache configuration to avoid sending primary cookies, client hints to third-party services.
performance  hosting  thirdparty  javascript  caching 
10 weeks ago by spaceninja
How to use async and await with vanilla JavaScript | Go Make Things
You may have seen async and await before and been confused about what they do or why you would use them. Today, I’m going to demystify things a bit with some practical examples.
javascript  vanilla  es6  async  await  promises 
10 weeks ago by spaceninja
« earlier      
per page:    204080120160

related tags

5g  60fps  abstraction  access-control-allow-origin  accessibility  accordions  adaptive  adaptiveloading  advent  advertising  advice  airbnb  ajax  alignment  almanac  analytics  angular  animation  animations  api  apollo  applitools  architecture  archive  aria  arrays  arrow  arrowfunctions  art  aspectratio  async  atom  atomic  attributes  audio  autocomplete  await  awesome  axios  babel  badges  bang  beautifiers  bem  benefits  bestpractices  binding  blocks  boilerplate  bookmarklets  books  boolean  bootcamps  boring  bower  breakpoints  broccoli  broken  browserify  browsers  bubbling  buffet  build  buildyourown  bullshit  bundler  bundlers  buttons  caching  calendar  callback  callbacks  cameras  canvas  carousel  catch  cats  cdn  centered  characterentities  charts  cheatsheet  checkboxes  chrome  ci  circleci  civilrights  clamp  class  classList  clean  clever  cli  click  clip-path  clipboard  clone  cloudflare  cloudinary  code  codeofconduct  codesplitting  coercion  coffeescript  color  comics  commonjs  communication  community  compensation  compilers  components  condensed  conditionals  conferences  config  console  const  containerqueries  contenteditable  contrast  conventions  conversion  cookies  copy  copyright  cors  countdown  countries  creditcards  critical  cropped  crud  css  css-in-js  cssbasics  cssgrid  cssmodules  cssom  culture  currency  cursor  customelements  customproperties  cypress  d3  dark  darkmode  dart  data  data-url  date  datepicker  dates  debounce  debugging  decorators  decrement  deep  default  defer  deferred  delay  delegation  demos  dependencies  design  designsystem  destructuring  details  detection  devdependencies  developers  development  devops  devtools  dialog  dinero  dinosaurs  disabled  django  documentation  dojo  dom  drag-and-drop  drama  dreamweaver  drop-shadow  dropdown  dumb  duplicates  dynamic  eastereggs  editorconfig  editors  effects  elements  eleventy  ellipsis  ember  emoji  emotion  emulator  enhancement  enqueue  entities  env  environment  enzyme  error  errors  es6  es7  es8  es2015  es2017  es2018  eslint  est  estimation  ethics  eventlistener  events  every  export  express  facebook  factories  fallback  fatigue  fears  featurequeries  features  feminism  fetch  files  filter  filtering  finally  find  fittext  fitty  fitvid  fixed  fixtext  flashcards  flat  flatmap  flatten  flexbox  flip  floats  flow  flowtype  fluid  flux  focus  focus-ring  foit  fonts  footer  footnotes  for  foreach  formatting  forms  fouc  fout  frameworks  free  fridayfrontend  frontend  fugu  fullstack  fun  functional  functions  funny  galleries  games  gatekeeping  gatsby  gawker  gender  generator  geocities  getselection  ghibli  ghost  gifs  git  github  global  google  goose  gradients  graphql  graphs  grayscale  greatdivide  greensock  grids  grunt  gsap  guide  guidelines  guides  gulp  gutenberg  handbook  hardwareacceleration  hashbang  headers  headings  headlines  height  hidden  higherorder  highlight  hiring  history  hoc  hooks  horizontal  hosting  houdini  hover  howto  html  html-in-js  http2  httponly  humor  husky  icons  id  idle  ie  ie6  iframes  iife  images  immutable  import  imposter  includes  inclusive  infographics  inheritance  inline  inputs  intersection-observer  intervals  interviews  invert  ios  iphone  is  isomorphic  jamstack  jasmine  javascript  jest  jobs  jpl  jquery  jsdoc  json  jspm  jsx  jump  karma  kata  kerning  keyboard  konami  kss  label  language  layout  lazyload  leadership  leapyears  learning  less  let  lettering  library  ligatures  lightbox  lighthouse  link  links  lint  lint-staged  linters  lists  literals  loader  loaders  loading  lodash  logging  logical-properties  loops  mac  macos  macromedia  maintainability  make  management  map  marquee  masonry  matchmedia  material  max  mediaqueries  mediaquerylist  medium  megamenu  meltdown  memes  menus  methods  metrics  min  minification  minimum  mobile  mobx  mocha  modal  modals  modernizr  modular  modules  moment  money  mootools  mouse  multicol  mutable  mutation  mvc  mvp  names  namespacing  naming  nasa  navigation  nesting  netscape  newsletters  next  nextjs  night  nintendo  no-cors  node  nodelist  noscript  not  notch  npm  nuxt  objects  offline  onclick  opacity  opensource  opera  optimization  options  organization  orientation  os  outline  overflow  overlay  packages  pagespeed  pagination  parallax  parameters  parcel  paste  patternlibrary  patterns  performance  phone  photos  php  picture  pinch-zoom  pinned  plan  player  plugin  plugins  png  polyfill  polyfills  popup  position  postcss  postman  preconnect  prefixes  preload  prepare  preprocessors  prettier  pride  principles  print  priority  prism  prisma  privacy  process  processing  productivity  professional  programming  progress  progressive  project  projects  promises  proportional  props  proptypes  prototype  pseudo-classes  pure  purgecss  push  pwa  querySelector  queryselectorall  querystring  question  questions  quickreference  quotes  racism  radial  ratings  react  reactgate  readability  recap  redesign  reduce  redux  refactoring  reference  reflow  refresh  regex  relativedatetimeformat  relativetimeformat  reliability  reload  remote  renderless  renderprops  resources  responsive  rest  resumes  retro  rights  ripple  roles  rollovers  rotating  routers  routing  ruby  rules  rwd  safe-area-inset  salary  samesite  sass  satire  scale  scaling  school  scoped  scroll  scroll-behavior  scroll-snap  scrollbars  scrollintoview  scrollTo  search  security  select  selectors  selects  self  semantics  semver  serverless  serviceworkers  setproperty  setTimeout  sexism  shadowdom  shadows  shallow  sharing  shit  slides  slots  smoosh  smooshgate  snake  social  software  some  sorting  sourcemaps  spa  space  spectre  speed  spinners  splitting  spotify  spread  spreadsheets  sprites  ssr  standards  stars  starterkit  starwars  state  stateful  static  statistics  sticky  storybook  strings  stripe  structure  study  styled-components  styleguide  sublime  summary  support  supports  survey  surveys  suspense  svelte  svg  swap  syntax  tables  tabs  tailwind  tasks  tdd  teaching  technology  templateliterals  templates  ternary  testcafe  testing  tests  text  textarea  textfill  textfit  themes  third-party  thirdparty  this  throttle  throttling  time  timeout  timer  times  timezones  tips  titles  todo  toggle  toggles  tools  tooltip  tooltips  toto  totoro  tracking  training  transforms  transitionEnd  transitions  transparent  transpiler  treeshaking  trim  troubleshooting  truncate  try  tuning  tutorial  tutorials  types  typescript  typesetter  typography  uglify  ui  underscore  unit  units  uploads  urgent  url  urls  usability  use  user-select  utf8  utility  ux  v-model  validation  vanilla  variablefonts  variables  vendors  video  viewport  vim  visibility  visualization  volume  vscode  vue  vue-cli  vuelidate  vuepress  vuetify  vuex  wat  webapps  webassembly  webcomponents  webfonts  webpack  webpagetest  webstorm  webworkers  while  whitespace  wizards  wordpress  workers  worklets  wysiwyg  xkcd  yarn  yepnope  youdontneed  youmightnotneed  youtube  zoom 

Copy this bookmark: