euler + webdev   848

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 
7 days ago 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 
11 days ago 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 
16 days ago by euler
Towards web-based delta synchronization for cloud storage systems | the morning paper
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 
18 days ago 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 
18 days ago 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 
22 days ago 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 
23 days ago 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 
23 days ago 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 
23 days ago by euler
This page weighs 15kb -
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 
5 weeks ago 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 
5 weeks ago 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 
6 weeks ago by euler
javascript/ at master · airbnb/javascript · GitHub
Airbnb React/JSX Style Guide

A mostly reasonable approach to React and JSX
react  webdev 
9 weeks ago 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 
9 weeks ago 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 
9 weeks ago 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 
10 weeks ago 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 
10 weeks ago 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 
10 weeks ago by euler
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 
10 weeks ago 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 
10 weeks ago 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 
10 weeks ago 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 
10 weeks ago 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 
10 weeks ago 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 
10 weeks ago 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 
11 weeks ago by euler
GitHub - DenisKolodin/yew: Rust framework for making client web apps
Yew is a modern Rust framework inspired by Elm and ReactJS.
Rust  wasm  Elm  ReactJS  webdev  proglang 
11 weeks ago 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
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

🐺 φεγγάρι - 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 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
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
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
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:
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
Vapor (Server-side Swift)
Nearly 100x faster than popular web frameworks using Ruby and PHP. Swift is fast by every meaning of the word.
swift  web  server  webdev 
august 2017 by euler
GitHub - kbrsh/moon: A minimal, blazing fast UI library.
Moon is a simple front end javascript library heavily inspired by Vue. The library is fast, flexible, and easy to learn. Check out the Medium Article on the motivations for making this.
webdev  moon  Javascript 
august 2017 by euler
Vue.js + Brunch: The Webpack Alternative You've Been Hungry For
I think Brunch is a great choice for simple Vue projects. It’s not only easier to set up, but also faster, and for this use case, provides a smaller bundle file.

However, this doesn’t mean Brunch is universally better than Webpack for Vue.js projects. There are many things Brunch can’t do, for example dynamic imports which are essential for building PWAs.

The point is that while Webpack definitely has its place, Brunch should as well.
webdev  vue.js  webpack  brunch 
august 2017 by euler
Using the Paint Timing API | CSS-Tricks
Reading this short piece might have gotten you interested in some other pieces of the broader performance interface. Here's a few articles for you to check out if your curiosity has been sufficiently piqued:

The surface of this API is shared with the established Resource Timing API, so you should brush up on that. If you feel comfortable with the code in the article, you'll be able to immediately benefit from this incredibly valuable API.
While this API doesn't share much of a surface with the Navigation Timing API, you really ought to read up on it. This API allows you to collect timing data on how fast the HTML itself is loading.
PerformanceObserver has a whole lot more to it than what I've illustrated here. You can use it to get resource timings and user timings. Read up on it here.
Speaking of user timings, there's an API for that. With this API, you can measure how long specific JavaScript tasks are taking using highly accurate timestamps. You could also use this tool to measure latency in how users interact with the page.
webdev  performance 
august 2017 by euler
Run Code Snippets in Any Language Inside Your Blog - Blog
Our platform uses Docker images to run the code, so you can use code snippets in virtually any technology. A lot of contributors have already made the most of our technology and have crafted playgrounds of impressive quality. is still in beta and we’re working hard to provide a great experience on the platform. However, you may run into some bugs. Please don’t hesitate to reach out to us in this case or if you have any questions. We’ll be glad to help!

We have just released the embeddable widgets feature and we are thinking about how to improve it in the coming weeks. Feel free to let us know what you think of it and what feature updates you’d like to see!
docker  repl  webdev 
august 2017 by euler
StackBlitz — Online VS Code IDE for Angular & React ⚡
StackBlitz is an online IDE where you can create Angular & React projects that are immediately online & shareable via link… in just one click. 😮 It automatically takes care of installing dependencies, compiling, bundling, and hot reloading as you type:
ide  online  webdev 
august 2017 by euler
GitHub - apollographql/apollo-server: GraphQL server for Express, Connect, Hapi and Koa
Apollo Server is a community-maintained open-source GraphQL server. It works with all Node.js HTTP server frameworks: Express, Connect, Hapi, Koa and Restify. It is built on top of the graphql-js reference implementation.


Apollo Server is built with the following principles in mind:

