pika/web – A Future Without Webpack

Interesting take on bundlers:

Over the last several years, JavaScript bundling has morphed from a production-only optimization into a required build step for most web applications. Whether you love this or hate it, it’s hard to deny that bundlers have added a ton of new complexity to web development – a field of development that has always taken pride in its view-source, easy-to-get-started ethos.

@pika/web is an attempt to free web development from the bundler requirement. In 2019, you should use a bundler because you want to, not because you need to.

Here’s how Pika does it:

@pika/web installs modern npm dependencies in a way that lets them run natively in the browser, even if they have dependencies themselves. No Browserify, Webpack or import maps required.

npm install && npx @pika/web
✔ @pika/web installed web-native dependencies. [0.41s]

Pika does this by transforming all required packages into ES Modules, which are then stored in a web_modules folder. Import your packages from said location and you’re good to go:

import {slugy} from './web_modules/slugy.js';

const textToSlug = 'Hello World, @pika/web!';
document.getElementById('slugy-text').innerHTML = `slugy("${textToSlug}") <br/>➡️ ${slugy(textToSlug)}`;

If your browser supports ES Modules, you can run the code snippet above directly in your browsers – no adjustments required 🙂

Pika – A Future Without Webpack →
About Pika →

A Homepage for the JavaScript Specification

TC39 has shipped a homepage for following updates to the JavaScript specification:

This is the first part of a two-part project aimed at improving our information distribution and documentation. The website provides links to our most significant documents, as well as a list of proposals that are near completion. Our goal is to help people find the information they need in order to understand the specification and our process.

Looking forward to how this site will evolve in the near future, as it will make the research to keep my ESNext presentation up-to-date a bit more easy 🙂

TC39 – Specifying JavaScript →

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 →

Solo: A Star Wars Story: Behind the VFX – BBC Click

The film Solo: A Star Wars Story has been Oscar nominated in the category of Best Visual Effects. Visual Effects Supervisor Julian Foddy from ILM spoke to Al Moloney about making the film.

Highly interesting part on how they made the mountain from the train heist scene explode. Turns out not all is computer generated …

JS Paint – MS Paint recreated in JavaScript, with extra features

JS Paint is a nice web-based MS Paint remake and more…

The goal is to remake MS Paint (including its little-known features), improve on it, and to extend the types of images it can edit. So far, it does this pretty well.

Ooh this brings back memories! My first ramblings on my dad’s computer back in the day were in MS Paint …

JS Paint →
JS Paint Source (GitHub) →

The future of CSS: Nesting Selectors

Early March the first draft for the CSS Nesting Module was published. The draft outlines a future mechanism by which we’ll be able to nest CSS selectors natively (e.g. in pure CSS, without the use of any preprocessors)

This module describes support for nesting a style rule within another style rule, allowing the inner rule’s selector to reference the elements matched by the outer rule. This feature allows related styles to be aggregated into a single structure within the CSS document, improving readability and maintainability.

Using the & selector (read this as “the nesting selector”), you can refer to the elements matched by the parent rule:

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child + td { border: 1px solid black }
  }
  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

As it’s an actual selector, you always need to use the & selector, so you won’t be able to do this:

/* INVALID */
.foo {
  .bar {
    color: hotpink;
  }
}

(The fix would be to write & .bar instead of .bar)

The & selector can also only be used when it’s first compound selector (e.g. it appears at the first position) of an inner selector.

/* INVALID */
.foo {
  .bar & {
    color: hotpink;
  }
}

To cater to these scenarios you’ll need to use the @nest rule, which is more lax:

/* VALID */
.foo {
  @nest .bar & {
    color: hotpink;
  }
}

To me it feels like this @nest rule should go. The interpreter should be smart enough to figure things out all by itself.

CSS Nesting Module (Draft) →

what3words – The addressing system to uniquely identify locations using just three words

what3words is a really simple way to talk about location. We have divided the world into a grid of 3m x 3m squares and assigned each one a unique 3 word address. It means anyone can accurately find any location and share it more quickly, easily and with less ambiguity than any other system.

The service can be used via the free mobile app or online map. It can also be built into any other app, platform or website, with just a few lines of code.

For example, the torch of the Statue of Liberty is located at toned.melt.ship. This combination is unique, no other location across the globe has it. Easier to remember than WGS84 coordinates, and still very precise.

what3words Online Map →
what3words Website →
what3words: toned.melt.ship →

ESNext: Proposals to look forward to (Full Stack Ghent)

Yesterday I was invited as a speaker at the March 2019 Meetup by “Full Stack Ghent” (their first one!) at the Clarabridge CX Social offices.

At the meetup I gave a reprise of the talk “ESNext: Proposals to look forward to”, which I had already done at a Full Stack Antwerp meetup, a few months ago.

With the yearly ECMAScript releases (ES2015..ES2019) of a lot of things have changed in JavaScript-land. And even more changes are ahead!

This talk takes a look at a few of the upcoming ECMAScript features, which will (hopefully) become part of the ECMAScript Language Specification in the near future.

The slides are up on slidr.io, and also embedded below:

Talk Outline:

  • TC39: Info on TC39, what they do, and how they work.
  • ESNext Proposal: Field Declarations
  • ESNext Proposal: Optional Chaining
  • ESNext Proposal: Null Coalescing
  • ESNext Proposal: Pipeline Operator
  • ESNext Proposal: Dynamic Imports
  • ESNext Proposal: Pattern Matching
  • ES2015 Refresher: Promises
  • ESNext Proposal: Cancellation API
  • ESNext Proposal: Function Bind Syntax
  • ESNext Proposal: Slice Notation
  • ES2019 Feature: Object.fromEntries()
  • Fin.

Thanks to the organisers for having me, and thanks to the attendees for coming to see me. I hope you all had fun attending this talk. I know I had making it (and whilst bringing it forward) 🙂

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

CraftQL – A drop-in GraphQL server for Craft CMS

CraftQL is a drop-in GraphQL server for your Craft CMS implementation. With zero configuration, CraftQL allows you to access all of Craft’s features through a familiar GraphQL interface.

❓ Unfamiliar with GraphQL? Earlier today Ryan Glover (Ponyfoo) posted a great introduction to it.

In the admin interface you get a GraphiQL interface, and the ability to define access rights per token you generate.

Querying is very familiar:

CraftQL provides a top level entries field that takes the same arguments as craft.entries does in your template. This is the most commonly used field/access point.

Like so:

query fetchNews {             # The query, `query fetchNews` is completely optional
  entries(section:[news]) {   # Arguments match `craft.entries`
    ...on News {              # GraphQL is strongly typed, so you must specify each Entry Type you want data from
      id                      # A field to return
      title                   # A field to return
      body                    # A field to return
    }
  }
}

A license costs $59, but for that amount of money you can’t build it yourself …

CraftQL.xyz →
CraftQL (GitHub) →

📽 Whilst everything is quite self-explanatory, a video on how to set it up is included in the “Headless Craft CMS” video series over at CraftQuest. The Installing GraphQL via CraftQL introductory video is one of the free videos you can watch over there.