euler + webdev   880

How Image Optimisation Decreased my Website's Page Weight by 62%
Compressing images is all about reducing file size while maintaining an acceptable level of visual quality. To compress the images on my site, imagemin was my tool of choice.

To use imagemin, make sure you have Node.js installed then open a terminal window, cd into your project’s folder and run the following command:
compression  imageProcessing  webdev  node.js 
12 hours ago by euler
Fathom · simple, trustworthy website analytics
Fathom does just that. It tracks users on a website (without collecting personal data) and give you a non-nerdy breakdown of your top content and top referrers. It does so with user-centric rights and privacy, and without selling, sharing or giving away the data you collect. It's a simple and easy to use for website owners at any technical level.
webdev  analytics  golang 
6 days ago by euler
Visualization of Road Network Reachability with deck.gl - GraphHopper Directions API
With the GraphHopper Isochrone API it is possible to create polygons of areas that you can reach from a certain location in e.g. 10 minutes for different modes of transport, like car or walking. This is useful for a number of purposes like finding the best location for a new supermarket or the valuation of a building area. Read more about Isochrone maps at wikipedia.
mapping  gis  routing  webgl  webdev 
10 days ago by euler
GitHub - kay-is/react-from-zero: A simple (99% ES2015 less) tutorial for React
React From Zero

A simple (99% ES2015 less) tutorial for React

Everything runs in the browser without a manual pre-compilation.
webdev  Javascript  react  Tutorial 
16 days ago by euler
The Book
Help yourself! It's all free and CC-licenced (thanks O'Reilly!). I see this as a "try-before-you-buy" scheme, and I hope that if you enjoy it you'll buy a copy -- if not for yourself, then perhaps for a friend!

Table of contents follows:
webdev  python  book 
18 days ago by euler
How to use Cloudfront for Secure Delivery of Static Websites Around the World
In this post you are going to learn how to leverage another Amazon Web Services (AWS) offering, CloudFront. In five simple and easy steps you can leverage CloudFront for low latency, security, and simple delivery of your static website.
cloudfront  aws  static  webdev 
20 days ago by euler
Sing App - Bootstrap 4 Admin Dashboard Template
Available in Many Versions
Sing App supports leading JavaScript frameworks such as Bootstrap, React and Angular to match latest industry demands
dashboard  bootstrap  template  webdev 
29 days ago by euler
Strapdown.js - Instant and elegant Markdown documents
Strapdown.js
Strapdown.js makes it embarrassingly simple to create elegant Markdown documents. No server-side compilation required. Use it to quickly document your projects, create tutorials, home pages, etc. (For example, the page you are reading was generated by Strapdown).

Simply copy the HTML template below and drop it on any static file server:
markdown  webdev  Javascript  hosting 
4 weeks ago by euler
TensorFlow.js — a practical guide – YellowAnt
Recently, Google introduced it’s most popular machine learning library: TensorFlow in Javascript. With the help of TensorFlow.js one can train and deploy ML models in the browser.
ai  ml  tensorflow  Javascript  webdev 
4 weeks ago by euler
GitHub - Netflix/pollyjs: Record, Replay, and Stub HTTP Interactions.
Polly.JS is a standalone, framework-agnostic JavaScript library that enables recording, replaying, and stubbing HTTP interactions.

Polly taps into native browser APIs to mock requests and responses with little to no configuration while giving you the ability to take full control of each request with a simple, powerful, and intuitive API.
Javascript  webdev  testing 
4 weeks ago by euler
A Guide to Wireframe Tools & Rapid Prototyping - UX Tricks
Quick summary

Going to straight to high-fidelity is an epic waste of time, money, and resources. Wireframing and rapid prototyping ensures that we iterate and validate our ideas first.
What you'll learn

How to waste money
Rapid prototyping
Why wireframes
Gathering feedback
Wireframe and prototyping tools
webdev  prototype  wireframes 
5 weeks ago by euler
BCHS: BSD, C, httpd, SQLite
Articles, conference talks…
have more links? let us know.

Role audits with kwebapp
2018/03
RBAC in BCHS (PDF, video)
AsiaBSDCon, 2018/03
API provisioning with kwebapp
2017/10
Should I use the BCHS web stack?
EuroBSDCon short answer, 2017/09
Split-process ksql
2017/07
Rapid web applications with kwebapp
2017/05
Secure CGI
AsiaBSDCon, 2017/03
BCHS sandboxing with pledge
2016/11
Using JSON with BCHS
2016/10
Secure CGI Applications in C on BSD
AsiaBSDCon, 2016/03
bsd  webdev  stack 
5 weeks ago by euler
Open Sourcing Zuul 2 – Netflix TechBlog – Medium
Open Sourcing Zuul 2
We are excited to announce the open sourcing of Zuul 2, Netflix’s cloud gateway. We use Zuul 2 at Netflix as the front door for all requests coming into Netflix’s cloud infrastructure. Zuul 2 significantly improves the architecture and features that allow our gateway to handle, route, and protect Netflix’s cloud systems, and helps provide our 125 million members the best experience possible. The Cloud Gateway team at Netflix runs and operates more than 80 clusters of Zuul 2, sending traffic to about 100 (and growing) backend service clusters which amounts to more than 1 million requests per second. Nearly all of this traffic is from customer devices and browsers that enable the discovery and playback experience you are likely familiar with.
This post will overview Zuul 2, provide details on some of the interesting features we are releasing today, and discuss some of the other projects that we’re building with Zuul 2.
How Zuul 2 Works
Zuul  Netflix  webdev 
7 weeks ago by euler
Datasette Facets
Datasette lets you deploy an instant web UI and JSON API for any SQLite database. csvs-to-sqlite makes it easy to create a SQLite database out of any collection of CSV files. Datasette Publish is a web app that can run these combined tools against CSV files you upload from your browser. And now the new Datasette Facets feature lets you explore any CSV file using faceted navigation with a couple of clicks.
csv  json  sqlite  webdev  gui 
8 weeks ago by euler
Scraping Framework for Golang
Colly provides a clean interface to write any kind of crawler/scraper/spider

