RSS

Frontrunner + webdev   406

CSS Reference
Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
webdev  css  reference  visualization  learning 
november 2016 by Frontrunner
BEM — Block Element Modifier
Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.
methodology  css  naming  namingconvention  webdev 
november 2016 by Frontrunner
SUIT CSS Naming Conventions
SUIT CSS relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words). This helps to work around the current limits of applying CSS to the DOM (i.e., the lack of style encapsulation), and to better communicate the relationships between classes.
webdev  css  naming  namingconvention 
november 2016 by Frontrunner
Headless Browsers
A list of (almost) all headless web browsers in existence.
browsers  headless  list  collection  webdev 
november 2016 by Frontrunner
Electron
Build cross platform desktop apps with JavaScript, HTML and CSS.
crossplatform  desktop  applications  webdev  javascript  html  css  development  tool 
november 2016 by Frontrunner
The Cost of Small Modules
I’d like to demonstrate that small modules can have a surprisingly high performance cost depending on your choice of bundler and module system. Furthermore, I’ll explain why this applies not only to the modules in your own codebase, but also to the modules within dependencies, which is a rarely-discussed aspect of the cost of third-party code.
javascript  modules  performance  browserify  webpack  webdev  2016 
october 2016 by Frontrunner
Learning WebGL - The Lessons
00. Getting Started
01. A Triangle and a Square
02. Adding Colour
03. A Bit of Movement
04. Some Real 3D Objects
05. Introducing Textures
06. Keyboard Input and Texture Filters
07. Basic Directional and Ambient Lighting
08. The Depth Buffer, Transparency and Blending
09. Improving the Code Structure With Lots of Moving Objects
10. Loading a World, and the Most Basic Kind of Camera
11. Spheres, Rotation Matrices, and Mouse Events
12. point lighting
13. per-fragment lighting and multiple programs
14. specular highlights and loading a JSON model
15. specular maps
16. render-to-texture
webgl  webdev  tutorial  free 
october 2016 by Frontrunner
Is the Internet Killing Creativity?
The internet is a wonderful place (mostly). An unprecedented revolution in communication, it continues to empower more people to publish and share their knowledge than any other phenomenon in history. It is a limitless playground of ideas and unbridled creativity.

Or is it?
webdev  webdesign  creativity  decline  2016 
october 2016 by Frontrunner
CSS4 Rocks
The new selectors etc in CSS4.
css  css4  webdev  webdevelopment  website 
october 2016 by Frontrunner
BuiltWith
Find out what websites are built with.
webdev  websites  technology  architecture  analysis  lookup  internet  cdn  statistics  tool 
july 2016 by Frontrunner
WebGL Fractals
WebGL Julia Set visualized with WebGL.
webdev  webgl  fractals  juliaset  math  visualization  graphics  examples  demo 
july 2016 by Frontrunner
The Case Against Native Engines
- Graphics and rendering
- Physics
- Pathfinding
- Collisions
- Audio
- Mobile support
- Build systems
- Console support
- Bugs
- V-sync quality
- What would be better about native?
- What would be worse about native?
- A better solution
- Conclusion
webdev  performance  html5  webgl  gpu  asmjs  c++  audioapi  cordova  ios  android  apple  google  xboxone  wiiu  ps4  construct2  chrome  cpu  webassembly  2016 
july 2016 by Frontrunner
You Don't Need JavaScript
Please note these demos should be considered as CSS "Proofs of Concepts". They may have serious issues from accessibility point of view (keyboard navigation, speech synthesis, etc.), or progressive enhancement/degradation/etc.
css  css3  javascript  webdev  learning  ui 
july 2016 by Frontrunner
Typography for User Interfaces
Back in 2004, when I had just started my career, sIFR was the hottest thing out there. It was developed by Shaun Inman and it embedded custom fonts in a small Flash movie, which could be utilized with a little bit of JavaScript and CSS. At the time, it was basically the only way to use custom fonts in browsers like Firefox or Safari. The fact that this technique relied on Flash soon made it obsolete, with the release of the iPhone (without flash) in 2007.

In 2008, browsers started eventually supporting the new CSS3 @font-face rule. It had already been a part of the CSS spec in 1998, but later got pulled out of it. I remember the excitement when I managed to convince one of our clients to utilize the new @font-face and rely on progressive enhancement to deliver an enhanced experience for browsers which already supported this feature.
webdev  typography  fonts  history  design  ui  2016 
july 2016 by Frontrunner
CSS outline Property - outline: none and outline: 0
It provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people.
webdev  css  accessibility  links  bestpractices 
july 2016 by Frontrunner
The “Cobra Effect” That is Disabling Paste on Password Fields
Back in the day when the British had a penchant for conquering the world, they ran into a little problem on the subcontinent; cobras. Turns out there were a hell of a lot of the buggers wandering around India and it also turned out that they were rather venomous which didn’t sit well with the colonials. Ingenious as the British were, they decided to offer the citizens a bounty – you hand in dead cobras that would otherwise have bitten some poor imperialist and you get some cash. Problem solved.

