Web Design Weekly #254

Headlines

SVG has more potential

Mike Riethmuller has done it again. His ability to dive deep into a current technology and find new creative ways to achive things is astounding. Make time for this. (madebymike.com.au)

Front End Center

Early bird discount ends today Sign up and get some of the best web development screencasts you’ll find on the web. Two episodes every month on browsers, performance, tooling & techniques. (frontend.center)

Articles

How React Do?

Jeff Fowler writes an in-depth account of his experience learning React. It’s written with a lot curiosity, which is super refreshing. Great read. (blog.jfo.click)

Loading Polyfills Only When Needed

Have you ever just dumped your polyfills in with your main scripts? I know I’m guilty. In this post Philip Walton shares his approach to help us ship better code. (philipwalton.com)

A Case Study On Progressive Enhancement

Through this case study on redesigning the Building Social website, Marko Dugonjić shares some simple yet often overlooked front-end techniques that defer the use of JavaScript as much as possible, while providing some neat JavaScript enhancements too. (smashingmagazine.com)

Embracing Constraint with CSS Modules

Matt Seccafien explains how his team embraced the constraints of CSS Modules and shares a few things he wished he had known before refactoring a large codebase to use CSS Modules. (medium.com)

How Twitter deploys its widgets JavaScript

Aravind Ramanathan shares the technical details about the process of updating the core widgets.js file that millions of people rely on. Great insight into the inner workings of their deployment process. (blog.twitter.com)

Space in Design Systems (medium.com)

Tools / Resources

Figma

This awesome looking tool was opened up to the public this week. Figma is the first interface design tool with real-time collaboration keeping everyone on the same page. Oh and it is built with React, which is pretty cool. (figma.com)

The New System Font Stack?

Ire Aderinokun looks at some of the major sites (WordPress, Medium, Ghost and Github) that have adopted the new system fonts stack and how they differ. She also shares some nice pointers for those that are keen to go down the system font path. (bitsofco.de)

JavaScript for Web Designers

A new book from A Book Apart written by Mat Marquis that offers a detailed and approachable tour around JavaScript. (abookapart.com)

WordPress Page builder plugins: a critical review

The well known WordPress plugin developer Pippin Williamson went on a little tweet rant last week, which fuelled this epic post that looks at the major page builders currently in market. (pippinsplugins.com)

Stop iOS10 safari auto-locking (thecssninja.com)

Tilted Angles in Sass (sitepoint.com)

Oh shit, git! (ohshitgit.com)

Inspiration

How we used Atomic Design Principles while redesigning BrowserStack (blog.prototypr.io)

Primer on Japanese typography (medium.com)

Maciej Ceglowski – Barely succeed! It’s easier! (youtube.com)

Jobs

Marketing Designer & Front-end Developer at Wildbit

Are you passionate about design and web technologies? Are you constantly striving to stay current with the latest industry best practices? Are you able to switch easily between visual design and front-end development? Do you think deeply about your CSS class names? If so, please reach out. (wildbit.com)

Senior Communication Designer

Slack is hiring a Senior Communication Designer to help design the future of Slack’s digital brand presence. Designers serve a vital role here: from the craft and finish of every detail on our high-traffic public-facing websites, to creating the experience vision for landing pages for national ad campaigns. (slack.com)

Need to find passionate developers or designers?Why not advertise in the next newsletter

Last but not least…

How available are the web platform’s features? (paulirish.github.io)

The post Web Design Weekly #254 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Schema Migration with Hibernate and FlywayDB

This tutorial explains the benefits of using an automated schema migration tool such as FlywayDB, as well as the limitations of the Hibernate schema generation utility (hbm2ddl). The article assumes almost no knowledge of Hibernate, and it can be read by both junior and senior developers alike.

Introduction

In a relational database, data is stored in table rows, and relations are expressed through a foreign key. While the database is responsible for storing and retrieving data, the business logic is usually embedded in the application layer. When using an object-oriented programming language, the object graph becomes the most natural representation of data. The discrepancy between graph-like structures and database tuples is typically known as the object-relational impedance mismatch.

