Nick Hart – Web Devlopment, Projects and tutorials

I created a Web Extension

This is my first Web Extension ever, It took some time figuring out how to actually develop one, as its quite different than just making a web-page.

This first extension is pretty basic, just so I can learn and see what is possible.

Link to github repo: https://github.com/IpsumLorem16/Simple-IP-Camera-Viewer

Animated SVG Cyberpunk logo (with filters)

See the Pen Cyberpunk animated SVG logo {fork} by IpsumLorem16 (@ipsumlorem16) on CodePen.

^{Try holding down the mouse-button, and clicking/hovering over the logo.}

In this post I will describe how I used SVG filters, CSS and GSAP to create my own version of the animated cyberpunk logo.

Making accessible custom Radio Inputs

A short tutorial on how you can style custom radio inputs, instead of using the browser defaults, while keeping it completely accessible.

SVG loading spinner

You can create a spinner by animating the stroke properties of a SVG circle element.

See the Pen SVG circle spinner (css keyframes only) by IpsumLorem16 (@ipsumlorem16) on CodePen.

An Introduction to SVG animation

This article is intended for anyone who wants to try SVG animation, but has no idea where to start.

Scraping with NightmareJS – getting started

A quick overview of setting up and using the browser automation library.

I have very little experience working with SVG on the web so far. I thought this would be a good way to dip my toe in and try to learn a little. So here is my take on the ubiquitous three dots loading Icon…

A bunch of inline SVGs, animated with CSS (I still haven’t decided which I want to use):

See the Pen SVG CSS Loading Icons (dots) by IpsumLorem16 (@ipsumlorem16) on CodePen.

Creating a toggle switch – easy

Here is a quick demo on how to easily create a toggle switch with HTML, JS, and CSS. That is also Accessible.

Creating an animated dismiss all icon

Using Javascript, we will make an animated ‘dismiss all’ icon similar to what you find on android. To hide our messages/alerts/toasts.

When I need icons for a web project, I usually use the easy and fantastic Font Awesome. Just because it’s easy and has everything…. Almost.

Scraping public amazon s3 buckets with python

Security credentials, personal data, user data, and business information is often publicly exposed in leaky buckets.

Not all objects in the buckets are necessarily public, you can have a mix of access control rules for each one. With hundreds/thousands being private. Checking each of them would be extremely tedious / impossible for a single person. That is why I created this tool to do it for you.(well me, but I am sharing it here)