Unfortunately, the enterprising locals saw things differently and interpreted the “cash for cobras” scheme as a damn good reason to start breeding serpents and raking in the dollars. Having now seen the flaw in their original logical, the poms quickly scrapped the scheme meaning no more snake bounty. Naturally the only thing for the locals to do with their now worthless cobras was to set them free so that they may seek out a nice cosy British settlement somewhere.

This became known as the Cobra Effect or in other words, a solution to a problem that actually makes the whole thing a lot worse. Here’s a modern day implementation of the Cobra Effect as it relates to the ability to paste your password into a login field.
cobraeffect  webdev  passwords  security  copyandpaste  passwordmanagers  2016 
june 2016 by Frontrunner
Build Your First Thing with WebAssembly
When I first heard of WebAssembly it sure sounded cool and I was super excited to start trying it out. As soon as I tried to get started however, it got a lot more frustrating. My goal here is to save you some of that frustration.
webdev  webassembly  javascript  howto  examples  2016 
june 2016 by Frontrunner
Six Reasons Browser Monitoring Matters
01. Use Java, Flash, Silverlight?
02. Utilizing the latest CSS
03. Keep those Polyfills?
04. Upgrading your version of jQuery
05. Browser monitoring for mobile devices
06. Codebase Cleanup
browsers  compatibility  webdev  2016 
june 2016 by Frontrunner
UTF-8 Everywhere
Our goal is to promote usage and support of the UTF-8 encoding and to convince that it should be the default choice of encoding for storing text strings in memory or on disk, for communication and all other uses. We believe that our approach improves performance, reduces complexity of software and helps prevent many Unicode-related bugs. We suggest that other encodings of Unicode (or text, in general) belong to rare edge-cases of optimization and should be avoided by mainstream users.
characterencoding  utf8  standards  efficiency  i18n  programming  webdev 
june 2016 by Frontrunner
Service Worker Cookbook
The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern Web apps.
mozilla  serviceworkers  collection  examples  javascript  webdev 
june 2016 by Frontrunner
A-Frame - Building Blocks for the Virtual Reality Web
Use markup to create VR experiences that work across desktop, iOS, Android, and the Oculus Rift.
webdev  virtualreality  vr  markup  browsers  framework 
june 2016 by Frontrunner
Why You Should Bet Big on Privacy
The whole idea behind privacy by design is to provide protection now and in the future, regardless of governance, corruption and security breaches. When done right, privacy can vastly reduce the impact of attacks on your business and reputation, since there would be no sensitive data to leak.

Ideally though, we shouldn’t care about privacy. Not because it’s unimportant, but rather because it would be by default in everything, offering an ethical baseline that makes us feel safe. We shouldn’t have to worry about our privacy, just as we shouldn’t have to worry about war, discrimination, hunger, disease or money.

If you are a CEO, you have two choices: be in denial, ignore privacy and risk your company disappearing if the market turns; or, be a forward-thinking leader who embraces it as a strategic advantage, thereby building a future-proof organization that is both ethical and beneficial to society.
surveillance  privacy  privacybydesign  internet  webdev  business  businesspractice  tracking  advertisement  capitalism  2016 
may 2016 by Frontrunner
Our Best Practices are Killing Mobile Web Performance
* Foreword
* Mobile web: Inferior user experience
* Current performance goals and methods
* Interruptions of user interaction
* The best practices that are killing us
* Mobile web performance guidelines
* Case study: BBC News article page
webdev  css  bestpractices  badcode  performance  accessibility  mobile  ui  ux  2016 
may 2016 by Frontrunner
Web Credits
The way the Web spread was a piece at a time. So you could take html without taking http. So the failure of NEXT was a lesson, don’t try to sell it all at one time. Sell each piece on its own merits. Never insist that everybody take all. They will take all the pieces once they see how it fits together.

--Tim Berners-Lee
w3c  webcredits  webpayments  payment  economy  webdev 
may 2016 by Frontrunner
Being a Developer After 40
* The World In 1997
* My First Developer Job
* 6776 Days
* Advice For The Young At Heart
* 01. Forget The Hype
* 02. Choose Your Galaxy Wisely
* 03. Learn About Software History
* 04. Keep on Learning
* 05. Teach
* 06. Workplaces Suck
* 07. Know Your Worth
* 08. Send The Elevator Down
* 09. LLVM
* 10. Follow Your Gut
* 11. APIs Are King
* 12. Fight Complexity
* Conclusion
software  webdev  development  experience  2016 
may 2016 by Frontrunner
The Lie That Has Beguiled a Generation of Developers
It is truly disturbing to see how JavaScript has beguiled the current generation of software developers, esp. on the client side of web development. With the trend toward the Single Page Application (or SPA), along with an uncontrolled proliferation of client-side web frameworks for JavaScript, we are seeing many foolish companies going down the road to software engineering chaos. SPAs are far more complicated to write than traditional server-based applications, eating up more time and resources; the returns are highly questionable. And the web framework landscape is a wild wild West of free-for-alls with most of these frameworks having the life span of a fruit fly. Think Angular, React, Ember, Meteor, Backbone, Knockout, Express, Mithril, Aurelia, etc., etc., etc. Whoa! It would be hilarious if it wasn’t so horrifying. We’ve seen a civil war break out between Angular 1 and 2, and recently witnessed React attempting to upend the JS industry. Who knows how long before React itself is eclipsed.
javascript  singlepageapplications  angularjs  reactjs  ember  meteor  backbone  knockout  express  mithril  aurelia  nodejs  webassembly  webdev  opinion  2016 
may 2016 by Frontrunner
About rel=noopener
If window.opener is set, a page can trigger a navigation in the opener regardless of security origin.
webdev  javascript  security  privacy  2016 
may 2016 by Frontrunner
Jam API
Jam API is a service that allows you to turn any site into a JSON accessible api using CSS selectors.
webdev  scraping  css  json  api  service 
may 2016 by Frontrunner
OAuth
An open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications.
authorization  protocol  security  webdev  webapplications  desktop  mobile  openstandard  website 
april 2016 by Frontrunner
Apple Jumps on the WebRTC Bandwagon
Apple Jumps On the WebRTC Bandwagon At long last, this WebRTC holdout looks like it's finally committed to supporting the technology in its Safari browser.
webdev  webrtc  apple  safari  2016 
april 2016 by Frontrunner
API Catalog
The API Catalog is a tool to visualize and analyze the API overlap between standards specifications and support across browsers.

