DEV Community: Andreas

Building a Static Site Generator in 3 steps

Andreas — Thu, 02 May 2024 12:04:08 +0000

Maybe you know this situation: You are not so happy anymore with your personal website, the look and feel no longer represents you well enough and the time has come for a relaunch. I've been at this point recently and asked myself:

What do I actually really need?

I've been through a bunch for CMSes, always using my own website as playground for new technologies. That isn't a bad or uncommon approach for a web dev, but I wanted to reduce complexity and maintenance effort this time. And then I had this most brilliant, completely new, unheard before, genius idea:

What if I'd just write vanilla HTML?! (ba dum, tss!)

My head was spinning. That'd mean tiny loading times, no server side rendering or precompiling and best of all: No dependencies hence no build step! I was happy like a kid the day before Christmas. I felt like I had just made the invention of the century.

But then came the disillusionment: What about computed data? Or data retrieved per API? I usually showed some GitHub and DEV post stats on my website. Doing it with JavaScript would result in additional request on page load again. And I most certainly wouldn't want to change my age manually every year (okay, that one wouldn't be too bad if I forgot 😅). My brain was frantically searching for a way out of this to maintain its latest achievements. It finally had to realize, that at least one single layer of data retrieval and insertion was needed. But would that be possible without any dependencies?

It turned out, that I basically wanted a tiny Static Site Generator and I could have chosen one of the already existing great solutions out there. But sometimes, you just want to stay dependency free, keep things simple and and at the same time up-to-date and running long-term without having to worry about them.

I broke it down to 3 steps:

Create the markup: Do the actual webdesign work. Write HTML and CSS with all the content I want.
Retrieve and process the data: Write a script that calls all APIs, does all data manipulation I need and inserts it into my content.
Automate it: Call the script from 2. automatically to keep the content up-to-date

Let's visualize that:

Still interested? Then let's get our hands dirty.

1. Creating the markup



# create the template file
touch template.html

Ahh, feels good to write good ol' plain HTML again. I'm sure every IDE has a shortcut for a basic HTML structure. For VS Code, just create an empty HTML file, type ! and hit TAB.

This one might be a bit more work than clicking "Install" on the next popular WordPress theme. But personally I enjoy writing HTML and CSS and building small websites from scratch like this, giving it a personal touch. I even decided not to use JavaScript but that was more of a personal challenge and totally not necessary.

If you don't want to start from scratch, there are a lot of good vanilla HTML templates out there, e.g. HTML5up. For now, let's use this example:



<!-- template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <header>
    I'm a 36 y/o software engineer.
  </header>
  <main>
    <p>I love Open Source.</p>
    <p>I created 123 PRs on GitHub.</p>
  </main>
</body>
</html>

2. Retrieving and Processing the data



# create the script file
touch build.sh

Now it gets interesting. To retrieve and manipulate data I decided to simply use the Bash. It is available on nearly every Linux distro and has a powerful language which should be sufficient to retrieve data and put it into our HTML file. So for our example, a possible build script could look like this:



# build.sh

GH_API_URL='https://api.github.com/graphql'
GITHUB_TOKEN='abc_AB12CD34...'

# call the GitHub API via curl
QUERY='{ viewer { pullRequests { totalCount } } }'
RESULT=$(curl -s -i -H 'Content-Type: application/json' -H "Authorization: bearer $GITHUB_TOKEN" -X POST -d "{\"query\": \"query $QUERY\"}" $GH_API_URL | tail -n 1)

# get the data we want
let AGE=(`date +%s`-`date +%s -d 1987-06-05`)/31536000
PR_COUNT=$(echo $RESULT | sed -r 's|.*"totalCount":([0-9]*).*|\1|g')

What's happening here? We're calling the GitHub GraphQL API by using curl and storing the json response in $RESULT. Note that you'll need an access token, which you can generate in your GitHub settings. Since we get JSON with only one totalCount key, we can extract the number that follows that key with sed and a little regex. Also you can use let to assign a calculation directly to a variable, here an age calculated from a given date.

The last thing that's missing now, is to insert the data into our template. I decided to just use common template variable notation {{...}} (of course you can choose whatever you like) and modified the template.html like this:



<!-- template.html -->
...
  <header>
    I'm a {{age}} y/o software engineer.
  </header>
  <main>
    <p>I love Open Source.</p>
    <p>I created {{pr_count}} PRs on GitHub.</p>
  </main>
...

To replace them, we let the script copy our template and just use sed with some replacement regex again:



# build.sh
...
cp template.html index.html
sed -i -e "s|{{age}}|$AGE|g;s|{{pr_count}}|$PR_COUNT|g" index.html

Et voilà! We now have a ready-to-be-served index.html containg a computed age and API retrieved pull request count.

3. Configuration and automation

Let's now improve our bash script and make it actually configurable. You might have noticed that e.g. the GitHub token and the birth date both were just hard-coded into the script. A much better approach especially for sensitive data would be, to hold all config in a separate file. I decided to use a simple .env file, but you can use whatever suits your case:



# create a config file
touch .env



# .env
BIRTH_DATE=1987-06-05
GITHUB_TOKEN=ghp_ABCDEFGHIK123456789

To load this configuration into the bash script, you can simply source it. That way, all config variables automatically become bash variables:



# build.sh
source .env
...
let AGE=(`date +%s`-`date +%s -d $BIRTH_DATE`)/31536000
...

Now that we have an HTML template and a configurable Bash script that generates a servable index.html, we can finally execute that script—how and as often* as we like. You can run it manually, but you might as well automate the execution e.g. with a cron job or using GitHub actions. This flexibility is a huge advantage if you e.g. have to move your website to another server.

* Well, not limitless since there are limitations to the number of API calls per time. Just keep the repetition reasonably, e.g. I decided to call it once every 10 minutes.

Wrapping it up

So what we did here was creating a very basic and simple static site generator. Let's have a last look at the pros and cons of this approach in diff style:



+ Lightning fast, no blockers/requests on or after page load
+ Easy to maintain, no npm/composer update etc.
+ Flexible and (almost) tech and location independent
- Might be hard for some people to create/find a HTML template
- Not exactly beginner-friendly, requires knowledge of command line and handling raw data
- Might become less maintainable with a lot of pages

After diving into this, I can say it's still the best choice for my use case (single page website for a dev loving command line). If you want to have a look at my shiny new generated website, feel free:

https://devmount.com

And of course it's open source! Would be an honor if you use it as a template for your next little project:

https://github.com/devmount/devmount.com

You have something to add, need some explanation or found a critical aspect I didn't think of? Please let me know in the comments.

For convenience, here are the complete example files, if you'd like to fiddle around a bit with it:



<!-- template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <header>
    I'm a {{age}} y/o software engineer.
  </header>
  <main>
    <p>I love Open Source.</p>
    <p>I created {{pr_count}} PRs on GitHub.</p>
  </main>
</body>
</html>



