Playing With Particles Using the Web Animations API

Louis Hoebregts writing for CSS-Tricks

When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can.

In this post, we’ll make even more particle magic using the Web Animations API to create a firework effect when clicking on a button.

At its core site this createParticle function

function createParticle (x, y) {
  // [...]
  // Generate a random x & y destination within a distance of 75px from the mouse
  const destinationX = x + (Math.random() - 0.5) * 2 * 75;
  const destinationY = y + (Math.random() - 0.5) * 2 * 75;

  // Store the animation in a variable because we will need it later
  const animation = particle.animate([
    {
      // Set the origin position of the particle
      // We offset the particle with half its size to center it around the mouse
      transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
      opacity: 1
    },
    {
      // We define the final coordinates as the second keyframe
      transform: `translate(${destinationX}px, ${destinationY}px)`,
      opacity: 0
    }
  ], {
    // Set a random duration from 500 to 1500ms
    duration: 500 + Math.random() * 1000,
    easing: 'cubic-bezier(0, .9, .57, 1)',
    // Delay every particle with a random value from 0ms to 200ms
    delay: Math.random() * 200
  });
}

Playing With Particles Using the Web Animations API →

IMAP API – Self hosted application to access IMAP and SMTP accounts over REST

IMAP API is a self hosted application for accessing IMAP accounts over REST API. IMAP API daemon connects to user’s IMAP account, translates API requests to IMAP and also sends webhooks for changes like new or deleted emails.

IMAP API →

Via cron.weekly

Fun with browsers: how to get an image into the current page

Christian Heilmann created a demo page where a user can add an image to the page through various ways.

I gave myself the task to build an interface to make it as easy as possible for a user to add an image into the document. I wanted to support:

  • Image upload
  • Drag and Drop
  • Copy and Paste

Each scenario requires a small tad of JS. Here’s a pen with the final result:

Fun with browsers: how to get an image into the current page →

Indicating Scroll Position on a Page With CSS

Scroll-based features tend to involve some bespoke concoction of CSS and JavaScript. But what if we could accomplish something that only uses CSS?

Take this ingenious horizontal scrollbar with CSS, for instance. I want to do something similar, but to indicate scrolled sections rather than capture continuous scrolling. In other words, rather than increasing the length of the indicator during scroll, I only want to increase the length when a certain section of the page has been reached.

Here’s a demo showing the end result: the scroll indicator does not update continuously but is stepped.

See the Pen CSS Scrolled Sections Indicator by Preethi Sam (@rpsthecoder) on CodePen.

The technique involved uses position: sticky; and some positioning applied on each “passageStop” (one per step).

Indicating Scroll Position on a Page With CSS →

RSS Feeds for GitHub Project Releases and User Activity

As an extra to RSS feed for youtube channels and GitHub projects, Pawel notes that it’s also possible to get a feed for the releases published in GitHub Projects.

GitHub gives us RSS feeds for project releases and tags. Thats my preferred way of finding out about my followed projects fixed bugs and new features.

https://github.com/{{username}}/{{repository}}/releases.atom
https://github.com/{{username}}/{{repository}}/tags.atom

Ah, that I didn’t know!

I noticed that this also works for user activity feeds btw. Just like you can append .keys to any GitHub User Profile Page to see their public keys, you can append .atom to get their (public) activity feed.

https://github.com/{{username}}.atom

Here’s my activity feed for example: https://github.com/bramus.atom

RSS feed for youtube channels and GitHub projects →

React Native Bottom Sheet (Slide Up Panel)

A common pattern in Mobile Apps is to have a Bottom Sheet / Slide Up Panel. React Native Slack Bottom Sheet is a wrapper around Slack’s native PanModal component for iOS.

import SlackBottomSheet from 'react-native-slack-bottom-sheet';

<SlackBottomSheet
 topOffset={100}
 unmountAnimation={false}
 initialAnimation={false}
 presentGlobally={false}
 backgroundOpacity={0}
 allowsDragToDismiss={false}
 allowsTapToDismiss={false}
 isHapticFeedbackEnabled={false}
 blocksBackgroundTouches={false}
 interactsWithOuterScrollView
>
 <View style={StyleSheet.absoluteFillObject}>
   <ScrollView>
     <Lorem />
   </ScrollView>
 </View>
</SlackBottomSheet>

React Native Slack Bottom Sheet →
PanModal →

💁‍♂️ If you’re looking for a slide up panel that also works on Android check out rn-sliding-up-panel, a pure JS implementation.