With Colly you can easily extract structured data from websites, which can be used for a wide range of applications, like data mining, data processing or archiving.

Features

Clean API
Fast (>1k request/sec on a single core)
Manages request delays and maximum concurrency per domain
Automatic cookie and session handling
Sync/async/parallel scraping
Distributed scraping
Caching
Automatic encoding of non-unicode responses
Robots.txt support
Google App Engine support
golang  archiving  webdev  scraping 
9 weeks ago by euler
Home - Proton Native - React Native for the desktop, cross compatible
Features
Same syntax as React Native
Works with existing React libraries such as Redux
Cross platform
Native components. No more Electron
Compatible with all normal Node.js packages
desktop  native  react  javascript  app  webdev 
10 weeks ago by euler
GitHub - toddwschneider/stocks: A free, lightweight, blazing-fast static page to get stock quotes using the IEX API
A free, lightweight, blazing-fast static page to get stock quotes using the IEX API. Stocks can be grouped into user-defined portfolios. Quotes update every 10 seconds. No API key required. Everything is contained within index.html, there are no external javascripts or stylesheets to load.

See here for a live demo: http://toddwschneider.com/stocks/
finance  stocks  webdev  iex 
11 weeks ago by euler
Tom Black — Ruby on WebAssembly
Lastly, I’ll just say that the line between what a “native” and “web” app will continue to be blurred. Progressive web apps and other approaches will mean that we developers get the best of both worlds, and end users will enjoy better experiences on the web, and with desktop and mobile apps that use web technologies. I imagine the conversations we’ll have around “Is it possible?” will be quite short (almost always, yes). Rather, the ones concerning “Is it good and how do we know?” will be much more lengthy and difficult. Who knows where we’ll end up — it’ll surely be a captivating journey.
webassembly  ruby  webdev  trend  llvm 
11 weeks ago by euler
How to Build a Real-time Editable Datagrid In React
A datagrid enables you to display and edit data. This is a vital feature in most data-driven applications.
You may have implemented this in one of your React apps in the past. Maybe you used libraries like react-bootstrap-table, react-grid, or react-table. With those, you can add a Datagrid to your React app. But what if you want the changes to be done in real-time and updates synchronized across all connected devices and their browsers?
In this article, I will show you how to build a real-time datagrid in React using react-table and Hamoni Sync.
webdev  react  datagrid 
11 weeks ago by euler
Instant Production-Ready Scaffolding With Create-Static-Site | Forestry.io
Create React App is a utility provided by the Facebook team in support of the React JavaScript framework. The goal of Create React App is to allow developers to quickly bootstrap a React project without having to spend time sorting out the build pipeline. With over 47,000 stars on Github (over half as many as the actual React library,) Create React App’s popularity speaks for itself.

The success and utility of Create React App has inspired the Forestry.io community to create a similar project for scaffolding static sites. Create Static Site is a tool that can set up a new Hugo or Jekyll site with a modern, production-ready build pipeline in seconds.
webdev  react  static 
11 weeks ago by euler
Making a Web Thing on the ESP8266 – Mozilla Hacks – the Web developer blog
Today I’m going to walk you through creating a simple Web Thing using an inexpensive off-the-shelf ESP8266 board.
esp8266  webdev  iot  embedded 
11 weeks ago by euler
D3 in Depth
About

D3 in Depth aims to bridge the gap between introductory tutorials/books and the official documentation.

It focuses on version 4 of D3.

D3 in Depth is written by Peter Cook.
visualization  book  D3  webdev  graphics 
april 2018 by euler
VuePress
Simplicity First

Minimal setup with markdown-centered project structure helps you focus on writing.

Vue-Powered

Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.

Performant

VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
webdev  static  vue.js 
april 2018 by euler
A DevTools for Designers – UX Collective
2018: The golden age of prototyping?
To return to Jeffrey Zeldman’s 2010 article, he concluded at that time by saying “no company will ever create the modern-day equivalent of Illustrator and PageMaker” for the web, citing the fact that crafting good code requires “professionalism, wisdom, and experience.”
Four years later, he interviewed Tom Attanasio from Macaw on the Big Web Show podcast. Zeldman described that brand-new app as “the superhot web design tool of the future.” Macaw has since been acquired by Invision, as the foundation of their forthcoming Studio app.
Until Studio comes out of NDA, I can’t say for sure if it will meet its hype, or designers’ expectations, but it’s not hype to say we are now living in a Golden Age of visual prototyping tools.
The Prototypr blog lists the current state of the field here.
design  tools  prototype  webdev 
april 2018 by euler
Top 21 Prototyping Tools For UI And UX Designers 2018
In this article, I’ll introduce you prototyping tools which will help you design & iterate faster.
design  tools  prototype  webdev 
april 2018 by euler
VideoContext/README.md at master · bbc/VideoContext · GitHub
VideoContext

The VideoContext is an experimental HTML5/WebGL media processing and sequencing library for creating interactive and responsive videos on the web.

It consist of two main components. A graph based, shader accelerated processing pipeline, and a media playback sequencing time-line.

The design is heavily inspired by the WebAudioAPI so should feel familiar to use for people who've had previous experience in the WebAudio world.

Live examples can be found here
video  videoediting  webdev  WebGL 
april 2018 by euler
Popmotion Pose - A declarative animation library for HTML, SVG and React
CSS simplicity meets Popmotion power
Zero-config animation

By default, Pose will figure out the animation based on the properties being animated.
webdev  animation  css  react 
march 2018 by euler
Server.js
The package server is great for many situations. Let's see some of them:

Small to medium projects
Everything works out of the box, you get great support for most features and you can easily tap into Express' middleware ecosystem. What's not to love?

Some of the included features: body and file parsers, cookies, sessions, websockets, Redis, gzip, favicon, csrf, SSL, etc. They just work so you will save a headache or two and can focus on your actual project. Get a simple form going:
node  node.js  server  webdev 
march 2018 by euler
How to Make an AWS S3 Static Website With SSL
Here were my technical requirements for this site:

Hosted totally in an Amazon S3 Bucket (i.e. no servers/ec2/PaaS cost)
Free SSL support
Ease of writing blog posts
After some consideration, I settled on using the following technologies:

source control: Git/Github
blogging platform/CMS: jekyll
DNS: Amazon Route53
deployment: aws s3 cli bucket sync service
SSL: free Amazon Cerfificate Management Service Cert securing an Amazon CloudFront distribution (CDN) that sits in front of the s3 bucket
Google Analytics for analytics/tracking
Disqus (comment below!) for comments
I will now describe how this is all sewn together.
aws  s3  blogging  webdev  ssl 
march 2018 by euler
GitHub - bnb/awesome-developer-streams: 👩🏿‍💻👨🏾‍💻👩🏼‍💻👨🏽‍💻👩🏻‍💻 Awesome Developers, Streaming
PROTIP: Search this page for subjects you'd be interested in watching live, like JavaScript, DataViz, IoT, Rust, and so on. You'll get an index of streamers relevant to your interests–be sure to follow them! ❤️
videos  streaming  learning  development  webdev 
march 2018 by euler
30 Seconds of CSS
30 Seconds of CSS
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
css  resources  snippets  webdev 
march 2018 by euler
Towards web-based delta synchronization for cloud storage systems | the morning paper
Evaluation
The client side of WebR2sync+ is 1700 lines of JavaScript. The server side is based on node.js (about 500 loc) and a set of C processing modules (a further 1000 loc).

Comparing the red and green (bottom two) lines in the charts below, you can see that WebR2sync+ has sync times approaching those of rsync:
webdev  Javascript  rsync  webrsync 
march 2018 by euler
What I learnt from building 3 high traffic web applications on an embedded key value store.
In a nutshell
Embedded key value stores give you all the advantages of a nosql database, but where it is lacking is in search, since you’re only able to query for items by their keys and key’s prefix. But when paired with an indexing engine like blevesearch in golang, or elasicsearch and lucene, the pair gives you a very capable database with features like full text search, location based search, etc in a very resource efficient package and scales well.
I believe this pair should have more popularity than it actually currently has, and go a long in reducing server expenses especially with applications which never expect facebook level scale.
webdev  scale  Database  keyvalue  architecture 
march 2018 by euler
Web application from scratch, Part I · Bogdan Popa
This is the first in a series of posts in which I’m going to go through the process of building a web application (and its web server) from scratch in Python. For the purposes of this series, I’m going to solely rely on the Python standard library and I’m going to ignore the WSGI standard.

Without any further ado, let’s get to it!
http  webdev  introduction  python 
february 2018 by euler
Understanding the Limitations of HTTPS | text/plain
A colleague recently forwarded me an article about the hazards of browsing on public WiFi with the question: “Doesn’t HTTPS fix this?” And the answer is, “Yes, generally.” As with most interesting questions, however, the complete answer is a bit more complicated.

HTTPS is a powerful technology for helping secure the web; all websites should be using it for all traffic.

