[{"data":1,"prerenderedAt":326},["ShallowReactive",2],{"\u002Fblog\u002F2020\u002Fnew-design-for-the-blog":3,"\u002Fblog\u002F2020\u002Fnew-design-for-the-blog-surround":315},{"id":4,"title":5,"author":6,"badge":11,"body":13,"date":303,"description":304,"draft":305,"extension":306,"image":307,"meta":309,"navigation":310,"path":311,"seo":312,"stem":313,"__hash__":314},"posts\u002Fblog\u002F2020\u002Fnew-design-for-the-blog.md","New design for the blog!",{"name":7,"to":8,"avatar":9},"Nir Galon","https:\u002F\u002Fx.com\u002Fnirgn975",{"src":10},"\u002Favatar.webp",{"label":12},"solopreneur",{"type":14,"value":15,"toc":290},"minimark",[16,20,25,28,31,36,39,51,56,64,68,75,79,86,90,98,102,117,121,130,134,137,140,144,147,162,166,169,178,187,194,198,201,204,208,211,218,233,242,246,249,287],[17,18,19],"p",{},"I'm really excited for this! Don't ask me why because I can't explain it. This is not the first time I make a new design for this blog, it's actually the fifth time! and yet, I feel this is the best one yet. It has everything I ever wanted in my blog.",[21,22,24],"h2",{"id":23},"_1-new-design","1. New Design",[17,26,27],{},"I can't even start to describe to you how much I feel this design is perfect for this blog. It has all the features I wanted: automatic categories and tags, content section in the posts, a comments system that doesn't sell your privacy and take forever to load (yes disqus I'm looking at you!), and dark mode! Ohh dark mode (It's not for everyone, I know, that's why it's optional).",[17,29,30],{},"Let's break it down",[32,33,35],"h3",{"id":34},"_11-navigation","1.1 Navigation",[17,37,38],{},"The navigation at the upper right side of the website contains all the configuration and links of the website.",[17,40,41],{},[42,43],"img",{"alt":44,"className":45,"src":48,"height":49,"width":50},"Navigation",[46,47],"rounded-lg","mx-auto","\u002Fposts\u002F2020\u002Fnew-design-blog\u002Fnavigation.webp",44,423,[52,53,55],"h4",{"id":54},"_111-posts","1.1.1 Posts",[17,57,58,59,63],{},"The ",[60,61,62],"strong",{},"Posts"," page will have all of the posts of the blog, it'll be ordered by year and will show the title of the post and the date it was published. This is the simplest way to go over old posts and just browse them.",[52,65,67],{"id":66},"_112-tags","1.1.2 Tags",[17,69,70,71,74],{},"Every post will have a list of tags, basically the main topics the post is about. The ",[60,72,73],{},"Tags"," page will host all of those tags. This way you can glance on all of the topics I write about and click on one of them and get a list of the posts that have that tag. This is really a great and easy way to search for a post topic.",[52,76,78],{"id":77},"_113-categories","1.1.3 Categories",[17,80,81,82,85],{},"In contrast to the Tags page the ",[60,83,84],{},"Categories"," page contains a list of all the posts divided by categories that I set in advance, each post can be in only one category so this is me trying to categorize all the posts by topics that I think are related and I want to explore (or maybe even write a series of posts about a single thing).",[52,87,89],{"id":88},"_114-about","1.1.4 About",[17,91,58,92,97],{},[93,94,96],"a",{"href":95},"\u002Fabout","About"," page is a simple one, it's just one static page with some information about me and the history of the blog. If you want to contact me, there is couple of ways to do that and it's all in there.",[52,99,101],{"id":100},"_115-github-link","1.1.5 GitHub Link",[17,103,104,110,111,116],{},[93,105,109],{"href":106,"rel":107},"https:\u002F\u002Fgithub.com\u002Fnirgn975",[108],"nofollow","GitHub"," is the main platform I'm on right now (and ",[93,112,115],{"href":113,"rel":114},"https:\u002F\u002Ftwitter.com\u002Fnirgn975",[108],"twitter","), it's the most important one because it stores all of my projects (work and private ones), my code examples, etc. And it makes sense to expect that I will direct readers there during the posts, so it's handy to have a direct link.",[52,118,120],{"id":119},"_116-search","1.1.6 Search",[17,122,123,124,129],{},"In time our blog will have a lot of posts. This will create a problem for new people who just came across this blog and went to search for a specific post related to a specific subject. To solve this problem I use ",[93,125,128],{"href":126,"rel":127},"https:\u002F\u002Fwww.algolia.com\u002F",[108],"algolia"," to provide a web search through a SaaS model. That way I keep the blog lean and static like I want to (I can focus on creating content and not features) while providing superhero powers!",[52,131,133],{"id":132},"_117-dark-mode","1.1.7 Dark Mode!",[17,135,136],{},"People that know me, know how much I love dark mode! I can't explain it, it's just easier on my eyes. I loved the old design of the blog, but not having a dark mode was a major bug. So the new design solved this by implementing a tiny button on the top right corner to toggle between light and dark modes.",[17,138,139],{},"This was a big motivation boost for me to move on from the old design. The toggle doesn't just add dark mode, it enables the option to choose for each user what is better for him\u002Fher, which is super important to me.",[32,141,143],{"id":142},"_12-post","1.2 Post",[17,145,146],{},"In the beginning of the old design I just had a title, text, pictures and code blocks. After some time I added the publish date of the post and how much time (approximately) it'll take to read the post (based on the number of words). In this new design we keep those features but add a content table to the right of the post, the category the post belongs to, the tags list at the bottom of the post, and much needed share buttons for easy sharing via social media.",[17,148,149,150,155,156,161],{},"On the technical side of the post I added a few features that will help me write better readable text, for example ",[93,151,154],{"href":152,"rel":153},"https:\u002F\u002Fgithub.com\u002FKaTeX\u002FKaTeX",[108],"KaTeX"," to render TeX math on the screen and ",[93,157,160],{"href":158,"rel":159},"https:\u002F\u002Fgithub.com\u002Fmermaid-js\u002Fmermaid",[108],"mermaid"," to generate diagrams and flowcharts.",[32,163,165],{"id":164},"_13-comments","1.3 Comments",[17,167,168],{},"When I moved from blogger and then tried Wordpress for a bit, I had a comment system in place. But when I moved to static sites for a while I didn't have any comment system and I was missing that. Missing the interactions and the users that tried for themselves the things I wrote about and got some errors and needed help. I know I need help sometimes when the documentation of a project isn't clear enough.",[17,170,171,172,177],{},"So after a while I implemented ",[93,173,176],{"href":174,"rel":175},"https:\u002F\u002Fdisqus.com\u002F",[108],"disqus"," but it was out of necessity. I didn't like it because it has a lot of privacy issues, it was really slow and the user couldn't make an anonymous comment (they force you to login via one of the social networks login buttons or sign up and open an account in their website).",[17,179,180,181,186],{},"A new design made a new opportunity to change all of that! I searched for days for the best commenting system for static websites that will keep the user's privacy, let the user make an anonymous comment, and will be beautiful and easy to use. And I think I found it! ",[93,182,185],{"href":183,"rel":184},"https:\u002F\u002Fwww.commento.io",[108],"commento"," is (in my research) the best there is out there right now, it fulfills all my requirements and more.",[17,188,189],{},[42,190],{"alt":191,"className":192,"src":193},"commento.io platform",[46,47],"\u002Fposts\u002F2020\u002Fnew-design-blog\u002Fcommento-io-platform.webp",[21,195,197],{"id":196},"_2-new-language","2. New language",[17,199,200],{},"The hardest decision I had to make is to move to English or stay in Hebrew. The user base in Hebrew is very small, but there is something special and important in making quality content available to all (and by all I mean people who don't know English as a second language). And I did do that for years. But it's time to grow, my perspective has changed and I now think it's a must to at least be comfortable to read in English if you want to be successful in tech. I want to believe this will not be an issue to my Israeli readers and from now I'll start writing in English (I think it has a big part of my excitement).",[17,202,203],{},"English is not my native language (Hebrew is) so don't expect perfect. But I think I'm good enough to make it readable and I'm sure it'll get better over time, so bear with me.",[21,205,207],{"id":206},"_3-analytics","3. Analytics",[17,209,210],{},"One of the things I highly value is the user's privacy, as I said before. But I need to know some stats about the blog (from where my readers are, views count, stats over time, etc). So, naturally I go to Google Analytics, but Google adds ad tracks to their script to keep tabs on my readers across the web, and that's something I can't accept. So, I search for an alternative.",[17,212,213],{},[42,214],{"alt":215,"className":216,"src":217},"Plausible Analytics elevator pitch",[46,47],"\u002Fposts\u002F2020\u002Fnew-design-blog\u002Fplausible-analytics-elevator-pitch.webp",[17,219,220,221,226,227,232],{},"And I found it, ",[93,222,225],{"href":223,"rel":224},"https:\u002F\u002Fplausible.io",[108],"Plausible Analytics"," is simple and privacy focused, exactly what I was searching for. And to check they're true to their words I use ",[93,228,231],{"href":229,"rel":230},"https:\u002F\u002Fthemarkup.org\u002Fblacklight\u002F?url=lifelongstudent.io",[108],"blacklight"," - A real-time website privacy inspector.",[17,234,235],{},[42,236],{"alt":237,"className":238,"src":239,"height":240,"width":241},"Blacklight search results",[46,47],"\u002Fposts\u002F2020\u002Fnew-design-blog\u002Fblacklight-search-results.webp",1225,646,[21,243,245],{"id":244},"_4-summary","4. Summary",[17,247,248],{},"So the new design of the blog is beautiful, useful, and I'm very excited to move to writing posts in English.",[17,250,251,252,256,257,262,263,268,269,274,275,280,281,286],{},"I have a lot of great ideas for new posts and I can't wait to start writing them. Here is a little glimpse for one of them: a series of posts to build a little Twitter clone website with a live GitHub repo that will update at any post (so you could jump and ",[253,254,255],"code",{},"checkout"," to the relevant post if you want), and in production level (deploy it to the ",[93,258,261],{"href":259,"rel":260},"https:\u002F\u002Fcloud.google.com\u002F",[108],"Google cloud",", monitor, backups, etc). We'll plan our architecture together, write a list of features (based on the real Twitter), build the client (",[93,264,267],{"href":265,"rel":266},"https:\u002F\u002Fangular.io\u002F",[108],"Angular",") and the server (",[93,270,273],{"href":271,"rel":272},"https:\u002F\u002Fnodejs.org",[108],"Node.js","), write tests, build CI\u002FCD with GitHub actions and GCP tools, and use ",[93,276,279],{"href":277,"rel":278},"https:\u002F\u002Fwww.docker.com\u002F",[108],"Docker"," and ",[93,282,285],{"href":283,"rel":284},"https:\u002F\u002Fkubernetes.io\u002F",[108],"kubernetes"," for deployment at scale. All of that step by step, it'll be fun!",[17,288,289],{},"There is a lot to wait for! (;",{"title":291,"searchDepth":292,"depth":292,"links":293},"",2,[294,300,301,302],{"id":23,"depth":292,"text":24,"children":295},[296,298,299],{"id":34,"depth":297,"text":35},3,{"id":142,"depth":297,"text":143},{"id":164,"depth":297,"text":165},{"id":196,"depth":292,"text":197},{"id":206,"depth":292,"text":207},{"id":244,"depth":292,"text":245},"2020-04-25","Unveiling the blog's fifth redesign, with dark mode and privacy-friendly tooling.",false,"md",{"src":308},"\u002Fposts\u002F2020\u002Fnew-design-blog\u002Fblog-hero.webp",{},true,"\u002Fblog\u002F2020\u002Fnew-design-for-the-blog",{"title":5,"description":304},"blog\u002F2020\u002Fnew-design-for-the-blog","K_N6XrpJbiI47quApEEwOkTaq5y90PH3in3U1pzxWrQ",[316,321],{"title":317,"path":318,"stem":319,"description":320,"children":-1},"Like A Spy With Hak5 Toys","\u002Fblog\u002F2020\u002Flike-a-spy-with-hak5-toys","blog\u002F2020\u002Flike-a-spy-with-hak5-toys","Using Hak5's Screen Crab and Key Croc to remotely spy on a screen.",{"title":322,"path":323,"stem":324,"description":325,"children":-1},"Passive.. Passive Recon.. Passive Reconnaissance.. OSINT!","\u002Fblog\u002F2020\u002Fopen-source-intelligence","blog\u002F2020\u002Fopen-source-intelligence","A hands-on walkthrough of passive reconnaissance and OSINT techniques.",1786001638688]