recentpopularlog in

amason : webdev   948

« earlier  
Micromodal.js - Tiny javascript library for creating accessible modal dialogs
It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change.
webdev  accessible  popup  javascript  a11y  accessibility 
yesterday by amason
What forces layout/reflow. The comprehensive list.
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
reflow  performance  browser  javascript  css  webdev 
20 days ago by amason
cristianbote/goober: 🥜 goober, a less than 1KB 🎉css-in-js alternative with a familiar API
I always wondered, if you can get a working solution for css-in-js with a smaller footprint. I started a project and wanted a to use styled-components. Looking at their sizes, it seems that I would rather not include ~16kB(styled-components) or ~11kB(emotion) just so I can use the styled paradigm. So, I embarked in a mission to create a smaller alternative for these well established apis.
CSS  javascript  webdev 
23 days ago by amason
uNetworking/uWebSockets.js: TypeScript web server - 15x faster than Deno
This project is not your typical "web framework" à la 500 lines of JavaScript and a fancy logo. No, you're looking at a three part software suite of ~7k lines of C & C++, working in unison with Google V8 to bring you one of the most memory scalable and performant I/O scriping environment available.

It runs 15x faster than Deno and scales to millions of connections using less than half a GB of user space memory.
webserver  node  performance  http  websockets  webdev 
24 days ago by amason
Virtual SSD Cloud Servers - Scaleway
High performance SSD servers for any workload
hosting  vps  webdev 
24 days ago by amason
aweary/tinytime: ⏰ A straightforward date and time formatter in <1kb
A straightforward date and time formatter in <800b.

tinytime exports a single function that returns a template object. This object has a single method, render, which takes a Date and returns a string with the rendered data.
date  format  javascript  webdev 
25 days ago by amason
Fastify, Fast and low overhead web framework, for Node.js
An efficient server implies a lower cost of the infrastructure, a better responsiveness under load and happy users. How can you efficiently handle the resources of your server, knowing that you are serving the highest number of requests as possible, without sacrificing security validations and handy development?

Enter Fastify. Fastify is a web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture. It is inspired by Hapi and Express and as far as we know, it is one of the fastest web frameworks in town.
javascript  nodejs  framework  server  webdev 
4 weeks ago by amason
lory - Touch enabled minimalistic slider written in vanilla JavaScript
Touch enabled minimalistic slider written in vanilla JavaScript

Hardware accelerated transitions

Usable as a jQuery plugin

Options for custom easing effects

infinite looping ~ carousel

No compromises for fallbacks

Written in ecmascript 6

Using webpack, babel & eslint for development
Javascript  slider  library  webdev  carousel 
4 weeks ago by amason
alferov/array-to-tree: Convert a plain array of nodes (with pointers to parent nodes) to a nested data structure
Convert a plain array of nodes (with pointers to parent nodes) to a nested data structure.

Solves a problem with conversion of retrieved from a database sets of data to a nested data structure (i.e. navigation tree).
webdev  programming  databases 
4 weeks ago by amason
ulid/spec: The canonical spec for ulid

128-bit compatibility with UUID
1.21e+24 unique ULIDs per millisecond
Lexicographically sortable!
Canonically encoded as a 26 character string, as opposed to the 36 character UUID
Uses Crockford's base32 for better efficiency and readability (5 bits per character)
Case insensitive
No special characters (URL safe)
Monotonic sort order (correctly detects and handles the same millisecond)
distributed  algorithm  uuid  programming  webdev 
4 weeks ago by amason
developit/decko: The 3 most useful ES7 decorators: bind, debounce and memoize
A concise implementation of the three most useful decorators:

@bind: make the value of this constant within a method
@debounce: throttle calls to a method
@memoize: cache return values based on arguments

Decorators help simplify code by replacing the noise of common patterns with declarative annotations. Conversely, decorators can also be overused and create obscurity. Decko establishes 3 standard decorators that are immediately recognizable, so you can avoid creating d...
webdev  javascript  programing 
4 weeks ago by amason
Rendering on the Web  |  Web  |  Google Developers
Our understanding of this space is informed by our work in Chrome talking to large sites over the past few years. Broadly speaking, we would encourage developers to consider server rendering or static rendering over a full rehydration approach.

