Learn  |  web.dev
Explore our structured learning paths to discover everything you need to know about building for the modern web.
archive  performance  webdev  google 
yesterday
THREAT MAP by LookingGlass
This real-time map shows actual data from our threat intelligence feeds including:

Cyveillance Infection Records Data Feed
Cyveillance Malicious URL Data Feed
Cyveillance Phishing URL Data Feed
info-assurance  security  malware  tracking 
2 days ago
How to write a killer Software Engineering résumé – freeCodeCamp.org
An in-depth analysis of the résumé that got me interviews at Google, Facebook, Amazon, Microsoft, Apple, and more.
career  jobs  resume 
8 days ago
nystudio107 | An Annotated webpack 4 Config for Frontend Web…
As web devel­op­ment becomes more com­plex, we need tool­ing to help us build mod­ern web­sites. Here’s a com­plete real-world pro­duc­tion exam­ple of a sophis­ti­cat­ed web­pack 4 config
build  dev  javascript  webpack 
11 days ago
Keyboard shortcuts in Windows - Windows Help
Keyboard shortcuts are keys or combinations of keys that provide an alternative way to do something that you’d typically do with a mouse.
keyboard  shortcuts  windows 
11 days ago
Human Terrain
Visualizing the world's population, in 3D.
maps  visualization  data  graphics  population  via:popular 
20 days ago
leonardomso/33-js-concepts: 📜 33 concepts every JavaScript developer should know.
This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies.
bestpractices  javascript  js  programming  reference 
25 days ago
Building a Vagrant Box from Start to Finish
The goal of Vagrant is to make it so simple to create a local development environment, you’d never want to do it another way again. With two simple commands you can quickly setup your first vagrant environment and with a third command, be connected into your first vagrant box in under a few minutes.
box  examples  guide  howto  vagrant 
29 days ago
Learn How To Build: Astronomy Picture Of The Day App with NASA API and React + Redux
We are using React for building the application UI, Axios for fetching data and Redux for managing our application state. Also, let’s not forget about Webpack which will compile it all down for our browser. Great workflow! Let’s jump in!
javascript  tutorial  reactjs  webpack  redux  axios 
29 days ago
SOLID Principles every Developer Should Know – Bits and Pieces
As such, five guidelines were developed by Robert C. Martin. These five guidelines/principles made it easy for developers to create readable and maintainable programs.

These five principles were called the S.O.L.I.D principles (the acronym was derived by Michael Feathers).

S: Single Responsibility Principle
O: Open-Closed Principle
L: Liskov Substitution Principle
I: Interface Segregation Principle
D: Dependency Inversion Principle
oop  patterns  programming  solid 
4 weeks ago
Negative Grid Lines - CSS { In Real Life }
Did you know you can use negative line numbers to position grid items with CSS Grid? I didn’t until recently – or rather, I hadn’t given it any thought, as I never felt like I needed to before.
css  grid  webdesign  layout 
4 weeks ago
Control your Ring Spotlight with Alexa with Smart Things – Philip Nye
Just a quick post, but I’ve managed to get my Ring Spotlight cam light operated by my Alexa using a Custom Device type in my SmartThings hub.
ring  smart-home  smartthings 
5 weeks ago
11 React UI Component Playgrounds for 2018 – Bits and Pieces
Useful online playgrounds and editors for your UI components
reactjs 
5 weeks ago
Gluing Techniques: How to Make a Waterfall Corner Joint - Woodworking | Blog | Videos | Plans | How To
Waterfall joints are used on cabinets or tables to feature continuous grain flow around the corner joint. A waterfall corner is a miter joint that is cut in the board to maintain the grain pattern around the outside corner of a cabinet or table. Rob Johnstone demonstrates how to cut and assemble a waterfall corner joint. You’ll also learn a great tip for how to use hide glue and clamping cauls to clamp this joint securely.
diy  woodworking  tutorial 
5 weeks ago
Learn the Fundamentals of Webpack v4 with core maintainer of Webpack, Sean Larkin
Learn the core concepts of Webpack 4 with Sean Larkin – maintainer of Webpack. You'll start entirely from scratch by adding webpack with npm and separate your dev and production environments. Then you'll learn to lazy load your JavaScript through code splitting, remove code you don't need through tree shaking, and control your entire build pipeline with popular loaders and plugins from the Webpack ecosystem. Be confident in building and shipping your code with Webpack – the open source bundler responsible for powering some of the most popular and high-performance web applications!