If you’re not comfortable with nitty-gritty detail, stop reading here. If your takeaway upon reading the rest of this post is “HTTPS doesn’t solve anything, so don’t bother using it!” you are mistaken, and you should read the post again until you understand why.

HTTPS is a necessary condition for secure browsing, but it is not a sufficient condition.

There are limits to the benefits HTTPS provides, even when deployed properly. This post explores those limits.
webdev  privacy  Security  https 
february 2018 by euler
Carrot Creative - Coding - Building a Static CMS
As a result, we've replaced a lot of our typical database driven CMS projects with static builds. These projects were primarily content based and only required infrequent updates to add or remove content. It didn't make sense to build out so much infrastructure (database, hosting, caching, monitoring, code logic, admin interface, etc) for sites that are mostly responding to requests with the same HTML over and over.
webdev  static  resources 
february 2018 by euler
Back to static: a paradigm shift for better UX and web performance
For several years now, a new range of solutions have emerged in the web technologies landscape. Static site generators, headless CMS, content infrastructure... these solutions contribute to a global trend. "Static trend", "JAMStack", several names exist but none really covers what is an overall new proposal for web application architecture, and somehow a comeback to the roots of the Web.
static  webdev  tools  resources 
february 2018 by euler
This page weighs 15kb - macwright.org
Further reading
Measurement: The Timeline tool and PageSpeed are essential, webpagetest is a godsend.
Books: Steve Souder’s book High Performance Web Sites and follow-up Even Faster Websites are the best web performance-optimization advice you’ll find in book form. Lara Hogan’s Designing for Performance is potentially even better for navigating the balance between design and engineering.
Monitoring over time: SpeedCurve, pingdom, and Calibre provide different ways to quantify how much faster you’re making your webpages.
webdev  performance 
february 2018 by euler
Modern CSS Explained For Dinosaurs – Actualize – Medium
The goal of this article is to provide a historical context of how CSS approaches and tooling have evolved to what they are today in 2018. By understanding this history, it will be easier to understand each approach and how to use them to your benefit. Let’s get started!
css  webdev  history 
february 2018 by euler
Google Cloud Platform Blog: 12 best practices for user account, authorization and password management
Account management, authorization and password management can be tricky. For many developers, account management is a dark corner that doesn't get enough attention. For product managers and customers, the resulting experience often falls short of expectations.
Fortunately, Google Cloud Platform (GCP) brings several tools to help you make good decisions around the creation, secure handling and authentication of user accounts (in this context, anyone who identifies themselves to your system — customers or internal users). Whether you're responsible for a website hosted in Google Kubernetes Engine, an API on Apigee, an app using Firebase or other service with authenticated users, this post will lay out the best practices to ensure you have a safe, scalable, usable account authentication system.
google  webdev  Security  authentication 
february 2018 by euler
javascript/README.md at master · airbnb/javascript · GitHub
Airbnb React/JSX Style Guide

A mostly reasonable approach to React and JSX
react  webdev 
january 2018 by euler
The Brutal Lifecycle of JavaScript Frameworks - Stack Overflow Blog
Using the Stack Overflow Trends tool and some of our internal traffic data, we decided to take a look at some of the more prominent UI frameworks: Angular, React, Vue.js, Backbone, Knockout, and Ember.

Framework lifecycle

Stack Overflow Trends lets us examine how each of these technologies has been asked about over time. We can start by looking at some of the larger frameworks.
webdev  trends  Javascript  framework 
january 2018 by euler
Pagination Tunnels - An Experiment in Crawlability and Click Depth - Portent
In the end, the point of this experiment and exploration was to shine some light on an often-neglected part of most websites, and to show that small changes to your pagination can have a surprisingly large impact on how a crawler sees your site and all that wonderful content.
webdev  seo  pagination 
january 2018 by euler
WebGL2 Fundamentals
WebGL2 from the ground up. No magic.

These are a set of articles that teach WebGL2 from basic principles. They are NOT old rehashed out of date OpenGL articles like many others on the net. They are entirely new, discarding the old out of date ideas and bringing you to a full understanding of what WebGL really is and how it really works.

These articles are specifically about WebGL2. If you are interested in WebGL 1.0 please go here If you are already familar with WebGL1 you might want to look at these articles
WebGL2  graphics  webdev 
january 2018 by euler
GitHub - scripting/pagePark: I wrote this simple Node.js folder-based HTTP server that serves static and dynamic pages for domains I've bought but not yet used.
I wrote this simple HTTP server to park domains I've bought but not yet used. But I kept going and added all the features I want to help me manage my own websites, far beyond just parking them. But I liked the name so I kept it. Think of it as a nice park where you keep your pages. ;-)

It's written in JavaScript and runs in Node.js.