This data was gathered by extracting specification IDL definitions from notable web specifications. Browser information was gathered by traversing the type system within the latest available version of each browser.
webdev  api  browsers  compatibility  tables  visualization  edge  chrome  firefox  safari  tool 
april 2016 by Frontrunner
Pure CSS Multiline Text with Ellipsis
Automatically truncate a string with CSS and add an ellipsis.
webdev  css  truncation  example 
april 2016 by Frontrunner
MathML is a Failed Web Standard
* MathML is a failed web standard.
* We can do better, we deserve better.
* MathML-in-HTML5 is in the way of that.
webdev  mathml  standards  opinion  2016 
april 2016 by Frontrunner
How Software Gets Bloated: From Telephony to Bitcoin
Every single programmer out there is familiar with bloat. It's everywhere: enterprise software that requires the enterprise to change its processes (aka "why do courses at Cornell have 4-digit numbers?"), finance software (of any kind except HFT), JavaScript frameworks (efforts to reuse left-pad notwithstanding), Web backends (hello there Django middleware), RDBMSs, OSes, USB drivers, browsers, browser plug-ins, PDF viewers that are actually document publishing systems, phone apps, you name it.

But dev teams don't have "scrum task boards" with post-its attached that say "ADD BLOAT" on them. Iranian sleeper cells aren't submitting pull requests against open source projects (when secret services add backdoors, as they did with Juniper, they seem to do it very elegantly by modifying previous backdoors -- no bloat!). So, how does software get bloated? Who is behind it? What process is at fault?
programming  webdev  software  bloat  2016 
april 2016 by Frontrunner
Offline Recipes for Service Workers
"Offline" is a big topic these days, especially as many web apps look to also function as mobile apps. The original offline helper API, the Application Cache API (also known as “appcache”), has a host of problems, many of which can be found in Jake Archibald’s Application Cache is a Douchebag post. Problems with appcache include:

* Files are served from cache even when the user is online.
* There’s no dynamism: the appcache file is simply a list of files to cache.
* One is able to cache the .appcache file itself and that leads to update problems.
* Other gotchas.

Today there’s a new API available to developers to ensure their web apps work properly: the Service Worker API. The Service Worker API allows developers to manage what does and doesn’t go into cache for offline use with JavaScript.
webdev  serviceworkers  offline  api  javascript  2015 
april 2016 by Frontrunner
Optimize Web App Performance through Drawing
Recently, we needed to take an in-depth look at the performance of a complex web application. We wondered: What calls were being made when? How could we improve them? What impact would changing our API have on our application overall? And what would be the best way to get our heads around all of this?

For a complex web application that has been undergoing development for a while, chances are that information isn’t top-of-mind. To help visualize what’s going on, try drawing out your page.
webdev  webapplications  drawing  postit  visualization  2015 
april 2016 by Frontrunner
WebUSB API
The Universal Serial Bus (USB) is the de-facto standard for wired peripherals. Most USB devices implement one of roughly a dozen standard "device classes" which specify a way for the device to advertize the features it supports and commands and data formats for using those features. Standard device classes include keyboard, mice, audio, video and storage devices. Operating systems support such devices using the "class driver" provided by the OS vendor. There is however a long tail of devices that do not fit into one of the standardized device classes. These devices require hardware vendors to write native drivers and SDKs in order for developers to take advantage of them and this native code prevents these devices from being used by the web.

The WebUSB API provides a way to safely expose USB device services to the web. It provides an API familiar to developers who have used existing native USB libraries and exposes the device interfaces defined by existing specifications. With this API hardware manufacturers will have the ability to build cross-platform JavaScript SDKs for their devices. This will be good for the web because, instead of waiting for a new kind of device to be popular enough for browsers to provide a specific API, new and innovative hardware can be built for the web from day one.
webdev  webusb  api  usb 
april 2016 by Frontrunner
An Update on Web Components and Firefox
Web Components is an umbrella term for four technologies that aim to make UI development easier and more modular. It has been in development since about 2011: a very long time for Internet standards!

All the specifications have been changing constantly as more vendors have started implementing them, and also as developers have gained real world experience in using them.