# .env
BIRTH_DATE=1987-06-05
GITHUB_TOKEN=ghp_ABCDEFGHIK123456789



# build.sh
source .env

GH_API_URL='https://api.github.com/graphql'

# call the GitHub API via curl
QUERY='{ viewer { pullRequests { totalCount } } }'
RESULT=$(curl -s -i -H 'Content-Type: application/json' -H "Authorization: bearer $GITHUB_TOKEN" -X POST -d "{\"query\": \"query $QUERY\"}" $GH_API_URL | tail -n 1)

# get the data we want
let AGE=(`date +%s`-`date +%s -d $BIRTH_DATE`)/31536000
PR_COUNT=$(echo $RESULT | sed -r 's|.*"totalCount":([0-9]*).*|\1|g')

# generate website and replace template variables
cp template.html index.html
sed -i -e "s|{{age}}|$AGE|g;s|{{pr_count}}|$PR_COUNT|g" index.html

Published: 2nd May 2024

JavaScript Array Methods Explained with Emojis

Andreas — Thu, 25 Feb 2021 12:47:19 +0000

JavaScript has a lot of useful Array operations. If you are just as confused as me about which one to take and what they all do, let's visualize these operations using emojis to better remember and apply them where they fit best ✅ And who knows, maybe they are capable of doing even more than we expect...

All examples in this article actually work, so feel free to try them in your browsers console 🤓

1. `Array.push()`

Adds one or more elements to the end of an array. Or grows a farm.

let livestock = ["🐷", "🐮", "🐔"];
livestock.push("🐴", "🐮");
// console.log(livestock);
// ["🐷", "🐮", "🐔", "🐴", "🐮"]

Documentation on MDN

2. `Array.from()`

Creates a new array from an array-like or iterable object. Or separates some wild animals.

const wild  = "🐻🐯🦁";
const tamed = Array.from(wild);
// console.log(tamed);
// ["🐻", "🐯", "🦁"]

Documentation on MDN

3. `Array.concat()`

Merges two or more arrays into a single new one. Or brings different worlds together.

const dogs = ["🐶", "🐶"];
const cats = ["🐱", "🐱", "🐱"];
const pets = dogs.concat(cats);
// console.log(pets);
// ["🐶", "🐶", "🐱", "🐱", "🐱"]

Documentation on MDN

4. `Array.every()`

Checks if all elements of an array pass the test. Or detects intruders.

const visitors   = ["🧑", "👽", "🧑", "🧑", "🤖"];
const isHuman    = e => e === "🧑";
const onlyHumans = visitors.every(isHuman);
// console.log(onlyHumans);
// false

Documentation on MDN

5. `Array.fill()`

Replaces the elements of an array from start to end index with a given value. Or grows some trees.

let seeds = ["🌱", "🌱", "🌱", "🌱", "🌱"];
seeds.fill("🌳", 1, 4);
// console.log(seeds);
// ["🌱", "🌳", "🌳", "🌳", "🌱"]

Documentation on MDN

6. `Array.filter()`

Creates a new array containing all elements passing the test. Or predicts your relationship status.

const guests  = ["👩👨", "👩👩", "👨", "👩", "👨👨"];
const singles = guests.filter(g => g.length/2 === 1); // *
// console.log(singles);
// ["👨", "👩"]

* You might wonder, why the string length is divided by two here. The reason is that emojis actually are represented by a pair of code points, also known as a surrogate pair.
Try "👩".length in your console and see for yourself. More information in this article.

Documentation on MDN

7. `Array.flat()`

Creates a new array containing all elements from all sub-arrays up to a given depth. Or cracks any safe.

const savings = ["💵", ["💵", "💵"], ["💵", "💵"], [[["💰"]]]];
const loot    = savings.flat(3)
// console.log(loot);
// ["💵", "💵", "💵", "💵", "💵", "💰"];

Documentation on MDN

8. `Array.includes()`

Checks if an array contains a specific element. Or finds the secret sweet tooth.

const food   = ["🥦", "🥬", "🍅", "🥒", "🍩", "🥕"];
const caught = food.includes("🍩");
// console.log(caught);
// true

Documentation on MDN

9. `Array.join()`

Concatenates all array elements to one single string, using an optional separator. Or builds local area networks.

const devices = ["💻", "🖥️", "🖥️", "💻", "🖨️"];
const network = devices.join("〰️");
// console.log(network);
// "💻〰️🖥️〰️🖥️〰️💻〰️🖨️"

Documentation on MDN

10. `Array.map()`

Calls a function on each array element and returns the result as new array. Or feeds all hungry monkeys.

const hungryMonkeys = ["🐒", "🦍", "🦧"];
const feededMonkeys = hungryMonkeys.map(m => m + "🍌");
// console.log(feededMonkeys);
// ["🐒🍌", "🦍🍌", "🦧🍌"]

Documentation on MDN

11. `Array.reverse()`

Reverses the order of elements in an array. Or decides the outcome of a race.

let   rabbitWins   = ["🐇", "🦔"];
const hedgehogWins = rabbitWins.reverse();
// console.log(hedgehogWins);
// ["🦔", "🐇"]

Note that this method is destructive, it modifies the original array. So after line 2 of this example rabbitWins and hedgehogWins both have the value ["🦔", "🐇"]

Documentation on MDN

12. `Array.slice()`

Creates a new array from copying a portion of an array defined by start and end index. Or cheats in an exam.

const solutionsOfClassmates = ["📃", "📑", "📄", "📝"];
const myOwnSolutionReally   = solutionsOfClassmates.slice(2, 3);
// console.log(myOwnSolutionReally);
// ["📄"]

Documentation on MDN

13. `Array.some()`

Tests if at least one element of an array passes the test. Or finds if some participants of your meeting forgot to mute their mic.

const participants = ["🔇", "🔇", "🔊", "🔇", "🔊"];
const isLoud       = p => p === "🔊";
const troubles     = participants.some(isLoud);
// console.log(troubles);
// true

Documentation on MDN

14. `Array.sort()`

Sorts all elements of an array. Or organizes your bookshelf again.

let books = ["📕", "📗", "📕", "📒", "📗", "📒"];
books.sort();
// console.log(books);
// ["📒", "📒", "📕", "📕", "📗", "📗"]

Documentation on MDN

15. `Array.splice()`

Removes, replaces or adds elements to an array. Or changes the weather.

let weather = ["☁️", "🌧️", "☁️"];
weather.splice(1, 2, "☀️");
// console.log(weather);
// ["☁️", "☀️"]

Documentation on MDN

16. `Array.unshift()`

Adds one or more elements to the beginning of an array. Or couples a loco.

let train = ["🚃", "🚃", "🚃", "🚃"];
train.unshift("🚂");
// console.log(train);
// ["🚂", "🚃", "🚃", "🚃", "🚃"]

Documentation on MDN

Wrap it up