In order to better understand the architectures we’re choosing from when we make this decision, we need to have a solid understanding of each approach and consistent terminology to use when speaking about them. The differences between these a...
rendering  performance  javascript  webdev 
5 weeks ago by amason
toddmotto/public-apis: A collective list of free APIs for use in software and web development.
A collective list of free APIs for use in software and web development. - toddmotto/public-apis
webdev  apis  programming 
6 weeks ago by amason
speedscope - interactive flamegraph visualizer
Hi there! Welcome to 🔬speedscope, an interactive flamegraph visualizer. Use it to help you make your software faster.

Drag and drop a profile file onto this window to get started, click the big blue button below to browse for a profile to explore, or click here to load an example profile.
profiler  profiling  performance  visualization  webdev 
7 weeks ago by amason
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. It is based on an article written by Stephen Curtis and you can read it here.
Javascript  webdev  Programming  learning 
november 2018 by amason
Imageproxy - A caching, resizing image proxy written in Go
imageproxy is a caching image proxy server written in go. It features:

basic image adjustments like resizing, cropping, and rotation
access control using allowed hosts list or request signing (HMAC-SHA256)
support for jpeg, png, webp (decode only), tiff, and gif image formats (including animated gifs)
caching in-memory, on disk, or with Amazon S3, Google Cloud Storage, Azure Storage, or Redis
easy deployment, since it's pure go
image  resize  performance  webdev  service  Linux 
october 2018 by amason
Nintendo Switch eShop Javascript Technologies · GitHub
These are the current packages used by Nintendo Switch eShop app.
Javascript  webdev  Programming  library 
august 2018 by amason
Learn CSS Grid
CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. This guide was created as a resource to help you better understand and learn Grid, and was organized in a way I thought made the most sense when learning it.
grids  grid  css  webdev 
july 2018 by amason
OVH - Dedicated Servers and VPS in the UK
OVH provides everything you need for a successful online project: web hosting, domain names, dedicated servers, CDN, cloud environments, Big Data...
vps  server  webdev 
july 2018 by amason
Vultr - VPS Hosting
The Infrastructure Cloud™
Easily Deploy Cloud Servers, Bare Metal, and Storage worldwide!
cloud  vps  Linux  webdev 
july 2018 by amason
JSON Server - Get a full fake REST API server
Get a full fake REST API with zero coding in less than 30 seconds (seriously)

Created with <3 for front-end developers who need a quick back-end for prototyping and mocking.
webdev  node  Programming  tool  server  mock  JSON  API 
july 2018 by amason
Postman - API development
Makes API Development Simple.
Developers use Postman to build
modern software for the API-first world.
rest  testing  http  webdev 
july 2018 by amason
Free IP GeoLocation/GeoIp API
A free REST API to get location information for IP addresses.

This project is open source. Setup your own instance if you like.
webdev  IP  location  tool 
july 2018 by amason
Connection-Aware Components - The Network Information API
The Network Information API

This API is an editor’s draft by the WICG and currently available in Chrome. It can be accessed through the read-only property navigator.connection (MDN), which exposes several properties that provide information about a user’s current connection:
webdev  performance  speed 
july 2018 by amason
Dos and don'ts on designing for accessibility
The dos and don’ts of designing for accessibility are general guidelines, best design practices for making services accessible in government. Currently, there are six different posters in the series that cater to users from these areas: low vision, D/deaf and hard of hearing, dyslexia, motor disabilities, users on the autistic spectrum and users of screen readers.
poster  wai  Accessibility  WebDesign  ux  webdev 
july 2018 by amason
mitmproxy - an interactive HTTPS proxy
mitmproxy is a free and open source interactive HTTPS proxy.
webdev  programming  proxy  https 
june 2018 by amason
Datastore - NoSQL Schemaless Database
Cloud Datastore is a highly-scalable NoSQL database for your applications. Cloud Datastore automatically handles sharding and replication, providing you with a highly available and durable database that scales automatically to handle your applications' load. Cloud Datastore provides a myriad of capabilities such as ACID transactions, SQL-like queries, indexes and much more.
webdev  nosql  datastore  db 
june 2018 by amason
Browsersync - Time-saving synchronised browser testing
Your indispensable test assistant.