Therefore, it's only natural that we are all confused as to what is and what is not natively available in each browser.
webdev  webcomponents  firefox  status 
april 2016 by Frontrunner
What Web Developers Should Know About SSL But Probably Don't.
01. Fixing 'obsolete cipher suite' in Chrome
02. Fixing key / certificate mismatches
03. Setting up working SSL on localhost
04. You probably don't want a 4096 bit RSA certificate.
05. How to convert between the common SSL file formats
webdev  ssl  chrome  certificate  localhost  rsa  fileformats  2015 
april 2016 by Frontrunner
TryCF.com
The primary goal of this site is to remove barriers. Make it as simple as possible to get a taste for CF. Sure Railo Express is easy to download and run, but not as easy as opening your browser and typing. Try before you buy (or download for free).
webdev  coldfusion  railo  online  tool 
april 2016 by Frontrunner
10 Regression/Functional Web Testing Tools
01. Watir
02. Selenium IDE
03. QEngine
04. MaxQ
05. Solex
06. SilkTest
07. QA Wizard
08. WebKing
09. TestDrive
10. Rational Functional Tester
webdev  qa  regressiontesting  functionaltesting  tools  2016 
april 2016 by Frontrunner
ReadWrite
ReadWrite covers Web 2.0 and Web technology in general, and provides industry news, reviews, and analysis.
news  web20  webdev  internet  development  iot  technology 
april 2016 by Frontrunner
The Veil of Ignorance
Facts

* At 20 years old, your retina receives 100% of the light that hits the eye.
* At 40 years old, only 50% of the available light enters the retina.
* For an 80 year old, 25% of the available light passes through the retina.

When people say "My old tired eyes can't read this" It is because they can't.

I've often hear two complaints when designing for accessibility.

* Accessible color combinations limit my choices as a designer.
* Big type looks clumsy.

First lets talk about color contrast.

There are 140,737,479,966,720 combinations of hexcodes. Obviously not all of them are accessible. If only 1% of all color combinations are accessible than there are still almost 141 million combinations to choose from. This seems more than adequate to paint any bikeshed you will come across for the rest of your career.
accessibility  vision  design  webdev  2016 
march 2016 by Frontrunner
UX Myths
UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true. And you don't have to take our word for it, we'll show you a lot of research findings and articles by design and usability gurus.
webdev  usability  ux  myths 
march 2016 by Frontrunner
CodeVisually
The web development community is a huge place with so much happening daily it’s virtually impossible to keep up with every new resource, tool or solution that is released. It is very easy to get overwhelmed with its scale and can be very frustrating when you are searching for a particular or specialized solution. That is where we see CodeVisually fitting in.
webdev  news  articles  learning  resources 
march 2016 by Frontrunner
SitePoint
Web development articles.
webdev  articles  news  learning  css  js  html  html5  webgl 
march 2016 by Frontrunner
Performance Calendar
The speed geek's favorite time of the year.
webdev  development  performance  calendar 
march 2016 by Frontrunner
CSS Houdini Wiki
The objective of the CSS-TAG Houdini Task Force (CSS Houdini) is to jointly develop features that explain the “magic” of Styling and Layout on the web.

This wiki is to help the CSS Houdini record resolutions and open issues, to share them with public, and to encourage public involvement in the development of CSS extensibility. Contributions to this wiki are governed by the same conditions as the W3C Mobile Web Wiki Contribution Policy. Note that editing is restricted to CSS Working Group members except in the Testing section (which is open to all).
webdev  houdini  css  extensions  taskforce 
march 2016 by Frontrunner
Houdini: Maybe the Most Exciting Development in CSS You’ve Never Heard of
Have you ever wanted to use a particular CSS feature but didn’t because it wasn’t fully supported in all browsers? Or, worse, it was supported in all browsers, but the support was buggy, inconsistent or even completely incompatible? If this has happened to you — and I’m betting it has — then you should care about Houdini.

Houdini is a new W3C task force whose ultimate goal is to make this problem go away forever. It plans to do that by introducing a new set of APIs that will, for the first time, give developers the power to extend CSS itself, and the tools to hook into the styling and layout process of a browser’s rendering engine.
webdev  css  houdini  w3c  extensions  2016 
march 2016 by Frontrunner
Parsley, the Ultimate JavaScript Form Validation Library
Like no other form validation library, simply write in English your requirements inside your form HTML tags, Parsley will do the rest! No need to write even a single JavaScript line for simple form validation.
webdev  forms  validation  parsley  library 
march 2016 by Frontrunner
JMVC
A pure JavaScript MVC framework.
webdev  javascript  mvc  framework 
march 2016 by Frontrunner
On the Awesomeness of fn.displayName
This post is mostly actionable for library and framework authors, but everybody should demand that their favorite library or framework adopts this practice:

* No function in a framework stack trace should have a useless name.
webdev  javascript  libraries  frameworks  bestpractices  2014 
march 2016 by Frontrunner
Explorations In Automatically Fixing JavaScript Linting-errors
Linting is a common step in our JavaScript iteration workflow. Most developers probably use JSHint (or ESLint) for this purpose. However, when a tool is capable of informing you of linting issues, the next logical question is... why can't it fix these issues for us? Is this taking automation too far, or a logical complement to source formatting?
webdev  javascript  lint  jshint  jslint 
march 2016 by Frontrunner
5 Ways that CSS and JavaScript Interact That You May Not Know About
01. Get Pseudo-Element Properties with JavaScript
02. classList API
03. Add and Remove Rules Directly to Stylesheets
04. Load CSS Files with a Loader
05. CSS pointer-events
webdev  javascript  css 
march 2016 by Frontrunner
L20n
L20n is a new localization framework developed by Mozilla for the Web. It allows localizers to put small bits of logic into localization resources to codify the grammar of the language.

L20n's framework removes the need for developers to thoroughly understand the specifics of a natural language and provides an opportunity for localizers to create better translations.
webdev  localization 
march 2016 by Frontrunner
Concurrency in JavaScript
Just like with Flash, JavaScript code runs by default on the UI thread, and any expensive computation will usually affect the UI responsiveness. As you may know, at 60 fps, you have around 16ms (1000ms/60) per frame to do what you have to do (computations, rendering and other misc logic). If you exceed that budget, you will alter the frame rate and potentially make your content feel sluggish or worse, unresponsive.
webdev  javascript  concurrency  2014 
march 2016 by Frontrunner
Native JavaScript Data-Binding
Two-way data-binding is such an important feature - align your JS models with your HTML view at all times, to reduce boilerplate coding and enhance UX. We will observe two ways of doing this using native JavaScript, with no frameworks - one with revolutionary technology (Object.observe), and one with an original concept (overriding get/set). Spoiler alert - the second one is better.
webdev  javascript  js  twowaydatabinding 
march 2016 by Frontrunner
Vanilla JS
Vanilla JS is a fast, lightweight, cross-platform framework
for building incredible, powerful JavaScript applications.
framework  javascript  js  minimal  webdev 
march 2016 by Frontrunner
JavaScript Madness: Keyboard Events
This document summarizes the results of some browser tests done while attempting to implement key stroke handling code in JavaScript. It documents inconsistancies in the way different browsers implement keyboard events. It applies mainly to older browsers.
webdev  browsers  keyevents  events  keyboard  javascript  js 
march 2016 by Frontrunner
Component Kitchen
Web components let you extend HTML with new capabilities so you can write better web apps faster.
webdev  webcomponents  collection 
march 2016 by Frontrunner
Web Components and Mozilla Brick
In this article we explore the exciting new possibilities of web components for web app developers and how Mozilla's Brick and X-Tag libraries can facilitate their use. First we'll use Brick to rapidly prototype a simple application. Then, we'll build a custom web component using X-Tag.
webdev  webcomponents  customtags  xtags 
march 2016 by Frontrunner
X-Tags and Custom Elements
X-tags are custom HTML elements that give you a collection of building blocks (components) for developing HTML5 apps. If you don't see the component you need, you can define your own x-tag and use it like any other native HTML tag. Listed below are ten x-tags and a description of what they are used for.
webdev  webcomponents  customtags  xtags  examples 
march 2016 by Frontrunner
X-Tag and the Web Components Family
X-Tag and Web Components offer features that obliterate the status quo for layout, UI, and widget development - here's a few notable Web Component features:

* Create real custom elements the browser understands
* Stop the instantiation madness (like $('button.super').initSuperButton();)
* Remove unmanageable HTML widget guts from your app's view files
* Work with sharable components, based on standard technologies
webdev  webcomponents  customtags  xtags  ui  layout 
march 2016 by Frontrunner
Brick
Brick is a collection of UI components designed for the easy and quick building of Web application UIs. Brick components are built using the Web Components standard to allow developers to describe the UI of their app using the HTML syntax they already know.
webdev  webcomponents  brick  ui  library 
march 2016 by Frontrunner
HTML5 Components: Implement Standard Components
How to implement components using the nascent HTML5 component specifications, with assistance from the Polymer and Mozilla X-Tags projects.
webdev  html5  webcomponents  2013 
march 2016 by Frontrunner
Are We Componentized Yet?
What are Web components? They are encapsulated, reusable and composable widgets for the Web platform. If that sounds cool, then I urge you to check out one of the very good introductions to them that others have provided. In my opinion, they're the most exciting thing to happen in Web development since HTML5. Why? Because they promise to put the power and extensibility necessary to build sophisticated widgets and applications right into core Web feature set. Imagine the capabilities of libraries like Angular, Ember, and Backbone, but as a foundation of the platform, standardised across all browsers.

The purpose of this page is to track progress across the various documents where Web components are being specified, the polyfills that let you use them today, and their implementation in browsers that will make them a first class citizen of the Web in the months and years to come.
webdev  webcomponents  browsers  support 
march 2016 by Frontrunner
Using Web Workers to Improve Performance of Image Manipulation
Image manipulation in HTML5, using pure JavaScript.
webdev  webworkers  imagemanipulation  performance 
march 2016 by Frontrunner
Socket.IO
Socket.IO enables real-time bidirectional event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed.
webdev  websockets  socketio 
march 2016 by Frontrunner
Why (and How) you Should Probably Use Web Notifications
Chrome and Firefox support it already. Opera will probably follow suit, so support is definitely getting there. There are a bunch of other reasons too:

