Alicia's Notes 🚀

This post outlines the top 5 coolest things about Astro, and why you might want to consider it for your next project At the end, I'll share a demo of a project I used Astro for, and how I found working with it Intro If you're new to Astro, in short it's a framework for generating very optimized, websites to be rendered by the server or statically generated. No heavy JavaScript needs to be sent to the client, nor is it needed for rendering. This gives your site a huge boost in performance, SE...

For a long time I've always been very anti-Tailwind. I don't like how cluttered it makes your markup, or how it abstracts away what's actually happening, or the un-semantic approach it forces you to take. That said, it does have some very clear benefits. So for my most recent project (digital-defense.io), I thought I'd give it a second shot. Here's my thoughts: Pros 👍 It is actually possible to cover 99% of styling with Tailwind. I was expecting to have to still write my own CSS to cover ed...

Many software development teams follow some kind of agile methodology, as the backbone for their ways of working. And if you are one of them, you'll know the current software landscape (Jira, Confluence, Teams, etc) leaves plenty to be desired. Here's 25 ideas for mini projects, to help optimize your workflow for you and your colleges. None of these should take much more than a weekend to build, so a good opportunity to try out a new tech stack. And it gives you something cool to show to your ...

Intro I've been interested in Solid ever since I saw it rising on the StackOverflow developer survey (the third-most admired framework), and even more so since watching Fireship's Solid in 100 Seconds video. What's Solid? In short, Solid is declarative JavaScript framework for building extremely performant UIs, thanks to it's maximum control over reactivity. At first glance, it looks kinda similar to React. It uses JSX, with a component-based architecture. There's hook-type syntax (called ...

Times are tough at the moment (cozzie livs), but as developers we've got a unique set of skills which are in high-demand, if you know where to look! This post briefly outlines 50 side hustles you can use to bring in some extra cash as a developer 1. Attention Engagement-based earnings are where you'll receive a share of revenue, based on the amount of time a user has spent on your site, profile or consuming your content. It's typically a small amount, at least for smaller sites or creator...

The aim of this post is to provide a whistle-stop tour of the latest version of SvelteKit. We're going to build a developer portfolio and blog website, that fetches data from your RSS feed, as well as the GitHub API. Contents Intro to SvelteKit What we're going to build Let's get Started! Step #0 - Prerequisites Step #1 - Project Setup Step #2 - Finish Setup Step #3 - Components Step #4 - Creating a Route Step #5 - Special Routes Step #6 - Fetching Data Step #7 - Render Results Step #8 - ...

A collection of the best free developer resources, from GitHub and beyond Developer Curriculum Developer Roadmaps - Complete roadmaps for developers FreeCodeCamp Curriculum - Full and free learning curriculum to become a developer Comp Sci University Open Source Uni - Collection of everything you need for a Comp Sci degree CompSci Study Plan - Full study plan for computer science Learn by Doing Build your own X - Tutorials to recreate common technologies Project Tutorials - Tuto...

As developers, we spend a lot of our time in the terminal. There's a lot of helpful CLI tools, which can make your life in the command line easier, faster and generally more fun. This post outlines my top 50 must-have CLI tools, which I've come to rely on. If there's anything I'm missing - do let me know in the comments :) At the end of the article, I've included some scripts to help you automate the installation and updating of these tools on various systems/ distros. Utils thefuck - Auto-...

A collection of 20 under-used git command to upgrade your development experience. If you've ever browsed the git manual (or run man git), then you'll have noticed there's a whole lot more to git than what most of us use on a daily basis. A lot of these commands are incredibly powerful and can make your life a lot easier (others are a bit niche, but still good to know). This post outlines 20 of my favourite under-used git features, which you can use to level up your development process, impress ...