With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of sync settings from the UI or command line to create a personalised test environment. Need more control? Browsersync is easily integrated with your web platform, build tools, and other Node.js projects.
javascript  webdev  browser  testing 
june 2018 by amason
GOT - Simplified HTTP requests
A nicer interface to the built-in http module.

Created because request is bloated (several megabytes!).
webdev  Programming  Javascript  REST  GET 
june 2018 by amason wildcard DNS for everyone is a magic domain name that provides wildcard DNS for any IP address. Say your LAN IP address is Using, resolves to resolves to resolves to resolves to ...and so on. You can use these domains to access virtual hosts on your development web server from devices on your local network, like iPads, iPhones, and other computers. No configuration required!
webdev  Programming  Development  DNS  IP 
june 2018 by amason
Three.js & Video: A love story
As a front end web developer and filmmaking aficionado, Héctor Monerris is always thinking about the way to mix both worlds. He's written us a case study about WebGL realtime rendering onto a Video, looking into a little experiment he made using Three.js and video:
javascript  video  webgl  webdev 
june 2018 by amason
Polly.JS - Record, replay, and stub HTTP interactions.
Record, replay, and stub HTTP interactions.

🚀 Fetch & XHR Support
⚡️️ Simple, Powerful, & Intuitive API
💎 First Class Mocha & QUnit Test Helpers
🔥 Intercept, Pass-Through, and Attach Events
📼 Record to Disk or Local Storage
⏱ Slow Down or Speed Up Time
javascript  http  testing  webdev 
june 2018 by amason
The World Cup reporting just got more immersive with Google AMP Stories
BBC News Labs and The Telegraph experiment with Google’s visual storytelling feature to bring football fans a more engaging mobile experience
journalism  webdev  Tech 
june 2018 by amason
Several tips how to bypass website anti-scraping protections
Learn how to scrape data from websites that employ IP rate limiting, browser fingerprinting and other modern bot detection techniques
Written by Jaroslav Hejlek
Updated in the last hour

Some websites protect themselves from web scraping. However, sometimes it is still reasonable and fair (and based on a recent US court ruling also legit) to extract data from them. In this article, we'll go through the most commonly used anti-scraping protections and show you how to bypass them.
webdev  scraping  advice  tips 
june 2018 by amason
diff-so-fancy - diff's human readable
diff-so-fancy strives to make your diff's human readable instead of machine readable. This helps improve code quality and help you spot defects faster.
git  terminal  cli  tool  webdev  Programming 
march 2018 by amason
Favicon generator
No hard decision

With so many platforms and icons, it's hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.
Done in 5 minutes

You spent hours on design, colors, graphics... How much time left for the favicon? Probably not much. But no worries, you only need a few minutes to tackle this task.
Compelling design, a platform at a time

Each platform comes with its own design requirements. You can't just use the same picture everywhere. RealFaviconGenerator knows this and lets you craft your icons platform per platform.
Instant feedback

How will Android display my icon? How will iOS round my Touch icon? No more guesswork. RealFaviconGenerator instantly shows you how your icons will look like.
ios  webdev  tool  generator  icon  favicon 
february 2018 by amason
New flexbox guides on MDN
In preparation for CSS Grid shipping in browsers in March 2017, I worked on a number of guides and reference materials for the CSS Grid specification, which were published on MDN. With that material updated, we thought it would be nice to complete the documentation with similar guides for Flexbox, and so I updated the existing material to reflect the core use cases of Flexbox.
grid  layout  flexbox  CSS  webdev 
january 2018 by amason
Roadmap to becoming a web developer in 2018
Below you find a set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops. I made these charts for an old professor of mine who wanted something to share with his college students to give them a perspective.
webdev  Programming  Javascript 
january 2018 by amason
Popmotion - A functional JavaScript motion library
Popmotion is a 11.5kb (max) Swiss Army knife for animators and interaction developers:
javascript  animation  physics  library  webdev 
january 2018 by amason
is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
database  graphql  data  webdev 
january 2018 by amason know your mobile device (pixel-ratio, CSS width, features)
Mobile devices, in Responsive Web Design, relate to a core value which is the value of CSS width or ("device-width"), in CSS Device Independant Pixels, which depends both of the browser and user zoom settings
mobile  webdev  css  design  responsive  breakpoints 
december 2017 by amason
Introduction | MobX
React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.
javascript  react  state  library  webdev 
december 2017 by amason
schteppe/cannon.js @ GitHub
A lightweight and simple 3D physics engine for the web.
javascript  engine  physics  library  webdev 
december 2017 by amason
Tone.js - Web Audio framework
Tone.js is a Web Audio framework for creating interactive music in the browser. The architecture of Tone.js aims to be familiar to both musicians and audio programmers looking to create web-based audio applications. On the high-level, Tone offers common DAW (digital audio workstation) features like a global transport for scheduling events and prebuilt synths and effects. For signal-processing programmers (coming from languages like Max/MSP), Tone provides a wealth of high performance, low latency building blocks and DSP modules to build your own synthesizers, effects, and complex control signals.
audio  webdev  Programming  interactive 
december 2017 by amason
Frontend Job Interview Preparation Guide (JS Focused) to help answer people that ask me for advice.
The goal of this guide is to help you prepare and practice for your next Frontend job interview. We have curated this list of resources to keep it as impactful as possible. The learning resources are mostly focused around JavaScript, but the practice questions cover the entire Frontend spectrum.