Note that it will require some tweaking before you get a somewhat similar result like its native counterpart. — I remember it took me quite some time to get everything right while working on the EV-Point App.

😅 Still an Ionic 1 Developer? I once created a similar component for it. It didn’t feel natural at all because the gestures weren’t implemented properly (because: Deadlines™). Eventually we implemented in the project I was then working on, but without the ability to manually drag it.

Tweet from the Firefox Address Bar by adding a Bookmark

In succession to Tweet from the Chrome Address Bar by adding a Custom Search Engine, you can also do this in Firefox. Simply define a bookmark (containing a %s wildcard) with a linked keyword and you’re good to go:

  • Name: Compose Tweet
  • Location: https://twitter.com/compose/tweet?text=%s
  • Keyword: tweet

You can now use the tweet keyword to start tweeting from the Firefox Address Bar.

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

☕️ Buy me a Coffee ($3)

Tweet from the Chrome Address Bar by adding a Custom Search Engine

TIL: Chrome allows you to define a Custom Search Engine (CSE) by which you can search sites. The cool part is that you’re not really limited to search only, and that you can abuse these CSEs to become more productive. In this post I’ll show you how to tweet from the Chrome Address Bar.

🦊 Firefox User? You can achieve the same result by adding a bookmark.

~

TIL: Custom Search Engine

The idea was sparked by this tweet by Rowan Merewood. Rowan created a CSE to quickly go to a Zoom meeting by simply typing zoom meeting-id in the Chrome Address Bar.


Don’t mind the word “Search”: Upon hitting ENTER the browser won’t search Zoom but will directly go to the Zoom meeting with ID 123456789.

A Custom Search Engine (CSE) is defined by three parameters:

  • Search Engine: The name that will be shown in the Chrome Address Bar when typing in keyword
  • Keyword: The keyword that needs to trigger the Search Engine
  • URL: The URL that will be visited once you press enter. Use %s where you want your “search term” to appear.

Here’s how Rowan has define his Zoom CSE:

~

DuckDuckGo’s !tw command

Earlier today I saw Šime Vidas tweet about using DuckDuckGo’s !tw command interpretation to quickly compose a new tweet.

As he uses DuckDuckGo as his default search engine, the trick works fine from the address bar:

  1. The Address Bar will pass the entered term to search DuckDuckGo
  2. DuckDuckGo will interpret the !tw prefix and redirect to Twitter’s Compose Dialog

For users like me, who don’t use DuckDuckGo as their search engine, that won’t work.

~

1 + 1 = 2

Combining both ideas, I came to create a Custom Search Engine for Chrome that will allow me to quickly tweet from the Address Bar:

I’ve define a CSE so that the tw keyword will directly go to Twitter’s Compose Dialog. To define this CSE yourself, go to chrome://settings/searchEngines and add a new CSE with the following details:

  • Search Engine: Compose Tweet
  • Keyword: tw
  • URL: https://twitter.com/compose/tweet?text=%s

From now on you can compose a tweet by simply typing tw This is a tweet in the Chrome Address Bar.

Combine that with CMD+L, just like Šime did, and you can quickly tweet out links:

  1. Visit URL
  2. Hit CMD+L to focus the Address Bar
  3. Hit CMD+← to put the cursor before the URL
  4. Type in tw (with space) and hit enter

Cool!

~

Call to developers

I see lots of uses for this. You could create these kind of productivity shortcuts to go quickly to Twitter profile pages, visit NPM packages, auto-archive URLS on The Wayback Machine, etc. (Ab)using CSEs like this once again underlines the importance of bookmarkable URLs and the ability to precompose data along with that.

Do note that many sites (such as the mentioned Twitter, GitHub, NPMJS, etc.) already provide CSEs to actually search them. Same goes for WordPress blogs, such as this one right here: simply enter bram.us searchterm in the Chrome Address Bar and after hitting ENTER it’ll search this blog for the given searchterm.

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

☕️ Buy me a Coffee ($3)

Prism – Turn any OpenAPI file into an API server with mocking, transformations, validations, and more.

Prism is an open-source HTTP mock server that can mimic your API’s behavior as if you already built it. Mock HTTP servers are generated from your OpenAPI v2/v3 documents.

Installation per NPM/Yarn

# NPM
npm install -g @stoplight/prism-cli

# Yarn
yarn global add @stoplight/prism-cli

Once installed, serve your OpenAPI spec as follows:

prism mock petstore.yml

Prism →
Prism (GitHub) →

💡 If you’re using Postman, you can use their built-in Mock Server option