View on Dev.to: A collection of 70 hand-picked, web-based tools which are actually useful. Each will generate pure CSS without the need for JS or any external libraries. Full credit goes to the authors behind each of these apps (where possible I've linked to their GH/ socials) Contents Property Generators Animations Backgrounds Color Tools Typography Loaders Layouts Informative Property Generators 1. Neumorphism Generate Soft-UI CSS styles using inset shadows, by @adamgiebl 2. S...

Spice up your docs, blog posts and Tweets with some pretty screenshots! The following is a list of 20 free tools, that will generate nicely formatted screenshots of code, device mockups and embedded info. Code Screenshots 1. Ray.so Ray.so developed by the team behind Raycast, generates clean and minimal code screenshots. You can also specify options via GET URL params, so you could programatically generate an image (e.g. using this shell script, or this VS Code extension). 2. CodeImage ...

The browser developer tools are incredibly powerful, with new debugging and optimisation features being added every few months. The following post outlines 50+ awesome tips, that you can use to supercharge your web development experience. Design Mode Enabling design mode will make the entire web page editable, just by clicking and typing. To use it, open up the console and run: document.designMode = 'on' Pretty Print Raw files are usually minified, and therefore hard to read. Use t...

If you've ever developed a web app, you'll be familiar with console.log(...), the method which prints data to the developer console; useful for debugging, logging and testing. Run console.log(console), and you'll see that there's much more to the console object. This post briefly outlines the top 10 neat tricks you can use to level up your logging experience. Contents Tables Groups Styles Times Asserts Counts Traces Directory Debugs Log Levels Multi-Values Log Strings Clear Tables The c...

A collection of 20 things you can do with GitHub-flavoured markdown to spice-up your projects readme! Include Notes and Warnings > [!IMPORTANT] > This is some important text. > [!WARNING] > This is a warning. > [!NOTE] > This is just a note. Will render: Note that this feature is still in beta. Mermaid Diagrams You can add live diagrams to your documentation, using Mermaid Syntax. Check the docs for syntax, then use the Live Editor to build out your diagrams, the...

The following table is a quick, undetailed comparison of security-focused email providers. Update: Since the markdown table isn't very clear, here's is a web version: lissy93.github.io/email-comparison Name Jurisdiction Encryption Open Source Onion Site Pricing Domain Support Additional Aliases or Catch-All POP, IMAP, STMP External Security Audit Accepts Crypto Personal Info Requiements ...

The following commands will each start a simple web server, serving up the files in the current directory. Just open up the browser, and navigate to the system's IP + port (e.g. http://localhost:8080). Python python -m http.server 8000 Node.js npx http-server ./ --port 8080 PHP php -S 127.0.0.1:8080 Ruby ruby -run -e httpd ./ -p 8080 R Rscript -e 'servr::httd()' -p8080 Caddy Caddy is a feature-rich production-ready Go-based web server, with easy configuration. Just download and ...

The Definitive Guide to NPM Package Security Check for Outdated Dependencies It's important to keep dependencies up-to-datem since these packages usually undergo continuous improvements, bugs fixes and security patches. Yarn has this functionality built in, with yarn outdated, which shows version info for all a projects installed dependencies. A better tool for the job is npm-check (MIT) by @dylang, which will check for outdated, incorrect, and unused dependencies. This is used by just runn...

Intro The following AutoHotKey script enables you to use Ctrl + Alt followed by an arrow key to target PgUp, PgDwn, Home and End. These function keys are seriously underated, they allow you to navigate code, documents, webpages etc much faster than using the arrow keys alone. It means you don't have to reach so far across the keyboard, and useful for smaller keyboards that don't have these dedicated keys This is inspired by using Alt + Left / Right arrow, which (in most systems) moves the cu...

Here's a quick project that I built in order to keep track of locally running services on my home lab. It serves as a landing page, to make it easier to navigate to various apps, without having to remember and type IP addresses or URLs. Contents Features Source Code Live Demo Screenshots Usage Guide Similar Apps / Alternatives Credits License Features Instant search by name, domain and tags - just start typing Full keyboard shortcuts for navigation, searching and launching Multiple c...

Intro Espanso is an open source, privacy-first, cross-platform text expander developed by @federico-terzi and written in Rust. In short, it detects when you type a certain keyword, and replaces it on the fly with a pre-defined string or dynamic output. Espanso not only supports simple text replacement/ expansion, but also images, custom scripts and shell commands, app-specific configurations and more. There is also a basic form feature, enabling arguments to be passed to a block. It's under...

Do you ever wonder how you're spending you're life? I do, and so I went through the main activities that I do on a daily, weekly or monthly basis and calculated the approximate total time I've spent on each of them. The following chart is a breakdown of time as a proportion of my total life (so far), where each square represents 1 month. I am now having an mini existential crisis after seeing how much of my life I have spent on relatively meaningless activities! ...

Common error messages, along with their solutions. Saves me having to figure the same thing out twice. Categories Linux Web Development Misc Linux ❌ Error running a shell script with systemd: Failed to execute command: Exec format error ✅ Solution: Caused by missing shebang at the start of the sh script Add the correct hash band identifier, e.g. #!/bin/bash ❌ Error: -bash: '\r': command not founxd ✅ Solution: Caused by Windows-style newline character Run dos2unix over the f...

A mix of simple things that (despite doing regularly) I still forget, as well as more niche stuff that took me a little while to figure out. The purpose of documenting this, is both to help others and for future reference for myself Servers How to setup an SSH Tarpint with EndleShh How to setup WireGuard on OPNSense for Mullvad VPN How to setup SSL for OPNSense, with Let's Encrypt How to transfer a file to server, via SSH/SCP How to use SSH key Pairs for Authentication How to setup and secu...

Endlessh is an SSH tarpit to keep the automated bots hitting port 22 locked up, and waste script kiddies time. You can either get it from your package manager with sudo apt install endless, or build from source. To build, ensure you have libc6-dev installed, then git clone git@github.com:skeeto/endlessh.git, cd endlessh, make, and move it to your path- sudo mv endlessh /usr/local/bin/. Move the service to systemd, sudo cp util/endlessh.service /etc/systemd/system, and enable it sudo systemctl...

Intro Themes Navy + Teal Titanium Cyberpunk Dracula Hack Neon Nord Usage Yet another awesome feature of DuckDuckGo, is that they make it really easy to modify your theme, just go to: https://duckduckgo.com/settings#appearance. From here you can customize your colors, fonts and layout of your search results and home page. I am no designer by any stretch of the imagination (as you can probably see!), but here are a couple of themes I made, along with their code if you want to use them. Y...

This article outlines the steps I take on any new server, to configure it for security, consistency and convenience. It is written specifically for Debian, but will also directly apply to derivatives (such as Ubuntu), and will likely be very similar for for other distros. I am in the process of writing automation scripts to cover all of these steps, in the form of Ansible Playbooks. This guide is split into 10 sections: System Update - Upgrade the OS and enable automated security updates Sys...

TDLR; Auto-correct is a lot more efficient than manually correcting misspelled words. Espanso is awesome. Beyond that, this isn't too interesting - I just documented this so I can refer back to it in the future. If you're just looking for a generic word list, see this post, which contains 4,200 common misspellings. Intro Word List Converter Usage Intro I am terrible at spelling. About 15% of what I've typed will be underlined in red. It's usually the same couple hundred words that I fo...

Intro Ever since the first version was released in 2012, the Raspberry Pi has been a staple piece of kit for professionals, hobbyists, educators and everyone in between. And for good reason, it's small, low power, affordable but extremely versatile. There are of course other single board computers on the market, but the Pi has a strong community behind it and provides a good balance between capabilities, form factor and price. Raspberry Pi Projects Here is a curated list of projects that ...

This is my personal reference list of useful software for Microsoft Windows. Typically I only install what I need, and uninstall software that hasn't been used for a while. Where possible I prefer to run containerized or portable apps. There's nothing installed on my system that isn't on this list. Before setting anything up, the first task is to disable telemetry, remove pre-installed bloatware and make a few security tweaks. For this I use a series of PowerShell scripts provided by Privacy....

This is just a short reference to using fonts with Variable Axes in CSS What are Variable Fonts? Variable fonts are font files that encapsulate the entire family, and allow for custom attributes (regarding things like weight, slant, grade, character-width) to be set. This brings several benefits: Much higher quality rendering of fonts, without browser distortions Greater control over customization, as you can specify each value separably The need only for a single font file (rather than ...