Why?
Yet another blog by yet another programmer. It is true, many developers are writing about their experience in the field of a front-end dev. Just take a look at very well-known blogs by Dan Abramov or Shawn Wang. They preserve their identity by creating personal websites instead of posting to Medium or Dev. Yes, these guys at least had some popularity at the time of blog creation, but I just feel like starting from scratch.
The blog website can also serve you as portfolio "Just look at him using modern technologies and implementing nice design to shout out!" And CV is at the same place. Why not hire this person?
Technologies
Personal website as any pet-project requires your free time which a developer with constant employment and university studies never has. That's why I wanted to use technologies that I know well and can develop and deploy at the speed of light. Count the time taken, captain!
Let's list what did I choose:
- Sapper (Svelte)
- Neumorphic design
- Vercel
- Editor.js
By the way, have you ever thought about how front-end devs love to talk about frameworks, libraries and other stuff? And how they can argue between choosing them? We don't brag about the projects we take, only technologies. It might be sad, but can be easily spared for the next article.
Ok, sorry for stepping away from the main topic for a moment.
Sapper is an amazing framework built on top of Svelte – a compiler that makes your applications truly reactive and fast. Sapper adds SSR with Code-splitting making it even better. Also, such application can be exported as raw html files to be hosted on the services like Vercel, Netlify, etc.
I've taken plain Sapper template and didn't change anything from configuration. You can also update logos, basic styles and begin writing in .svelte files valid html and js code. Front-end development has never been simpler.
Neumorphism is a recent trend that was born from Apple's design standards in late 00's, but we are here not to talk about history. When I firstly seen the real mockups and real usage cases, I decided: it has to be tried. Here we are, on the website with amazing soft shadows which make it look inserted into the page. Colors and fonts made the website complete.
Vercel (previously called Now by Zeit) is a platform for serverless deployment. With its CLI tools you can perform one command and in ten seconds already see the result.
I, though, recommend you to publish all projects to GitHub and connect them with Vercel for Continuous Deployment (CD). Any push-event will cause a publish and will inform you in case of failure.
Editor.js is a web-editor from a dream. Well, there are quite many solutions like Medium editor or Draft.js, but they are either for React or just not easy enough. My options are also not without flaws: it does not support SSR, which is horribly bad for articles, but..! It is only if you decide to built and Editor into your website.
My need is just to write the text that I can later insert into the page. Previously, WYSIWYG editors with html-export were very popular, but times have changed the perspective for block-type ones. For example, the result of what I have written before is:
{
"time" : 1592662194299,
"blocks" : [
{
"type" : "paragraph",
"data" : {
"text" : "Yet another blog by yet another programmer..."
}
},
]
}
What I do with that: copy to my some-article.js file and iterate through all the blocks by creating some markup for which I later add some CSS and make it look good. So, SSR support is native.
You can read about everything listed before in here: Svelte, Sapper, Vercel, Neumorphic design, Editor.js.
As you can see, everything about this website is simple, but it was never meant to be something massive to perform over-complicated logic. By the way, all the code is waiting for curious eyes in this GitHub repo.
Thanks for reading! Hope it was a bit useful and I brought some insights into the reader's mind.
Also, feel free to text me in Telegram if you have any questions, and subscribe for Twitter. Make this front-end developer pleased 😊