The work on gregives.co.uk [1] by gregives [2].
Personal site and portfolio of software engineer Greg Ives
References:
[1]: https://github.com/gregives/gregives.co.uk
[2]: https://github.com/gregives
Publishing rhythm
I’m impressed by act [1] from nektos [2].
Run your GitHub Actions locally 🚀
References:
[1]: https://github.com/nektos/act
[2]: https://github.com/nektos
Send Emails with GitHub Actions
Here is one useful thing that you can do with GitHub actions no matter what language you use, send email. You might want to know right away when your ci passes. You might want to give your team a nice pat on the back when a new release is deployed. There might be subscribers wanting to see the latest release notes in their inbox as soon as the latest version is deployed. Whatever it is, its pretty easy to do with an action right out of the actions marketplace.
Mail on Star # [1]
Here is a silly example that sends an email to yourself anytime someone stars your repo.
name: Mail on Star
on:
watch:
types: [ started ]
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
# This workflow contains a single job called "email"
email:
# The type of runner that the job will run on
runs-on: ubuntu-latest
# Steps represent a sequence of tasks that will be executed as part of the job
steps:
- name: ✨ Send email, you star
uses: dawidd6/acti...
I’m really excited about awesome-python-bytes [1], an amazing project by JackMcKew [2]. It’s worth exploring!
😎 🐍 Awesome lists about Python Bytes https://pythonbytes.fm/
References:
[1]: https://github.com/JackMcKew/awesome-python-bytes
[2]: https://github.com/JackMcKew
Check out get-diff-action [1] by technote-space [2]. It’s a well-crafted project with great potential.
GitHub Actions to get git [3] diff
References:
[1]: https://github.com/technote-space/get-diff-action
[2]: https://github.com/technote-space
[3]: /glossary/git/
If you’re into interesting projects, don’t miss out on react-toastify [1], created by fkhadra [2].
React notification made easy 🚀 !
References:
[1]: https://github.com/fkhadra/react-toastify
[2]: https://github.com/fkhadra
What Are GitHub Actions
GitHub actions are an amazing tool that allows us to run code based on triggers
inside of our repo. Their is a large and growing community of actions inside
the marketplace to use with very little effort. Best of all they are free for
public repositories, and private repos have a very generous free tier.
h2 img { width: 100%; box-shadow: .5rem .5rem 3rem #141F2D, -.5rem -.5rem 3rem rgba(255,255,255,.1);}
img{ max-width: 100% !important;}
I have been diving deep into Github actions for about a month now and they are wicked good! They allow you to run any sort of arbitrary code based on events in your repo, webhooks, or schedules. They are very reasonably priced. The interface that GitHub hs developed for them is top-notch! It’s so good I have done 90% of my editing of them right from github.com.
TLDR # [1]
some interaction to your repository triggers code to run.
[2] # [3]
The online editor for actions is pretty amazing. When creating a new workflow it automatically sets up a ...
Getting Started with GitHub Actions
Github actions are written in configuration files using the YAML syntax. YAML
is a superset of JSON. Most YAML can be expressed inline with JSON syntax.
Similar to python YAML is whitespace driven by whitespace rather than brackets
tags. The argument for using YAML for configuration files such as actions is
that it is more human-readable and editable. It’s much easier to see the
whitespace layout than it is to get closing brackets correct. For actions, I
believe this is mostly true. I don’t see any use case to get past 3-5 indents,
which is completely manageable.
Can I just say that I learned more than I realized about YAML by writing this
article
Arrays and Objects # [1]
In YAML or JSON, the most basic containers for data are arrays, a 1D list
of things, and objects, for key-value pairs.
Arrays # [2]
The start of an array container is signified with a leading -. This is
probably one of the big things I didn’t understand about YAML before writing
this post, but hats off to the ...
Check out poke95 [1] by wobsoriano [2]. It’s a well-crafted project with great potential.
🚀 A Windows 95 style Pokédex built with React.
References:
[1]: https://github.com/wobsoriano/poke95
[2]: https://github.com/wobsoriano
Looking for inspiration? img-resizer [1] by sharadcodes [2].
An action for resizing images
References:
[1]: https://github.com/sharadcodes/img-resizer
[2]: https://github.com/sharadcodes
Check out generate-changelog-action [1] by ScottBrenner [2]. It’s a well-crafted project with great potential.
GitHub Actions Hackathon 2020 winner - lob/generate-changelog Action
References:
[1]: https://github.com/ScottBrenner/generate-changelog-action
[2]: https://github.com/ScottBrenner
Today I learned `git diff feature..main`
Today I learned how to diff between two branches.
git diff feature..main
Sometimes we get a little git add . && git commit -m "WIP" happy and mistakenly commit something that we just can’t figure out. This is a good way to figure out what the heck has changed on the current branch compared to any other branch.
Example # [1]
Let’s create a new directory, initialize git [2] and toss some content into a readme.
mkdir git-diff
git init
echo "hello there" > readme.md
git add . && git commit -m "hello there"
cat readme.md
After all of that, we have a git repository on our local machine with a single file readme.md that contains the following.
hello there
Create a branch and ✍ edit # [3]
Let’s checkout a new branch called Waylon and change the word there to Waylon in our readme.md file, then diff it.
git checkout -b Waylon
echo "hello Waylon" > readme.md
git add . && git commit -m "hello Waylon"
git diff
- hello there
+ hello waylon
At this point we have one commit. Things are real...
Create New Kedro Project
This is a quickstart to getting a new kedro [1]
pipeline up and running. After this article you should be able to understand
how to get started with kedro [1]. You can learn
more about this Hello World
Example [2]
in the
docs [2]
🧹 Install Kedro [1]
🛢 Create the Example Pipeline
💨 Run the example
📉 Show the pipeline visualization
Create a Virtual Environment [3] # [4]
I use conda to control my virtual environments and will create a new environment called kedro_iris with the following command. note the latest compatible version of python is 3.7.
EDIT: as of kedro 0.16.0 kedro supports up to 3.8
conda create -n kedro_iris python=3.8 -y
Your browser does not support the video tag. [5]
Options
Activate your conda environment # [6]
I try to keep my base environment as clean as possible. I have ran into too many issues installing things in the base environment. Almost always its some dependency that starts causing issues making it even harder to realize where its coming from a...
DesktopECHO [1] has done a fantastic job with xWSL [2]. Highly recommend taking a look.
Installer script for Ubuntu 22.04 / 24.04 with XFCE 4.18 on WSL. Does not require hypervisor, container, or X11 server.
References:
[1]: https://github.com/DesktopECHO
[2]: https://github.com/DesktopECHO/xWSL
What is YOUR Advice for New Data Scientists
- Learn the business
- Learn Git [1]
- Your code does not need to be amazing
- Keep Learning
Learn Git # [2]
You dont have to start out as a git wizard with the cleanest possible commit history. At first dont let yourself get too wrapped up in it, the most important part is that you make commits. You will find needs for more advanced stuff later.
git add .
git commit -m "FEAT added new function to calculate revenue by product family"
git push
Get comfortable with this, then learn how to branch, rebase, stash, etc…
Your code does not need to be amazing # [3]
Get the job done. Keep it in small bite size pieces. Make readable function definitions and variable names. You will thank yourself for naming things well later. Readability counts more than performance in most cases of data science. If it gets the job done try not to over worry about things like performance. A few extra seconds to clean a dataset or build a model is not worth hours of your time. As you go you will have c...
The work on fastpages [1] by fastai [2].
An easy to use blogging platform, with enhanced support for Jupyter Notebooks.
References:
[1]: https://github.com/fastai/fastpages
[2]: https://github.com/fastai
Do You Hoist
I am working through Wes Bos’s
beginnerjavascript.com/ [1] I just hit module 18
on hoisting. It’s something that I always knew was there, Its not something I
typically see used or use myself.
Do you Hoist? # [2]
Do you have any use cases that you use hoising? Why? It seems like a really cool feature in any language that uses it, but I dont really notice it in use.
What is Hoising # [3]
There are many articles that cover this in far more depth, but its the idea that variable declarations and functions are defined before they are executed. This means that it doesnt matter if you call a function before or after it is defined.
Hoisting # [4]
console.log(`Hello ${getUser()}`)
function getUser() {
return 'Waylon'
}
Running this code will log out “Waylon”
What about variable hoisting # [5]
I am most familiar with python which does not variable hoist so this one kinda confused me at first. It only hoists the variable declaration not the value of the variable. It defines whether th...
What is Kedro
What is Kedro [1]
This is my original what-is-kedro article. There is a brand new one
---
Kedro is an open source data pipeline framework. It provides guardrails to set
your project up right from the start without needing to know deeply how to
setup your own python library for data pipelining. It includes really great
ways to manipulate catalogs and pipelines. This article will cover the 10K
view of kedro, future articles will dive deper into each one.
kedro [2] is an open-source data pipeline framework. It provides guardrails to set your project up right from the start without needing to know deeply how to set up your own python library for data pipelining. It includes great ways to manipulate catalogs and pipelines. This article will cover the 10K view of kedro [2], future articles will dive deeper into each one.
Libraries # [3]
Currently, kedro [2] is broken down into 3 different libraries.
💎 kedro [2]
📉 kedro-viz [4]
🏗 kedro-docker [5]
kedro [2] # [6]
[7]
kedro [2] ...
Looking for inspiration? termynal [1] by ines [2].
⬛️ Lightweight and modern terminal animations using async/await
References:
[1]: https://github.com/ines/termynal
[2]: https://github.com/ines
Looking for inspiration? forem [1] by forem [2].
For empowering community 🌱
References:
[1]: https://github.com/forem/forem
[2]: https://github.com/forem
Just starred typer [1] by fastapi [2]. It’s an exciting project with a lot to offer.
Typer, build great CLIs. Easy to code. Based on Python type hints.
References:
[1]: https://github.com/fastapi/typer
[2]: https://github.com/fastapi
Custom Scrollbar Design
Getting a custom scrollbar on your site makes it stand out a bit compared to
the very plain stock one that are on most sites. This is how I set mine up on
my gatsby site.
Inspired by Wes Bos’s new uses.tech [1] I wanted a custom
scrollbar on my personal site. I had tried to do it in the past, but gave up
after it was not working.
Looking at the Source # [2]
Since uses.tech [1] is open source I jumped on github, searched for scroll and found this layout.js [3].
Copy it to my own component # [4]
My first step was to take his css and copy it into a styled component for my entire layout, but it failed. I do not fully understand why. None of the custom style came through at all. If you know please leave me a comment.
[5]
I suspect for some reason it has to do with attatching to the html [6] element inside of a styled-component. I think wes was able to get around this by using createGlobalStyle. But I was still using much of the default gatsby template, so I did not have a createG...
localstack [1] by localstack [2] is a game-changer in its space. Excited to see how it evolves.
💻 A fully functional local AWS cloud stack. Develop and test your cloud & Serverless apps offline
References:
[1]: https://github.com/localstack/localstack
[2]: https://github.com/localstack
Don’t waste your time learning everything
“Don’t waste your time learning everything.”
[1]
LinkedIn Post from Tarry
Inspired by this linkedIn post [2]
I felt that this comment was very powerful. Here are my 2 cents.
Be Productive # [3]
Stick to what you know, and learn a little bit of something new every day. If what you know is how to use Excel like a boss, don’t fee ashamed that you are missing something. Be proud and use what you know.
Don’t Stagnate # [4]
Take small steps enhance what you know now with something new that you get you closer to where you want to be. If you need something that sci-py offers learn how to load in data and use that part. If your sick of waiting for IT to pull data out of the database so you can use it, learn that.
Dont Overwhelm Yourself # [5]
If you try to drop everything you know now and jump whole hog into these new flashy things its not going to work. Learn what you need to know. New things crop up very often. They will come and go. Some things will get traction, some will never...
Canop [1] has done a fantastic job with broot [2]. Highly recommend taking a look.
A new way to see and navigate directory trees : https://dystroy.org/broot
References:
[1]: https://github.com/Canop
[2]: https://github.com/Canop/broot
I’m impressed by gitdown [1] from calebporzio [2].
A simple package to parse Github Flavored Markdown in PHP
References:
[1]: https://github.com/calebporzio/gitdown
[2]: https://github.com/calebporzio
I like benawad’s [1] project destiny [2].
Prettier for File Structures
References:
[1]: https://github.com/benawad
[2]: https://github.com/benawad/destiny
2020 waylonwalker.com rebrand
Moving into 2020 I have been really leaning on using purple as my theme color
everywhere more and more. Its time for an update to my personal site, not
just because it feels plain, not just because the cover art I am using for
dev.to doesn’t fit my current card layout, but because I feel inspired and
I want to.
Starting point # [1]
[2]
This is what we are working with. It has been my card design for at least a
year now. Its not bad but, its a bit play, doesnt fit my new cover art style,
and that date is not working over top of the cover art text.
- plain
- cover art does not fit
- I am not digging the date on cover art that also has text
Colors # [3]
I have been really into using a deep purple lately. It is a neutral color that
does not get enough respect, i.e. it’s not used as frequently and kinda stands
out when used.
How I pick colors # [4]
I am really bad at picking colors that go well together so for this I punt to
utilizing others who have a better eye for this. I c...
I just added react-headroom to my site
It was so easy to get a professional looking navbar with just 3 lines of code.
This package seriously is so usable on mobile it is ridiculous. I found this
package from
day-4 [1]
of the 100 days of gatsby challenge. It is by the wonderful man who brought us
gatsbyjs Kyle Mathews, so you know its gotta be good.
install react-headroom # [2]
installation is easy
npm i react-headroom
Import Headroom # [3]
There was no instructions for es6 style imports that are common with gatsbyjs
sites like mine, but it was intuitive to figure out.
import Headroom from 'react-headroom'
Using Headroom # [4]
Simply wrap your existing content, Nav in my case, with the <Headroom />
component and your off to the races. The content will pop back into view when
you scroll past then back up.
<Headroom>
<-- Your content goes here -->
</Headroom>
See it in action # [5]
I think this simple package completely changes the ux of your site on mobile.
You can get that sticky nav out of the way, but its still...
I finally fixed my Styled-Components in gatsby.js
I finally fixed my Styled-Components in gatsby.js. I am starting a redesign of
my website. I have started cross posting to dev.to [1] more
regularly. With that I have been making more detailed cover images at the
recommended 1000x420. These images get cut off on my own site, which is a
bit ridiculous to have my own content not look right on my own site. But
before we start a heavy redesign I have a small issue that has plagued the site
for at least a year!
I have a small issue that has plagued the site for at least a year!
I have been using styled components in my gatsby.js site for about a year now. And it has been plagued by styled-components not being in the ssr causing some jank in the styles being loaded. You can see it in the lighthouse performance report below. It generally loads super quick, and is only caused on first load. Anything using the gatsby <Link/> component typically is fine and unaffected by the issue.
The fix # [2]
The fix was so simple it was only 2 lines t...
Check out kedro-org [1] and their project kedro-community [2].
Examples of data science projects created with Kedro.
References:
[1]: https://github.com/kedro-org
[2]: https://github.com/kedro-org/kedro-community
I’m impressed by kedro-viz [1] from kedro-org [2].
Visualise your Kedro data and machine-learning pipelines and track your experiments.
References:
[1]: https://github.com/kedro-org/kedro-viz
[2]: https://github.com/kedro-org
Should I switch to Zeit Now
Netlify # [1]
I have happily had my personal site waylonwalker.com [2] hosted on netlify for nearly 2 years now. In fact I have hosted about a dozen different toy projects to play with on there, 4 of which have gone far enough to get a custom domain name. They are fast to deploy and consistently do so on every git push to main.
Zeit # [3]
I have recently started playing with zeit again. I really like their cli tool, its dead simple and makes sense. I tried the netlify one early on and dont think I really gave it much of a chance. I was able to backup a site we were modifying by saving everything locally (literally control+s) and running now in the command line.
While I was on the site I realized that when switching to gatsby v2 I had deployed it to now.sh while testing, before cutting over to the updated one on netlify. It has been building every version since without issue!
It has been building every version since without issue!
What I am using # [4]
- gatsby
- forestry.io
...
git push without setting upstream
Finally after years of hand typing out a full git push --upstream my_really_long_and_descriptive_branch_name I found there is a setting to
automatcally push to the current branch. More realisitically I just did a git push let git [1] yell at me, and copying the suggestion.
git config # [2]
git config --global push.default current
This one setting will now git push to the current branch without yelling at
you that your upstream does not match your current branch. This helps me ship
chnages faster as I am constantly chnaging projects and branches.
References:
[1]: /glossary/git/
[2]: #git-config
Out of Space
This morning I logged into my machine and was nearly out of space
- 64GB miniconda3!
- 5GB conda cache
- 4GM pip cache
- 34GB docker
Find it # [1]
[2]
These are the commands that I often use to reclaim space. Its so easy to fill
up small vm’s in the cloud, or in my case today let your dev machine go way too
long without a good cleanup.
Show Remaining Space on Drives # [3]
This shows us where to start and gives a baseline of how much space we have
reclaimed.
df -h
show largest files in current directory # [4]
Next keep drilling into directories that are big and running this command to
see whats big inside of it. When you find somethign that you are willing to
part with rm -rf <directory> it and check df -h to see if you have enough
reclaimed yet.
du . -h --max-depth=1
Honestly I rarely bother unless the directory is in the GB’s of space. A super
simple filter for that is to just grep for G.
du . -h --max-depth=1 | grep G
conda # [5]
How Many? # [6]
As a first baseline...
simple click
cli tools are super handy and easy to add to your python libraries to supercharge them. Even if your library is not a cli tool there are a number of things that a cli can do to your library.
Example Ideas # [1]
Things a cli can do to enhance your library.
🆚 print version
🕶 print readme
📝 print changelog
📃 print config
✏ change config
👩🎓 run a tutorial
🏗 scaffold a project with cookiecutter
🖱 Click [2] # [3]
Click [2] is the most popular python cli tool framework for python. There are others, some old, some new comers that make take the crown. For now Click [2] is the gold standard if you want to make a powerful cli quickly. If you are dependency conscious and dont need a lot of tooling, use argparse [4].
Project Structure # [5]
.
├── setup.py
└── simple_click
├── cli.py
└── __init__.py
❯ cli.py # [6]
# simple_click/cli.py
import click
__version__ = "1.0.0"
@click.group()
def cli():
pass
@cli.command()
def version():
"""prints project version"""
click.echo(__...
Personal URL shortener with Netlify Redirects
I love using URL shorteners to easily share links without hitting character
limits, but they loose their meaning. Services like bit.ly will save my links
for me so that I can find them, but I would rather them to be easy to remember.
https://bit.ly/2ruLwQz does
not roll of the tongue so well.
301 🤸♀️ # [1]
I recently discovered a really cool feature of netlify that I have always looked past, _redirects. It is so simple cool and powerful, every netlify site should do this!
But how 🤷♀️ # [2]
simply add a _redirects file to the root of your your published site with the following format. The trick I found with my gatsby site was that it needed to be in my static directory /static/_redirects, not root. Next you just put space separated links on separate lines. #’s can be used for comments.
# netlify redirects
# from_url to_url
# Short-Blog
/blog/scli /blog/simple-click/
/blog/cmdt /blog/cmd-exe-tips/
.
.
.
# splats
/b* /blog/:splat
/n* /notes/:splat
# External
/twitter https...
szsdk [1] has done a fantastic job with quick [2]. Highly recommend taking a look.
A real QUICK Qt5 based gUI generator for ClicK
References:
[1]: https://github.com/szsdk
[2]: https://github.com/szsdk/quick
cmd.exe tips
I spend a lot of my time at the terminal for my daily work, mostly in Linux or wsl. One big reason for using wsl over cmd.exe is the ease of walking through history that fzf provides. This week we had a windows bug in a cli and I was stuck in vanilla cmd.exe 😭
> Cmder # [1]
[2]
First off if you are stuck using cmd.exe, do yourself a favor and get cmder. It makes life just a bit easier. It is super confugurable and comes with several power ups that make it a bit more enjoyable than cmd.exe.
History # [3]
F7 - Scroll through history
F8 - Search history based
Example # [4]
Your browser does not support the video tag. [5]
.bat # [6]
The next simple technique is to save your commands into a .bat file. Any valid command ran with cmd.exe can be saved into a bat file and called again later by running it in the terminal.
save your command
use f7/f8 to get your command back add > filename.bat at the end, hit the home key and add echo to the front. Do not wrap with quotes. This is...
If you’re into interesting projects, don’t miss out on forgit [1], created by wfxr [2].
💤 A utility tool powered by fzf for using git [3] interactively.
References:
[1]: https://github.com/wfxr/forgit
[2]: https://github.com/wfxr
[3]: /glossary/git/
I’m really excited about python-c2f [1], an amazing project by grantjenks [2]. It’s worth exploring!
Cython for All with GitHub Actions
References:
[1]: https://github.com/grantjenks/python-c2f
[2]: https://github.com/grantjenks
Check out wesbos [1] and their project beginner-javascript [2].
Slam Dunk JavaScript
References:
[1]: https://github.com/wesbos
[2]: https://github.com/wesbos/beginner-javascript
If you’re into interesting projects, don’t miss out on awesome-react-components [1], created by brillout [2].
Curated List of React Components & Libraries.
References:
[1]: https://github.com/brillout/awesome-react-components
[2]: https://github.com/brillout
What is something you should have learned or understood earlier?
Mine is the python debugger. I was a long holdout thinking that print statements were sufficient. That was untill I started having errors crop up in functions that took minutes to run. The thing that I most notably wish I would have known about is post_mortem.
Example # [1]
[ins] In [4]: def repeater(msg, repeats=1):
...: "repeats messages {repeats} number of times"
...: print(f'{msg}\n' * repeats)
[ins] In [5]: repeater('hi', 3)
hi
hi
hi
[ins] In [6]: repeater('hi', 'a')
---------------------------------------------------------------------------
TypeError Traceback (most recent call last)
<ipython-input-6-0ec595774c81> in <module>
----> 1 repeater('hi', 'a')
<ipython-input-4-530890de75cd> in repeater(msg, repeats)
1 def repeater(msg, repeats=1):
2 "repeats messages {repeats} number of times"
----> 3 print(f'{msg}\n' * repeats)
4
Debug with iPython/Jupyter
%debug
Vanilla Debug # [2]
import pdb
import sys
pdb.post_mortem(sys.last_traceback)
More # [3]
For more inform...
Supercharge Zsh Startup
I have been using oh-my-zsh successfully for about 2 years now. But lately my
startup time has been really bothersome. It has grown to the point where it was
taking about 5.5s to startup a shell! This is ok if I am going to spend
some time in here for awhile and do some work that benefits from all of the
autocompletions, plugins, and shortcuts that oh-my-zsh brings. But to only
jump in to run a handful of commands is infuriating.
📑 My Setup # [1]
I believe the real issue is io speed on wsl. I have some remote servers with
similar configs that are 10x faster or more, loading in 100s of milliseconds
rather than seconds. Sourcing all of the individual plugin files are just too
much for it.
💨 How Fast can it be # [2]
Quick side note: your zsh config is controled by your ~/.zshrc file. This
file can source other files, load plugins, or run literally anything.
Time the initial time
time zsh -c exit
Move your ~/.zshrc config file.
mv ~/.zshrc ~/.zshrc-back
Time the fastest startup p...
Keep Location List Closed
Vim’s (neovim in my case) location list can provide some very useful information while developing. Mine gives me information about linting and type checking errors with fairly little config. Generally, it sits nicely at the bottom of the screen and barely affects me. Other times, especially while zoomed way in during a presentation, it just gets in the way.
[1]
location list eats the screen
Location List eating up the screen while I am zoomed in and trying to live code
Toggling the location list # [2]
Through some google search I found the culprit was syntastic. It has an auto_loc_list feature. We can turn it off by setting
syntastic_auto_loc_list=0.
let syntastic_auto_loc_list=0
Keybindings # [3]
I want to keep the location list open automatically most of the time, but when I don’t want it to keep opening it’s generally detrimental. Trying to live code while the location list keeps taking up the whole screen is not cool.
First, create a function that will toggle both the lo...
I came across jumpcutter [1] from carykh [2], and it’s packed with great features and ideas.
Automatically edits vidx. Explanation here: https://www.youtube.com/watch?v=DQ8orIurGxw
References:
[1]: https://github.com/carykh/jumpcutter
[2]: https://github.com/carykh
Check out great-expectations [1] and their project great_expectations [2].
Always know what to expect from your data.
References:
[1]: https://github.com/great-expectations
[2]: https://github.com/great-expectations/great_expectations
I’m impressed by flowy [1] from alyssaxuu [2].
The minimal javascript library to create flowcharts ✨
References:
[1]: https://github.com/alyssaxuu/flowy
[2]: https://github.com/alyssaxuu
I came across blocks [1] from blocks [2], and it’s packed with great features and ideas.
A JSX-based page builder for creating beautiful websites without writing code
References:
[1]: https://github.com/blocks/blocks
[2]: https://github.com/blocks