By the community, for the community: Apollo Server's development is driven by the needs of developers
Simplicity: by keeping things simple, Apollo Server is easier to use, easier to contribute to, and more secure
Performance: Apollo Server is well-tested and production-ready - no modifications needed
Anyone is welcome to contribute to Apollo Server, just read, take a look at the roadmap and make your first PR!
graphql  webdev  apollo 
august 2017 by euler
Introducing kyt — Our Web App Configuration Toolkit - The New York Times
There is a need for a tool that exists in between large boilerplates and their customizable toolsets. That’s why we built kyt (pronounced “kit”). kyt is designed to abstract away complicated configurations and allow developers to focus on writing their source code, while still having the power to make important choices about their app. It provides a solid base for building web apps in Node, while being flexible enough to be useful for a variety of projects.
kyt  development  nyt  webdev 
august 2017 by euler
React, Relay and GraphQL: Under the Hood of the Times Website Redesign
As we transition away from using REST APIs, we no longer have to query the canonical representation of an article, when all we really need in some display modes is five to seven fields.
When we want to update our design across all products, we will no longer have to make changes across several codebases. This is the reality we are moving towards. We think Relay and GraphQL are the perfect tools to take us there.
webdev  react  graphql 
august 2017 by euler
Now there are 250 web developer tools! - good coders code, great coders reuse
I just added another 25 tools to Browserling's web developer tools, increasing the collection from 225 tools to 250 tools. Each tool does just one thing and one thing only. There are no ads, no config options, and no nonsense. All tools are free. All tools work the same way. Press button, get result.

Here are some of the latest additions:
webdev  resources 
august 2017 by euler
Web Starter Kit  |  Web  |  Google Developers
Web Starter Kit is an opinionated boilerplate for web development. Tools for building a great experience across many devices and performance oriented. Helping you to stay productive following the best practices outlined in Google's Web Fundamentals. A solid starting point for both professionals and newcomers to the industry.
webdev  google  html5  boilerplate 
august 2017 by euler
GitHub - toddmotto/public-apis: A collective list of public JSON APIs for use in web development.
A collective list of free JSON APIs for use in web development.

A JSON encoding of all entries can be found here.

For information on contributing to this project, please see the contributing guide.

Please note a passing build status indicates all listed APIs are available since the last update. A failing build status indicates that 1 or more services may be unavailable at the moment.
webdev  api  json 
july 2017 by euler
Update on Web Cryptography | WebKit
The WebCrypto API was created to bring these important high-level cryptography capabilities to the web. This API provides a set of JavaScript functions for manipulating low-level cryptographic operations, such as hashing, signature generation and verification, encryption and decryption, and shared secret derivation. In addition, it supports generation and management of corresponding key materials. Combining the complete support of various cryptographic operations with a wide range of algorithms, the WebCrypto API is able to assist web authors in tackling diverse security requirements.
webdev  cryptography  webcrypto  performance 
july 2017 by euler
Introducing HumbleNet: a cross-platform networking library that works in the browser ★ Mozilla Hacks – the Web developer blog
HumbleNet is a simple C API that wraps WebRTC and WebSockets and hides away all the platform differences between browser and non-browser platforms. The current version of the library exposes a simple peer-to-peer API that allows for basic peer discovery and the ability to easily send data (via WebRTC) to other peers. In this manner, you can build a game that runs on Linux, macOS, and Windows, while using any web browser — and they can all communicate in real-time via WebRTC.  This means no central server (except for peer discovery) is needed to handle network traffic for the game. The peers can talk directly to each other.