We saw that we have quite a lot of possibilities for array processing and manipulation in JavaScript. See MDN for an overview of all Array instance methods. You want to add another nice example how to explain a JavaScript method or just want to show us your favorite emoji? Please comment below 💬⬇

Published: 25th February 2021
Title image: https://codepen.io/devmount/pen/oNxGpgQ

PHP 8 features I wish also existed in JavaScript

Andreas — Mon, 08 Feb 2021 12:34:25 +0000

I know there is still a lot of hatred for PHP out there, but in my opinion with version 7 at the latest (which is already over 5 years old!), PHP evolved to a great language that is fun and even type-safe to use. Next to Just-In-Time compilation, which may give a big performance boost to PHP applications, version 8 brings a lot of useful features.

I want to present three of them I really wish I could use in JavaScript as well. I hope that comes in handy especially for those, who didn't take a look at PHP 8 yet. Let's go!

#1 Named arguments

Let's assume, you have a function foo with 6 parameters a to f having different default values and now you want to call that function passing the argument false for the last parameter only.

PHP 8:

foo(f: false);
//-----^

JavaScript:

foo('test', 42, true, 'bar', 5.5, false);
//--------------------------------^

In JavaScript passing arguments to a function is solely based on the parameter position, unfortunately. I know that named arguments can be simulated by using objects and destructuring, but a native feature would be much more convenient here.

See RFC: Named Arguments

#2 Match expression

The new match expression of PHP is very similar to the switch statement, except it is an expression and can be used to directly assign values to a variable or return values. This comes in very handy, if you have more than two possible values for assignment.

PHP 8:

$fontWeight = match ($weight) {
  100, 200      => "Super Thin",
  300           => "Thin",
  400, 500      => "Normal",
  600, 700, 800 => "Bold",
  900           => "Heavy",
  default       => "Not valid"
};

JavaScript:

let fontWeight = '';
switch (weight) {
  case 100:
  case 200:
    fontWeight = "Super Thin";
    break;
  case 300:
    fontWeight = "Thin";
    break;
  case 400:
  case 500:
    fontWeight = "Normal";
    break;
  case 600:
  case 700:
  case 800:
    fontWeight = "Bold";
    break;
  case 900:
    fontWeight = "Heavy";
    break;
  default:
    fontWeight = "Not valid";
    break;
}

The match expression may be simulated by a JavaScript object, but that would require an additional variable (thus more reserved memory) and will fail for cases, where the checked values aren't allowed to be used as object keys.

See Docs: match

#3 Optional Chaining

Chaining only if the needed property exists is a very elegant way to query objects. In PHP you can do this now with the nullsafe operator.

PHP 8:

$country = $session?->user?->getAddress()?->country;

JavaScript:

const country =
  session && session.user && session.user.getAddress() && session.user.getAddress()['country']
  ? session.user.getAddress()['country']
  : null;

In JavaScript you still have to check step by step, if the corresponding property exists. There is a corresponding TC39 proposal which is in stage 4 by now and I'm really looking forward to this being part of the ECMAScript Specs.

See RFC: Nullsafe Operator

Wrap it up

So we saw a small selection of the new PHP 8 features that would also be a great addition to JavaScript. Maybe you have other PHP features in mind that are missing in JavaScript or you know a better JavaScript counterpart to the above problems than me? Great! Let's discuss it in the comments.

Edited: 10th of February 2021 (extended match example)
Published: 8th of February 2021

ThirdStats — Beautifully Visualized Email Account Stats

Andreas — Tue, 29 Sep 2020 14:22:50 +0000

In the first post of this series I told you the background story why I built a tool that's able to show some email analytics in the Mozilla Thunderbird email client. After using this tool for a year now, I've determined three major issues:

❌ It depends on the mail storage engine
❌ The stats creation process is a little too complex
❌ The stats page cannot be accessed directly from Thunderbird

What I did

To address all of these issues, I decided to create a native Thunderbird add-on with the same functionality. Well, I never built a Thunderbird add-on before, so I took a look into the Thunderbird documentation. It turned out, that thanks to Thunderbirds WebExtension APIs, I was able to reuse nearly all of my Vue.js code - nice! I spent a weekend of porting my code and creating ThirdStats:

devmount / third-stats

Thunderbird add-on turning your emails into beautifully visualized email account stats. Built with Vue.js and Chart.js

ThirdStats is a Thunderbird add-on for beautifully visualized email account stats.
Download from Thunderbird Add-ons repository. Contributions, corrections & requests can be made on GitHub.
Created by Andreas Müller.

Get started

Install ThirdStats from the Thunderbird Add-ons repository:

Start Thunderbird, open the main menu and click on Add-ons
Search for ThirdStats
Click Add to Thunderbird and give necessary permissions
Open the ThirdStats Popup in the upper right corner of the main toolbar and enjoy your email account stats

To properly recognize emails as sent, make sure to configure all email adresses you write from as Thunderbird identities for your email account. You can do so under account settings > select your account > click button more identities at the bottom and add or modify identities as you need.

Also keep in mind, that the processing of large mailboxes can take a lot of time.

Features

Check key…

View on GitHub

A screenshot showing ThirdStats on the Thunderbird default dark theme on Windows

What you can do

