Introducing v3.0

21/4/2020

TL;DR

I just released v3.0 of this website with the following new features:

  • Monorepo for both backend and frontend.
  • Fully dockerized setup. Fork the project, customize it, and run a single command to build your website.
  • New ways to toggle features and configure the client.
  • Upgraded backend to Django v3.
  • Improved SEO including dynamic sitemap and HTML meta tags.
  • Re-written client in Typescript.
  • LaTeX and HTML in Markdown support.

Check out the repo on Github. Please give it a star if you like it!


Why I keep a blog?

I guess you noticed, I don't have many posts in my blog, I have been struggling to write a post every month since the last 48 months now 😄.

You might ask -my dear reader- then why do I keep working on this website? or why don't I use WordPress or another CMS to save time?

Well, I keep this website as a free canvas where I can learn and test new technologies quickly Not long ago, I added the snippets page, where I add my learnings for my future self and other developers.

Because of this website I sharped my skills in Python and Javascript, and learned new frameworks including Docker, NextJS.


New features in this release

This is the biggest release since I started working on the website almost 4 years ago, keep reading to see what is new.

Monorepo

Instead of maintaining two separate repositories for backend and frontend, the project's source code is now hosted in one repository, fully docerkrized with development and production environments setup instructions. which makes it easy to develop new features in the backend and test them in the client at the same time before releasing them.

Fully Dockerized

The project is now fully Dockerized, including the backend, database, API, and frontend.

The development environment supports hot module replacement, uses SQLite, and Django debug toolbar for better development and debugging experience.

While the production environment uses NGINX and PostgreSQL.

Whether you want to edit the source code or run the project in your production server, you only have to have Docker installed in your machine to run the entire project, setting up this website now literally takes a few minutes!

New customization options

  • New .env.dev and .env.prod files are used to set keys and secrets securely.
  • New config.json file to allow easy setting and toggling for frontend features like disabling a certain page, setting Google Analytics, Disqus, and more.

config.json Example

{
  "enableFooter": true,
  "enableCopyright": true,
  "enableCodeBlockCopy": true,
  "enablePageLoadingBar": true,
  "enableGoogleAnalytics": true,
  "header": {
    "sticky": true
  },
  "home": {
    "redirectToPage": null,
    "latestPosts": {
      "enabled": true,
      "highlightLatest": true,
      "count": 3
    },
    "latestSnippets": {
      "enabled": true,
      "count": 3
    },
    "latestProjects": {
      "enabled": true,
      "count": 3
    }
  },
  "blog": {
    "highlightLatest": true,
    "enableSocialSharing": true,
    "enableSearch": true,
    "enableTags": true,
    "enableRelatedPosts": true,
    "enableDisqus": true
  },
  "snippets": {
    "enableSearch": true,
    "enableSocialSharing": true
  },
  "projects": {
    "enableSearch": true
  },
  "about": {
    "enableContact": true
  }
}

Improved SEO

Now you can create meta contents including title, summary, keywords, and even a cover image for each page from the admin panel.

This does not only help search engines to crawl the website easily but enables rich previews when sharing a link via social platforms as well.

Rich link previews

Client-side Markdown rendering

I love Markdown, it is simple, precise, and very readable, writing content in Markdown has been there in the admin panel since v1, However; Markdown to HTML rendering was moved from backend to frontend in this release.

Not only does this make it more secure by removing the need for dangerouslySetInnerHTML in React, but I can now provide custom components for any HTML selector after covering it in the client!

This allowed me to introduce some new interesting features that were not possible before, features like:

LaTeX in Markdown

Adding LaTeX code like this for example:

$$
\begin{gather*}
a_0=\frac{1}{\pi}\int\limits_{-\pi}^{\pi}f(x)\,\mathrm{d}x\\[6pt]
\end{gather*}
$$

Will render this:

Copy button in code blocks

Example code block with a copy button

Markdown tables

Adding Markdown code like this for example:

| Title | Description    |
|-------|----------------|
| Hello | I'm a table :) |

Will render this:

TitleDescription
HelloI'm a table :)

HTML in Markdown

It is possible now to embed HTML in Markdown

Adding HTML code like this for example:

<style>
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class='embed-container'>
    <iframe src='https://www.youtube.com/embed/Zi_XLOBDo_Y' frameborder='0' allowfullscreen></iframe>
</div>

Will render this:

Page Aliasing

One issue I ran into is that I used underscores for slugs in the older version, which I learned later is not good for SEO, and it is preferred to use dashes instead, I needed to fix this without removing old URLs I shared for the website.

Well, Django middlewares to the rescue!. Just create a URL alias in the admin panel.

Examples:

slugold urlnew url
codable-extensions/blog/codable_extensions/blog/codable-extensions
api/developer/api

By creating an alias from the admin panel, you can have as many URLs as you want that point to the same resource, isn't that cool!

Dynamic pages

Instead of hard-coding static pages like /api, these pages can be now added from the admin panel in Markdown and the client will load them based on their slug.

Media files support

No more Image URL fields in the admin panel, instead upload media files.

Typescript and simplified frontend code

Migrating the client to Typescript was a delightful experience! it makes the code safer more predictable, something I always missed from Swift.

I also removed Redux, Moment.js, and more unnecessary dependencies, and simplified the code for styling components.

Improved Error pages

I have new 404 and 500 error pages - featuring John Travolta, and another guy I don't know 😄 - for a better user experience

New error pages


Learnings

One reason I keep this website is to use it as a canvas to try new ideas and learn new technologies, I usually work on it in the weekends, and write my findings in blog posts and quick code snippets for my future self and other developers.

Here is a list of some things I learned while building this version:


Summary

This version includes more features and many bug fixes. It looks like I had another elephent in the room I needed to address!

The website is open-sourced and released under the MIT license, grab your copy from Github, and check the instructions in the readme page on how to customize it.


Thanks for reading!

What do you think about the new website?

Please star the repo on Github, share your thoughts in the comments below, or let me know on Twitter.

You can always check my calendar and schedule a 15 min meeting using the following link.

  • Blog
  • Code Snippets
  • Django
  • Docker
  • Docker Compose
  • LaTeX
  • NextJS
  • Open Source
  • React JS
  • Typescript
  • Website

Comments

You made it to the end. You're Awesome!

Here is something more to read

20/9/2019

Relocating to Amsterdam

My experience from the moment I took the decision to migrate to Amsterdam until this moment, and some tips and resources to bring some insights if you are considering relocating.

18/7/2019

Time to address the elephant in the room!

It has been a year since I started this website, it is time to re-write it to support server-side rendering (SSR), it is time to address the elephant in the room!

This is a fully dockerized open-source project that uses Django and NextJS to build. Grab your copy from Github

Copyright © 2020 Omar Albeik. All rights reserved.