The object-relational mapping (ORM) pattern aims to address this problem, and Hibernate ORM is undoubtedly one of the most successful implementations of this pattern. However, Hibernate is more than an ORM framework that conforms to the Java Persistence API specification.

Hibernate is a data access framework implementing many patterns that have been popularized by Martin Fowler in his book Patterns of Enterprise Application Architecture. For instance, aside from the typical object-relational mapping feature, Hibernate also implements the following data access patterns:

• Unit of work
• Identity map
• Lazy load
• Optimistic and pessimistic locking
• Application-level conversations that span over multiple web requests

Data Model Duality

While the ORM tool allows us to translate the object graph state changes into SQL statements, we are still managing two distinct data models. On one side, the database schema defines the rules for how data is ought to be stored, whereas on the application side, the domain model is an object-graph mirror of the underlying database schema.

So, who is in charge of driving the model representation? Is it the database or the domain model?

Continue reading %Schema Migration with Hibernate and FlywayDB%

by Vlad Mihalcea via SitePoint

Bootstrap Colorpicker – Customizable Colorpicker for Bootstrap

Bootstrap Colorpicker is a fancy and customizable colorpicker plugin for Bootstrap.

by via jQuery-Plugins.net RSS Feed

Editorial: How Do You Keep Your Skill Set Relevant?

The web industry moves at a blistering pace and it can often feel like it's difficult to keep up. This is especially true of JavaScript land where frameworks are going in and out of fashion all the time, each with their own way of accomplishing the same basic tasks. So how do you keep your skill set relevant? Over on the main site, we published a great article for those of you that do (or are looking to do) side projects. It's full of resources to inspire you and plenty of tips for keeping learning fun.

But, you know, side projects aren't for everybody, right? So today I'd like to add a further tip for the list — start answering programming questions. If that makes you think of Stack Overflow, you're forgiven :) Stack Overflow is indeed a great place to ask and answer programming questions, but its flaws are well documented and it's not for everybody. Instead, I'd like to suggest an alternative — SitePoint forums.

Continue reading %Editorial: How Do You Keep Your Skill Set Relevant?%

by James Hibbard via SitePoint

Phpseclib: Securely Communicating with Remote Servers via PHP

PHP has an SSH2 library which provides access to resources (shell, remote exec, tunneling, file transfer) on a remote machine using a secure cryptographic transport. Objectively, it is a tedious and highly frustrating task for a developer to implement it due to its overwhelming configuration options and complex API with little documentation.

The phpseclib (PHP Secure Communications Library) package has a developer friendly API. It uses some optional PHP extensions if they're available and falls back on an internal PHP implementation otherwise. To use this package, you don't need any non-default PHP extensions installed.

Installation

composer require phpseclib/phpseclib

This will install the most recent stable version of the library via Composer.

Use-cases

Before diving in blindly, I'd like to list some use-cases appropriate for using this library:

1. Executing deployment scripts on a remote server
2. Downloading and uploading files via SFTP
3. Generating SSH keys dynamically in an application
4. Displaying live output for remote commands executed on a server
5. Testing an SSH or SFTP connection

Connecting to the Remote Server

Using phpseclib, you can connect to your remote server with any of the following authentication methods:

1. RSA key
2. Password Protected RSA key
3. Username and Password (Not recommended)

Continue reading %Phpseclib: Securely Communicating with Remote Servers via PHP%

by Viraj Khatavkar via SitePoint

Animate Your React Native App

Creating Machine Learning Systems with JRuby

All the different programming languages out there seem to be a better fit for machine learning tasks than Ruby, right? Python has scikit-learn, Java has Weka, and there’s Shogun for machine learning in C++, just to name a few. On the other hand, Ruby has an excellent reputation for fast prototyping. So, why shouldn’t you […]

Continue reading %Creating Machine Learning Systems with JRuby%

by Paul Götze via SitePoint