I just released v3.0 of this website with the following new features:
Check out the repo on Github. Please give it a star if you like it!
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.
This is the biggest release since I started working on the website almost 4 years ago, keep reading to see what is new.
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.
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!
.env.dev
and .env.prod
files are used to set keys and secrets securely.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
}
}
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.
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:
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:
Example code block with a copy button
Adding Markdown code like this for example:
| Title | Description |
|-------|----------------|
| Hello | I'm a table :) |
Will render this:
Title | Description |
---|---|
Hello | I'm a table :) |
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:
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:
slug | old url | new 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!
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.
No more Image URL fields in the admin panel, instead upload media files.
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.
I have new 404 and 500 error pages - featuring John Travolta, and another guy I don't know 😄 - for a better user experience
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:
service-worker.js
in NextJS using Nginx (I will write a blog post with full details soon).robots.txt
in NginxThis 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.
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.
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.
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!