* As this becomes more common, these are the kind of notifications users will expect on web apps.
* They provide a longer commitment to your site. Chrome’s Notification Center saves all notifications in a drop down. When the user clicks on that they’ll see your site and maybe return or finish their task.
* Rich Notifications on Chrome could seep into Javascript and could give us a lot more ways to adapt notifications
* They look good and happen outside the browser. This means browser vendors can adapt them for maximum capability on devices. So, for example, on a mobile device, you don’t want the notification taking up a lot of space. Since the browser vendor is sorting that out, they can figure out a way to do it outside the browser or in an unobtrusive way.
webdev  browsers  webnotifications  howto  2013 
march 2016 by Frontrunner
22 Useful HTML5 Tools for Designers & Developers
22, not 25...

01. RazorFlow: Create Responsive & HTML5 Dashboards With PHP Framework
02. Zebra: Create Desktop-Like User Interface With HTML5 Canvas
03. Workless: HTML5-CSS3 Framework for Building Cross-Browsers Websites
04. Native: HTML5 Mobile Apps Framework
05. Radi: Visual Design Application with HTML & JavaScript
06. HTML5 Bones: Boilerplate for HTML5-powered Websites
07. Literally Canvas: HTML5 Drawing Widget
08. HTML5 Sortable: HTML5 Drag and Drop For List
09. Gauge.js: Animated Gauges With HTML5 Canvas
10. Sonic: HTML5 Loaders with an Editor
11. Chart.js: Charting Library with HTML5 Canvas
12. WYSIHTML5: Rich Text Editor With HTML5 Markup
13. Percentage Loader: Attractive Loader With jQuery & HTML5
14. Howler.js: JavaScript Library For Web Audio
15. Audio5js: HTML5 Audio Library
16. Fabric.js: HTML5 Framework
17. D3-Cloud: Word Clouds With JavaScript and HTML5
18. cgSceneGraph: Animation Framework With HTML5 Canvas
19. Native Form Elements: All Form Elements in One Place
20. Font Dragr: Online Drag and Drop Font Testing Tool
21. jQuery HTML5 Uploader: Lightweight jQuery Plguin
22. HTML5 File Uploads with jQuery
webdev  webdesign  html5  tools  2013 
march 2016 by Frontrunner
HTML5 Browser Storage: The Past, Present and Future
Why Store Data on the Client?

The main reason is practicality. JavaScript code running on the browser does not necessarily need to send all information to the server. There are several use cases:

* You want to increase performance. You can cache data client-side so it can be retrieved without additional server requests.
* You have a significant quantity of client-side-only data, e.g. HTML strings or widget configuration settings.
* You want you make your application work off-line.
webdev  browsers  localstorage  performance  tutorial  2013 
march 2016 by Frontrunner
Working with Shadow DOM
As developers we often need to create widgets for interfaces that make it easier to accomplish certain tasks. These might be sliders for controlling video playback, calendar pickers for selecting dates or any other number of other useful widgets. The problem that we face when creating these widgets is how to manage encapsulation.

The widgets that we write are often reused on a number of other pages, but how do we make sure that none of the code on those pages will interfere with code used to build the widget itself. This problem of creating a boundary between the widget code you wrote and the code that will consume your widget is something that Web Components aims to solve.
webdev  shadowdom  webcomponents  2013 
march 2016 by Frontrunner
iio.js
iio.js is a JavaScript library that speeds the creation and deployment of HTML5 Canvas applications.
webdev  html5  canvas  framework 
march 2016 by Frontrunner
HTML5 Audio Tag Tutorial
HTML5 standardized the way we embed audio in websites with the Audio Tag. It’s a great tool and easy to implement.

This tutorial walks you through the steps necessary to embed music in your webpage and ensure that it plays across multiple browsers. By the end, you'll be adding music to your website like it's 1999.
webdev  html5  audio  tutorial 
march 2016 by Frontrunner
PouchDB
PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

PouchDB was created to help web developers build applications that work as well offline as they do online.

It enables applications to store data locally while offline, then synchronize it with CouchDB and compatible servers when the application is back online, keeping the user's data in sync no matter where they next login.
webdev  browser  javascript  database  twowaydatabinding  sync  localstorage  pouchdb 
march 2016 by Frontrunner
HTML5 Bookmarks
HTML5 news feed.
webdev  html5  news 
march 2016 by Frontrunner
Phaser
A fast, free and fun open source framework for canvas and WebGL powered browser games.
webdev  games  canvas  webgl  framework 
march 2016 by Frontrunner
HTML5Pattern
HTML5Pattern is a source of regularly used input patterns.
webdev  forms  input  patterns 
march 2016 by Frontrunner
Modernizr
Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.
webdev  modernizr  html  css  javascript  js  features  browser  support 
march 2016 by Frontrunner
WebRTC Made Simple
WebRTC is a set of JavaScript APIs that enable peer-to-peer, realtime communication between web browsers. It offers some pretty amazing capabilities, but getting through even a basic introduction to it can be daunting. The variety of new APIs and protocols is a lot to digest. This post is a simple guide to getting up-and-running with WebRTC.
webdev  webrtc  introduction  howto  2014 
march 2016 by Frontrunner
« earlier      
per page:    20 ‧ 40 ‧ 80 ‧ 120 ‧ 160