This guide is targeted specifically to Frontend roles in the industry. There are resources about JavaScript, CSS, HTML, and general Frontend knowledge. We've also included introductory Data Structures and Algorithm questions. Not all companies interview Frontend developers the same way -- that's why we also created How Companies Hire to give you an insight into how to prepare for the specific company you're applying for.
webdev  Programming  career 
december 2017 by amason
Triangle Waves GLSL shader
One of my favourite little shader techniques is to take continuous linear values, and turn them into oscillating triangle waves.

Oscillation is useful in all kinds of cases. It can create repetition in space, or repeating animation over time. The most common way to generate oscillation is with the trigonometry function sin, which creates the well known smooth sine wave shape.

But sin can sometimes be a little expensive, and other times that smoothness and non-linearity is not exactly what you want. In those cases, a triangle wave might be worth a look.
glsl  shader  webdev  Programming 
december 2017 by amason
Random User Generator
Random user generator is a FREE API for generating placeholder user information. Get profile photos, names, and more. It's like Lorem Ipsum, for people.
data  webdev  test  generator 
november 2017 by amason
Front-End-Checklist/ at master · thedaviddias/Front-End-Checklist · GitHub
The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your site / HTML page to production.

It is based on Front-End developers' years of experience, with the additions coming from some other open-source checklists.
html  frontend  webdev 
october 2017 by amason
draggable - a lightweight, responsive, modern drag and drop JavaScript library
Draggable is a lightweight, responsive, modern drag and drop JavaScript library – the ideal choice for adding slick native-feeling drag and drop behaviour to your web apps.
javascript  library  webdev 
september 2017 by amason
Catamaran - a stylish type-family with an polished yet relaxed feel.
9 weight Tamil and Latin type family

Catamaran is a stylish type-family with an polished yet relaxed feel. Its versatility makes it suitable for a range of uses.

The word Catamaran refers to a yacht or other boat with twin hulls in parallel. The etymology of the word is traced to early 17th century Tamil - kaṭṭumaram, which literally means ‘tied wood.’

The Catamaran project is led by Pria Ravichandran, a type designer from India. To contribute, visit
font  webdev  Design  typeface  Typography 
september 2017 by amason
Shader Hatching Example
Bert Freudenberg of the University of Magdeburg in Germany was one of the first people outside 3Dlabs to come up with a unique OpenGL shader. His area of research has been to use programmable hardware to produce real-time NPR effects such as hatching and half-toning. He experimented with a prototype implementation of the OpenGL Shading Language in the summer of 2002 and produced a hatching shader that he agreed to share with us for this book.

This shader has a few unique features, and the steps involved in designing this shader are described in Bert's Ph.D. thesis, Real-Time Stroke-based Halftoning (2003). Bert's hatching shader is based on a woodblock printing shader by Scott Johnston that is discussed in Advanced RenderMan: Creating CGI for Motion Pictures by Tony Apodaca and Larry Gritz (1999).

