Wednesday, July 31, 2019

Master Modern JavaScript with This Curated Reading List

Are you daunted by the complexity of the JavaScript ecosystem? Are you still writing ES5, but looking for an opportunity to embrace modern standards? Or, are you confused by the explosion of frameworks and build tools, and unsure what to learn first? Fear not, here are my handpicked selection of books from SitePoint Premium, intended to help you well on your way to mastering modern JavaScript.

JavaScript: Novice to Ninja, Second Edition

I've placed this book at the top of my list, as it has something for almost everybody. It starts by covering the fundamentals (and thus serves well as a desk reference), then moves on to tackle more advanced topics, such as testing and functional programming.

The second edition has been updated to cover ECMAScript 6 and does a great job of introducing you to its more common features. You also get to put your newly acquired knowledge into practice at the end of each chapter, as you build out a quiz app, adding features as you move through the book. I really like this project-based approach to learning and think it is one of the better ways to advance your programming skills.

For those who just want to dip, I'd recommend reading the Modern JavaScript Development chapter. This will bring you up-to-date with many of the recent developments, such as working with modules, and the hows and the whys of transpiling your code.

Read the book

Practical ES6

This anthology picks up where Novice to Ninja left off and allows you to dive deeper into many of the newer additions to the JavaScript language. It covers much of the basic syntax (e.g. const, let, arrow functions, etc...), and offers a great way to get up to speed in a particular area.

There are also more in-depth articles on topics such as ES6 classes and ES6 modules, as well as a look at what came down the pipeline in ES2017 and ES2018. And if you're starting to get confused about what all these version numbers mean, we've got you covered. The anthology packs a chapter on JavaScript versioning and the process of deciding what gets added to the language.

Read the book

A Beginner's Guide to npm - the Node Package Manager

npm is a package manager for JavaScript, similar to PHP's composer, or Perl's CPAN. It allows you to search an online database of packages (a.k.a. the registry) and install them on your machine. The npm registry is vast — containing over 600,000 packages — and I think it is fair to say that it has revolutionized the way JavaScript developers collaborate with each other.

This short book from our Developer Essentials series has made the list because npm is something you cannot ignore if you are serious about writing JavaScript in 2019. The guide walks you through getting npm installed and configured (which can sometimes be a tad tricky) and using it effectively in your day-to-day work. If you're going to learn just one JavaScript tool in 2019, make it npm. You'll encounter it in tutorials everywhere and it is the standard delivery mechanism for almost any modern JavaScript library out there.

Read the book

JavaScript: Best Practice

Now that we've had a look at the basics, it's time to kick it up a notch with some JavaScript best practices. This anthology is full of tips and tricks to help you write modern JavaScript that is performant, maintainable, and reusable. It's hard to pick favorites from so many great titles, but there are two articles that stand out.

The Anatomy of a Modern JavaScript Application takes a good look at how to build a JavaScript application in 2019. It covers everything from application architecture to deployment and will help you to order many of the concepts and buzzwords you may have heard floating about.

Flow Control in Modern JavaScript introduces you to a variety of strategies for dealing with asynchronous JavaScript in a modern code base. It looks at one of my favorite additions to the language — async await — and dispels the myth that writing a JavaScript web app will automatically land you in callback hell.

Read the book

Node.js Web Development, Fourth Edition

No journey through modern JavaScript would be complete without a look at how to run it on the server. And this book gives you an excellent starting point, bringing you straight to the heart of developing web applications with Node.js.

As you follow along you'll build and iterate on a note taking app. This will form the basis for learning all about real-time applications, data storage, user authentication, deployment with Docker and much more. And even if server-side development isn't your thing, I'd still recommend reading the first couple of chapters. These will give you a good idea where Node fits in to today's JavaScript landscape.

Read the book

The Versioning Guide to Modern JavaScript

To finish we have The Versioning Guide to Modern JavaScript, which is really a large collection of links taken from the much-missed Versioning newsletter. I've included this, as there's so much going on in the world of modern JavaScript development, that I've barely been able to scratch the surface here. I'm confident that this guide will offer you a wealth of ideas and inspiration on what to dig into next.

Read the book

And that's a wrap. I hope this curated list goes some way to helping you navigate the choppy waters of modern JavaScript development.

The post Master Modern JavaScript with This Curated Reading List appeared first on SitePoint.


by James Hibbard via SitePoint

Another round of Instagram updates by our favorite tipster Jane Manchun Wong

As always our favorite social media apps sleuth Jane Manchun Wong brings us latest updates – long before the company reveals them. This time the platform under her radar is Instagram. According to her tweets, the Facebook-owned app is working on using AI technology to suggest the best pictures...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Saima Salim via Digital Information World

Cropme : JavaScript Image Cropper Plugin

Cropme is a customizable and easy to use javascript image cropper plugin.

Features:

  • Two-dimensional translation
  • Scaling
  • Free rotation
  • rotation and scale around the image center or the viewport center
  • Multi-touch support (pinch-zoom, two finger rotation, …)
  • Base64 and blob exportation
  • Multiple croppers

The post Cropme : JavaScript Image Cropper Plugin appeared first on Best jQuery.


by Admin via Best jQuery

Smooth Scrolling Image Effects with CSS & Tweenmax

A small set of ideas on animating images and other elements while smooth scrolling a page. We’ve made a small set of effects that show how you can apply some interesting transforms to elements like images and text while scrolling the page smoothly.

The post Smooth Scrolling Image Effects with CSS & Tweenmax appeared first on Best jQuery.


by Admin via Best jQuery

Using the web on a 50 MB budget

#402 — July 31, 2019

Read on the Web

Frontend Focus

I Used The Web For A Day On A 50 MB Budget — Data can be prohibitively costly, especially in developing countries. Chris Ashton puts himself in the shoes of someone on a tight ‘data budget’ and offers (a lot of) practical tips for reducing our own sites’ footprint. There is genuinely a lot of useful stuff in this post — read it! (And I might be showing my age here but I remember when aiming for 30KB total was a thing..!)

Chris Ashton

Form Design: From Zero to Hero All in One Blog Post — A quick and to-the-point guide for designing forms that “everyone can use and complete as quickly as possible”.

Adam Silver

Image & Video Management Made for Front-End Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today.

Cloudinary sponsor

The Real 'Dark Web': The Quiet Majority of Web Developers? — An interesting opinion piece that reflects upon the quiet majority of Web developers, and how the minority of developers using cutting edge tools and techniques are not truly representative.

Charlie Owen

Sites Could Be Liable for Helping Facebook Secretly Track Your Web Browsing, Says EU Court — The argument is that users should have to consent to being tracked with 'Like' buttons.

Adi Robertson

New (US) Bill Would Ban Autoplay Videos and Endless Scrolling — US lawmakers are taking aim at Web-based features that are ‘designed to be addictive.’ Early days, but this could become a commonly discussed topic in years to come.

Makena Kelly

💻 Jobs

Senior UI Designer (Munich) — Shape the product design of the leading digital wealth management FinTech in Europe, located in the heart of Munich.

Scalable Capital GmbH

We’re Trusted by Over 100k Developers to Help Them Find Their Dream Job — Get matched with companies like Apple, Skyscanner and KPMG based on your skills. They apply to you, salary upfront and no recruiters.

hackajob

📙 Articles, Tutorials & Opinion

Creating an Accessible Inline List with Bullets Between Items — Basically a horizontal list with a character between each item, a · bit · like · this.

Artem Sapegin

output: HTML's Native Live Region Element — A look at the output element and it’s suitability for creating a native toast element (plus accessibility considerations and quirks).

Scott O'Hara

▶  Design System Magic with CSS Houdini — A look at how Houdini features can be used in your design systems today.

Samuel Richard

Backend for Frontend – How to Develop Custom SPAs with Tailored API — Need to refresh your software without breaking the business logic on the backend? Introduce the Backend for Frontend.

The Software House sponsor

An Overview of CSS Animation Libraries — A look at the current landscape of CSS animation libraries and how they vary.

Chris Coyier

▶  Writing Tests For CSS Is Possible! Don’t Believe The Rumors — Overcoming “egoprogrammophobia” by writing tests to refactor your CSS.

Gil Taylor

How to Add Flexbox Fallback to CSS Grid — Adding a flexbox fallback to a calendar built with CSS Grid.

Zell Liew

Quick Tip: Responsive Iframes — What you need to do to make an iframe responsive on a website. It’s trickier than it looks and CSS is definitely involved.

Chris Coyier

The State of JavaScript: 2019 and Beyond. Get the Whitepaper

Progress Kendo UI sponsor

Why You Should Definitely Learn How to Use CSS-in-JS

Brent Jackson

🔧 Code, Tools & Resources

A Satisfying Liquid Simulation — Merges WebAssembly and WebGL together. Shake the window about to see it in action. Uses the LiquidFun engine and the regl WebGL library.

Lorenzo Cadamuro

A Web Tool to Create 'Striped Text' and Get Styled Components Code — One of several visual design tools on Components.ai. This one lets you dynamically create a stripy text effect and provides CSS and Styled Components code to use in your apps.

Components.ai

x-autosuggest: Autosuggest Results Based On Input — A JavaScript autosuggest input. Here’s a demo.

Ivan Nikolić

Gradient Magic — A growing gallery of unique CSS Gradients.

Jordan Marshall

   🗓 Upcoming Events

WebAIM: Web Accessibility Training, August 13-14 — Logan, Utah — Covers everything from basic web accessibility principles to advanced accessibility techniques.

Front Conference, August 29-30 — Zurich, Switzerland — A two-day double-track conference for everyone involved from concept to implementation.

Web Unleashed 2019, September 13-14 — Toronto, Canada — Covers a variety of front-end topics leaving you 'informed, challenged and inspired'.

CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS.

🐦 ...and finally

A good reminder that it's always worth knowing about the actual technology you're using as well as the interfaces to it. A bit like knowing how to add by hand as well as how to use a calculator..


by via Frontend Focus

Twitter is Not Just for Social Media Justice Warriors

There are a lot of things that come to mind when one thinks of Twitter. One of the most pervasive images that one would generally get when one thinks of Twitter is one of political divisiveness, toxic call out culture and a general cesspool where good conversations go to die. If you think about the...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Zia Zaidi via Digital Information World

Digital Advertisers Are Now After Kids! (Stats Inside)

Let’s go back to our childhood. What are the things that you can instantly think of when you wanted digital entertainment back in those days? Chances are that the answer to this would be only Television. There were limited channels, time and even permission to sit in front of the TV for your...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Daniyal Malik via Digital Information World