House Arrest
I was (un)lucky enough to be banished to the confines of my own home at the end of February where fortunately I was able to continue business as usual. Without my daily commute, however, I found my day bookended with spare time. While filling this time with additional actual work seemed great at first, I was burning out fast.
Warm Up & Warm Down
I changed my strategy. There is always a million and one things I want to create. Be it ripping out something I've built for work to be used again, spontaneous late night ideas or passion projects. I started to pad the ends of my shift with "warm ups" or "warm downs" to both get me moving in the morning, head out of work in the evening and actually y'know... finish those projects I said I would months ago.
Picked On CodePen
My go to warm up was CodePen. I told myself I'd create at least 1 pen a week with a new idea. That paid off. I got featured twice.
I've been a web developer for a heck of a long time and had never ventured into posting my content onto public platforms but this gave me a colossal boost of confidence. Maybe what I was building was better than my own perception of it.
Building Libraries
Then the addiction hit, the cogs started turning and I began repacking the libraries after showcasing them. I love the idea of small vanilla JavaScript libraries with no dependancies and focus on what it is supposed to do right. Typically I build with Angular, but it feels good to get my head out of a framework.
Showcase
Is this next section a plug? Shamefully so.
Here is a collection of fun things I've created.
Dismissible
Show dismissible page messages, with info, success & error context types.
brookesb91
/
dismissible
📣 Animated dismissible alerts.
dismissible
Dismissible animated alert banners written in plain ol' JavaScript.
Quick Start
Install with Node
$ npm i https://github.com/brookesb91/dismissible/releases/download/v1.0.0/dismissible-1.0.0.tgz
Include the dismissible styles in your HEAD tag
<head>
<!-- Other head stuff... -->
<link rel="stylesheet" href="path/to/dismissible.css" />
</head>
Include the dismissible script at the bottom of your BODY tag
<body>
<!-- Other body stuff... -->
<script src="path/to/dismissible.js"></script>
</body>
Add an element that will be used as the root container for dismissibles
<body>
<div id="dismissible-container"></div>
<!-- Rest of body -->
</body>
Create a Dismissible instance
const container = document.querySelector('#dismissible-container');
const dismissible = new Dismissible(container);
Show dismissibles
// Show informational prompt
dismissible.info('This is…Example here...
Pixels
Render pixel art to a canvas.
brookesb91
/
pixels
👾 Simple HTML canvas pixel art renderer
Pixels
👾 A simple HTML canvas pixel art renderer.
Quick Start
Add to project
Include in your HTML.
<script src="path/to/pixels.js"></script>
Create a color palette
A palette is an array of valid color strings.
const palette = ['transparent', '#D82800', '#887000', '#FC9838'];
Define pixels
Defined pixels are of type number[][].
The outer array defines each row of pixels, from top to bottom.
The inner array defines each pixel in the row from left to right and must refer to a valid index of your palette.
const pixels = [
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1…Example here...
Popver
Create a hover popover from html elements.
brookesb91
/
popover
💬 Create hover popups from HTML elements.
💬 popover
Create hover popups from HTML elements.
Include the library
<script src="/path/to/popover.js" type="text/javascript"></script>
Define a popover target
Add an element that will act as the popover target. The popover is positioned relative to this.
<div id="target-1">Hover me</div>
Define the popover contents
Add your popover contents to the document.
By default, the original popover contents do not have their visibility modified even when the popover is not visible. It is advised to use css to hide any content that is not to be seen until it has been rendered in a popover. This is shown in the example below.
<div id="contents" style="display: none;">
<div id="content-1">
This content will be shown in a popover
</div>
</…Example here...
Skribul
A doodle sharing platform. Draw pictures and share them via social platforms. This was an exercise in meta optimisation.
brookesb91
/
skribul
✏️ Share doodles across social platforms.
Skribul
Live App
Share Your Doodles
Create and share your drawings across social media and chat platforms.
Optimised meta information allows full images to be rendered in apps that display a link preview.
Prerequisites
- NodeJS
- MongoDB server
Running
1. Clone the repository
git clone https://github.com/brookesb91/skribul.git
2. Install dependencies
npm i
3. Start the server
npm run start
The app will be available on localhost:3000
Environment Variables
BASE_URL - The base URL of the host environment. Default is http://localhost:3000.
ENV - The node environment. Default is development. Options are development or production.
MONGODB_URI - MongoDB URI. Default is mongodb://localhost/skribul
I did a write-up here...
Parts of the app have changed since the original post but the functionality remains in-tact.
Archivist
There are certain areas of the web I like to browse. I created a CMS to archive content I wanted to preserve.
brookesb91
/
archivist
🍀 Archival tool and CMS
🍀 Archivist
Thread archival tool and CMS.
Prerequisites
Quick Start
Clone the repository
git clone https://github.com/brookesb91/archivist.git
Navigate to the project directory
cd archivist
Install dependencies
npm i
Start the server
npm run start
Open a browser and navigate to the app. By default, the server is available at localhost:3000
Features
Done
- Reply hover preview
- Quote hover preview
- Quote anchors
- Colourised poster IDs*
- Country flags*
- Code formatting*
- Full archival of thread images
To Do
- Math formatting*
- Flash embed*
- Reverse image search
- Thread & post **UD
*For boards that support this feature
API
All paths are relative to the configured base URL.
| Method | Path | Description |
|---|---|---|
GET |
/ |
Archive catalog view |
GET |
/archive/:board/:thread |
Thread view |
POST |
/save |
Archive a thread from the given URL |
Environment Variables
Create a .env file in the project root to override values.
| Name |
|---|
Fin
How has your lockdown gone so far? How have you managed to keep yourself focused while still taking time to enjoy your craft? Share your projects with me.
Top comments (0)