This course and others like it are available as part of our Frontend Masters video subscription.
javascript  tutorial  webpack 
7 weeks ago
Summary of Webpack 4 Fundamentals by Sean Larkin (Part 1 of 4: Why Webpack?)
This is the first part of my summary of Sean Larkin’s “Webpack 4 Fundamentals” on FrontendMasters. (https://frontendmasters.com/courses/webpack-fundamentals/)
webpack 
7 weeks ago
Towards understanding Linear Algebra — Part 1 – sho.jp – Medium
In this series “Towards understanding Linear Algebra”, I’m going to cover topics based on famous and excellent lectures by Dr. Gilbert Strang. It’s a very good lecture and I strongly advise you to watch all the videos. My purpose here is to provide you with enough details to understand the key concepts from his lectures so that you could gain the most out of it with the smallest amount of time.
math  linear_algebra  explainer 
9 weeks ago
Byteconf
Free developer conferences for everyone, streamed on Twitch.
reactjs  conference  developer  streams 
10 weeks ago
The Terrible Performance Cost Of CORS Request, on the single-page application (SPA).
The title may let you think that this post as another ranting post about the downside of “Single Page Application”, but this is more about throwing some light from the performance perspective to keep in mind while designing the SPA ,that consumes API from different domain services that most of the article or courses teaching you SPA doesn’t talk about.
cors  performance 
10 weeks ago
Power of “keys” in React.js ⚛️ – Arwa Lokhandwala – Medium
Keys help React identify which items have changed, are added, or are removed
reactjs  explainer  articles 
10 weeks ago
Using the React DevTools Profiler to Diagnose React App Performance Issues | Netlify
The latest version of the React DevTools (released on Aug 23) offers a powerful new tool to detect and diagnose performance issues in your React app: the new Profiler tab! This post describes how we recently used the Profiler to quickly diagnose and fix a known and long-standing performance issue in the clientside display of our server logs on app.netlify.com.
debugging  performance  reactjs  react  devtools 
10 weeks ago
Cornell Lab Bird Cams
Created by the Cornell Lab of Ornithology, the website allows you to click on live bird cams from all over the world, including one trained on a California condor chick watched over by biologists from the U.S. Fish and Wildlife Service.
birds  wildlife  webcam 
11 weeks ago
Yeti 404 Page
Darin Senneff's animated yeti stumbles upon one of the scariest finds on the internet — the 404 page!
css  inspiration  404 
august 2018
Checklist for Writing Highly Reusable Components in React and Vue
There are so many best practices and advanced patterns — the problem is keeping track of them and keeping them in mind as you develop new components.
bestpractices  react  vue  advice 
august 2018
Versatile CSS-Only Ripple Effect
I created this ripple effect using only background-image, background-size, and background-position, which are all animateable properties.

This allows the effect to work directly on elements without any wrappers or pseudo-elements, and without js needing to kick off the animation.
css  animation  tutorial 
july 2018
Project House: A Simple Approach to Paneled Wainscot, Episode 1 - Fine Homebuilding
Built on a bench and finished with stock moldings, these panels don’t lose any points for style
diy  woodworking  home-design 
july 2018
Peek inside 35 cool Nebraska homes | Inspired Living | omaha.com
Some of our recent stories about home construction, renovations and design. 
home  home-design  inspiration 
july 2018
Shop-Made Shelf Standards | Woodsmith Tips
My latest cabinet project called for a number of adjustable shelves. Rather than using typical steel shelf standards, I decided to make my own hardwood versions for a custom appearance.
woodworking  diy  tips 
july 2018
Workshop Cabinets and Hanging Tool Chests
Just finished my Michael Pekovich Hanging Tool Cabinet - with some modifications.
Timber is Fijian Mahogany. Many firsts in this project - first dovetails, first turning, first raised panel doors.
diy  woodworking  inspiration 
july 2018
Graphs & paths: Dijkstra. – codeburst
In 1959, Edsger Dijkstra, determined that by calculating and recalculating distances on a graph, computers can find efficient paths. Which is great, because finding efficient paths leads travelers on better traveling experiences.

The concept of finding a shortest path, or something similar, is still used today in many mapping applications.
math  graphtheory 
june 2018
React — Composing Higher-Order Components (HOCs) – DailyJS – Medium
To put it simply, a higher-order component is a function, that takes a component and returns a new component. I like to think of them as parameterized components. Many times I find myself creating several components with very similar logic, with only 1 or 2 changes. Once I find a use case like this, it’s very simple to abstract the shared logic, and put the logic that changes into parameters.

You can read more about HOCs here, in the official React docs. Since components are just functions and HOCs are just functions that return other functions, we can use functional concepts to chain them using utilities methods such as compose, which is provided by many libraries (it's included in Redux!).

I’m going to talk about a few common use cases, then go over their implementation, and a few ways they can be composed together to make even more powerful HOCs!
higher-order-components  reactjs  javascript  example 
june 2018
12 Gluten-Free Beers That Actually Taste Good | Bon Appetit
Whether for diet or health concerns, giving up gluten used to mean missing out on the wildly flavorful new craft beers. The few gluten-free offerings available were bad copies of the real thing, like a tofu dog standing in for an all-beef frankfurter.
Now, brewers are tackling the challenge of creating beers that are low in gluten, high in flavor, making bitter IPAs, citrusy witbiers, and refreshing golden ales. They’re so good, you won’t know what you’re missing. Here are the 12 best gluten-free and gluten-reduced beers* available in America.
gluten-free  beer 
june 2018
8 React conditional rendering methods – LogRocket
If you want to iterate over a list to render more than one component or implement some conditional logic, you have to use pure Javascript. You don’t have a lot of options with looping either. Most of the time, map will cover your needs.

But conditional expressions?

That’s another story.
javascript  react  tutorial 
june 2018
React.js Boilerplate
Quick setup for new performance orientated, offline–first React.js applications
javascript  js  programming  react  template  boilerplate 
june 2018
COD: GOES16
This is our experimental GOES-EAST data viewer. This page, its features and contents are currently in a phase of rapid and active development. Nothing you see here is final, and is certainly open to suggestion from our users as we move forward. Our primary goal with this page is to try to make the most of what the new GOES-EAST satellite (GOES-R Series) can now offer. For the time being this means providing the full suite of data for every sector (minus a couple exceptions) at higher resolution than our operational page. With time, we plan on adding our "Mapping" and "Mesoscale Analysis" overlays and providing a markedly better mobile experience. We thank you for your support and patience during this process. Enjoy this wonderful new data!
weather  gis  data  map 
june 2018
JavaScript Event KeyCodes
press any key to get the javascript keycode reference
javascript  keyboard  reference  wesbos 
june 2018
Noun Project - Icons for Everything
Over a million curated icons, created by a global community
icons  design  graphics  icon  library  via:popular 
june 2018
React Widgets
react-widgets is a suite of high-quality input components built for React. Each component is built for ease of use, accessibility, and the practical needs of complex (or simple) forms. The work great with complex data structures and models, and in keeping with the React approach to form inputs, each component's props can easily be controlled or uncontrolled.
reactjs  lib  component 
june 2018
Free Open Source Podcast and RSS App built by GetStream.io
Winds 2.0 is a beautiful Open Source Podcast & RSS Reader created by Stream. Free desktop apps are available for OSx, Linux and Windows.
app  podcast  open-source  rss 
may 2018
Datamuse API
The Datamuse API is a word-finding query engine for developers. You can use it in your apps to find words that match a given set of constraints and that are likely in a given context. You can specify a wide variety of constraints on meaning, spelling, sound, and vocabulary in your queries, in any combination.

The API gives you programmatic access to most of the functionality of Datamuse's websites, including OneLook, RhymeZone, Rimar.io, and WikSearch.
api  javascript  development 
may 2018
Rebrandly API - Documentation
Rebrandly is the most complete and reliable management platform for your links. The easiest way to create, measure and share short URLs with a custom domain name.
api  javascript  development 
may 2018
Prop Drilling – kentcdodds
NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌 The goal of this post is to not…
reactjs  programming  explainer 
may 2018
How Tree Trunks Are Cut to Produce Wood With Different Appearances and Uses | ArchDaily
As wood is one of the most widely-used materials in the world, architects are accustomed to being able to easily obtain sawn wood at a nearby store. However, many of us know little about its manufacturing process and all the operations that determine its appearance, dimensions, and other important aspects of its performance.
wood  explainer  woodworking 
may 2018
A complete React with GraphQL Tutorial - RWieruch
In this tutorial, you will learn how to combine React with GraphQL in your application. There is no clever library such as Apollo Client or Relay involved to help you out in the beginning. Instead, you will perform GraphQL queries and mutations with plain HTTP requests. In a later tutorial, it’s planned to introduce Apollo as GraphQL client for your React.js application. But for now, this tutorial should should only show you how to use plain GraphQL in React. Yet you will start out without React to learn just about GraphQL in the first place.
graphql  javascript  reactjs  tutorial 
may 2018
Lessons from migrating a large codebase to React 16
We at Discord just launched our React 16 based app and wanted to share our experience and some tips we learned along the way.
reactjs  upgrade 
may 2018
Charity Navigator - Your Guide To Intelligent Giving | Home
Founded in 2001, Charity Navigator has become the nation's largest and most-utilized evaluator of charities. In our quest to help donors, our team of professional analysts has examined tens of thousands of non-profit financial documents. We've used this knowledge to develop an unbiased, objective, numbers-based rating system to assess over 9,000 of America's best-known and some lesser known, but worthy, charities.
analysis  finance  money  reference  charity 
may 2018
Semiotic Data Visualization
Semiotic is a data visualization framework for React. It provides three types of frames (XYFrame, OrdinalFrame, NetworkFrame) which allow you to deploy a wide variety of charts that share the same rules for how to display information. By adjusting the settings of a frame, you can produce very different looking charts that despite their visual difference are the same in the way they model information.
chart  javascript  library  react  visualization 
may 2018
Get to Know Your Fire Extinguisher with This Handy Chart
Take a moment or three and familiarize yourself with the humble fire extinguisher. Did you know that there are multiple types of extinguishers available? That the one you want in your kitchen might be different than the one(s) you want in your shop? Here is a handy guide, illustrated for us by the wonderful Shing Yin Khor.
safety 
may 2018
Declarative D3 Examples in React – Technical Credit – Medium
D3.js is a very popular library for creating visualisations on the web. The main problem with using it inside a React app is that D3 uses a jQuery like API for creating the SVG visualisations.
d3  reactjs  jsx 
may 2018
Internet Arcade : Free Software : Free Download, Borrow and Streaming : Internet Archive
The Internet Arcade is a web-based library of arcade (coin-operated) video games from the 1970s through to the 1990s, emulated in JSMAME, part of the JSMESS software package.
Containing hundreds of games ranging through many different genres and styles, the Arcade provides research, comparison, and entertainment in the realm of the Video Game Arcade.
games  gaming  archive 
may 2018
OpenGarage (WiFi garage door opener) | OpenSprinkler
OpenGarage is an open-source, universal garage door opener. It has built-in WiFi, cloud support, and automation feature.
diy  automation 
may 2018
OpenSprinkler
Keeping your lawn and flowers beautiful doesn't have to be stressful. OpenSprinkler unchains you from your sprinkler or irrigation control box, enabling you to program, run, or stop zones at any time from anywhere.
Whether you are at your desktop, laptop, tablet or phone; whether you are at home, office, or traveling on the road, you can access OpenSprinkler through any modern browser; or use our free apps available for all mobile platforms.
arduino  automation  diy  gardening  hardware  landscaping 
may 2018
« earlier      
3 3d advice agile amazon android angularjs animation api app apple architecture archive arduino art articles authentication automation awk backbone backup bash bestpractices books bourbon bower box building business calibration career center cesium chart chatbot cheatsheet ci cli climate cloud coding comic comics command command-line commandline component convert cooking cors crafts css d3 dashboard data data-visualization debugging design design-pattern dev developer development diet diy drinks driving ebook eclipse education eggs electronics emulator emulators example exercise explainer facebook faucets finance finishing fitness fonts food free frontend functional-programming gadgets game games gaming garden gardening generator gift git github google graphics graphql grunt guide gulp hadoop handyman hardware health history hobbies home home-design house howto humor icons ide idea ifttt infographic inspiration intro investing investment ios iot iphone japanese java javascript jewelry jobs jquery js json kayak kayaking keyboard kids kodi labels landscaping learning lib library linear_algebra linux list mac map maps marketing math mcebuddy media minecraft model money nes networking news ng node nodejs npm nutrition open-source opensource parenting patterns pc performance photography pi plex plugin politics print productivity programming promise protractor rasp react reactjs recipe recipes redux reference religion remote report resources rest resume retirement reusability routing rss safety sass science scss search security settings shell shortcuts sketch-up smart-home software solr storage stuff style sublime sublimetext tech template test testing text tile tips tivo tools travel turkey tutorial tv ui ux vagrant via:popular video virtualbox visualization weather web webdesign webdev webpack wedding wiki windows wish wood woodturning woodworking work workout wow xbmc xbox

Copy this bookmark:



description:


tags: