Fresh Resources for Web Developers – Oct 2017

This month Fresh Resouces is going to be a bit opposite than a prior months. We, web developers, are creation a vital in a fast-changing industry, and I’ve seen a lot of announcements from some of a biggest tech companies such as Google, Microsoft, Firefox, and PHP, that will change a proceed we build a web.

In this installment, half of a list is going to be about these announcements. So, be prepared to contend hello to a future!

Essential Image Optimization

It’s an exhaustive essay to optimize an picture for a web created by Addy Osmani. It’s not like other write-ups that revolve around how-to, or a do’s and don’ts only.

This essay indeed walks we by a technical sum as good as a science behind a optimization. You’ll also find consummate information on several optimization approaches and picture formats, tools, tips, and some real-world examples.

Images Guide website homepage and iconsImages Guide website homepage and icons

PHP 7.2

A endless reference on what’s entrance to PHP 7.2. Aside from additions that urge PHP focus performance, PHP 7.2 also comes with depreciation in that several things are going to be removed and should no longer be used.

In PHP 7.2, there dual functions that are going to be deprecated namely create_function() and __autoload(). If you’re a web developer, review your formula and make required changes. I’ve seen countless WordPress plugins that are still regulating these dual functions.

PHP 7.2 IllustrationPHP 7.2 Illustration

Web Share API

I overtly did not see this API entrance to a web. However, as half of a communication on a web is about “sharing”, this API will severely make things easier for web developers to build a local pity experience, quite on a mobile platform.

This API is now only permitted in Google Chrome for Desktop and Android. Check out this Youtube video to see it in action.

Web Sharing API demo in mobile phone.Web Sharing API demo in mobile phone.

Image Async Attribute

Another thing that will change a web is a async charge for a img element. At a time of writing, there are a handful of approaches to load picture asynchronously that involves a small pretence of JavaScript. Soon we will be means to usually supplement async=on onto a img element.

img-asyncimg-async

Firefox Quantum

Mozilla has been aggressively pulling updates to Firefox with some improvements, code-named “Project Quantum”. It includes Quantum CSS – a new engine for extremely quick CSS rendering, a new UI, and new DevTools.

The recover is gaining traction in web developers and some have already switched their categorical browser to Firefox. There are some-more to come in this plan including Quantum DOM and WebRender. Are we going to see Node.js contender formed on Firefox Quantum engine? Well, maybe yes.

firefox-quantumfirefox-quantum

MS Edge for iOS and Android

Microsoft has usually announced to release a latest browser, Edge, to iOS and Android. This means there is one some-more browser for your websites to exam with.

msedge-ios-androidmsedge-ios-android

Gutenberg

WordPress is now on an desirous project, formula named Gutenberg. Gutenberg is a facelift to WordPress editor built roughly wholly with JavaScript.

At this point, Gutenberg is built with React though a plan is deliberation another horizon like Preact, Vue, or something else. It’s a difficult conditions for now. So, for WordPress developers building themes and plugins, keep your eyes on a plan as it will change a proceed we build WordPress forever.

gutenberggutenberg

FoitFout

FoitFout is a permitted apparatus to review dual opposite approaches supposed FOIT and FOUT to load tradition fonts on a web. With this tool, we are means to obey a dual approaches and confirm that proceed is a best fit for your site.

foit-foutfoit-fout

Vuera

Vuera is a JavaScript library that allows we to use Vue and React together. You can embody a Vue member from a .vue or use a React member in Vue. Your group can now be more prolific with any framework that they cite to use.

vueravuera

Draggable

“Draggable” is illusory library from Shopify. It is built on tip of local browser Drag-n-Drop API and allows we an endless API to work with. In case, it does not yield something that we need, we can write a custom procedure to extend a functionalities. Check out a demo to see how it works.

draggabledraggable

FlowchartJS

As a name implies, FlowchartJS is a library that allows building a flowchart like in PowerPoint. Similarly, we can emanate several shapes of draft including circle, ellipse, square, diamond, triangle, etc.

flowchartjsflowchartjs

FrontEnd Checklist

A handful of checklist to build HTML pages subsequent from years of experience. The checklist covers a several sections of a web page such a conduct tag, CSS, JavaScript, Accessibility, Performances, and even SEO.

frontend-checklistfrontend-checklist

QuickBill

A lightweight and straightforward web focus to emanate an invoice. It uses local browser technologies and APIs to run so no comment is needed. Simply go to a website, supplement a equipment to a invoice, and beget a PDF file. That’s it!

quickbillquickbill

Mocka

Mocka is a content placeholder that we can use for prototyping website. It’s usually 500 bytes and entirely customizable. You can simply embody it in your project’s CSS record by regulating a Sass mixin.

The CSS provides a series of classes including mocka-media to emanate an picture placeholder, mocka-heading to emanate a Heading, and mocka-text to emanate an capricious text.

mocka-placeholdermocka-placeholder

VueStar

VueStar is a Vue member to supplement a stimulating outcome when we click on an icon, identical to what Twitter does with a “heart” idol in their mobile app. The member introduces a new member named vue-star where we can supplement it in a web age. And you’re done!

vuestarvuestar

Grid Playground

CSS Grid introduces a new judgment on a web to build a blueprint and it’s kind of formidable during initial peek given a countless new properties it has.

GridPlayground is fundamentally a Mozilla beginning to learn CSS Grid and to pull CSS Grid adoption forward. Even Firefox brings a new apparatus to a DevTools to check Grid layout.

grid-playgroundgrid-playground

Snippet Manager

“Snippet Manager” is a elementary app to store and conduct formula snippets. You can emanate a new item, pulp a code, and set a point. At this point, zero too imagination and it usually provides a source formula that we will need to accumulate regulating NPM.

snippetsnippet

IBM Plex

A new font family designed by IBM called IBM Plex that also sets character guides in IBM corporate typography. It consists of 3 typeface Sans-serif, Serif, and Mono. The gold also comes with a rise for a Sketch App.

ibm-typeibm-type

Tabbed Interface

A good walk-through on building on-going and permitted add-on navigation with minimal use of JavaScript. A good apparatus for those who wish to learn some-more about permitted design.

tabbed

SwissInCSS

SwissInCSS exhibits several of classical Swiss print designs regulating nothing though CSS. The source formula is permitted in CodePen.

swissincssswissincss

Add Comment