HumbleNet itself uses a single WebSocket connection to manage peer discovery. This connection only handles requests such as “let me authenticate with you”, and “what is the peer ID for a server named “bobs-game-server”, and “connect me to peer #2345”.  After the peer connection is established, the games communicate directly over WebRTC.
webdev  browser  networking 
june 2017 by euler
Deconstructing the Google Analytics tracking script
So the answer to the question “what does the Google Analytics tracking script actually do?”, is that it creates a global ga function, and asynchronously loads the full Google Analytics tracking script analytics.js, so that one can make requests like ga('send', 'pageview').
webdev  analytics 
june 2017 by euler
Resources for beginners
This is a list of resources I recommend to beginners to programming, Go, web development, or really anything in particular that I am asked about.
resources  reference  golang  webdev 
june 2017 by euler
I decided to disable AMP on my site
The decision to turn AMP off was a long time coming. Thankfully it was almost as easy to disable AMP on WordPress as it was to enabled it. I just had to disable the AMP plugin. Less than 24 hours later Googled stopped showing the AMP version of my site in their search results.
webdev  google  amp 
june 2017 by euler
Introduction · Go-SCP
Go Language - Web Application Secure Coding Practices is a guide written for anyone who is using the Go Programming Language and aims to use it for web development.
This book is collaborative effort of Checkmarx Security Research Team and it follows the OWASP Secure Coding Practices - Quick Reference Guide v2 (stable) release.
The main goal of this book is to help developers avoid common mistakes while at the same time, learning a new programming language through a "hands-on approach". This book provides a good level of detail on "how to do it securely" showing what kind of security problems could arise during development.
golang  webdev  Security 
june 2017 by euler
Into Vertex Shaders – Szenia Zadvornykh – Medium
This is a series of tutorials about WebGL, Three.js, and Three.bas, my extension for complex and highly performant 3D animation systems.
These tutorials are intended for people who know JavaScript and want to get into 3D graphics development, though some prior experience with Three.js will help.
webdev  webgl  graphics  tutorial 
june 2017 by euler
GoldenLayout- a multi-window javascript layout manager for webapps
Are there any other layout managers like GoldenLayout?
Yes, this type of layout paradigm is referred to as "docker" (not to be confused with the virtualisation containers). Examples for frameworks that implement the docker paradigm are PhosphorJS, wcDocker or dockspawn A similar approach (without the re-ordering) is provided by jQuery Layout and ExtJS

Depending on your usecase you might also prefer Gridster, Masonry or Isotope. To our knowledge there isn't another layout manager / framework that supports browser based multi window / multi screen webapps.
layout  webdev  Javascript  react.js 
june 2017 by euler
Will Vue.js Become a Giant Like Angular or React? - 10Clouds
It uses DevTools. They are essential for debugging your application and seeing exactly what’s going on inside of it. Vue.js devtools for Chrome is a tribute to those who would like their debugging process to be excellent as far as UI and UX are concerned.
vue.js  resources  webdev 
june 2017 by euler
Vue.js: a 3-minute interactive introduction – freeCodeCamp
Vue.js is a JavaScript library for building user interfaces. Last year it started to become quite popular among web developers. It’s light weight, relatively easy to learn, and powerful.
In the three minutes Medium says it will take you to read this article, you’ll get equipped with some start building basic Vue apps. With each segment, I’ve also included an interactive Scrimba screencast, where you can watch me explain the concepts and play around with the code yourself.
vue.js  webdev 
june 2017 by euler
A Complete Guide To Switching From HTTP To HTTPS – Smashing Magazine
HTTPS is a must for every website nowadays: Users are looking for the padlock when providing their details; Chrome and Firefox explicitly mark websites that provide forms on pages without HTTPS as being non-secure; it is an SEO ranking factor; and it has a serious impact on privacy in general. Additionally, there is now more than one option to get an HTTPS certificate for free, so switching to HTTPS is only a matter of will.
https  webdev 
june 2017 by euler
Habits of a Happy Node Hacker 2017 | Heroku
It’s been a little over a year since our last Happy Node Hackers post, and even in such a short time much has changed and some powerful new tools have been released. The Node.js ecosystem continues to mature and new best practices have emerged.

Here are 8 habits for happy Node hackers updated for 2017.
webdev  Node.js 
june 2017 by euler
GitHub - dexteryy/spellbook-of-modern-webdev: A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development
This document originated from a bunch of most commonly used links and learning resources I sent to every new web developer on our full-stack web development team.
For each problem domain and each technology, I try my best to pick only one or a few links that are most important, typical, common or popular and not outdated, base on the clear trends, public data and empirical observation.
Prefer fine-grained classifications and deep hierarchies over featureless descriptions and distractive comments.
Ideally, each line is a unique category. The " / " symbol between the links means they are replaceable. The ", " symbol between the links means they are complementary.
I wish this document could be closer to a kind of knowledge graph or skill tree than a list or a collection.
It currently contains 2000+ links (projects, tools, plugins, services, articles, books, sites, etc.)
Feel free to submit the missing or better links in your opinion. Also, please provide the reason.
webdev  reference 
june 2017 by euler
Sandcat Browser - Sandcat
Sandcat is a lightweight multi-tabbed web browser packed with features for developers and pen-testers. The browser is built on top of Chromium, the same engine that powers the Google Chrome browser, and uses the Lua programming language to provide extensions and scripting support.
june 2017 by euler
GitHub - grab/front-end-guide: Study guide and introduction to the modern front end stack
This study guide is inspired by "A Study Plan to Cure JavaScript Fatigue" and is mildly opinionated in the sense that we recommend certain libraries/frameworks to learn for each aspect of front end development, based on what is currently deemed most suitable at Grab. We explain why a certain library/framework/tool is chosen and provide links to learning resources to enable the reader to pick it up on their own. Alternative choices that may be better for other use cases are provided as well for reference and further self-exploration.

