What’s changed in Bootstrap 5?

For those thinking about switching from Bootstrap 4 to 5, the good news is that in terms of CSS and default components, not much has changed. The classes and logic are quite similar from 4 to 5.

The Bootstrap team seems to have settled on a “stable API” i.e. to not change class names too much from one release to the other.

But then what has changed? The folks over at Mono give us the rundown …

What’s changed in Bootstrap 5? →
Bootstrap v5 →

RedwoodJS – Bringing full-stack to the JAMstack

Update 2020.06.09: here’s a full tutorial to get you started with RedwoodJS.

Now here’s an interesting project:

Redwood is an opinionated, full-stack, serverless web application framework that will allow you to build and deploy JAMstack applications with ease. Imagine a React frontend, statically delivered by CDN, that talks via GraphQL to your backend running on AWS Lambdas around the world, all deployable with just a git push — that’s Redwood.

I’m seeing a similar move as with Rome here: it’s very opiniated.

By making a lot of decisions for you, Redwood lets you get to work on what makes your application special, instead of wasting cycles choosing and re-choosing various technologies and configurations.

Projects built with RedwoodJS exist of two parts (which they call “sides”), both contained in one repo: a web side (built using React) and an api side (which is an implementation of a GraphQL API).

This Twitter thread by the author sheds some more light onto the project (which some compare to Rails when it first got released):

There’s already some videos on how to get started with RedwoodJS available on Egghead that you can check out. It’s not complete, but the 4 ones currently online should get you going on the web side of it.

RedwoodJS →
RedwoodJS Source (GitHub) →

Unpoly – The unobtrusive JavaScript framework for server-side web applications

Unpoly is an unobtrusive Javascript framework for applications that render on the server. It allows your views to do things that are not normally possible in HTML, such as having links update only fragments of a page, or opening links in modal dialogs.

Unpoly can give your server-side application fast and flexible frontends that feel like a single-page application (SPA). It also preserves the resilience and simplicity of the server-side programming model

Ooh, I like this a lot. Using some HTML attributes you augment your typical HTML+CSS website and have (parts of) new pages load up in modals, have them slide in, do partial updates, etc.

Here’s a modal for example:

<!-- preview.html -->
<a href="full.html" up-modal=".story">Read full story</a>


<!-- full.html -->
<!doctype html>
<html>
<head>
    …
</head>
<body>
    …
    <div class="story">
      <h2>Full story</h2>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    …
</body>
</html>

Unpoly will load the entire page full.html using Ajax, and then only show the contents of its .story inside the modal. The rest will be discarded.

That way your website will still work on browsers with JS disabled – including the very first webbrowser – and provide a richer experience to those who support have the latest and greatest browsers running.

Nice!

Unpoly →

Introducing Flutter, Google’s new Mobile UI Framework

Recently Google announced Flutter, their mobile UI framework that “helps developers craft high-quality native interfaces for both iOS and Android”.

Flutter targets the sweet spot of mobile development: performance and platform integrations of native mobile, with high-velocity development and multi-platform reach of portable UI toolkits.

Here’s a simple Hello World app:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

Quite readable, but could use some JSX imho 😉

Announcing Flutter beta 1: Build beautiful native apps →
A Tour of the Flutter Widget Framework →

Expo – Easily build apps with React Native

From time to time I’ve seen good things about Expo fly by on the Twitters, which piqued my interest:

Expo is a set of tools, libraries and services which let you build native iOS and Android apps by writing JavaScript.

Expo apps are React Native apps which contain the Expo SDK. The SDK is a native-and-JS library which provides access to the device’s system functionality (things like the camera, contacts, local storage, and other hardware). That means you don’t need to use Xcode or Android Studio, or write any native code, and it also makes your pure-JS project very portable because it can run in any native environment containing the Expo SDK.

Also comes with an online editor, named Expo Snack, that can run code immediately on your phone (after scanning a QR Code with the Expo App)

Expo – Easily build apps with React Native →
Expo Snack →

Blueprint React UI Toolkit

screen-shot-2016-11-22-at-23-53-00

Blueprint is a collection of React UI components, covering the majority of the common interface elements, patterns and interactions on the web. Using Blueprint ensures that you’ll end up with an elegant, easy-to-use UI, freeing you to focus on building your product—not the atomic pieces that comprise it.

The UI components really are well written (and play together very nicely). Great to use, and to act as an inspiration if you are writing your own ones.

npm install --save @blueprintjs/core
import {
    Button,
    Menu,
    MenuItem,
    MenuDivider,
    Popover,
    Position
} from "@blueprintjs/core";

const menu = (
    <Menu>
        <MenuItem text="New" />
        <MenuItem text="Open" />
        <MenuItem text="Save" />
        <MenuDivider />
        <MenuItem text="Settings..." />
    </Menu>
);

<Popover content={menu} position={Position.BOTTOM_RIGHT}>
    <Button text="Actions" />
</Popover>

Blueprint →

Sails.js — Realtime MVC Framework for Node.js

Tj9Nk

Sails.js makes it easy to build custom, enterprise-grade Node.js apps. It is designed to resemble the MVC architecture from frameworks like Ruby on Rails, but with support for the more modern, data-oriented style of web app development. It’s especially good for building realtime features like chat.

Built on top of express. Installation via npm

sudo npm -g install sails

The introductory video will come in handy

Sails.js →

Mobile Frameworks Comparison Chart

Looking for the right mobile framework? Compare all major mobile frameworks and choose the one that fits best.

Very complete chart listing target platforms, target apps (native/hybrid/web), languages it can be developed in, hardware support, etc.

Also: Who was I to think that there were only a few players (PhoneGap, Appcelerator Titanium, jQuery Mobile, Sencha Touch) out there?

Mobile Frameworks Comparison Chart →