Each domain is in its own folder. The content for that domain is in the folder. I went a little wild with content types, it can serve Markdown docs, or run JS code. And of course HTML, text files, images, movies, etc.
webdev  server 
january 2018 by euler
Essential Image Optimization
Everyone should be compressing their images efficiently.
At minimum: use ImageOptim. It can significantly reduce the size of images while preserving visual quality. Windows and Linux alternatives are also available.
More specifically: run your JPEGs through MozJPEG (q=80 or lower is fine for web content) and consider Progressive JPEG support, PNGs through pngquant and SVGs through SVGO. Explicitly strip out metadata (--strip for pngquant) to avoid bloat. Instead of crazy huge animated GIFs, deliver H.264 videos (or WebM for Chrome, Firefox and Opera)! If you can’t at least use Giflossy. If you can spare the extra CPU cycles, need higher-than-web-average quality and are okay with slow encode times: try Guetzli.
webdev  image  optimization  performance  compression  automation 
january 2018 by euler
jsonTree
jsonTree is a lightweight dependency-free javascript micro-library for creating collapsable tree-lists from a JSON file. If you want to see it in action, please check the example.

I created jsonTree because everything I found on creating collapsable lists was either too big (in terms of both filesize and functionality) or required JQuery (which is another matter altogether). jsonTree provides an infrastructure for the developer to stylize and do with as they please.
webdev  json  jsontree  tree 
january 2018 by euler
GitHub - aws/aws-amplify: A declarative library for application development using Cloud services with JavaScript
AWS Amplify is a JavaScript library for frontend and mobile developers building cloud-enabled applications. The library is a declarative interface across different categories of operations in order to make common tasks easier to add into your application. The default implementation works with Amazon Web Services (AWS) resources but is designed to be open and pluggable for usage with other cloud services that wish to provide an implementation or custom backends.
webdev  react  aws 
january 2018 by euler
GitHub - stereobooster/react-snap: 👻 Zero-configuration framework-agnostic static prerendering for SPAs
Pre-renders web app into static HTML. Uses headless chrome to crawl all available links starting from the root. Heavily inspired by prep and react-snapshot, but written from scratch. Uses best practices to get best loading performance.
static  webdev  react 
january 2018 by euler
The GraphQL stack: How everything fits together – Apollo GraphQL
It’s been over 2 years since GraphQL was released as an open source technology by Facebook. Since then, the community has grown exponentially, and there are now thousands of companies using GraphQL in production. At this October’s GraphQL Summit 2017, I had the privilege of giving the opening keynote on the second day. You can watch the full talk on YouTube, or read this post to get a quick overview.
graphql  architecture  webdev  trend 
january 2018 by euler
Sapper: Towards the ideal web app framework
The compiler-as-framework paradigm shift
Svelte introduced a radical idea: what if your UI framework wasn't a framework at all, but a compiler that turned your components into standalone JavaScript modules? Instead of using a library like React or Vue, which knows nothing about your app and must therefore be a one-size-fits-all solution, we can ship highly-optimised vanilla JavaScript. Just the code your app needs, and without the memory and performance overhead of solutions based on a virtual DOM.

The JavaScript world is moving towards this model. Stencil, a Svelte-inspired framework from the Ionic team, compiles to web components. Glimmer doesn't compile to standalone JavaScript (the pros and cons of which deserve a separate blog post), but the team is doing some fascinating research around compiling templates to bytecode. (React is getting in on the action, though their current research focuses on optimising your JSX app code, which is arguably more similar to the ahead-of-time optimisations that Angular, Ractive and Vue have been doing for a few years.)

What happens if we use the new model as a starting point?
webdev  framework  trend 
january 2018 by euler
Brackets - A modern, open source code editor that understands web design.
With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It's crafted from the ground up for web designers and front-end developers.
brackets  adobe  ide  webdev 
january 2018 by euler
From Bootstrap to CSS Grid – Times Open
“That’s nice in theory, but what about in practice?”
Turns out, it’s pretty great in practice, too. I implemented this CSS Grid progressive enhancement on The New York Times Watching media card component. Users on old browsers see Bootstrap, but users on browsers that support the display: grid property get the CSS Grid enhanced styles including the thin column gutters that our designers envisioned. Plus, next time there’s a redesign, our designers know they aren’t beholden to the old way of doing layout on the web. It may not look like it right now, but it’s actually a major step forward.
webdev  css  cssgrid 
december 2017 by euler
Building Web Apps with Elm | Elm Tutorial by The Pragmatic Studio
Quickly get up to speed with Elm as you build a reactive, reliable web app from scratch in this 3.5-hour video course.

You'll get step-by-step guidance and expert advice in an engaging format you won't find anywhere else.

Discover the joy of writing front-end code that stays well-factored and easy to maintain as your web app grows!
elm  webdev  Tutorial 
december 2017 by euler
GitHub - spite/polygon-shredder: The polygon shredder that takes many cubes and turns them into confetti
The Polygon Shredder

The polygon shredder that takes many cubes and turns them into confetti

See the site here
Graphics  webgl  three.js  threejs  webdev 
december 2017 by euler
Nightcoders.net
Build web apps and games with ClojureScript, entirely in your browser.

Sign in with your Google account and start coding for free.
cloud  ide  clojurescript  webdev 
december 2017 by euler
Jekyll CBCD Pipeline to the Cloud - Cloudy Minds
In this article, I will explain how I manage my Continuous Build / Continuous Deployment (CB/CD) pipeline from my IDE to this blog using Cloud9, GitHub, CodeBuild, S3, CloudFront and Lambda function)