This is actually the first Thunderbird 78+ add-on providing visual statistics of email accounts (at least I wasn't able to find something similar in the repository)! So if you are interested in contributing to the large community of Thunderbird users - you are very welcome to do so! I've prepared the GitHub repository so it's ripe and ready for harvest in this year's Hacktoberfest.

Add translations

If you're new to contributing to OSS and you want to get to know the process of creating Pull Requests first, you can just add a translation of the add-on in your native language. This is as simple as adding a single JSON file. I explained everything in the Contribution Guidelines and prepared some example issues.

Improve the UI

If you're already familiar with Vue.js app development and you have some experience in building user interfaces, you can help improving ThirdStats UI. I've prepared some example issues for this topic too (e.g. #8, #9, #10). Please discuss your ideas or possible changes in the corresponding issue first before investing a lot of time for a pull request that won't get merged for some reason.

Add charts

And for those of you who are looking for the real challenge, I prepared some feature requests (#11, #12) to implement additional charts and analytics to make this add-on even more complete. What numbers are you interested in about your mail account?

Again: Please discuss your ideas in a corresponding issue first before investing a lot of time for a pull request that won't get merged for some reason.

Wrap it up

So I made my first steps contributing to the (in my opinion) best open source email client out there by creating an add-on to expand its functionality. Do you use Thunderbird? Would you use this add-on? What is missing in your opinion? Let's discuss here in the comments or directly on GitHub!

Automatic Deployment via good ol' FTP

Andreas — Thu, 03 Sep 2020 08:55:33 +0000

Since their release, GitHub actions are on my long-term todo list for increasing automation of my workflows. Thanks to DEVs GitHub Actions Hackathon, I'm finally tackling this topic.

I'm not really sure if it's a thing to be ashamed of today, but I'm still pushing build files of most of my personal open source projects manually via good ol' FTP to my server. Maybe I just don't wanted to give up too much control over the files that I push to production. Or after doing web development for more than 15 years now, I was just too lazy to change something 😅

However, I found an awesome GitHub action to publish files automatically via FTP to my server on build.

My Workflow

It's the FTP-Deploy-Action by Sam Kirkland which utilizes Git-ftp. I'm mostly creating Vue.js applications with the Vue CLI - so my normal workflow always looked like this:

➕ Make code changes (e.g. fixing an important security issue)
🔨 Test code changes
✅ Commit these changes to the repository
🔁 Create new build files optimized for production using vue-cli-service build
❌ Delete old build files from production server
⏫ Upload new build files to production server

Especially the last two points always bothered me, because most of the time I was pushing some smaller changes that only affected a few files and I still deleted and reuploaded the whole application. And this is, where Git-ftp really pays off: It can upload only those files, that changed since the last upload! This is extremely useful, especially for projects with a lot of files. A few of my PHP projects e.g. use Git Submodules and uploading the whole project on each build would take an incredible amount of time. So my new workflow now looks like this:

➕ Make code changes (e.g. fixing an important security issue)
🔨 Test code changes
✅ Commit these changes to the repository
🔁 Create new build files optimized for production using vue-cli-service build
Lean back and let the GitHub FTP-Deploy-Action do the rest

Submission Category

✅ DIY Deployments

Configuration

So, how can you set up this FTP-Deploy-Action? You simply have to create a configuration file called ftp-deploy.yaml under your-repo/.github/workflows/. This is what my configuration looks like:

on:
  push:
    paths:
      - 'dist/*'
name: FTP Deploy
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
    - uses: actions/[email protected]
      with:
        fetch-depth: 2
    - name: FTP-Deploy-Action
      uses: SamKirkland/FTP-Deploy-Action@master
      with:
        ftp-server: ${{ secrets.ftp_server }}
        ftp-username: ${{ secrets.ftp_username }}
        ftp-password: ${{ secrets.ftp_password }}
        local-dir: dist/

I'm going to explain every part in the following for you to understand, how this works 💡

Lines	Explanation
1—4	`on: push: paths:` Only start this action, when changes where pushed to the `dist/` directory (this is the default build folder for Vue CLI)
5	`name:` The name of your GitHub action which is shown in the repositories action tab on GitHub.
6—15	`jobs: FTP-Deploy-Action: ...` This is the default configuration for this action, accourding to its documentation.
16	`with:` This section allows for further required or optional configuration of the action.
17—19	`ftp-server: \| ftp-username: \| ftp-password:` Obviously GitHub needs to know your FTP access data like server url, username and password. Even more obviously, you don't want to store these data in this configuration file rather than as encrypted secrets. The port number is appended to the url, if you need it. Also you can specify the security protocol (see security hint below), e.g.: `ftps://your.ftp-server.com:21`
20	`local-dir:` This makes sure, that not the whole repository, but only (in my case) the `dist/` directory gets uploaded, where my build files live.

Bonus: If you want to explicitly exclude some files from being uploaded, you can create a .git-ftp-ignore file in the root of your repository, which works the same way as a .gitignore file.

Additional Resources / Info

Here are the repositories of the GitHub action and git-ftp:

SamKirkland / FTP-Deploy-Action

Deploys a GitHub project to a FTP server using GitHub actions

git-ftp / git-ftp

Uses Git to upload only changed files to FTP servers.

Security hint

FTP itself transfers files unencrypted. Therefore it's highly recommended to use FTPS (FTP with TLS) or SFTP (SSH file transfer), which are both supported by git-ftp. Thanks to @lampewebdev for his comment on this topic.

Wrap it up

So we saw that it's fairly simple to let GitHub deploy you build files automatically via FTP. You just need to create one configuration file and set a few repository secrets.

Let me know, if you also deploy via FTP and this is useful for your own workflows.

Edited: 4th September 2020 (add server url example and security hint)
Published: 3rd September 2020
Title image: https://codepen.io/devmount/full/qBZPpEM

10 Awesome Pythonic One-Liners Explained

Andreas — Wed, 29 Jul 2020 11:18:30 +0000

Since I wrote my first lines of code in Python, I was fascinated by its simplicity, excellent readability and its popular one-liners in particular. In the following, I want to present and explain some of these one-liners - maybe there are a few you didn't already know and are useful for your next Python project.

1. Swap two variables

# a = 1; b = 2
a, b = b, a
# print(a,b) >> 2 1

Let's start with a classic: swapping the values of variables by simply swapping positions on assignment - the most intuitive way in my opinion. No need to use a temporary variable. It even works with more than two variables.

2. Multiple variable assignment

a, b, *c = [1,2,3,4,5]
# print(a,b,c) >> 1 2 [3, 4, 5]

Swapping variables is actually a special case of Pythons ability to assign multiple variables at once. Here you can use it to assign list elements to the given variables, which is also called unpacking. The * will do packing the remaining values again, which results in a sublist for c. It even works for every other position of * (e.g. the beginning or middle part of the list).

3. Sum over every second element of a list

# a = [1,2,3,4,5,6]
s = sum(a[1::2])
# print(s) >> 12

No need for a special reduce function here, sum just adds the items of every given iterable. The extended slicing syntax [::] is used here to return every second element. You can read it as [start : stop : step], so [1::2] translates to start with the element of index 1 (second element), don't stop until the list ends (no argument given for second parameter) and always take 2 steps.

4. Delete multiple elements

# a = [1,2,3,4,5]
del a[::2]
# print(a) >> [2, 4]

The extended slicing syntax can also be used to delete multiple list elements at once.

5. Read file into array of lines

c = [line.strip() for line in open('file.txt')]
# print(c) >> ['test1', 'test2', 'test3', 'test4']

With Pythons inline for loop you can easily read a file into an array of lines. The strip() is needed to remove the trailing line breaks. If you want to keep them or they don't matter to you, you can use an even shorter one-liner:

c = list(open('file.txt'))
# print(c) >> ['test1\n', 'test2\n', 'test3\n', 'test4\n']

It's really that simple to read a file in Python. Side note: you can also use the readlines() method if you like.

6. Write string to file

with open('file.txt', 'a') as f: f.write('hello world')
# print(list(open('file.txt'))) >> ['test1\n', 'test2\n', 'test3\n', 'test4\n', 'hello world']

With the help of the with statement, you can directly write content to a file. Make sure to use the correct mode to open the file (here 'a' for appending content).

7. List creation

l = [('Hi ' + x) for x in ['Alice', 'Bob', 'Pete']]
# print(l) >> ['Hi Alice', 'Hi Bob', 'Hi Pete']

Lists can be dynamically created from other lists with the inline for loop. You can directly modify the values, like string concatenation in this example.

8. List mapping

l = list(map(int, ['1', '2', '3']))
# print(l) >> [1, 2, 3]

You can also use Pythons map() function to cast every list element to another type.

9. Set creation

squares = { x**2 for x in range(6) if x < 4 }
# print(squares) >> {0, 1, 4, 9}

It's similar with sets. In addition to the inline for loop, you can even directly append a condition!

10. Palindrome check

# phrase = 'deleveled'
isPalindrome = phrase == phrase[::-1]
# print(isPalindrome) >> true

A palindrome is a series of characters that read the same both forwards and backwards. Normally you would need some looping and conditions to check, if a given string is a palindrome. In Python, you just compare the string with its reverse string. Instead of using the slicing operator [::-1], you can also use the reverse() function to reverse the string.

Bonus: The Zen of Python

import this

Well, this one needs no explanation. Just try it yourself by simply entering it in your Python shell 😊🎉

Wrap it up

We've seen some (admittedly simple) examples of Python one-liners, that are powerful and well readable at the same time. Maybe you know another helpful one-liner? Share it with us in the comments!

Published: 29th July 2020

Some Emmet Magic Frontend Devs should know

Andreas — Mon, 20 Jul 2020 13:13:00 +0000

I would like to share some examples of useful Emmet commands that heavily speed up my markup creation - and maybe yours too.

If you haven't heard of Emmet before, see this awesome introduction to Emmet by Thabi. Emmet is integrated in most code editors by default, so maybe you're using it right now without knowing it's Emmet under the hood 😅. In VS Code e.g. you just have to type the Emmet abbreviation and hit TAB to create the markup.

Document creation

doc

No need to write the whole doctype yourself. Each HTML file can be kickstarted by simply typing doc and hit TAB.

Table creation

table>#row$*3>[colspan=2]

Emmet inserts implicit tag names here (such as tr and td) and you can simply multiply elements and apply the current iteration number to e.g. the elements id with the $ sign.

Form creation

form:post>(select>opt[value=$]{#$$}*4)+btn:s

There are also a lot of aliases, that massively reduces the number of characters you have to type, e.g. btn:s instead of button[type=submit]. Also you can force leading Zeros with multiple $ signs.

Generic content

ul.generic>lorem6.item*5

In case you just create HTML layout demos, the lorem abbreviation comes in very handy, followed by the number of words the sentence should consist of.

Bonus: Abbreviation Wrap in VS Code

If you're changing existing markup rather than creating it from scratch (which is probably almost always the case), you can make use of VS Code's command Emmet: Wrap with Abbreviation. Here you can select some content and wrap it with the desired tags by using Emmet Syntax:

Plus: Setting a keyboard shortcut for this feature saves a lot of time! On my Windows machine, I configured CTRL+ALT+E

Wrap it up

We've seen, that there are a lot of abbreviations that speed up the process of creating markup. This is especially useful, when you're creating a lot of markup by hand.

Check the Emmet Cheat Sheet if you want to learn more. Happy coding!

Published: 20th July 2020

What was the funniest typo in your client conversations?

Andreas — Fri, 17 Jul 2020 10:38:33 +0000

Have you ever experienced a funny or embarrassing situation because of a typo you or your client made?

(title photo by Amador Loureiro on Unsplash)

You Can Quit! ...with the help of Vue and Dexie

Andreas — Mon, 27 Apr 2020 13:12:56 +0000

I humbly assume that every single one of us has a bad habit we want to get rid of. At least I have those habits 😅. Be it committing untested code, coding without proper documentation, just copying-and-pasting code or not even programming or computer related things like spending too less time with family or friends, blaming others for any faults instead of taking responsibility or eating too many candies 🍭🤷🏻‍♂️.

Back in July 2018 I came to a point where I really got frustrated about my inability to listen to my wife. I mean real listening. Listening without instantly forgetting what she said in the next minutes. Listening while giving her full attention. Though it's difficult being interrupted when you're really into something like programming, I could at least properly communicate that now is not a good time to talk instead of pretending to listen and not knowing what she said as soon as she was leaving the room. This often resulted in discussions like "I thought we talked about that" or "I asked you to do that and you didn't". I didn't liked that and knew, I had to do something about it.

Like a good programmer I first analyzed the problem. The problem was, that it just happened - it became one of my habits and habits are typically difficult to break, because it's too easy to do things as always and I'm not aware of it being a bad thing in that situation. So my problem was summarized by this one question: How to get that awareness to actually improve myself? My programmer mind instantly knew the answer: Build a tool!

That is how you-can-quit was born. A tool that aims to help the user not doing something anymore on a daily basis, by tracking the progress, provide encouraging notifications, funny achievements and the possibility for the user to recognize patterns.

How it looks

I host this app at youcanqu.it. Just drop by and play around, test or use it as you like. I decided to do the layout and styling myself and not use a CSS Framework. The following are the main sections of the app.

Month view and actual input area

The month view shows the current or selected month. When hovering over a day in the past, some buttons to set the state of that day appear. You can use arrow keys to navigate between different months.

Stats

Currently the stats are just showing the current streak (number of successful days in a row until today), the longest streak and the total number of successful days.

Achievements

I thought it would be much more fun and a lot more effective to reach various small goals on the way. So I created 18 achievements where most of them can be rewarded multiple times. The white bar at the bottom of each achievement indicates its progress. More achievements are planned, as well as a score-of-success, that's calculated based on streaks and weighted achievements score.

Year view

Here you have the possibility to find possible patterns over a longer time interval. Maybe you are more prone to failure on Mondays or a certain season in the year. You can navigate between years with STRG + arrow keys.

Administration

You can export, import or delete your data here.

How it works

It's as simple as setting the past day(s) successful or failed, depending on whether you have reached your goal on that day or not. To do that, just move the cursor over one of the past days in the monthly overview and click the left or right button that appear (You can also set that day back to undecided, if you want). You can do that e.g. everyday in the morning for the past day. With every successful day, you will see your stats and achievements increase.

Under the hood, it's a Vue.js SPA using Dexie.js to store the data via your browsers Indexed Database API. That means no data is leaving your machine or synchronized with a server. Privacy ✅!

If you want to know more details, here is the project repository:

devmount / you-can-quit

A tool to support your progress in quitting whatever your bad habit is.

You are very welcome to support this Github project by staring it ⭐, creating issues 🐛 or pull request 🏗. Maybe you have ideas for additional achievements or you want to translate this tool into your own language? See these guidelines if you'd like to contribute 💚

Final words

I really hope this project is as useful for some of you as it is for myself. I'm still in the process of improving my communication skills, but it helped me to literally see my progress and success. I always love to build something while knowing, that people are actually using it and it really helps them! That's what Open Source is about, isn't it?

Don't hesitate to share your story of a bad habit in the comments. I'm sure we can all help each other to become a little bit better every day!

DEV-community-🤗! Keep it up, you are awesome.

Published: 27th April 2020

4 PHP Tricks to Boost Script Performance

Andreas — Tue, 14 Apr 2020 12:07:57 +0000

Normally I write code by using the conventional, obvious PHP functions to solve corresponding problems. But for some of these problems I came across alternative solutions that especially increase performance.

In this article I want to present some of these alternatives. This is useful, if you're searching for possibilities to decrease execution time even more in production. Let's see, which PHP methods might be replaced by a more performant approach and if there is any cost or trade-off.

ℹ All these methods were tested with PHP 7.4 on a local web server

1. Removing duplicates

You have a large array with duplicates and want to remove them to only have an array with unique values only.

🐌 Conventional



array_unique($array);

⚡ Alternative



array_keys(array_flip($array));

⏲ Performance

I created an array with more than 4 million elements having more than 3 million duplicates. Here is the top result:

method	execution time
`array_unique`	787.31 ms
`array_keys` `array_flip`	434.03 ms

The alternative approach is 1.8x (44.87%) faster in this measurement. On average, it was ~1.5x (30%) faster. Trade-off: This is only applicable for simple, one-dimensional arrays since array_flip replaces keys by values.

2. Get random array element

You have a large array and want to pick a random value from it.

🐌 Conventional



array_rand($array);

⚡ Alternative



$array[mt_rand(0, count($array) - 1)];

⏲ Performance

I created an array with 5 million elements. Here is the top result:

method	execution time
`array_rand`	25.99 μs
`mt_rand`	0.95 μs

The alternative approach is 27.3x (96.33%) faster in this measurement. On average, it was ~8x (87%) faster. This result is particularly surprising, as mt_rand is the implementation of the Mersenne Twister Random Number Generator and since PHP 7.1, the internal randomization algorithm has been changed to use exactly that same algorithm.

3. Test for alphanumeric characters

You have a string and want to test, if it only contains alphanumeric characters.

🐌 Conventional



preg_match('/[a-zA-Z0-9]+/', $string);

⚡ Alternative



ctype_alnum($string);

⏲ Performance

I created an array with more than 100k alphanumeric and non-alphanumeric strings. Here is the top result:

method	execution time
`preg_match`	15.39 ms
`ctype_alnum`	2.06 ms

The alternative approach is 7.5x (86.59%) faster in this measurement. On average, it was ~4x (76%) faster.

The same can be applied to ctype_alpha() (check for alphabetic characters) and ctype_digit() (check for numeric characters).

4. Replace substrings

You have a string and want to replace a part of it by another substring.

🐌 Conventional



str_replace('a', 'b', $string);

⚡ Alternative



strtr($string, 'a', 'b');

⏲ Performance

I created an array with 5 million random strings. Here is the top result:

method	execution time
`str_replace`	676.59 ms
`strtr`	305.59 ms

The alternative approach is 2.2x (54.83%) faster in this measurement. On average, it was ~2x (51%) faster.

Additional performance improvements

Here are some additional points I integrated into my coding convention that I found to improve perfomance slightly (if applicable):

Prefer JSON over XML
Declare variables before, not in every iteration of the loop
Avoid function calls in the loop header (in for ($i=0; $i<count($array); $i) the count() gets called in every iteration)
Unset memory consuming variables
Prefer select statement over multiple if statements
Prefer require/include over require_once/include_once (ensure proper opcode caching)

Some final words: I know the discussion about premature optimization. And I agree that performance in production is depending on bottlenecks like database queries which should be focused on when dealing with performance. But I think, if there are alternatives that are faster and e.g. in case of regex easier to handle and maintain, why not using them?

Wrap it up

We've seen, that even with the current PHP 7.4 (which is already a lot faster than previous PHP versions) there are possibilities to boost script performance with alternative approaches even more. If you want to verify the figures presented in this article yourself, I created a repository with all tests:

devmount / faster-php

Testing different approaches to improve PHP script performance

I used this great tool by Bart van Hoekelen to measure execution time.

Please don't hesitate to comment here or create an issue/PR at the repo above if you know additional ways to improve performance of certain PHP functions.

Published: 14th April 2020

A CheatSheet of 128 CheatSheets for Developers

Andreas — Tue, 25 Feb 2020 12:36:45 +0000

I compiled a list of the (in my opinion) best Cheatsheets and tutorials for some of the top languages, frameworks and tools out there. I considered clarity, interactivity and simplicity for beginners. Lets go!

General

Programming, Scripting and Query Languages

C

009 https://developerinsider.co/c-programming-language-cheat-sheet/

C++

010 https://www.educba.com/c-programming-language-basics/

Go

011 https://github.com/a8m/golang-cheat-sheet
012 https://devhints.io/go
013 https://dev.to/codehakase/how-i-learned-go-programming

GraphQL

014 https://devhints.io/graphql
015 https://raw.githubusercontent.com/sogko/graphql-shorthand-notation-cheat-sheet/master/graphql-shorthand-notation-cheat-sheet.png
016 https://dev.to/methodcoder/graphql-crash-course-in-10-pics-3b04

Java

017 https://overapi.com/java
018 https://cheatography.com/son9912/cheat-sheets/java-oop-concept/
019 https://www.educba.com/category/software-development/software-development-tutorials/java-tutorial/
020 https://dev.to/monknomo/java-8-stream-cheatsheet--oad

JavaScript, ES2015+

021 https://quickref.me/es6.html
022 https://htmlcheatsheet.com/js/
023 https://devhints.io/es6
024 https://overapi.com/javascript
025 https://dev.to/samanthaming/javascript-module-cheatsheet-5b4o
026 https://dev.to/samanthaming/es6-arrow-functions-cheatsheet-1cn

PHP

027 https://overapi.com/php
028 https://phpcheatsheets.com/
029 https://dev.to/biros/awesome-php-resources-on-dev----3a18

Python

030 https://devhints.io/python
031 https://overapi.com/python
032 https://www.pythoncheatsheet.org
033 https://dev.to/abhirajb/the-ultimate-python-cheatsheet-56g7

Regex

034 https://www.debuggex.com/cheatsheet/regex/javascript
035 https://devhints.io/regexp
036 https://overapi.com/regex
037 https://dev.to/emmabostian/regex-cheat-sheet-2j2a
038 https://dev.to/catherinecodes/a-regex-cheatsheet-for-all-those-regex-haters-and-lovers--2cj1

Ruby

039 https://overapi.com/ruby
040 https://dev.to/teekay/idiomatic-ruby-writing-beautiful-code-56ef
041 https://dev.to/philnash/top-10-errors-from-1000-ruby-on-rails-projects-and-how-to-avoid-them-24m

SQL, MySQL

042 https://devhints.io/mysql
043 https://overapi.com/mysql

TypeScript

044 https://learnxinyminutes.com/docs/typescript/
045 https://devhints.io/typescript

Frameworks, libraries and their extensions

Angular

046 https://docs.w3cub.com/angular/guide/cheatsheet.html
047 https://dev.to/lysofdev/an-angular-testing-cheatsheet-5hj2

jQuery

048 https://oscarotero.com/jquery/
049 https://overapi.com/jquery

React

050 https://cheatsheets.shecodes.io/react
051 https://devhints.io/react
052 https://reactcheatsheet.com/

Redux

053 https://medium.com/@javascript_7596/react-redux-concept-workflow-cheatsheet-be00e3ffa853
054 https://devhints.io/redux
055 https://github.com/linkmesrl/react-journey-2016/blob/master/resources/egghead-redux-cheat-sheet-3-2-1.pdf

Vue.js

056 https://learnvue.co/LearnVue-Vue-3-Cheatsheet.pdf
057 https://devhints.io/vue
058 https://dev.to/adnanbabakan/vue-cheat-sheet-1-194a
059 https://dev.to/adnanbabakan/vue-cheat-sheet-2-5aj8
060 https://dev.to/adnanbabakan/vue-cheat-sheet-3-advanced-4khj
061 https://dev.to/devmount/how-to-kickstart-a-vuejs-project-2mj5

Vuex

062 https://vuejs-tips.github.io/vuex-cheatsheet/
063 https://dev.to/napoleon039/when-why-and-how-to-use-vuex-9fl

Editors, IDEs and other tools

Atom

064 https://devhints.io/atom

Bash

065 https://devhints.io/bash
066 http://johnstowers.co.nz/pages/bash-cheat-sheet.html
067 https://dev.to/devmount/9-evil-bash-commands-explained-4k5e

Docker

068 https://devhints.io/docker
069 https://dev.to/emarsys/the-missing-docker-cheatsheet-4dbg

Git

070 http://www.ndpsoftware.com/git-cheatsheet.html
071 https://overapi.com/git
072 https://dev.to/maxpou/git-cheat-sheet-advanced-3a17
073 https://dev.to/duomly/git-cheatsheet-for-beginners-5apl
074 https://dev.to/antjanus/my-personal-git-tricks-cheatsheet-23j1
075 https://dev.to/hengnee/yet-another-git-cheatsheet-4gjk
076 https://dev.to/devmount/how-to-correct-git-commit-messages-402d
077 https://dev.to/devmount/signed-git-commits-in-vs-code-36do

Node.js

078 https://devhints.io/nodejs
079 https://overapi.com/nodejs
080 https://dev.to/santypk4/bulletproof-node-js-project-architecture-4epf
081 https://dev.to/jorge_rockr/everything-you-need-to-know-about-node-js-lnc

Sublime Text

082 https://devhints.io/sublime-text
083 https://shortcuts.design/toolspage-sublimetext.html

Vim

084 https://vim.rtorr.com/
085 https://devhints.io/vim
086 https://sheet.shiar.nl/vi

Visual Studio Code

087 https://devhints.io/vscode
088 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
089 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
090 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf
091 https://dev.to/devmount/23-lesser-known-vs-code-shortcuts-as-gif-80

Markup and Styling

CSS, CSS3, Flexbox

092 https://htmlcheatsheet.com/css/
093 https://devhints.io/css
094 http://overapi.com/css
095 https://yoksel.github.io/flex-cheatsheet/
096 https://dev.to/proticm/css-variables-cheat-sheet-32id
097 https://dev.to/iggredible/css-selectors-cheatsheet-24bh
098 https://dev.to/devmount/learn-css-animation-by-creating-pure-css-loaders-3lm6
099 https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f

Emmet

100 https://docs.emmet.io/cheat-sheet/
101 https://devhints.io/emmet
102 https://dev.to/lalawuhan/emmet-love-4be5

HTML, HTML5

103 https://htmlcheatsheet.com/
104 https://devhints.io/html
105 http://overapi.com/html

JSON

106 https://cheatography.com/mackan90096/cheat-sheets/json/

LaTeX

107 https://wch.github.io/latexsheet/
108 https://dev.to/nickymarino/lets-use-latex

Markdown

109 https://www.markdownguide.org/cheat-sheet
110 https://devhints.io/markdown
111 https://dev.to/rattanakchea/markdown-cheatsheet-for-developers-2bjj

Pug

112 https://devhints.io/pug

SASS, SCSS

113 https://quickref.me/sass.html
114 https://devhints.io/sass
115 https://dev.to/finallynero/scss-cheatsheet-7g6

Stylus

116 https://devhints.io/stylus

Xpath

117 https://devhints.io/xpath

Yaml

118 https://lzone.de/#/LZone%20Cheat%20Sheets/Languages/YAML
119 https://devhints.io/yaml

Platforms, web apps and code management

Github

120 https://github.com/tiimgreen/github-cheat-sheet
121 https://github.github.com/training-kit/downloads/github-git-cheat-sheet/

Gitlab

122 https://docs.gitlab.com/ee/user/markdown.html

Jupyter Notebook

123 https://s3.amazonaws.com/assets.datacamp.com/blog_assets/Jupyter_Notebook_Cheat_Sheet.pdf

NPM

124 https://devhints.io/npm
125 https://guide.freecodecamp.org/developer-tools/npm-cheatsheet/
126 https://dev.to/therealdanvega/creating-your-first-npm-package-2ehf

Yarn

127 https://devhints.io/yarn
128 https://github.com/areai51/yarn-cheatsheet

Wrap it up

Having a lot of basic information at one glance is often very useful for me, because I tend to forget the most basic things regularly 😅. As I already wrote in one of my earlier posts, I created a repository on GitHub, where I maintain this list above and collect commands I tend to forget - check it out if you want:

devmount / CheatSheets

A curated list of everything I look up more than twice

I hope there are one or two useful links for you regarding the technologies you use. If you know other awesome cheat sheets, please comment them below and don't hesitate to make a PR to make this list more complete.

Published: 25th February 2020
Edited: 28th October 2024 (fixed broken links)
Cover Image: https://codepen.io/devmount/full/ZEGLaKR

22 Shout-Outs to Open Source and Infinite Creativity

Andreas — Wed, 19 Feb 2020 14:52:04 +0000

Sorry if this is a bit emotional, but I just have to say this now. Even at the risk of boring some of you. This isn't another Vue vs React vs Angular post—it's more like the opposite.

I love the open source community. I really do. It's simply amazing what people are capable of to make things easier to use, make things more performant, build things to connect and find solutions for complex problems — in short: make the life of other developers and users easier and help each other out — even without being paid (in many cases)! I don't know another professional area where this is the case to this extent.

Sometimes when exploring Github repositories, I'm especially impressed by how creative people are when it comes to create a logo for their extension of an existing framework. So I thought it would be nice to just showcase some totally random projects to see how colorful and creative Open Source is! And maybe there are some you haven't heard about yet and are useful for your current project.

But even if not, let's take this as inspiration and motivation for our own Open Source contributions and projects in 2020!

Vue.js

Let's start with some Vue.js projects I found on Github. Here is the original logo:

1. vee-validate

This framework allows you to validate inputs and display errors. How efficiently simple the Vue.js logo was changed here to represent validation ✅!

logaretm / vee-validate

✅ Painless Vue forms

2. Awesome Vue.js

A very very long list of projects related to Vue.js. And of course, what doesn't look awesome with sunglasses 😎!

vuejs / awesome-vue

🎉 A curated list of awesome things related to Vue.js

3. BootstrapVue

An implementation of the Bootstrap v4 component and grid system for Vue.js.

bootstrap-vue / bootstrap-vue

BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

4. Vuefire & Vuexfire

A really handy package for those using Firebase/Firestore with Vue.js. I like how the Vue.js logo becomes a stylised torch 🔥!

vuejs / vuefire

🔥 Firebase bindings for Vue.js

5. Vue Styleguidist

A Vue.js development environment with a living style guide. Nice tie 👔!

vue-styleguidist / vue-styleguidist

Created from react styleguidist for Vue Components with a living style guide

6. vuesion

Build production-ready PWAs with this Vue.js boilerplate. Not much left of the Vue.js logo 🕶!

vuesion / vuesion

Vuesion is a boilerplate that helps product teams build faster than ever with fewer headaches and modern best practices across engineering & design.

7. electron-vue

Build electron applications with this Vue.js boilderplate. You don't always have to modify the Vue.js logo, sometimes using the Vue.js colors is enough ⚛!

SimulatedGREG / electron-vue

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.

8. Vuesax

A component framework based on Vue.js. Color gradients ftw 🎨!

lusaxweb / vuesax

New Framework Components for Vue.js 2

9. VueUse

And some utilities of the Vue Composition API. Need a logo for your Vue.js project? Just change the letter 😅!

antfu / vueuse

Collection of essential Vue Composition Utilities for Vue 2 and 3

React.js

Now let's see some examples from the React.js community. Here is the original logo:

10. Redux

A popular predictable state container for JavaScript apps that can be used together with React (but also with any other view library).

reduxjs / redux

A JS library for predictable global state management

11. React-Leaflet

Some React components for Leaflet maps. A logo showing React on a leaf 🍃 ... or is it a map marker?

PaulLeCam / react-leaflet

React components for Leaflet maps

12. React SVG morph

A library to morph SVG components one into another. Here an example showing the authors love for React ♥!

gorangajic / react-svg-morph

🔮 morph your svg component one into another other

13. React Cosmos

A development environment for building scalable, high-quality user interfaces. Not exactly the React logo, but both logos show some kind of cosm 🚀! Don't they?

react-cosmos / react-cosmos

Sandbox for developing and testing UI components in isolation

14. Reactotron

An app for inspecting React JS and React Native apps. Hello again color gradients 😅!

infinitered / reactotron

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

15. React Styleguidist

As we've already seen for Vue.js, here is the React version of the Styleguidist with a completely different logo... 🐙!

styleguidist / react-styleguidist

Isolated React component development environment with a living style guide

Angular

At last let's see what's out there for Angular. Here is the original logo:

16. NG Bootstrap

Bootstrap 4 Angular widgets. The original logo in layers and with another letter 🛡!

ng-bootstrap / ng-bootstrap

Angular powered Bootstrap

17. Awesome Angular

As we've already seen for Vue.js: Here is an awesome version of Angular. Why not simply reusing the original logo 💡!?

PatrickJS / awesome-angular

📄 A curated list of awesome Angular resources

18. ngx-materialize

Another Angular wrap around the Materialize library. The Angular logo materialized!

sherweb / ngx-materialize

Angular wrap around Materialize library

19. NG-ZORRO

A combination of Ant Design and Angular which is also visible in a unified logo 🤝🏻!

NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design

20. Angular-Cesium

A project using Cesium and Angular components to create mapping applications. A world map, a name, the Angular logo - that's all it takes 🗺!

articodeltd / angular-cesium

JavaScript library for creating map based web apps using Cesium and Angular

21. Angular Progressbar

A nanoscopic progress bar that tries to convince users that something is happening. Angular logo loading in progress ⏳!

MurhafSousli / ngx-progressbar

Angular progress bar ☄

22. ngx-auth-firebaseui

Angular UI component for firebase authentication. Put something inside the famous Angular outline and it will be recognized as Angular project 🔥!

AnthonyNahas / ngx-auth-firebaseui

Angular Material UI component for firebase authentication

Wrap it up

I hope I was able to show some of the creativity in Open Source and you are now motivated to fork something or create your own. This list could be continued forever. There are countless great OS projects out there.

A big big thanks again for everyone who contributes to OS - doesn't matter how much or how little! It's so good to have you.

If you want to feature a great OS project or one of your own, feel free to do so in the comments.

Published: 19th February 2020

DEV Community: Andreas

Building a Static Site Generator in 3 steps

What do I actually really need?

1. Creating the markup

2. Retrieving and Processing the data

3. Configuration and automation

Wrapping it up

JavaScript Array Methods Explained with Emojis

1. Array.push()

2. Array.from()

3. Array.concat()

4. Array.every()

5. Array.fill()

6. Array.filter()

7. Array.flat()

8. Array.includes()

9. Array.join()

10. Array.map()

11. Array.reverse()

12. Array.slice()

13. Array.some()

14. Array.sort()

15. Array.splice()

16. Array.unshift()

Wrap it up

PHP 8 features I wish also existed in JavaScript

#1 Named arguments

#2 Match expression

#3 Optional Chaining

Wrap it up

ThirdStats — Beautifully Visualized Email Account Stats

What I did

devmount / third-stats

Thunderbird add-on turning your emails into beautifully visualized email account stats. Built with Vue.js and Chart.js

Get started

Features

What you can do

Add translations

Improve the UI

Add charts

Wrap it up

Links

Automatic Deployment via good ol' FTP

My Workflow

Submission Category

Configuration

Additional Resources / Info

SamKirkland / FTP-Deploy-Action

Deploys a GitHub project to a FTP server using GitHub actions

git-ftp / git-ftp

Uses Git to upload only changed files to FTP servers.

Security hint

Wrap it up

10 Awesome Pythonic One-Liners Explained

1. Swap two variables

2. Multiple variable assignment

3. Sum over every second element of a list

4. Delete multiple elements

5. Read file into array of lines

6. Write string to file

7. List creation

8. List mapping

9. Set creation

10. Palindrome check

Bonus: The Zen of Python

Wrap it up

Some Emmet Magic Frontend Devs should know

Document creation

Table creation

Form creation

Generic content

Bonus: Abbreviation Wrap in VS Code

Wrap it up

What was the funniest typo in your client conversations?

You Can Quit! ...with the help of Vue and Dexie

How it looks

Month view and actual input area

Stats

Achievements

Year view

1. `Array.push()`

2. `Array.from()`

3. `Array.concat()`

4. `Array.every()`

5. `Array.fill()`

6. `Array.filter()`

7. `Array.flat()`

8. `Array.includes()`

9. `Array.join()`

10. `Array.map()`

11. `Array.reverse()`

12. `Array.slice()`

13. `Array.some()`

14. `Array.sort()`

15. `Array.splice()`

16. `Array.unshift()`