This Week's HTML5, CSS and Browser Tech News #283


Eric Meyer looks at the process behind converting existing designs to CSS Grid without breaking non-supporting browsers.

Eric Meyer

Addy Osmani digs deep into Chrome’s networking stack to see how features like link preloading and prefetching work, and how you can use them more effectively.

Addy Osmani

Rather than breaking out of container DIVs, you can pad/margin all non image/video elements instead.

Dave Rupert


Progress

Kendo UI delivers everything you need to build modern web applications under tight deadlines – from the must-haves Data Grids & DropDowns to Spreadsheet & Scheduler. Choose from 70+ UI components and combine them to create beautiful, responsive apps.

Progress
  Sponsor


The macOS browser now supports the Fetch API, IndexedDB 2.0, the Gamepad API, Input Events, Custom Elements, CSS Grid, HTML5 form validation, and more.

Apple

Toggling classes with checkboxes, editing content with designMode, hiding elements, screenshots, color changes, and more.

Ahmad Shadeed

A fun, creative coming together of Canvas, the Web Audio API, the Commodore 64 & NES.

Greg Hovanesyan

A demo of how the SpeechRecognition and SpeechSynthesis interfaces of the Web Speech API can be used to create a voice assistant for a website.

Suvi Vignarajah

Jobs Supported by Hired.com

Can’t find the right job? Want companies to apply to you? Try Hired.com.

In Brief

Faster 3D Rendering with WebGL 2.0 news
Google

CSS Custom Properties in Microsoft Edge news
As of EdgeHTML 15, Microsoft Edge supports CSS Custom Properties.
Greg Whitworth

Discover How to Write Apps in Angular with Rangle’s Online Sessions course
Register to join Rangle’s FREE Angular online training course for JavaScript developers on Apr 4-5.
Rangle.io  Sponsor

A Complete Guide to CSS Grid Layout tutorial
Chris House

Build a Shifting Underline Hover Effect With CSS and JS tutorial
George Martsoukos

Using matrix3d() for Frame-Perfect, Jank-Free Custom Scrollbars tutorial
Google Developers

You ‘Kinda’ Can Use Custom Fonts in HTML Emails tutorial
Sorry, no Gmail, but Apple and iOS Mail and others have support.
Chris Coyier

Is Using SVG Images Good for Your Site’s Performance? opinion
Maria Antonietta Perna

8 CSS Gotchas to Start Your Morning Off Right opinion
A tongue-in-cheek critique of CSS from someone who’s clearly been burnt by its quirks. 🙂 (Haven’t we all?)
Isaac Lyman

Track errors in your apps with Sentry tools
Sentry’s open-source error tracking tells you when your code breaks, without the need for bug reports.
sentry  Sponsor

HTMLMinifier: JavaScript-Based HTML Compressor/Minifier tools
Juriy Zaytsev

Polished: A Lightweight Toolset for Writing Styles in JavaScript tools
Maximilian Stoiber

Pushy Button: CSS Pressable 3D Buttons code
Dronca Raul

Emerge: Declaratively Coordinate How Elements Appear on Page Load code
Ilya Birman

Choices: Configurable Select Box and Text Input (without jQuery) code
Similar to Select2 and Selectize but without the jQuery dependency.
Joshua Jackson

A Self-Truncating Horizontal List Without Using JavaScript demo
I won’t spoil it but figuring out how this works is fun.
CodePen

A Facebook Live-Style Bouncing Emoji/Reaction Effect demo
CodePen



Source link

Web Tools #193: Is ES6 an Abomination? (Plus JS and Git Tools)


Web Tools Weekly

What a Tool!

Adobe XD

Is ES6 an abomination? Well, one Hacker News reader thinks so. Here is an interesting comment posted during a discussion of a new JavaScript book:

“JavaScript was a great beginner language, but it has now been ‘professionalized’ with ES6, requiring insane build chains, transpiling, shims, all this stuff just to run a basic web site. JavaScript has been ruined by professional programmers (mostly Rubyists) who never learned how to use the object model, or how to structure functional code well. So we get ES6 classes and promises and async and all of this junk that makes the language impossible to build and debug. And I say this as a full time JavaScript programmer of ~5 years, after ~5 years of Ruby. I love both classic JavaScript and Ruby, but ES6 is an abomination.”