The main idea is to build and push your Jekyll website to your AWS S3 bucket and then to your CDN (CloudFront)
jekyll  webdev  aws 
november 2017 by euler
How to use SVG as a Placeholder, and Other Image Loading Techniques
During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.
In this post we will go through these topics:
Overview of different types of placeholders
SVG-based placeholders (edges, shapes and silhouettes)
Automating the process.
svg  images  webdev  imageProcessing 
november 2017 by euler
GitHub - fengari-lua/fengari: 🐺 φεγγάρι - The Lua VM written in JS ES6 for Node and the browser
Fengari

🐺 φεγγάρι - The Lua VM written in JS ES6 for Node and the browser

This repository contains the core fengari code (which is a port of the Lua C library) which includes parser, virtual machine and base libraries. However it is rare to use this repository directly.

To use fengari in a web browser as easily as you might use JavaScript, see fengari-web
fengari-interop is a lua library that makes interoperating with JavaScript objects simple, it is already included in fengari-web.
For a clone of the lua command line tool, but running under node.js, see fengari-node-cli
lua  webdev  Javascript  browser  webassembly 
november 2017 by euler
Saying Goodbye to Firebug ★ Mozilla Hacks – the Web developer blog
Firebug has been a phenomenal success. Over its 12-year lifespan, the open source tool developed a near cult following among web developers. When it came out in 2005, Firebug was the first tool to let programmers inspect, edit, and debug code right in the Firefox browser. It also let you monitor CSS, HTML, and JavaScript live in any web page, which was a huge step forward.

Firebug caught people’s attention — and more than a million loyal fans still use it today.

So it’s sad that Firebug is now reaching end-of-life in the Firefox browser, with the release of Firefox Quantum (version 57) next month. The good news is that all the capabilities of Firebug are now present in current Firefox Developer Tools.
firebug  firefox  debugging  webdev  history  culture 
october 2017 by euler
Gutenberg
Gutenberg comes as a single executable with Sass compilation, syntax highlighting, table of contents and many other features that traditionally require setting up a dev environment or adding some JavaScript libraries to your site.
webdev  rust  static 
october 2017 by euler
Screen capture in Google Chrome
If you didn’t write all that code down, you can also check out the results in this GitHub repo.

Everything we have done here is very specific to the Chrome browser, but it turns out you can get access to screen capture in Firefox too. Ideally we could wrap this up in a function that works seamlessly for both browsers. Look out for further blog posts on getting to that stage.

We have implemented a very minimal version of the required extension to get access to screen capture. For a more robust version, check out the screen capture guide in the Twilio docs. You’ll also find more information there on how to use this new ability with Twilio Video to screen share during a video call.

Do you have an interesting use case for screen capture in browsers? Drop me your ideas or any questions in the comments below. Or feel free to reach out on Twitter at @philnash or by email at philnash@twilio.com.
webdev  screenshot 
october 2017 by euler
[no title]
How Does It Work?

st.js is a library that adds a couple of powerful methods to JavaScript's native JSON.
So you can simply use it with the syntax JSON.select(...).transform(...)
The library is just a single file, made up of stateless functions, with NO dependency.
Which makes it effortless to embed anywhere without hassle. (Currently used in various environments including iOS, Android, node.js, browser, etc.)
json  jq  webdev  csv  data 
october 2017 by euler
Metaballs
And here is the final result and the entire code snippet for metaball. Try forking it and playing around with different values of handleSize and v. See how they impact the shape of the connector. There are so many amazing little details in these 70 lines of code. Fascinating work by Hiroyuki Sato. I learnt so much from it!
metaballs  graphics  svg  css  webdev 
october 2017 by euler
GitHub - shamadee/web-dsp: A client-side signal processing library utilizing the power of WebAssembly (.wasm)
WebDSP is a collection of highly performant algorithms, which are designed to be building blocks for web applications that aim to operate on media data. The methods are written in C++ and compiled to WASM, and exposed as simple vanilla Javascript functions developers can run on the client side.
library  webassembly  video  Javascript  webdev 
october 2017 by euler
Micro Frontends - extending the microservice idea to frontend development
The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016. It extends the concepts of micro services to the frontend world. The current trend is to build a feature-rich and powerful browser application, aka single page app, which sits on top of a micro service architecture. Over time the frontend layer, often developed by a separate team, grows and gets more difficult to maintain. That’s what we call a Frontend Monolith.

The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface.
webdev  architecture  frontend  microservices 
october 2017 by euler
The whole web at maximum FPS: How WebRender gets rid of jank ★ Mozilla Hacks – the Web developer blog
What’s next for WebRender?

We look forward to landing WebRender in Firefox as part of Quantum Render in 2018, a few releases after the initial Firefox Quantum release. This will make today’s pages run more smoothly. It also gets Firefox ready for the new wave of high-resolution 4K displays, because rendering performance becomes more critical as you increase the number of pixels on the screen.