related tags

2d ⊕  3d ⊕  60fps ⊕  accessibility ⊕  addons ⊕  advertisement ⊕  ai ⊕  alternatives ⊕  amd ⊕  analysis ⊕  analytics ⊕  android ⊕  angular ⊕  angularjs ⊕  animation ⊕  animations ⊕  antispam ⊕  api ⊕  apple ⊕  applications ⊕  architecture ⊕  aria ⊕  articles ⊕  asmjs ⊕  assets ⊕  async ⊕  audio ⊕  audioapi ⊕  aurelia ⊕  authentication ⊕  authorization ⊕  autocomplete ⊕  babylon.js ⊕  backbone ⊕  backend ⊕  badcode ⊕  beautifier ⊕  bem ⊕  best-practices ⊕  bestof ⊕  bestpractices ⊕  bezier ⊕  blending ⊕  bloat ⊕  blobs ⊕  blog ⊕  blogs ⊕  blur ⊕  book ⊕  bots ⊕  bower ⊕  brick ⊕  browser ⊕  browserify ⊕  browsers ⊕  bugs ⊕  business ⊕  businesspractice ⊕  c++ ⊕  caching ⊕  calendar ⊕  canvas ⊕  capitalism ⊕  captcha ⊕  cataloging ⊕  cdn ⊕  certificate ⊕  cgi ⊕  characterencoding ⊕  charts ⊕  checklist ⊕  christianheilmann ⊕  chrome ⊕  cjs ⊕  clarity ⊕  class ⊕  cloudstorage ⊕  cobraeffect ⊕  code ⊕  coders ⊕  coldfusion ⊕  collection ⊕  commandline ⊕  commercial ⊕  commonjs ⊕  community ⊕  comparison ⊕  compatibility ⊕  components ⊕  compression ⊕  concurrency ⊕  conformance ⊕  console ⊕  construct2 ⊕  cookies ⊕  copyandpaste ⊕  cordova ⊕  corporations ⊕  country ⊕  course ⊕  cpu ⊕  creativity ⊕  crockford ⊕  crossplatform ⊕  css ⊕  css3 ⊕  css4 ⊕  curatedlist ⊕  customtags ⊕  d3.js ⊕  dashboards ⊕  data ⊕  database ⊕  datagrids ⊕  datainterchange ⊕  datauri ⊕  debug ⊕  debugging ⊕  decline ⊕  definition ⊕  demo ⊕  demos ⊕  design ⊕  desktop ⊕  developer ⊕  developers ⊕  development ⊕  diagrams ⊕  documentation ⊕  documents ⊕  dom ⊕  dragdrop ⊕  drawing ⊕  drm ⊕  drums ⊕  dummytext ⊕  ecmascript ⊕  economy ⊕  ecosystem ⊕  edge ⊕  editor ⊕  education ⊕  effects ⊕  efficiency ⊕  email ⊕  ember ⊕  empathy ⊕  engagement ⊕  engines ⊕  erikisaksen ⊕  error ⊕  es ⊕  es5 ⊕  es6 ⊕  events ⊕  example ⊕  examples ⊕  excel ⊕  experience ⊕  express ⊕  extensions ⊕  extraction ⊕  fail ⊕  fallback ⊕  features ⊕  fetch ⊕  fileformats ⊕  filters ⊕  firebug ⊕  firefox ⊕  flexbox ⊕  flux ⊕  fonts ⊕  formatting ⊕  forms ⊕  fractals ⊕  framework ⊕  frameworks ⊕  free ⊕  frontend ⊕  fullstack ⊕  functionaltesting ⊕  funny ⊕  fuzzy ⊕  ga ⊕  game ⊕  games ⊕  generator ⊕  github ⊕  google ⊕  googleanalytics ⊕  gpu ⊕  gradients ⊕  graphics ⊕  graphs ⊕  grid ⊕  grunt ⊕  guidelines ⊕  guides ⊕  guru ⊕  habits ⊕  hackernews ⊕  hamburger ⊕  headless ⊕  history ⊕  houdini ⊕  howto ⊕  html ⊕  html5 ⊕  html6 ⊕  http ⊕  http2 ⊕  humans ⊕  humour ⊕  i18n ⊕  iaas ⊕  iconfonts ⊕  icons ⊕  ide ⊕  ideas ⊕  imagemanipulation ⊕  images ⊕  inconsistencies ⊕  indexeddb ⊕  influencers ⊕  influential ⊕  input ⊕  inspiration ⊕  inspirational ⊕  interface ⊕  internet ⊕  interview ⊕  interviews ⊕  introduction ⊕  iojs ⊕  ios ⊕  iot ⊕  javascript ⊕  jfokus ⊕  jobs ⊕  jonathansnook ⊕  jquery ⊕  js ⊕  jscs ⊕  jshint ⊕  jslint ⊕  json ⊕  juliaset ⊕  justified ⊕  jwt ⊕  keyboard ⊕  keyevents ⊕  knockout ⊕  layout ⊕  lazyload ⊕  learning ⊕  less ⊕  libraries ⊕  library ⊕  links ⊕  lint ⊕  linux ⊕  list ⊕  localhost ⊕  localization ⊕  localstorage ⊕  login ⊕  lookup ⊕  management ⊕  manifest ⊕  markdown ⊕  marketing ⊕  markup ⊕  masks ⊕  material ⊕  math ⊕  mathml ⊕  mediaqueries ⊕  menu ⊕  meteor ⊕  meteorjs ⊕  methodology ⊕  microformats ⊕  microservices ⊕  minimal ⊕  mithril ⊕  mobile ⊕  modernizr ⊕  modules ⊕  mongodb ⊕  mongoose ⊕  morphing ⊕  mozilla ⊕  mutation ⊕  mvc ⊕  myths ⊕  naming ⊕  namingconvention ⊕  navigation ⊕  network ⊕  news ⊕  node ⊕  nodejs ⊕  noscript ⊕  npm ⊕  oauth ⊕  obfuscation ⊕  objects ⊕  observers ⊕  offline ⊕  offlinefirst ⊕  online ⊕  oop ⊕  open ⊕  openstandard ⊕  openstandards ⊕  opinion ⊕  optimization ⊕  paas ⊕  packagemanager ⊕  paint ⊕  parallax ⊕  parsing ⊕  parsley ⊕  passwordmanagers ⊕  passwords ⊕  patterns ⊕  payment ⊕  payments ⊕  performance ⊕  permissions-api ⊕  pixelart ⊕  placeholdertext ⊕  player ⊕  plugin ⊕  podcasts ⊕  pointers ⊕  polyfill ⊕  polyfills ⊕  polymer ⊕  postit ⊕  postprocessor ⊕  pouchdb ⊕  precompiler ⊕  preprocessor ⊕  prepros ⊕  presentationdeck ⊕  presentations ⊕  privacy ⊕  privacybydesign ⊕  production ⊕  productivity ⊕  programming ⊕  progressiveenhancement ⊕  promises ⊕  proscons ⊕  protocol ⊕  protocol-buffers ⊕  prototype ⊕  ps4 ⊕  psychology ⊕  push ⊕  qa ⊕  questions ⊕  quirks ⊕  r ⊕  railo ⊕  range ⊕  rant ⊕  react ⊕  reactjs ⊕  recaptcha ⊕  recommendation ⊕  recommendations ⊕  reference ⊕  regressiontesting ⊕  rendering ⊕  report ⊕  requestanimationframe ⊕  requirements ⊕  resources ⊕  responsibilities ⊕  responsive ⊕  rest ⊕  restful ⊕  ria ⊕  rsa ⊕  rwd ⊕  saas ⊕  safari ⊕  sass ⊕  scaffolding ⊕  scaling ⊕  scraping ⊕  screencasts ⊕  sdk ⊕  search ⊕  security ⊕  selectors ⊕  selecttext ⊕  semantic ⊕  service ⊕  serviceobjects ⊕  serviceworkers ⊕  sessionstorage ⊕  shaders ⊕  shadowdom ⊕  simulation ⊕  singlepageapplications ⊕  skills ⊕  slidedeck ⊕  slidedecks ⊕  snook ⊕  socketio ⊕  socketpeer ⊕  software ⊕  solutions ⊕  sounds ⊕  soundscript ⊕  sourcemaps ⊕  specifications ⊕  speech ⊕  speechrecognition ⊕  speed ⊕  spinners ⊕  spreadsheets ⊕  ssl ⊕  stackoverflow ⊕  standards ⊕  statistics ⊕  status ⊕  strings ⊕  styleguide ⊕  support ⊕  surveillance ⊕  svg ⊕  symbols ⊕  sync ⊕  synthesis ⊕  table ⊕  tables ⊕  tablet ⊕  taskforce ⊕  taskrunners ⊕  technology ⊕  template ⊕  templatestrings ⊕  testing ⊕  text ⊕  textures ⊕  themes ⊕  thirdparty ⊕  thoughts ⊕  three.js ⊕  timeline ⊕  tips ⊕  tool ⊕  toolkit ⊕  tools ⊕  tooltip ⊕  tracking ⊕  transform ⊕  tricks ⊕  truncation ⊕  tutorial ⊕  twitter ⊕  twowaydatabinding ⊕  typography ⊕  ui ⊕  url ⊕  urls ⊕  usability ⊕  usb ⊕  user ⊕  utf8 ⊕  utilities ⊕  ux ⊕  validation ⊕  vanilla ⊕  variables ⊕  versioncontrol ⊕  video ⊕  videos ⊕  virtualdom ⊕  virtualreality ⊕  vision ⊕  visualization ⊕  vr ⊕  w3c ⊕  web ⊕  web20 ⊕  webapplications ⊕  webassembly ⊕  webaudio ⊕  webcomponents ⊕  webcredits ⊕  webdesign ⊕  webdev ⊖  webdevelopment ⊕  webgl ⊕  webnotifications ⊕  webpack ⊕  webpayments ⊕  webrtc ⊕  website ⊕  websites ⊕  websockets ⊕  webspeech ⊕  websql ⊕  webusb ⊕  webworkers ⊕  whitespace ⊕  wiiu ⊕  will-change ⊕  windows ⊕  workflow ⊕  xboxone ⊕  xhr ⊕  xpath ⊕  xtags ⊕  yeoman ⊕ 

Copy this bookmark:



description:


tags: