developerlife.com site was started in Nov 1998 with coverage for topics related to Java, XML, and web and desktop technologies. Today it covers Rust, TUI, Android, Web, Cloud technologies, and User Experience Engineering (UXE) and design topics
APACHE-2.0 License
Recently GitHub made some changes to how github pages works. This is also related to the push GitHub Actions and Ruby 3. This commit has the details.
Here are the instructions.
run.fish
to build the site. The docs
folder holds the entire site output.docs
folder. And push to main
.npm install -g serve && serve docs
and open http://localhost:3000
in your browser. There is no need to usewebrick
and bundle exec jekyll serve
anymore. You can also do the followingwatch-build.fish
to rebuild the site every 30 secserve docs/
to serve the site on http://localhost:3000
To use Rails on macOS, youll need Ruby (an interpreter for the Ruby programming language) plus gems (software libraries) containing the Rails web application development framework. Run the following commands in your terminal app.
xcode-select --install
brew install ruby
bundle install
like npm install
, and will download depsjekyll serve
like npm run serve
, will launch server~/github/
jekyll new jekyll_test
~/github/jekyll_test
jekyll serve
to run ithttp://localhost:4000
After you clone the repo, go the jekyll_test
folder, and
bundler
Takes the Gemfile
imports and installs themjekyll serve
Builds the static site and serves it on port 4000http://localhost:4000
in your browserUsing the hero-image
property in the YAML header of each MD file in _posts
folder
doesn't work with RSS readers (feedly and Fluent RSS reader). Here is the new (preferred)
way of adding hero images so they work w/ RSS readers.
Instead of using this YAML "hero-image" property (key) it is better to remove it and just add the image directly using an img tag like so:
``<img class="post-hero-image" src="{{ 'assets/<HERO_IMAGE_HERE>' | relative_url }}"/>
I successfully tested this using Fluent RSS reader on http://127.0.0.1:4000/feed.xml
.
Jekyll is configured to use minima theme. This means that there are some files that are
pulled from this dependency by Jekyll when it builds the static site. This dependency is
located on your computer in echo (bundle info --path minima)
. Save the path to an
environment variable called $MINIMA_HOME
using
set MINIMA_HOME (bundle info --path minima)
.
Here is an example of the files in the $MINIMA_HOME
folder.
/home/nazmul/.ruby/gems/minima-2.5.1
assets
main.scss
minima-social-icons.svg
_includes
disqus_comments.html
...
_layouts
default.html
...
_sass
minima
_base.scss
_layout.scss
_syntax-highlighting.scss
minima.scss
As you can imagine, in order to customize this theme you can simply provide a file that is
your repo that is located on a similar path to the path that is in $MINIMIA_HOME
,
more info here
If you edit these minima files by accident (you will need
sudo
access to edit them), you can simply regenerate them by runningbundle install --force
.
The interesting files are:
minima.scss
styles.scss
(which is imported by the minima.scss
)Notes:
minima.scss
file is$MINIMA_HOME
.minima.scss
file and you will see imports that pull instyles.scss
and syntax.scss
(used for syntax highlighting).I've created a file ./_sass/minima.scss
which overrides the corresponding file in the
base theme. This is where I do a lot of big customizations, like creating variables, and
using @import
to bring in other .scss
files. Here are some examples of this.
@font-face {
font-family: "JetBrains Mono";
src: url("/assets/jetbrainsmono/JetBrainsMono-Regular.woff2") format("woff2");
}
...
$brand-color: #2f9ece !default;
$text-color: #e6e6e6 !default;
...
// Import other SCSS files.
// "minima/base" - override the minima theme files.
// "minima/layout" - override the minima theme files.
// "syntax" - Custom syntax highlighting (not using minima defaults).
// "styles" - Custom styles (not using minima defaults).
@import "minima/base", "minima/layout", "syntax", "styles";
These @import
statements bring in lots of other scss
files. One of them handles syntax
highlighting, more on this below.
Here's a ./_site/assets/main.css.map
file that is generated as part of the build process
(which are driven by some key-value pairs in the _config.yml
file) which has a list of
all the scss
files that are actually imported to give a clear picture of what files are
actually used to generate the single ./_site/assets/main.css
file everytime Jekyll
generates the static site.
{
"version"
:
3
,
"file"
:
"main.css"
,
"sources"
:
[
"main.scss"
,
"_sass/minima.scss"
,
"_sass/minima/_base.scss"
,
"_sass/minima/_layout.scss"
,
"_sass/syntax.scss"
,
"_sass/styles.scss"
]
,
"sourcesContent"
:
[
"@import \"minima\";\n"
,
"@charset \"utf-8\";\n\n@font-face {\n font-family: \"JetBrains Mono\";\n ..."
]
,
"names"
:
[
]
,
"mappings"
:
"ACEA,UAAU,..."
}
The syntax.scss
file actually contains all the syntax highlighting
SCSS. This overrides whatever comes w/ minima (it does come w/ some defaults in
$MINIMA_HOME/_sass/minima/_syntax-hihglihting.scss
). There's a repo called
pygments-css
which I simply copy from. In
this repo, find the styling that you like, and just copy/paste the contents of that file
into the syntax.scss
file as described in the comments in this file, and it will be
applied when Jekyll builds the static site.
More info on mermaid
To add mermaid diagrams to markdown files on the site, you add snippets like the following.
<div class="mermaid">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
By default, the dark theme, font, and color overrides are provided in
mermaid.html
. If you wish to override them you can do as
follows (some of these theme variables don't work in overrides via %%{init:...}%%
or
specifying them in mermaid.initialize(...)
block). Here's a snippet that overrides the
default them and font family.
<div class="mermaid">
%%{init: {'theme': 'dark', 'themeVariables': { 'fontFamily': 'Fira Mono'}}}%%
sequenceDiagram
autonumber
participant created_not_running
created_not_running ->> running: startTicking()
activate running
participant running
rect rgb(83, 82, 101, 0.25)
loop ticking
running ->> running: onTick()
end
end
running ->> stopped: stopTicking()
alt duration is set
running ->> stopped: duration has passed
end
deactivate running
</div>
Forms on Mailchimp (make sure to remove address):
This tutorial shows how to remove the mailing address that is automatically added to many things on Mailchimp - remove your address.
subscribe.html
The Internet Engineering Task Force (IETF) points out that "Master-slave is an oppressive metaphor that will and should never become fully detached from history" as well as "In addition to being inappropriate and arcane, the master-slave metaphor is both technically and historically inaccurate." There's lots of more accurate options depending on context and it costs me nothing to change my vocabulary, especially if it is one less little speed bump to getting a new person excited about tech.
You might say, "I'm all for not using master in master-slave technical relationships, but this is clearly an instance of master-copy, not master-slave" but that may not be the case . Turns out the original usage of master in Git very likely came from another version control system (BitKeeper) that explicitly had a notion of slave branches.