The goal in a hatching shader is to render an object in a way that makes it look hand-drawn, for instance with strokes that look like they may have been drawn with pen and ink. Each str
shader  webgl  glsl  webdev 
september 2017 by amason
Skeleton is a simple, responsive project CSS grid
Skeleton is a simple, responsive boilerplate to kickstart any responsive project.
CSS  webdev  webdesign  grid 
september 2017 by amason
Import Cost file size view - Visual studio code
his extension will display inline in the editor the size of the imported package.
The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.
Javascript  webdev  Programming  optimisation 
august 2017 by amason
React/Redux useful learning links
Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem, as well as a source for quality information on advanced topics and techniques. Not quite "awesome", but hopefully useful as a starting point I can give to others. Suggestions welcome.
Javascript  webdev  programming  react 
august 2017 by amason
Bento4 | Fast, Modern Tools and C++ Class Library for all your MP4 and DASH media format needs
Bento4 is a C++ class library and tools designed to read and write ISO-MP4 files. This format is defined in international specifications ISO/IEC 14496-12, 14496-14 and 14496-15. The format is a derivative of the Apple Quicktime file format, so Bento4 can be used to read and write most Quicktime files as well.
Video  cli  tool  compression  webdev 
august 2017 by amason
Drawing DOM objects into a canvas
Although it's not trivial (for security reasons), it's possible to draw DOM content—such as HTML—into a canvas. This article, derived from this blog post by Robert O'Callahan, covers how you can do it securely, safely, and in accordance with the specification.
svg  webdev  webgl  DOM 
august 2017 by amason
A Gentle Introduction to Shaders with Pixi.js
Most of the stunning visual effects you see everyday on the web or in movies and games would not be possible without GPUs. These Graphical Processing Units with their thousands of cores running in parallel are incredibly fast, but can be tricky to program at first.

In this post we're going to look at how to set up Pixi.js, one of the most widely used Javascript rendering libraries, to run shaders on the web. It's built on top of WebGL and takes care of all the setup and cross-platform work. I won't be going into a lot of depth, but hopefully just enough to get you started.
javascript  shader  webdev 
august 2017 by amason
glsl-dither shader
Bayer matrix dithering in GLSL. Originally sourced from @oosmoxiecode's C64 Shader Demo, which in turn was based on the implementation in this article.
shader  webgl  webdev 
august 2017 by amason
CSS Reference  |  Web  |  Google Developers
Discover new workflows in this comprehensive reference of Chrome DevTools features related to viewing and changing CSS.
CSS  webdev  Programming 
july 2017 by amason
Amazing CRT shader - Shadertoy
Experiments with CRT screen material with scanlines and RGB elements.
Post FX include temporal AA, depth of field and motion blur.
shader  CRT  analogue  webdev  Programming 
july 2017 by amason
awesome-webgl - curated list of awesome WebGL libraries, resources and much more.
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas.

WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer's Graphics Processing Unit (GPU).
javascript  webgl  webdev  Programming 
july 2017 by amason
WebGL Insights book
WebGL Insights presents real-world techniques for intermediate and advanced WebGL developers by assembling contributions from experienced WebGL engine and application developers, GPU vendors, browser developers, researchers, and educators. By focusing on current and emerging techniques , WebGL Insights demonstrates the breadth and depth of WebGL. Readers will gain practical skills to solve problems related to performance, engine design, shader pipelines, rendering, mobile devices, testing, and more.
ebooks  webgl  webdev  Programming 
july 2017 by amason - software ecosystem for WebGL is an open software ecosystem for WebGL, built on top of browserify and npm. Inspired by the Unix philosophy, stackgl modules "do one thing, and do it well". It is easy to use parts of stackgl à la carte, and because it is written from the bottom up, you can always drill down a layer. Unlike many 3D engines, stackgl emphasizes writing shader code, and provides powerful tools like glslify which bring the modularity and productivity of npm to GLSL!
canvas  glsl  webgl  webdev 
july 2017 by amason
The Evolution of Trust - gametheory
an interactive guide to the game theory of why & how we trust each other
gametheory  interactive  webdev 
july 2017 by amason
awesome-casestudy Curated list of technical case stud
Curated list of technical case studies, mostly around front-end/creative development.
I love reading technical case studies, they describe the reality of things: real problems on a real project.
Do not hesitate to create a pull request if you have some links to add!
frontend  webdev  WebDesign 
july 2017 by amason
« earlier      
per page:    204080120160

Copy this bookmark:

to read