If your company is exploring a modern JavaScript stack as well, you may find this study plan useful to your company too! Feel free to adapt it to your needs. We will update this study plan periodically, according to our latest work and choices.
webdev  reference  resources  Javascript 
june 2017 by euler
FlexBox cheatsheet
FlexBox Cheatsheet
this project on GitHub by Valery Liubimov
First value is default for this property. Click or change properties value to copy to clipboard.
webdev  css  flexbox 
june 2017 by euler
GitHub - ory/editor: Next-gen, highly customizable content editor for the browser - based on Slate.js, React and Redux. WYSIWYG on steroids.
Next-gen, highly customizable content editor for the browser - based on Slate.js, React and Redux. WYSIWYG on steroids.
editor  wysiwyg  webdev 
may 2017 by euler
Managing Async Dependencies with JavaScript | Hack Cabin
The fetch-inject library itself makes the Fetch Injection technique available to everyone via an easy-to-use API. It has no hard dependencies, is about 600 bytes minified and gzipped and comes at you ISC-licensed.

To get started, install the library from NPM with npm i fetch-inject or bower with bower install fetch-inject. Please see the README for additional installation options and more detail.
webdev  Javascript  async 
may 2017 by euler
« earlier      
per page:    204080120160

related tags

3d  a-frame  accessibility  accesskey  ace  adobe  advertising  air  ajax  amp  anaimation  analytics  android  angular  angular.js  animation  annotation  apache  api  apollo  app  appengine  applications  apps  appserver  aptana  arc  arch  architecture  ascii  asm.js  assembly  async  atompub  audio  authentication  autocomplete  automation  autosave  aws  b2g  backbone  backbone.js  batman.js  bcap  belay  benchmark  billing  bioinformatics  ble  blender  blogging  bluefish  bluetooth  boilerplate  book  bookmarking  bookmarklet  bootstrap  brackets  browser  browsercache  browserfy  brunch  business  c#  c++  cache  caching  calendar  camera  canvas  cas  cdn  charting  charts  cheatsheet  chrome  chrome-dev-tools  chromium  claypool  clipboard  clojure  clojurescript  cloud  cloud9  cloudmade  cms  cocoa  code  coder  coffeescript  collaboration  color  compatibility  complexity  components  compression  concurrency  cordova  cors  cost  couchdb  coverflow  cryptography  csp  css  css3  cssgrid  csv  cuba  culture  curation  curl  d3  d3.js  dashboard  data  database  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  ember.js  encryption  enterprise  envjs  erlang  eslint  events  express  expressions  facebook  federation  fft  filebrowser  filesystem  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  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  mobile  modules  mongrel  monitoring  moon  mozilla  msft  multimedia  museum  mvc  mylar  n1  nashorn  native  nativeclient  netflix  networking  newbrowse  news  newspaper  nginx  nitrogen  nodal  node.js  nodejs  noir  notebook  npm  nvu  nyt  objective-c  offline  om  online  opa  opengeo  opengl  opensource  optimization  orion  os  osgeo  osx  otoy  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  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  rss  rstats  RStudio  rsync  ruby  rubyfrontier  rubyonrails  rust  rxjs  s3  saas  safari  sandbox  sass  scala  scalability  scale  scatter  science  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  socketstream  software  spa  speech  spreadsheet  sproutcore  sql  sqlite  ssl  sso  stack  stackvm  standard  standards  static  statistics  stencils  storage  strategy  streaming  stripe  sublime  svg  swift  synchronization  sysadmin  table  tablet  tagging  tags  telephony  template  templating  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  urlencoding  usability  ux  vc  vcdiff  video  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 

Copy this bookmark: