Web development reading list 10-2018: React, Redux, Drupal, Gatsby & UX Trends

Oct 28, 2018

Joris Snoek - Business Dev
+31 (0)20 - 261 14 99

Articles that we encountered last month that proved to be worth reading fully, or to delve deeper into. Here you go:

Web development

Learning machine learning

Gwendolyn Faraday describes the best resources with which she learned machine learning: tools, libraries, mathematics, deep learning and blogs are discussed.

Build a simple API service with Node.js, Express.js and GraphQL

GraphQL is getting pretty popular, time to keep up? Do so by building this simple API service in Node.js, Express.js using GraphQL.

Drupal 8.6.0 came out

The latest major version of Drupal was recently released. This brought the most significant Drupal 8 update to date. Among other things, the following components were implemented:

  • media library;
  • workspaces;
  • more layout options;
  • demo content;
  • support for MySQL 8.

(Drupal 8.6.2 is now the most recent version)

Web security

  • Snyk, a great tool to keep open source installations up-to-date with the latest necessary security updates. We used it earlier for various Node.js / npm / Express.js installations, Snyk did the correct updates within a few minutes. It only updates the essential security stuff so that you do not need update to update and avoid unnecessary conflicts -and work. Snyk optionally keeps you informed by e-mail if there are updates for your node.js installation.
  • Brendan McMillion from Cloudflare shows how they guarantee end-to-end integrity for their IPFS gateway (a distributed, decentralized web protocol). A very interesting insight into the future of the web.

Why Firebase sucks

Bad experiences with uptime and customer service - Saul Costa wrote this blog about the popular realtime database from Google Firebase. This is mainly used for mobile apps, for example to push notifications. Dutch alternative Appsignal is mentioned as a good alternative.

Cloud monitoring

Via Statusgator you can receive notifications on downtime of more than 360 cloud apps and services. Stay informed through a status dashboard or integrate your apps. A handy tool for when your platform depends on one of these cloud services, for example.

What is React

For those who are not completely up to speed, a simple explanation of React.

Web performance

  • In this comprehensive guide for tracking performance issues, Nolan Lawson shows how we accurately measure front-end web performance and how the rendering pipeline of modern browsers works.
  • How can you build a website that works well and is fast on low-tech devices with as few resources as possible? Low-Tech Magazine wanted to discover this and built their website on an interesting approach to conserve as many resources as possible. Cool side thing: the website goes offline when there is not enough sun to power the 2.5 Watt solar panel, which supplies the server with power.

CSS

Gatsby 2.0.0 released

Gatsby is a modern website and app generator. It is used for creating super-fast online platforms, websites and apps;

It is a so-called static site generator used by these platforms, among others:

The recent release V2.0.0, is the result of months of hard work by the core team of Gatsby and 315 contributors.

This release mainly focuses on performance and the developer experience. Some highlights:

  • Faster development (up to 75%)
  • The runtime of the JavaScript client decreased by 31%
  • The most important dependencies of Gatsby have been updated to the latest versions: Webpack 4, Babel 7, React 16.5

Source 2.0 release

https://www.gatsbyjs.org/

What is Redux: a manual for designers

Using this article you get a complete picture of Redux: what it can do, what the disadvantages are, when to use it and how it relates to design.

The article is aimed at designers, but also interesting as an introduction for everyone who works in web development business. It describes, among other things:

  • State management.
  • Obtaining and saving data.
  • Assigning data to UI elements.
  • That Redux is not only available for React, but with every front-end framework: Ember.js, Angular and even jQuery or standard JavaScript.

It also describes the forces behind Redux, which are reasons to implement it on top of React:

  • Forcing code standards.
  • Dispatching an action: as a developer you first have to describe what you are going to do before you can develop it.
  • Your code that modifies data must behave like a mathematical formula. It must return the same result with the same input. 4² is always 16, no matter how often you perform it.

Partly because of this, you can create powerful functions for the end user, which are otherwise complex to implement:

  • Undo, redo functions.
  • Collaboration in one environment, similar to Google docs.
  • Optimistic User Interface: instant response to an end user action, assuming the action will go well in the backend.
  • Persistent and booting up from state Redux makes it easy to store everything that happens in the app. If you reboot you can go directly through where you ended.
  • Very expandable: you can hook it up neatly on all the actions in the system.
  • Automatic bug reports.

Disadvantages of Redux:

  • Steep learning curve.
  • You must write boilerplate code every time.
  • Performance.

Read the whole article here.

Design andUX

UX Design Trends for 2018

An interesting overview of which UX trends we saw in 2017 and which have the upper hand in 2018.

Producing meaningful front-end micro-interactions

Denislav Jeliazkov describes the importance of micro-interactions and how to design them well to make the difference between your app and that of the competitor.

Free fonts

A nice collection of freely available fonts on Behance.

Free stock photos

We all know platforms like Unsplash, Pexels, Pixabay and Stocksnap, but Freephots.cc is certainly worth it.

How to change mobile UX for Phablets

What is a Phablet, what is the user interaction like and how to design for such a device. Check it here

Teamwork, Productivity & Life

The Little Handbook for Getting Stuff Done

Zen Habits hero Leo Babauta is the only blogger whose articles I read all the way through. His most recent is no exception, in The Little Handbook for Getting Stuff Done he describes how you can get things done without fuss. He rightly points out that productivity and efficiency are not the key to a good life, but that they do help. Some things that he named:

Benefits of 'getting stuff done':

  • Get more done, obviously
  • Believe more in yourself
  • Become more reliable
  • Spread ideas

Things that can stand in the way:

  • Getting uncomfortable
  • Constantly switching to other tasks
  • Perfectionism
  • Other people
  • Distractions and interruptions
  • Being tired
  • Fear, feeling insecure and overwhelmed

10 things you need to be good at

  • Prioritizing
  • Starting
  • Focusing
  • Managing job lists
  • Poor first drafts
  • Being unsure
  • Keep seeing the big picture
  • Show full responsibility and leadership
  • Communication
  • Building Structure

A simple program to become good at
Getting Things Done:

  • Create a daily work structure
  • Create a task list in the morning
  • Focus sessions
  • Uncertainty meditation
  • Reviewing: repetition and improvement

Read all the details here

Do more with your team without burning out

Interesting article about how enthusiastic teams can ensure that their enthusiasm is not overcooked. An interesting paragraph:

Seek self-propulsion, not pace-setting

By constantly beating on the drum and keeping deadlines as a manager, your team becomes overly dependent on the manager's presence. Sustainability in this is only feasible if the team propels itself without the presence of management.

Self-efficacy arises from letting go of control, withstanding the urge to constantly make detailed corrections and to enable informal leadership to flourish. As Ron Heifetz advocates, real leadership realizes that you must "give back the work" instead of being the hero flying in and solving everyone's problems.

Read the entire article.

Wrap up

Alright, I hope you are a bit more in touch with the area of web development. Another update next month, so stay tuned!

Source header photo.

Comments

Need even
more knowlegde?