That’s pretty harsh. I don’t necessarily agree with it, but I can absolutely see where the commenter is coming from. This goes back to the overwhelming nature of tooling in the JavaScript ecosystem, so the basic concern is nothing new. But I found it interesting that this person specifically targeted ES6.

I think a lot of us who got used to writing ES5 and lower, and who figured out how to do pretty much anything long before ES6 can understand why it feels superfluous to add so many features and tools to basically accomplish some of the same things.

But I think the case for ES6 is pretty solid, especially for complex web apps that involve functionality that we wouldn’t even consider building in the past. So while the sentiment of the comment above is understandable, I don’t think it’s correct. Especially when you consider that nobody is being forced to use ES6. We can basically pick and choose the features we want, adding new ones as we get more comfortable, and out of necessity.

Now on to this week’s tools!

CodePen Projects is Here!
Your own sidebar of files! If you’ve ever felt limited by only having one editor pane for HTML, CSS, and JavaScript, now you can create a Project instead, and have an environment more like what you are used to on a desktop IDE.
Learn All About Projects

Adobe XD


JavaScript Modules and Utilities

Purser
A lightweight JavaScript library for preserving user data from first website visit to signup.

Store.js
Cross-browser local storage for all use cases. Now at version 2.x.

walletjs
A little library to handle money amounts.

asynquence
Promise-style asynchronous sequence flow control.

Waypoints
The easiest way to trigger a function when you scroll to an element.

multi.js
A user-friendly replacement for select boxes with multiple attribute enabled.

gotem
Copy to clipboard for modern browsers in less than 1kb.

Diffy.js
A dependency-free motion detection library for the browser.

Rellax
A buttery smooth, super lightweight (1021bytes gzipped), vanilla JavaScript parallax library that works on mobile.

Git, GitHub, and Command Line Tools

Caporal.js
A full-featured framework for building command line applications with node.js.

gitly
Fast, self-hosted development service with unlimited private repos or use their inexpensive paid plan.

Lepton
A lean GitHub Gist client.

GVFS
Git Virtual File System. Virtualizes the file system beneath your Git repo so that Git and all tools see a fully hydrated repo, but GVFS only downloads objects as they are needed.

Teleconsole
A free service to share your terminal session with people you trust. Your friends can join via a command line via SSH or via their browser over HTTPS.

gitmoji
An emoji guide for your commit messages.

awless
A fast, powerful and easy-to-use command line interface (CLI) to manage Amazon Web Services.

axe-cli
A command-line interface for the aXe accessibility testing engine.

Databases, JSON Tools, etc.

Ragic
Data management that actually works. Build real-world enterprise applications with simple Excel-like interface.

jsonbin
A personal JSON store as a RESTful service.

RxDB
Client-Side database for browsers, Node.js, Electron, Cordova, React Native and every other JavaScript run-time.

nearley.js
Parsers turn strings of characters into meaningful data structures (like a JSON object). nearley is a fast, feature-rich, and modern parser toolkit for JavaScript.

mermaid
A simple markdown-like script language for generating charts from text via JavaScript.

Visdown
Create data visualisations using only markdown.

json.browse
Allows you to browse, prettify, filter and manipulate JSON right inside your browser.

excelJSON
Convert CSV, TSV to JSON. JSON to CSV, TSV.

A Tweet for Thought

Scott Hanselman’s tweet from 2012 is still a good reminder today.
 

Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go…

You might want to follow Intent To Ship, a Twitter account that tweets when browser makers announce their intent to ship, change, or remove features.
 

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly

 



Source link

What is Comr.se?



Unlock True Omni Commerce. Extend your dot.com into social streams & display ads to meet your consumers where they choose to meet you. Find out how Comr.se works today & request an invite at http://comr.se.

Likes:

Viewed: 3102

source

This week's JavaScript news, issue 328


Glimmer’s fast components can be used outside of Ember but could also provide an easy way to gradually pick up the framework. There’s a great intro video.

Ember.js Project


A fun journey into the world of fractals, starting from an empty canvas and going through the math and logic involved in rendering a Mandlebrot set of your own.

Jeff Fowler


4.0.0 (‘invisible-makeover’) is here. Backwards compatible with Angular 2 and most apps will port straight over unless they use animations. Also learn why it’s 4.0 and not 3.0.

Stephen Fluin


GrapeCity

Find out how Wijmo’s advanced UI components can help you to create an Angular application quickly and efficiently – we take you through step-by-step.

GrapeCity
  Sponsor


Some straightforward examples of using ES2016’s async/await vs promises. async/await are natively supported in Node 7.6, as well as via Babel.

Mostafa Gaafar


A crash course in DOM manipulation with vanilla JavaScript, using methods like querySelectorAll and addEventListener.

Sebastian Seitz


Iterators can be written using generators which can lead to an interesting use case.

Nicolás Bevacqua


Elegant and well documented, with many examples on the homepage. No dependencies.

Federico Zivolo


Node Weekly

Jobs Supported by Hired.com

  • Software Engineer, Web – RemoteStatement Campus is a fully remote company. The right candidate will be responsible for building and maintaining high performance web applications with cutting-edge technologies. Statement Campus
  • Full-Stack JavaScript Developer (m/f) – Berlin, GermanyLet’s help content creators get paid. We’re blogfoster: the leading influencer marketing platform in Europe and we would like to hire you. React, Redux, and Node: It’s JavaScript all the way down. blogfoster GmbH
  • Software Engineers – The free press needs youDemocracy only works when everyone knows enough to make good decisions. We’re here to make sure that they do, and we need your help. Schibsted

Can’t find the right job? Want companies to apply to you? Try Hired.com.

In Brief

A New Proposed Policy on JS Dialogs for Chromium news
“the Chromium team highly recommends that you not use JavaScript dialogs”
Google

Pluralsight Releases ‘Getting Started with Ember 2’ Course news

77% of Sites Use At Least 1 Vulnerable JS Library news
Snyk

Using Source Maps to Debug Errors tutorial
Let’s talk JavaScript Source Maps. What are they? How can you enable source mapping? Why aren’t they working?
ROLLBAR  Sponsor

Tuning Angular’s Change Detection tutorial
Juri Strumpflohner

Maybe You Should Use ‘Maybes’ to Wrap Optional Values tutorial
Alexander Jarvis

Creating an Angular 2 Injectable Service tutorial
Compares creating and registering services in Angular 1.x vs 2+.
Todd Motto

Creating Mondrian-Style Grid Paintings with JavaScript tutorial
Max Halford

How to build a ‘who’s typing’ feature in JavaScript tutorial
We’ll walk you through how to build a ‘who’s typing’ feature in a chat app using Pusher with JavaScript.
Pusher  Sponsor

Dr. Axel’s JavaScript Coding and Style Tips (2014) video
A golden oldie.
Axel Rauschmayer

JavaScript Framework Battle: ‘Hello World’ in Each CLI opinion
A look at how framework command-line interfaces compare to each other.
Shane Osbourne

5 ES8 Features and A Wishlist for ES9 opinion
Dylan Schiemann

Fuel: A Beta/In-Progress React-Compatible Virtual DOM Implementation tools
Taketoshi Aono

Polished: A Lightweight Toolset for Writing Styles in JavaScript tools
Maximilian Stoiber

Choices: Configurable Select Box and Text Input (without jQuery) code
Similar to Select2 and Selectize but without the jQuery dependency.
Joshua Jackson

FSM-as-Promised: A Finite State Machine Library built on ES6 Promises code
Vlad Stirbu

D3-Node: Server-Side D3 for Static Chart/Map Generation code

TypeScript Example Boilerplate Demonstrating a Modern Tool Pipeline code
“TypeScript + Visual Studio Code + Jest + Yarn + TypeDoc = Eternal bliss”
Mark Bauermeister



Source link

Issue #258






Source link