But WebRender isn’t just useful for Firefox. It’s also critical to the work we’re doing with WebVR, where you need to render a different frame for each eye at 90 FPS at 4K resolution.

An early version of WebRender is currently available behind a flag in Firefox. Integration work is still in progress, so the performance is currently not as good as it will be when that is complete. If you want to keep up with WebRender development, you can follow the GitHub repo, or follow Firefox Nightly on Twitter for weekly updates on the whole Quantum Render project.
firefox  webdev  webrender 
october 2017 by euler
Privoxy - Home Page
Privoxy is a non-caching web proxy with advanced filtering capabilities for enhancing privacy, modifying web page data and HTTP headers, controlling access, and removing ads and other obnoxious Internet junk. Privoxy has a flexible configuration and can be customized to suit individual needs and tastes. It has application for both stand-alone systems and multi-user networks.
webdev  proxy 
october 2017 by euler
plainJS - The Vanilla JavaScript Repository
jQuery is one of the great libraries that helped us overcome JavaScript browser issues when IE 6 and 7 were still around. Today, it may be a good choice to drop jQuery and its cousins, because modern browsers are pretty easy to deal with on their own. Using plain JavaScript will make your applications load and react blazingly fast.

Why choosing plain JS over jQuery?

Writing common and rather simple JavaScript functions for a website can nowadays be easily done in plain JS. There's no real gain from jQuery, although syntax is typically slightly shorter. However, that comes with the price of downloading and parsing a huge library. Yet, when writing complex JavaScript tools, such as image editors or charting libraries, both the dependency upon and the lowerer speed of jQuery are real drawbacks. Therefore, such code is mostly written in pure JavaScript. Again, no need for jQuery.
webdev  Javascript  plainjs  jQuery 
september 2017 by euler
Bringing the web up to speed with WebAssembly | the morning paper
There’s a great observation in the introduction section: the Web has become the most ubiquitous application platform ever, and yet by historical accident the only natively supported programming language for that platform is JavaScript! That’s made for a number of attempts to compile down to JavaScript (e.g., asm.js), but JavaScript isn’t really a good compilation target.
webassembly  Javascript  webdev  trend 
september 2017 by euler
GitHub - muicss/sentineljs: Detect new DOM nodes using CSS selectors (682 bytes)
SentinelJS is a tiny JS library that makes it easy to set up watch functions that notify you anytime a new node is added to the DOM. Using SentinelJS you can detect a new element based on a CSS rule and modify its behavior when it gets added to the DOM. Among other things, you can take advantage of this to implement custom-elements and make other in-place modifications to new DOM elements:
css  dom  webdev  Javascript 
september 2017 by euler
Build a fast, secured and free static site in less than 3 hours • gsempe
Everything starts with the idea to build a website to host my work. On the road, it became obvious that the first article has to be precisely on how to do it. And here it is.
To be effective I picked Hugo that I already know. It is as well, very fast, cross-platform, open source and ranked in the top 3 of static website generators: a very solid pick.
Everything as to stay free, so the generated pages are hosted in a Github repository side by side with the website source code. It comes with a Github sub-domain served over a secured HTTPS connection for free as well.
For my own needs I have added two extra goals at the end of the article. They are not interesting for everyone, feel free to drop them:
webdev 
september 2017 by euler
Headless mode - Mozilla | MDN
Headless mode is a useful way to run Firefox, which is just as it sounds — Firefox is run as normal, except without any of the UI components visible. This may not be very useful for surfing the web, but it is very useful for automated testing. This article provides all you need to know about running headless Firefox.
headless  firefox  webdev 
august 2017 by euler
« earlier      
per page:    204080120160

related tags

3d  a-frame  accessibility  accesskey  ace  adobe  advertising  ai  air  ajax  amp  anaimation  analytics  android  angular  angular.js  animation  annotation  apache  api  apollo  app  appengine  applications  apps  appserver  aptana  arc  arch  architecture  archiving  ascii  asm.js  assembly  async  atompub  audio  authentication  autocomplete  automation  autosave  aws  b2g  backbone  backbone.js  barcodes  batman.js  bcap  belay  benchmark  billing  bioinformatics  ble  blender  blogging  bluefish  bluetooth  boilerplate  book  bookmarking  bookmarklet  bootstrap  brackets  browser  browsercache  browserfy  brunch  bsd  business  c#  c++  cache  caching  calendar  camera  canvas  cas  cdn  charting  charts  cheatsheet  chrome  chrome-dev-tools  chromium  claypool  clipboard  clojure  clojurescript  cloud  cloud9  cloudfront  cloudmade  cms  cocoa  code  coder  coffeescript  collaboration  color  compatibility  complexity  components  compression  concurrency  cordova  cors  cost  couchdb  coverflow  crdata.org  cryptography  csp  css  css3  cssgrid  csv  cuba  culture  curation  curl  d3  d3.js  dashboard  data  database  datagrid  datomic  datomicscript  debug  debugging  deployment  design  desktop  development  devenv  devops  devtools  dgrid  diagram  django  dns  docker  docpad  documentation  dojo  dom  doppio  dragdrop  dropbox  dust.js  dynamic  easing  ebook  ec2  eclipse  ecm  ecmascript  ecommerce  editor  education  electron  elm  email  embedded  ember.js  encryption  enterprise  envjs  erlang  eslint  esp8266  events  express  expressions  facebook  federation  fft  filebrowser  filesystem  finance  firebase  firebug  firefox  flexbox  flight  fluid  flux  fonts  foreman  foundation  fp  fractal  framework  frontend  frontier  gallery  gamedev  gecko  gem  generator  gestures  ggplot2  ghost  gif  gis  gist  git  gitdown  github  golang  google  googleapps  graphics  graphql  grid  grunt  gtd  gui  gulp  hallo.js  handlebars  happs  harp  haskell  hci  headless  heroku  hhtp  history  hop  hosting  hotkeys  howto  html  html5  http  httpd  https  hugo  hyperlinks  ical  ide  identity  ideo  ie  ie7  ie9  iex  image  imageprocessing  images  immutable  incrementalDOM  inferno  inlinecache  inncrementalDOM  inspector  instagram  instrumentation  interactive  intern  introduction  ios  ios6  iot  ipad  iphone  iphone5  java  java8  javascript  jaws  jekyll  jetbrains  jq  jqtouch  jquery  jsdom  jsil  jslint  jsmath  json  jsontree  jspp  kaman  keyboard  keypress  keyvalue  knockout.js  koa  kraken  kyt  lambda  latency  layout  leaflet  learning  less  library  lint  linux  lively  livelykernel  llvm  LMS  localStorage  logging  login  logs  loopback  LTI  lua  lucene  manifest  mapbox  mapping  maps  mapserver  markdown  marketing  math  mathjax  mediaQueries  memcached  merb  messaging  metaballs  meteor  metrics  microservices  microsoft  middleman  mixpanel  ml  mobile  modern.ie  modules  mongrel  monitoring  moon  mozilla  msft  multimedia  museum  mvc  mylar  n1  nashorn  native  nativeclient  netflix  networking  newbrowse  news  newspaper  nginx  nitrogen  nodal  node  node.js  nodejs  noir  notebook  npm  nvu  nyt  objective-c  offline  om  online  opa  opengeo  opengl  opensource  optimization  orion  os  osgeo  osx  otoy  overview  owasp  p2p  p5  paas  pagination  panorama  parser  patterns  payments  pdf  performance  perfromance  phantom.js  phantomjs  phenomic  phonegap  phonosdk  photo  photography  php  piwik  plainjs  plan9  play  plugin  podcast  polymer  postgreSQL  pow  presentation  print  privacy  process  processing  profiling  proglang  programming  ProjectManagement  prose.io  prototype  proxy  publishing  push  pushstate  pwa  python  qrcode  qt  query  r  rack  ractive  rails  rake  rank:1  raspberry_pi  raspi  react  react.js  reactive  ReactJS  realtime  rebelmouse  refactoring  refer  reference  relay  rendering  repl  research  resolution  resources  responsive  responsiveDesign  rest  rethinkdb  retina  reveal.js  rhino  ripple  rlang  roadmap  rook  routing  rss  rstats  RStudio  rsync  ruby  rubyfrontier  rubyonrails  rust  rxjs  s3  saas  safari  sandbox  sass  scala  scalability  scale  scanning  scatter  science  scraping  screencast  screenscraping  screenshot  screensize  scroll  scrolling  sculptgl  sculpture  search  security  selenium  semantic  seo  server  serverless  serviceworker  serviceworkers  servo  shiny  sinatra  sitemap  skrollr  slides  smalltalk  snippets  socialmedia  socket.io  socketstream  software  spa  speech  spreadsheet  sproutcore  sql  sqlite  ssl  sso  stack  stackvm  standard  standards  static  statistics  stencils  stocks  storage  strategy  streaming  stripe  sublime  svg  swift  synchronization  sysadmin  table  tablet  tagging  tags  telephony  template  templating  tensorflow  terminal  tessel  tessler  testing  tex  text  textile  textmate  texture  themes  three.js  threejs  tilemill  timeline  tips  tomcat  tooling  toolref  tools  touch  tracing  tracking  tree  trend  trends  tributary  tutorial  tweetdeck  twitter  typography  tyrone  udell  ui  unix  urlencoding  usability  ux  vc  vcdiff  video  videoediting  videos  viewpoint  vim  visual  visualisation  visualization  vivaldi  voice  vue.js  w3c  wasm  web  webapps  webassembly  webaudio  webby  webcl  webcrypto  webdesign  webdev  webdriver  webgel  webgl  WebGL2  webian  webide  webkit  webmaster  webos  webpack  webrender  webrsync  webrtc  webservices  websockets  webvr  webworkers  weld  wiki  wildfly  wireframes  wordpress  workflow  writing  wsgi  wysiwyg  xhtml  xss  yeoman  yui  zappa  zeromq  zotonic  zurb  Zuul 

Copy this bookmark:



description:


tags: