<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Uzay-G</title>
    <description>The latest articles on Forem by Uzay-G (@uzayg).</description>
    <link>https://forem.com/uzayg</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F262041%2F62166a7e-ad4a-46bd-a327-7293ae9a80e2.png</url>
      <title>Forem: Uzay-G</title>
      <link>https://forem.com/uzayg</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/uzayg"/>
    <language>en</language>
    <item>
      <title>How I Manage My Knowledge</title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Mon, 01 Nov 2021 21:16:18 +0000</pubDate>
      <link>https://forem.com/uzayg/how-i-manage-my-knowledge-1cgp</link>
      <guid>https://forem.com/uzayg/how-i-manage-my-knowledge-1cgp</guid>
      <description>&lt;p&gt;This post is originally from my &lt;a href="https://www.uzpg.me/general/2021/07/20/my-knowledge-process.html"&gt;blog&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This is an overview of the tools and software I use to maintain and index of my knowledge and life in an efficient and shareable way.&lt;/p&gt;

&lt;h1&gt;
  
  
  Tech
&lt;/h1&gt;

&lt;p&gt;The main knowledge base program I use to save and gather information is &lt;a href="https://archivy.github.io"&gt;Archivy&lt;/a&gt;, an open source project I created that supports hierarchical and bidirectional notes, local bookmarking (downloads the webpages you want) and is highly extensible.&lt;/p&gt;

&lt;p&gt;I run a local instance of this program on my computer, through which I edit / manage my knowledge, simply opening a new browser tab or vim when I have content to write. All my data is stored as markdown files in a local git repository that I push to a private GitHub repo for backup / access on my phone.&lt;/p&gt;

&lt;p&gt;I wrote a &lt;a href="https://github.com/archivy/archivy-static-site-generator"&gt;plugin&lt;/a&gt; to turn user Archivy knowledge bases into static HTML websites so that users can share their knowledge bases online. Mine is hosted at &lt;a href="https://knowledge.uzpg.me"&gt;knowledge.uzpg.me&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The git setup I have makes it so that whenever I push my changes and indicate new files in public visibility this website is updated.&lt;/p&gt;

&lt;p&gt;This setup allows for a few advantages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;extensibility&lt;/strong&gt; - the software I use is very flexible so it's very easy for me to script / setup infrastructure around my knowledge base. This is possible using tools like Archivy &lt;a href="https://github.com/archivy/awesome-archivy"&gt;plugins&lt;/a&gt; and &lt;a href="https://archivy.github.io/reference/architecture/"&gt;APIs&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ease of sharing&lt;/strong&gt; - this extensibility allows many ways for me share my knowledge base, and also distribute the extensions / scripts I use to organize it. My knowledge base can then also have value for other people, and I can directly send my notes, on top of having it act as a personal knowledge repository.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ease of access&lt;/strong&gt; - I can access my knowledge whenever I want, on any device, through github / my public static site.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Content
&lt;/h1&gt;

&lt;p&gt;The actual content I save into my knowledge base can be divided into multiple types.&lt;/p&gt;

&lt;h2&gt;
  
  
  Notes
&lt;/h2&gt;

&lt;p&gt;Notes are a very important part of my knowledge base, as they are useful for retention and helpful to go back on things I've learned. My knowledge base is constantly compounding with new information that I can link together.&lt;/p&gt;

&lt;p&gt;Whenever I read a non-fiction book I always try to highlight and annotate it. Then, once I'm done I come back to it and try to synthesize its main ideas. Although this process is long, it helps me really make sure I understand all the core ideas of the work and have a way to review its essential message. Examples: &lt;a href="https://knowledge.uzpg.me/dataobj/1214/"&gt;The Selfish Gene&lt;/a&gt; or &lt;a href="https://knowledge.uzpg.me/dataobj/1913/"&gt;The Theoretical Minimum&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I also keep notes on courses or talks that I have attended, often related to STEM. For these I use embedded LaTeX and screenshots of course material. &lt;a href="https://knowledge.uzpg.me/dataobj/1923/"&gt;Example&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Miscellaneous lists
&lt;/h2&gt;

&lt;p&gt;This part of my knowledge base acts as somewhat of a personal record, or journal of the things I've done and the content I've consumed.&lt;/p&gt;

&lt;p&gt;Indeed, I find it useful to compile collections of miscellaneous content I appreciated. It helps me keep track what I've done and when I did it. This is a form of &lt;strong&gt;bookmarking&lt;/strong&gt; generalized beyond just links. For example, the lists of &lt;a href="https://knowledge.uzpg.me/dirs/books/"&gt;the books I've read&lt;/a&gt;, &lt;a href="https://knowledge.uzpg.me/dataobj/153/"&gt;words I like&lt;/a&gt;, &lt;a href="https://knowledge.uzpg.me/dataobj/1611/"&gt;quotes&lt;/a&gt;, &lt;a href="https://knowledge.uzpg.me/dataobj/1925/"&gt;poetry&lt;/a&gt; or &lt;a href="https://knowledge.uzpg.me/dataobj/1849/"&gt;articles I saved&lt;/a&gt;. I gradually add to these whenever I find something relevant.&lt;/p&gt;

&lt;p&gt;I also jot down lists of events or activities I participated in and would like to keep a digital reference of, in the form of a journal. I'm very fond of cyber-security for example, and when I do a cyber-security competition (CTF) I enjoy saving my opinion of the event and &lt;a href="http://localhost:5000/dataobj/318"&gt;its challenges&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Web Content
&lt;/h2&gt;

&lt;p&gt;All of these different types of content benefit from links to articles as references. One of the core feature of Archivy is it's ability to download / store web content locally. To this effect, I often use Archivy's functionality to download relevant articles or webpages that I then link inside my notes. This also ensures the content survives &lt;a href="https://en.wikipedia.org/wiki/Link_rot"&gt;link rot&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I can also use existing scripts to quickly download content from my online accounts, like &lt;a href="https://github.com/archivy/archivy-pocket"&gt;my pocket account&lt;/a&gt; or &lt;a href="https://github.com/archivy/archivy-hn"&gt;my Hacker News posts&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  General Documents
&lt;/h2&gt;

&lt;p&gt;I also keep many standalone documents that I'd like to have backed up in my knowledge base: for example, school material that I can then share with classmates, or the &lt;a href="https://knowledge.uzpg.me/dirs/poetry/"&gt;poetry I write infrequently&lt;/a&gt;.&lt;/p&gt;

&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;This process allows me to quickly search and navigate all the things I've learned / done / appreciated. I can explore and handle this content manually or programmatically through scripting.&lt;/p&gt;

&lt;p&gt;This way of interfacing helps me access my knowledge base efficiently and share without any hassle. I'm very satisfied with my setup but plan on adding more features to the software I use; including a graph view of links similar to Obsidian's, and better tagging.&lt;/p&gt;

&lt;p&gt;I also think there are many interesting plugin ideas I could develop to script with my content: like a script that uses Natural Language Processing to generate spaced repetition quizzes on your knowledge base.&lt;/p&gt;

&lt;p&gt;I plan on implementing ML integrations to have automated suggestions of tags and links between notes, something I'm really excited about too!&lt;/p&gt;

</description>
      <category>automation</category>
      <category>python</category>
      <category>productivity</category>
      <category>git</category>
    </item>
    <item>
      <title>ARCHITECTURE.md</title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Tue, 21 Jul 2020 21:49:09 +0000</pubDate>
      <link>https://forem.com/uzayg/architecture-md-5221</link>
      <guid>https://forem.com/uzayg/architecture-md-5221</guid>
      <description>&lt;p&gt;Open Source Software and especially large projects have a few defined standards that are used to promote welcoming new contributors and ensure a healthy collaborative environment like for example &lt;code&gt;CONTRIBUTING.md&lt;/code&gt;, &lt;code&gt;CODE_OF_CONDUCT.md&lt;/code&gt;, and &lt;a href="https://github.blog/2016-02-17-issue-and-pull-request-templates/"&gt;issue/pull request templates&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;Despite this, even in popular projects, there is a disconcerting lack of guidance on the actual structure of the software and its inner workings&lt;/p&gt;

&lt;p&gt;For example, as a part of the &lt;a href="https://codein.withgoogle.com/archive/"&gt;open source Google Code-in event&lt;/a&gt;, last winter I started contributing and still contribute to &lt;a href="https://github.com/publiclab/"&gt;Public Lab&lt;/a&gt;, an environmental community that develops environmental software.&lt;/p&gt;

&lt;p&gt;This forum's code base is relatively large, especially for an open source beginner. It has about ~25 controllers, ~30 models and a very complete testing suite with functional, unit and system testing all automated with Travis.&lt;/p&gt;

&lt;p&gt;But I took some time and read through the code to understand how the different bits and pieces of the app interacted, and grew to a confident level with some parts and at least an abstraction of understanding with the others. I luckily also had the help of my mentors who answered my questions during this process.&lt;/p&gt;

&lt;p&gt;Obviously, this mentorship is often unavailable and new contributors have to scrutinize the code base on their own, and try to come up with a vague understanding of the components that will prevent them from creating a breaking change in another part of the app.&lt;/p&gt;

&lt;p&gt;For example, in other industries, blueprints serve as this stepping stone to provide an overview of how the product works as a whole and yet it's often missing in software engineering.&lt;/p&gt;

&lt;p&gt;Let's take an example. I've been getting into the &lt;a href="https://github.com/crystal-lang/crystal/"&gt;Crystal&lt;/a&gt; programming language as a faster, type-checked alternative to Ruby. I really enjoyed the language and wanted to contribute and understand the code. I checked out their &lt;a href="https://github.com/crystal-lang/crystal/blob/master/CONTRIBUTING.md"&gt;&lt;code&gt;CONTRIBUTING.md&lt;/code&gt;&lt;/a&gt; and it provided me with mostly a social / collaborative overview of where I can discuss issues or ideas, etc... What it did &lt;strong&gt;not&lt;/strong&gt; provide was a &lt;strong&gt;technical&lt;/strong&gt; overview of how the code is structured, the way it all comes together and its tech stack.&lt;/p&gt;

&lt;p&gt;Putting this information would be helpful to not put off curious contributors that want to learn and develop a higher-level understanding of how the project works.&lt;/p&gt;

&lt;p&gt;These frustrations are pushing me to propose a new "standard" for welcoming open source contribution, an &lt;code&gt;ARCHITECTURE.md&lt;/code&gt; file, that would work on top of &lt;code&gt;CONTRIBUTING.md&lt;/code&gt; to inform on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The tech stack, the backend / frontend / db / middleware technologies used&lt;/li&gt;
&lt;li&gt;The structure of the code and its logical links (diagrams :)), for example, crystal's code is organised with &lt;code&gt;/src/modulename/submodule.cr&lt;/code&gt; structure (ie &lt;a href="https://github.com/crystal-lang/crystal/blob/master/src/csv/parser.cr"&gt;&lt;code&gt;/src/csv/parser.cr&lt;/code&gt;&lt;/a&gt; &lt;/li&gt;
&lt;li&gt;Specifications for testing and general guidelines on testing constraints for said project paired with details on the CI process&lt;/li&gt;
&lt;li&gt;Code style requirements&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you have any other ideas for additional information it could contain, please comment! I think this could be incredibly useful in general for newcomers to large projects.&lt;/p&gt;

</description>
      <category>opensource</category>
    </item>
    <item>
      <title>How to sustain yourself with an open-source project?</title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Sun, 05 Jan 2020 17:09:25 +0000</pubDate>
      <link>https://forem.com/uzayg/how-to-sustain-yourself-with-an-open-source-project-50c2</link>
      <guid>https://forem.com/uzayg/how-to-sustain-yourself-with-an-open-source-project-50c2</guid>
      <description>&lt;p&gt;Hey! I am currently working on &lt;a href="https://www.devol.io"&gt;Devolio&lt;/a&gt;, a welcoming community for developers to share and dicuss and I am struggling to decide whether or not open-sourcing it is a good idea. &lt;/p&gt;

&lt;p&gt;On one hand, I really want to open-source the software and make it an amazing community with the help of other passionate devs. But, I am worried about how I can sustain myself while not stealing from the other contributors if I make it public. If many other people have helped the project become useful and interesting, I don't want to profit from their labor but I also want to be able to pay for hosting and the other costs of sustaining a server.&lt;/p&gt;

&lt;p&gt;I really believe making it open-source would be an amazing opportunity for me to meet other interesting people and code something great but I am torn on what to do.&lt;/p&gt;

&lt;p&gt;How have your experiences with the open-source model been and what were the positive and negative aspects?&lt;/p&gt;

&lt;p&gt;Thank you so much!&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>opensource</category>
    </item>
    <item>
      <title>What I've built and what I've learned in 2019</title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Sun, 29 Dec 2019 13:54:33 +0000</pubDate>
      <link>https://forem.com/uzayg/what-i-ve-built-and-what-i-ve-learned-in-2019-4bdf</link>
      <guid>https://forem.com/uzayg/what-i-ve-built-and-what-i-ve-learned-in-2019-4bdf</guid>
      <description>&lt;p&gt;From my blog &lt;a href="http://uzpg.me"&gt;uzpg.me&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WlBOm8nM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/09czh255msb3hcri2hwi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WlBOm8nM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/09czh255msb3hcri2hwi.png" alt="github contribs" width="880" height="206"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This post is a recap of everything I've learned and done in 2019 and the projects I was and am building. I've included links to all the amazing resources I used to become a better programmer.&lt;/p&gt;

&lt;p&gt;This year is the one I truly started programming. It all started on a rainy day in January when I was sitting at my desk with an English assignment. What I had to do was robotically scan a text for &lt;a href="https://literarydevices.net/" rel="noopener"&gt;literary techniques&lt;/a&gt; and to be honest, I was downright bored out of my mind. So, although my coding knowledge was &lt;strong&gt;very limited&lt;/strong&gt;. I had the idea to build a website that would scan a text and return all literary techniques so &lt;strong&gt;no one would have to do it again&lt;/strong&gt;. And for a novice programmer, that is a &lt;strong&gt;difficult task&lt;/strong&gt;. But the fact that I had this motivation is what allowed me to get somewhere with this project. You can view the codebase for the project named Litscan &lt;a href="https://github.com/Uzay-G/Litscan"&gt;on Github&lt;/a&gt; (keep in mind I was a beginner if you look at it :] ).&lt;/p&gt;

&lt;p&gt;Although the project did not get to deployment or production, I am so happy I did it because it sparked my interest in coding and taught me so much! I went from coding static html pages all the way to learning &lt;a href="https://en.wikipedia.org/wiki/Natural_language_processing"&gt;NLP&lt;/a&gt; and building my first webserver.&lt;/p&gt;

&lt;p&gt;Working on this and learning about all the components took a bit of time but I then did an internship at &lt;a href="https://www.tweag.io/"&gt;Tweag&lt;/a&gt;. I was mentored by &lt;a href="https://github.com/mmesch"&gt;Matthias Meschede&lt;/a&gt; and &lt;a href="https://github.com/aspiwack/"&gt;Arnaud Spiwack&lt;/a&gt; and I also had the opportunity to learn from &lt;a href="https://github.com/guibou"&gt;Guillaume Bouchard&lt;/a&gt; and &lt;a href="https://github.com/krisajenkins"&gt;Kris Jenkins&lt;/a&gt;. They opened my eyes to what it's like being a professional developer and different paths you can take to become one.&lt;/p&gt;

&lt;p&gt;I then started completing the open source &lt;a href="https://theodinproject.com"&gt;Odin Project&lt;/a&gt; curriculum for web development. It's an awesome resource built with the help of volunteers and open source maintainers. I recommend it and I believe it's one of the best resources to get from zero to hero in webdev. It made me discover Ruby and it's Rails framework that I love using. It also introduced me to the world of &lt;a href="https://opensource.guide/how-to-contribute"&gt;open source&lt;/a&gt; and developed my knowledge of git.&lt;/p&gt;

&lt;p&gt;As a part of this curriculum, I followed Michael Hartl's in-depth &lt;a href="https://www.learnenough.com/ruby-on-rails-4th-edition-tutorial/beginning"&gt;Ruby On Rails tutorial&lt;/a&gt;. Once again, I decided to apply the methods of &lt;a href="https://www.pblworks.org/what-is-pbl"&gt;project based learning&lt;/a&gt;. Instead of building the sample app of the book, I decided to follow the same outline but instead build &lt;a href="http://metadigest.uzpg.me?ref=blog"&gt;Metadigest&lt;/a&gt;. Metadigest is a newsletter I built in Rails that scrapes different APIs to get the the most popular tech content for the week. I then curate these articles and send the digest! Through this, I learned about encryption, api requests and also how to setup a production rails website with an AWS ec2 container.&lt;/p&gt;

&lt;p&gt;Flash forward to now, I'm learning a lot about computer science, hacking and AI with these great resources:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://ebookfoundation.github.io/free-programming-books/"&gt;Free Programming Books&lt;/a&gt;, a collection of amazing programming books for pretty much everything.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://yangshun.github.io/tech-interview-handbook/"&gt;Tech Interview Handbook&lt;/a&gt;, tips and tricks to hack your coding interview&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://elementsofai.com"&gt;Hacker101&lt;/a&gt;, a great free intro to hacking.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.hackerone.com/hacker101"&gt;Elements of AI&lt;/a&gt;, an open MOOC introducing people to AI built by the Swedish government.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;While I learn with this free content, I am also beginning to work on Devolio, an open platform for developers to share, discuss and create. This is my biggest project for now as I want to let users customize their profile design with css and am building an API for users to integrate with Devolio in their own creative projects.&lt;/p&gt;

&lt;p&gt;I haven't launched yet, but you can check out the landing page at:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.devol.io/?ref=blog"&gt;https://www.devol.io&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I'm really excited about this website because I think it can become something really interesting and I might open source it if there is enough interest and I can sustain myself.&lt;/p&gt;

&lt;p&gt;I'm also thrilled to have built my tech blog which you are reading through right now and to have written 11 articles in the last 5 months.&lt;/p&gt;

&lt;h2&gt;
  
  
  Looking towards the future with 2020
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Progress with Devolio
&lt;/h3&gt;

&lt;p&gt;I am going to work on this project. I want to build an efficient server and develop the features outlined on the &lt;a href="https://devol.io/?ref=blog"&gt;landing page&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The big challenge is going to be user acquisition because well, a social media site needs users before it is useful and I don't have much funds to advertise.&lt;/p&gt;

&lt;p&gt;The idea of open-sourcing the code is very alluring. I know that if I can grow an open source community the project will become amazing because the ability for any dev to just contribute and use their creativity to make the tool better for like-minded people is extremely powerful.&lt;/p&gt;

&lt;h3&gt;
  
  
  Vue, WebAssembly and Node
&lt;/h3&gt;

&lt;p&gt;The stack I use for my webapps could be considered a bit "outdated" and I want to understand the big popularity surge of Node and Javascript frameworks like Vue or React. I found this nice &lt;a href="http://book.mixu.net/node/single.html"&gt;Node book&lt;/a&gt; I will read when I have more time. &lt;a href="https://webassembly.org"&gt;WebAssembly&lt;/a&gt; also seems like an interesting tool I could use while I learn Rust.&lt;/p&gt;

&lt;h3&gt;
  
  
  Whitehat Hacking
&lt;/h3&gt;

&lt;p&gt;I think learning more about &lt;strong&gt;ethical hacking&lt;/strong&gt; could be a very interesting subject to explore with this &lt;a href="https://www.hacker101.com/"&gt;hacker101 course&lt;/a&gt;. Once I complete that, I want to try my hand at their &lt;a href="https://ctf.hacker101.com/"&gt;Capture the flag&lt;/a&gt; mock exercises and bug bounties. &lt;/p&gt;

&lt;h3&gt;
  
  
  Design
&lt;/h3&gt;

&lt;p&gt;Design is a fun part of webdev and I want to get better at making beautiful websites and mockups with Figma. Here are some of the appealing sites I've found:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://igma.im/"&gt;Igma.im&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.vincentsaisset.com/"&gt;vincentsaisset.com&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.vincentsaisset.com/"&gt;burakaslan.me&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://davideperozzi.com/"&gt;davideperozzi.com&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Open Source Organizations
&lt;/h3&gt;

&lt;p&gt;I'm currently working with different open-source organizations as part of the &lt;a href="https://codein.withgoogle.com/"&gt;Google CodeIn&lt;/a&gt; and I love coding with others on an open source project and the collaboration that is required for building complex tools. I want to find more orgs that I can contribute to and develop. Do you know any welcoming ones?&lt;/p&gt;

&lt;p&gt;What are you planning to do next year? Please comment down below and I'd love to chat with you!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>opensource</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Learn how to code a well-designed pre-loader</title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Sun, 01 Dec 2019 17:31:59 +0000</pubDate>
      <link>https://forem.com/uzayg/learn-how-to-code-a-well-designed-pre-loader-19oa</link>
      <guid>https://forem.com/uzayg/learn-how-to-code-a-well-designed-pre-loader-19oa</guid>
      <description>&lt;p&gt;From my &lt;a href="http://uzpg.me"&gt;tech blog&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Preloaders are essential for websites that contain many images, videos or any other data-consuming files. A loader lets your users know that something is happening behind the screen and they are not just looking at a dead website. This tutorial will teach you how to code an engaging pre-loader using css animations and how to make it work with your own site.&lt;/p&gt;

&lt;h3&gt;
  
  
  What you will learn about
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;CSS keyframes&lt;/li&gt;
&lt;li&gt;CSS transitions&lt;/li&gt;
&lt;li&gt;The javascript 'onload' event&lt;/li&gt;
&lt;/ul&gt;



&lt;h3&gt;
  
  
  The end result
&lt;/h3&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/etherio/embed/gOYZLyM?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;We'll be seeing how this works in more detail later in the post, but basically we use css keyframes to shift the y-axis of the little circles and their background color so they slowly move and change color. When the page loads, we hide the preloader and display the page content.&lt;/p&gt;

&lt;p&gt;First, let's code the html snippet that will contain the loader and your page content:&lt;br&gt;&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;
&amp;lt;!-- The loader --&amp;gt;
&amp;lt;div id="loader"&amp;gt;
  &amp;lt;div id="uno" class="circles"&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;div id="dos" class="circles"&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;div id="tres" class="circles"&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div id="content"&amp;gt;
&amp;lt;!-- Your webpage goes here --&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;br&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;As we can see, these are just simple html divs, nothing special. We need to style these to have the effect we want.&lt;br&gt;
First we'll style the background and circles and we will position our loader div using css.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;html&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#282a36&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;body&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;margin-top&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;50px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nf"&gt;#loader&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c"&gt;/* centered flex container */&lt;/span&gt;
  &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;justify-content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nc"&gt;.circles&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;margin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;5px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="c"&gt;/* The border-radius curves the div corners to make it a circle */&lt;/span&gt;
  &lt;span class="nl"&gt;border-radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="no"&gt;white&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we'll get to the really cool stuff you can do using css animations. The way it works is you define an &lt;code&gt;@keyframes&lt;/code&gt; animation that lets you gradually change the property of an element at different periods in the effect.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.circles&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;animation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;up&lt;/span&gt; &lt;span class="m"&gt;1s&lt;/span&gt; &lt;span class="n"&gt;infinite&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;animation-direction&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;alternate&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;@keyframes&lt;/span&gt; &lt;span class="n"&gt;up&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="err"&gt;100&lt;/span&gt;&lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nl"&gt;transform&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;translateY&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;-20px&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="nl"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#ff8080&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nf"&gt;#dos&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1.7s&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nf"&gt;#tres&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nl"&gt;animation-delay&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;3.4s&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For example, for this preloader, we tell it to gradually move the circles up and change their background. The &lt;code&gt;100%&lt;/code&gt; makes it complete the change at the end. You can learn more about keyframes &lt;a href="https://www.w3schools.com/css/css3_animations.asp"&gt;here&lt;/a&gt;. Once our keyframe has been coded, we need to add it to our circles using the animation property that in this case takes 3 arguments, the name of the keyframe, its duration and how many times it should run. &lt;br&gt;&lt;br&gt;
The animation direction property set to alternate tells it to do the animation in the reverse order every two times. &lt;br&gt;&lt;br&gt;
We also need to add a variating animation-delay to the circles so the first circle will rise up first and only after that the second and the third will too.&lt;/p&gt;

&lt;p&gt;At this point, you should have a working animation but we need to add some javascript so that the animations disappears when the page has loaded.&lt;/p&gt;

&lt;p&gt;The final css touch is to style our webpage content to make it invisible but also add a &lt;a href="https://www.w3schools.com/css/css3_transitions.asp"&gt;transition &lt;/a&gt;to it so that when our javascript reveals it, it will slowly fade into view. Add this to your css file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nf"&gt;#content&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;opacity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;transition&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;opacity&lt;/span&gt; &lt;span class="m"&gt;1.5s&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ok, now we have our animation, but what's wrong is the loader isn't replaced by the webpage when it's loaded. To do that, we need to add some javascript at the bottom of your html body.&lt;/p&gt;

&lt;p&gt;The simple javascript code you can see below waits for the page to load (&lt;code&gt;window.onload&lt;/code&gt;) and then runs a function that hides the loader and reveals the webpage.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;loader&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;display&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;none&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;content&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;opacity&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There we go! Now all you have to do is add your page content in the content div and you will have a functional preloader. Remember that you will only see the loading animation if your webpage takes time to load. If you encounter any problems or if you have any helpful feedback you can post a comment down below &lt;br&gt;
I hope this article helped you out!&lt;/p&gt;

&lt;p&gt;You can also check out my &lt;a href="http://metadigest.uzpg.me"&gt;weekly customizable newsletter&lt;/a&gt; about tech if you want to read more useful articles like this one!&lt;/p&gt;

</description>
      <category>learning</category>
      <category>design</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Implement automatic spellchecking on your static blog</title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Sun, 01 Dec 2019 16:10:27 +0000</pubDate>
      <link>https://forem.com/uzayg/implement-automatic-spellchecking-on-your-static-blog-5b57</link>
      <guid>https://forem.com/uzayg/implement-automatic-spellchecking-on-your-static-blog-5b57</guid>
      <description>&lt;p&gt;This post is from my &lt;a href="http://uzpg.me/blog"&gt;tech blog&lt;/a&gt; where I talk about programming, static sites and opensource!&lt;/p&gt;

&lt;p&gt;Have you ever made a huge spelling error on your blog and never noticed? It's a common mistake I've done because errors are hard to check for in markdown files. This post will teach you how to use &lt;a href="https://www.thoughtworks.com/continuous-integration" rel="noopener"&gt;Continuous Integration&lt;/a&gt; to find spelling mistakes in your posts and even get tips on how to improve your writing.&lt;/p&gt;

&lt;p&gt;Continous Integration is software that verifies your code based on certain criteria every time you push to your repository. In this case, every time you push to your blog repo you will receive a warning with all the mistakes in your posts.&lt;/p&gt;

&lt;p&gt;So, of course, you need to be using repositories and &lt;a href="https://www.atlassian.com/git/tutorials/what-is-version-control" rel="noopener"&gt;version control&lt;/a&gt; to host your code otherwise this will not work. We will be using the Travis CI continuous integration software. &lt;/p&gt;

&lt;p&gt;If your blog repository is public or if you're a &lt;a href="https://education.github.com/pack" rel="noopener"&gt;student&lt;/a&gt;, all you have to do is go to their &lt;a href="https://travis-ci.org/getting_started" rel="noopener"&gt;getting started docs&lt;/a&gt; to set it up for free. If you host your code on a private repo, you can use their platform only for the first 100 builds and then you need to pay a monthly fee. Sign in with Github and add your repo &lt;a href="https://travis-ci.com/" rel="noopener"&gt;here&lt;/a&gt; if your repo is private.&lt;/p&gt;

&lt;p&gt;All right, now we need to configure our &lt;code&gt;.travis.yml&lt;/code&gt; file. This file tells our Continuous Integration platform to execute certain commands on our code. If any errors are detected, you should receive a warning and you can get more details by looking at the &lt;code&gt;build log&lt;/code&gt; on the travis site.&lt;/p&gt;

&lt;p&gt;We will be using the two libraries below to check the quality of our posts. write-good is an efficient tool that gives you useful tips on how you can make your writing better. On top of that, we will be using the yaspeller library for spellchecking.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/btford/write-good" rel="noopener"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PY87EZeB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://gh-card.dev/repos/btford/write-good.svg" width="442" height="109"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/hcodes/yaspeller" rel="noopener"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4mFBd1r9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://gh-card.dev/repos/hcodes/yaspeller.svg" width="442" height="109"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;h2&gt;
  
  
  Configuration
&lt;/h2&gt;

&lt;p&gt;Our &lt;code&gt;.travis.yml&lt;/code&gt; will change a little bit depending on which static site generator you use.&lt;br&gt;
These two lines of code will be the same no matter what:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;before_install:
  - npm install yaspeller -g
script: yaspeller "{ path to posts }/*.md" &amp;amp;&amp;amp; npx write-good { path to posts }/*.md&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The &lt;code&gt;before_install&lt;/code&gt; block simply tells travis to install the yaspeller library. Then, the &lt;code&gt;script&lt;/code&gt; part tells yaspeller to analyse every(*) .md file in your post directory and then we call write-good in the same way. We don't need to install write-good because npm can use it directly with an internet connection.&lt;/p&gt;

&lt;p&gt;At this stage, the CI won't work because we didn't specify a language for our build. This section will differ for each static site. I'll detail what you need to add for the most popular ones.&lt;/p&gt;

&lt;h3&gt;
  
  
  Jekyll or Middleman
&lt;/h3&gt;

&lt;p&gt;With Jekyll and Middleman we need to specify our ruby version:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;language: ruby
rvm:
  - { ruby version }&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;
  
  
  Gatsby or Hexo
&lt;/h3&gt;

&lt;p&gt;These static site generators use &lt;code&gt;nodejs&lt;/code&gt;:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;language: node_js
node_js:
  - "stable"
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;
  
  
  Pelican
&lt;/h3&gt;

&lt;pre&gt;&lt;code&gt;language: python
python:
  - { your python version }&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Now all you need to do is &lt;code&gt;git commit&lt;/code&gt; and &lt;code&gt;push&lt;/code&gt; your repo which should already be connected to the Travis CI platform. On your Travis dashboard, you should see the build running. It will start by installing the scripts and then you'll start seeing the outputs of our spellchecking commands. It should look like this:&lt;/p&gt;

&lt;h3&gt;
  
  
  Yaspeller output
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TzC62b_L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/hcodes/yaspeller/master/images/cli.en.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TzC62b_L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/hcodes/yaspeller/master/images/cli.en.png" alt="yaspeller output" width="815" height="613"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Write-good output
&lt;/h3&gt;

&lt;pre&gt;&lt;code&gt;In _posts/2019-09-10-useful-github-tools-and-libraries.md
=============
-------------
There are many ways to find the solution to this problem, in one of them you cou
          ^^^^
"many" is a weasel word and can weaken meaning on line 27 at column 10
-------------
st term to the answer if it is even else add 0
                         ^^^^^
"it is" is wordy or unneeded on line 37 at column 42
------------------
d term2 to the answer if it is even else add 0
                         ^^^^^
"it is" is wordy or unneeded on line 39 at column 33
------------------
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Pretty cool right! This has been so useful for me to see what my mistakes or possible improvements. I hope you got it work and you can always comment down below if there was a problem. &lt;br&gt;
You can also subscribe to my &lt;a href="http://metadigest.uzpg.me"&gt;weekly customizable newsletter&lt;/a&gt; if you want to get a digest of the most interesting and popular articles about technology.&lt;/p&gt;

</description>
      <category>static</category>
      <category>learning</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Metadigest Newsletter 003 - Tech Highlights </title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Wed, 27 Nov 2019 15:19:51 +0000</pubDate>
      <link>https://forem.com/uzayg/metadigest-newsletter-003-tech-highlights-4bp1</link>
      <guid>https://forem.com/uzayg/metadigest-newsletter-003-tech-highlights-4bp1</guid>
      <description>&lt;p&gt;Hey! This is the third issue of my automated and curated newsletter &lt;a href="http://metadigest.uzpg.me"&gt;Metadigest&lt;/a&gt;. Its goal is to collect the best tech articles with an efficient algorithm. I then curate these results to ensure their quality and deliver them to you.&lt;/p&gt;

&lt;h2&gt; Our picks &lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://growth.design/case-studies/airbnb-personalization/"&gt;Airbnb Case Study: How to reduce churn with personalization&lt;/a&gt;
&lt;/h3&gt;


&lt;p&gt;A colorful case study of Airbnb's UI in the form of a comic.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://aelkus.github.io/culture/2019/10/21/hierarchy-of-cringe"&gt;The hierarchy of cringe&lt;/a&gt;
&lt;/h3&gt;


&lt;p&gt;Thought-provoking insights into social media culture and how people perceive each other through the web.&lt;/p&gt;

&lt;h3&gt;
&lt;a href="https://vitalik.ca/general/2019/11/22/progress.html" rel="noopener"&gt;
Hard Problems in Cryptocurrency: Five Years Later&lt;/a&gt;
&lt;/h3&gt;


&lt;li&gt;225 likes.&lt;/li&gt;
&lt;h3&gt;
&lt;a href="https://edition.cnn.com/travel/article/livestream-hotel-room-japan-intl-hnk/index.html" rel="noopener"&gt;
Japanese hotel room costs $1 a night, but you have to livestream your stay&lt;/a&gt;
&lt;/h3&gt;
&lt;p&gt;A hotel manager in Japan is finding new ways to make his business stand out.
&lt;/p&gt;
&lt;li&gt;138 likes.&lt;/li&gt;
&lt;h3&gt;
&lt;a href="https://www.bbc.co.uk/news/stories-50435014" rel="noopener"&gt;
Cryptoqueen: A woman scammed the world, then vanished&lt;/a&gt;
&lt;/h3&gt;
&lt;p&gt;How a cunning woman made billions tricking people into buying her fake cryptocurrency.
&lt;/p&gt;
&lt;li&gt;108 likes.&lt;/li&gt;
&lt;h3&gt;
&lt;a href="http://paulgraham.com/genius.html" rel="noopener"&gt;
The Bus Ticket Theory of Genius&lt;/a&gt;
&lt;/h3&gt;
&lt;p&gt;An essay on what makes smart people geniuses.
&lt;/p&gt;
&lt;li&gt;890 likes.&lt;/li&gt;
&lt;h3&gt;
&lt;a href="https://netzpolitik.org/2019/cheerfulness-and-censorship/" rel="noopener"&gt;
TikTok: Cheerfulness and censorship&lt;/a&gt;
&lt;/h3&gt;

&lt;li&gt;91 likes.&lt;/li&gt;
  &lt;h3&gt;
&lt;a href="https://www.stopusingfacebook.co/" rel="noopener"&gt;
  Stop using Facebook&lt;/a&gt;
  &lt;/h3&gt;
  &lt;p&gt;A website explaining why and how we should stop selling our privacy to the Facebook monopoly.&lt;/p&gt;


&lt;li&gt;privacy&lt;/li&gt;
&lt;br&gt;
  &lt;li&gt;53 likes.&lt;/li&gt;
&lt;h3&gt;
  
  
  &lt;a href="http://thedailywtf.com/articles/Designed-For-Reliability"&gt;Designed for Reliability&lt;/a&gt;
&lt;/h3&gt;


&lt;li&gt;practices&lt;/li&gt;
&lt;br&gt;
  &lt;li&gt;security&lt;/li&gt;
&lt;h3&gt;
  
  
  &lt;a href="https://www.acloudtree.com/2019-11-22-a-winding-road-to-infosec/"&gt;A Winding Road to InfoSec&lt;/a&gt;
&lt;/h3&gt;


&lt;h3&gt;
&lt;a href="https://www.dataviper.io/blog/2019/pdl-data-exposure-billion-people/" rel="noopener"&gt;&lt;br&gt;
  1.2 billion people exposed in data leak&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;The data of more than a billion people was exposed on a public web server.&lt;/p&gt;
&lt;br&gt;
  &lt;li&gt;privacy&lt;/li&gt;
&lt;br&gt;
  &lt;h3&gt;
&lt;a href="https://yorickpeterse.com/articles/not-beating-c-with-96-lines-of-inko/" rel="noopener"&gt;&lt;br&gt;
  Not beating C with 96 lines of Inko&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;li&gt;plt&lt;/li&gt;
&lt;br&gt;
  &lt;h3&gt;
&lt;a href="https://dev.to/zaiste/22-short-lessons-to-become-a-mobile-programmer-using-flutter-framework-d9j" rel="noopener"&gt;&lt;br&gt;
  22 Short Lessons To Become A Mobile Programmer Using Flutter Framework &lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;Here is a list of 22 short, video lessons aimed for absolute beginners and non-programmers to learn mobile software development from scratch.&lt;br&gt;
  &lt;/p&gt;
&lt;li&gt;tutorial&lt;/li&gt;
&lt;br&gt;
  &lt;h3&gt;
&lt;a href="https://dev.to/exampro/the-free-aws-certified-solutions-architect-associate-study-course-275-videos-3412" rel="noopener"&gt;&lt;br&gt;
  The FREE AWS Certified Solutions Architect Associate Study Course (275+ Videos!) 😱&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;An in-depth course to learn more about how you can use the AWS ecosystem.&lt;br&gt;
  &lt;/p&gt;
&lt;li&gt;aws&lt;/li&gt;
&lt;br&gt;
  &lt;li&gt;cloud&lt;/li&gt;
&lt;br&gt;
  &lt;h3&gt;
&lt;a href="https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69" rel="noopener"&gt;&lt;br&gt;
  Adaptive Loading - Improving Web Performance on low-end devices&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;Adaptive Loading is a pattern for delivering a fast core experience to all users (including low-end devices) where you progressively add high-end-only features, if a user's network and hardware can handle it&lt;br&gt;
  &lt;/p&gt;
&lt;li&gt;webdev&lt;/li&gt;
&lt;br&gt;
  &lt;h3&gt;
&lt;a href="https://dev.to/x-team/these-10-live-streaming-channels-will-make-you-a-better-programmer-j11" rel="noopener"&gt;&lt;br&gt;
  These 10 Live Streaming Channels Will Make You a Better Programmer&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;Watching a live stream of someone programming is a great way to improve your programming skills. Here are 10 live programming channels worth watching.&lt;br&gt;
  &lt;/p&gt;
&lt;li&gt;career&lt;/li&gt;
&lt;br&gt;
  &lt;li&gt;streaming&lt;/li&gt;
&lt;br&gt;
  &lt;h3&gt;
&lt;a href="https://dev.to/duomly/10-tips-which-help-you-to-learn-programming-faster-2ghf" rel="noopener"&gt;&lt;br&gt;
  10 tips which help you to learn programming faster&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;How you can optimize your learning process as you delve into software programming.&lt;br&gt;
  &lt;/p&gt;
&lt;li&gt;career&lt;/li&gt;
&lt;br&gt;
  &lt;li&gt;beginners&lt;/li&gt;
&lt;br&gt;
  &lt;h3&gt;
&lt;a href="https://www.bbc.com/news/world-europe-50507849" rel="noopener"&gt;&lt;br&gt;
  Russia bans sale of smartphones, computers and smart TV's without Russian-made software&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;As part of a series of restrictive measures against tech, Russia is now forcing tech products to use Russian software.&lt;br&gt;
  &lt;/p&gt;
&lt;li&gt;technology&lt;/li&gt;
&lt;br&gt;
  &lt;li&gt;Software&lt;/li&gt;
&lt;br&gt;
  &lt;h3&gt;
&lt;a href="https://www.businessinsider.com/sacha-baron-cohen-adl-speech-mark-zuckerberg-silicon-valley-2019-11" rel="noopener"&gt;&lt;br&gt;
  Sacha Baron Cohen tore into Mark Zuckerberg and Facebook over hate speech, violence, and political lies&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;Comedian Sacha Baron Cohen slammed Facebook and Zuckerberg this week and accused them of spreading hate speech and misinformation.&lt;br&gt;
  &lt;/p&gt;
&lt;li&gt;technology&lt;/li&gt;
&lt;br&gt;
  &lt;li&gt;Social Media&lt;/li&gt;
&lt;br&gt;
  &lt;h3&gt;
&lt;a href="https://engineering.shopify.com/blogs/engineering/successfully-merging-work-1000-developers" rel="noopener"&gt;&lt;br&gt;
  How Shopify successfully merges the work of 1000+ developers everyday&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;An overview of how Shopify has developed a multi-layered system for its developers to work together.&lt;br&gt;
  &lt;/p&gt;
&lt;h3&gt;
&lt;a href="https://www.sourcetrail.com/blog/open_source/" rel="noopener"&gt;&lt;br&gt;
  SourceTrail, the interactive source code explorer, is now free and open source&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  


&lt;h3&gt;
&lt;a href="http://insight.accessibe.host/" rel="noopener"&gt;&lt;br&gt;
  10M pages analyzed, only 2% pass ADA requirements&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;AI was used to rate the accessibility of millions of webpages and a vast majority failed to succeed.&lt;br&gt;
  &lt;/p&gt;
&lt;h3&gt;
&lt;a href="https://css-tricks.com/some-css-grid-strategies-for-matching-design-mockups/" rel="noopener"&gt;&lt;br&gt;
  Some CSS Grid Strategies for Matching Design Mockups&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  
&lt;h2&gt;Interesting projects&lt;/h2&gt;
&lt;br&gt;
  &lt;h3&gt;
&lt;a href="https://bsawyer.github.io/tamagotchi/index.html" rel="noopener"&gt;&lt;br&gt;
   Virtual pet game made for my daughter&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;A cute tamagotchi game with clean illustrations.&lt;br&gt;
  &lt;/p&gt;
&lt;h3&gt;
&lt;a href="https://www.hidelikeseverywhere.com/" rel="noopener"&gt;&lt;br&gt;
   Hide Likes Everywhere&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  &lt;p&gt;A browser extension to hide social metrics similar to likes. It's goal is to make us less dependent on the social affection or response of others.&lt;br&gt;
  &lt;/p&gt;
&lt;h3&gt;
&lt;a href="https://easydb.io/" rel="noopener"&gt;&lt;br&gt;
   EasyDB – A One-Click Ephemeral Database&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
&lt;br&gt;
  

&lt;p&gt;This is still a beta product. If you have any feedback or if you appreciated or disliked any features. We'd love it if  you could  contact us&lt;/p&gt;

&lt;p&gt;&lt;a href="http://metadigest.uzpg.me#share" rel="noopener"&gt;&lt;h2&gt;Share&lt;/h2&gt;&lt;/a&gt;&lt;/p&gt;



&lt;p&gt;From &lt;a href="http://metadigest.uzpg.me" rel="noopener"&gt;Metadigest&lt;/a&gt;&lt;/p&gt;
&lt;br&gt;

</description>
      <category>showdev</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How to add comments to your static site</title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Tue, 12 Nov 2019 20:51:35 +0000</pubDate>
      <link>https://forem.com/uzayg/how-to-add-comments-to-your-static-site-31od</link>
      <guid>https://forem.com/uzayg/how-to-add-comments-to-your-static-site-31od</guid>
      <description>&lt;p&gt;This post is from my blog &lt;a href="http://uzpg.me"&gt;uzpg.me&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Usually, blogs store comment data inside their server database. You can't do that with static websites but there are many tools that can help you solve this problem and create discussion around your posts. This article will guide you through some ways you can add these comments for free.&lt;/p&gt;

&lt;h2&gt;
  
  
  For Developers - Utterances
&lt;/h2&gt;

&lt;h1&gt;
  
  
  🔮
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://utteranc.es/" rel="noopener"&gt;Utterances&lt;/a&gt; is a great comment plugin built on Github Issues. It creates an new issue on github for your posts and then adds your website's comments to said issues. All your commenters need to do is sign in on Github.&lt;br&gt;
Obviously, you should only do this if your blog is about software development or a related subject otherwise none of your readers will have Github accounts.&lt;/p&gt;

&lt;p&gt;I love this solution because it's an opensource and lightweight tool that doesn't harm the user experience. It's a simple option and it has a beautiful design which you can see down below:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--q68N8-P6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/uruzujp84wc1vymilb2s.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--q68N8-P6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/uruzujp84wc1vymilb2s.PNG" alt="utterance ui" width="821" height="276"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;How to get it setup:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create a public "myblog-comments" repository on Github&lt;/li&gt;
&lt;li&gt;Add the app to your repo on the &lt;a href="https://github.com/apps/utterances" rel="noopener"&gt;github utterance page&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Paste the following snippet at the bottom of all of your posts:
&lt;pre&gt;&lt;code&gt;&amp;lt;script src="&lt;a href="https://utteranc.es/client.js"&gt;https://utteranc.es/client.js&lt;/a&gt;"
    repo="[username/myblog-comments]"
    issue-term="pathname"
    theme="github-light"
    crossorigin="anonymous"
    async&amp;gt;
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
and replace the repo value with the name of your repository. You can customize this snippet more at the bottom of the &lt;a href="https://utteranc.es/" rel="noopener"&gt;utterances&lt;/a&gt; website.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Disqus
&lt;/h2&gt;

&lt;p&gt;Disqus is a technically free way to add to comments to your website. It's a useful tool but I don't use it because it injects ads into your website if you use the free plan and it raises privacy concerns for its users. &lt;/p&gt;

&lt;p&gt;Steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Register an account at &lt;a href="https://disqus.com/profile/signup/" rel="noopener"&gt;Disqus&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Confirm that you want to install Disqus on your site&lt;/li&gt;
&lt;li&gt;Choose your plan&lt;/li&gt;
&lt;li&gt;On the choose your platform window, select the "Universal Code" option&lt;/li&gt;
&lt;li&gt;Embed the following code at the bottom of your posts:
&lt;pre&gt;&lt;code&gt;&amp;lt;div id="disqus_thread"&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
var disqus_config = function () {
  this.page.url = 'The absolute url of the page';
  this.page.identifier = 'An identifier of your choice that should be unique to every post
  like for example the post title.';
};
(function() {
  var d = document, s = d.createElement('script');
  s.src = '&lt;a href="https://websitename.disqus.com/embed.js"&gt;https://websitename.disqus.com/embed.js&lt;/a&gt;';
  s.setAttribute('data-timestamp', +new Date());
  (d.head || d.body).appendChild(s);
})();
&amp;lt;/script&amp;gt;
&amp;lt;noscript&amp;gt;Please enable JavaScript to view the &amp;lt;a href="&lt;a href="https://disqus.com/?ref_noscript"&gt;https://disqus.com/?ref_noscript&lt;/a&gt;" rel="nofollow"&amp;gt;
comments powered by Disqus.&amp;lt;/a&amp;gt;&amp;lt;/noscript&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;strong&gt;Remember&lt;/strong&gt; to replace the page url and identifier parameters with those of your posts. Also replace the s.src "websitename" part with the website name you registered with Disqus. If your site is "example.com", it would be "example.disqus.com/embed.js"&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Your comments should now work, but please keep in mind the intangible price of Disqus outlined in this &lt;a href="https://replyable.com/2017/03/disqus-is-your-data-worth-trading-for-convenience/" rel="noopener"&gt;article.&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Remarkbox
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---ufxa4nM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://my.remarkbox.com/static/img/remarkbox-logo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---ufxa4nM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://my.remarkbox.com/static/img/remarkbox-logo.png" alt="remarkbox logo" width="707" height="740"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://remarkbox.com" rel="noopener"&gt;Remarkbox&lt;/a&gt; is a simple third-party comment system similar to Disqus which is very easy to implement.&lt;br&gt;
Here's how you can set it up:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Enter your email in the &lt;a href="https://my.remarkbox.com/join-or-log-in?return-to=https://my.remarkbox.com" rel="noopener"&gt;Remarkbox signup form&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Click the link from the email you should have received from Remarkbox (it might be in spam)&lt;/li&gt;
&lt;li&gt;Follow the instructions on the &lt;code&gt;setup&lt;/code&gt; page and embed your comment snippet.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Your Remarkbox comments should now be working. This system does not contain ads and respects user privacy more than Disqus but the free plan does not allow moderation and it is a rudimentary solution.&lt;/p&gt;

&lt;p&gt;Some other cool options that I won't delve into are &lt;a href="https://github.com/gitalk/gitalk" rel="noopener"&gt;Gitalk&lt;/a&gt;, &lt;a href="https://github.com/adtac/commento" rel="noopener"&gt;Commento&lt;/a&gt; and &lt;a href="https://just-comments.com/" rel="noopener"&gt;JustComments&lt;/a&gt; (if you are willing to pay a small fee.)&lt;/p&gt;

&lt;p&gt;I hope you enjoyed this tutorial and if you encountered any problems with setting things up or if you want to share how you manage this functionality, please comment down below.&lt;/p&gt;

&lt;p&gt;You can see more of my blog posts &lt;a href="http://uzpg.me/blog"&gt;here&lt;/a&gt;&lt;/p&gt;

</description>
      <category>static</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Useful tools and repositories for development open-sourced on github</title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Sun, 03 Nov 2019 21:37:28 +0000</pubDate>
      <link>https://forem.com/uzayg/useful-tools-and-repositories-for-development-open-sourced-on-github-2o1e</link>
      <guid>https://forem.com/uzayg/useful-tools-and-repositories-for-development-open-sourced-on-github-2o1e</guid>
      <description>&lt;p&gt;Github is a marvelous tools that allows developers to host their code for free online on repositories. This code is often open-source, which means it encourages open collaboration and use. Open-source is a great aspect of software development that has led to the creation of several free projects (libs, frameworks, packages...). Today we'll be looking at which useful repositories can help you for web development and computer science&lt;/p&gt;

&lt;h3&gt;
  
  
  Style
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--i6VvE-e1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://external-content.duckduckgo.com/iu/%3Fu%3Dhttps%253A%252F%252Fi.ytimg.com%252Fvi%252FQYQ0I1mvFDE%252Fmaxresdefault.jpg%26f%3D1%26nofb%3D1" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--i6VvE-e1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://external-content.duckduckgo.com/iu/%3Fu%3Dhttps%253A%252F%252Fi.ytimg.com%252Fvi%252FQYQ0I1mvFDE%252Fmaxresdefault.jpg%26f%3D1%26nofb%3D1" alt="animate.css" width="880" height="495"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://github.com/daneden/animate.css"&gt;Animate.css&lt;/a&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/daneden/animate.css"&gt;Animate.css&lt;/a&gt; is a helpful css repo that lets you add animations to your code by simply adding a class to the element you wish to style. I recommend it because its animations are very appealing and setup is quick and easy.&lt;br&gt;&lt;/p&gt;


&lt;center&gt;
&lt;br&gt;
&lt;img src="https://camo.githubusercontent.com/c9b72a633333edd828a7d8e9f552396c0c63c752/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f7079746f7263682e737667" width="256" height="310"&gt;
&lt;/center&gt;
&lt;h4&gt;
  
  
  Logos
&lt;/h4&gt;

&lt;p&gt;This &lt;a href="https://github.com/gilbarbara/logos"&gt;repository&lt;/a&gt; is a nice collection of optimized svg logos for pretty much any company you can think of.&lt;br&gt;&lt;br&gt;&lt;/p&gt;


&lt;center&gt;
&lt;br&gt;
&lt;img alt="loaders" src="https://res.cloudinary.com/practicaldev/image/fetch/s--tbn1vkSI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://bashooka.com/wp-content/uploads/2013/05/loader.jpg" width="690" height="486"&gt;
&lt;/center&gt;
&lt;br&gt;
&lt;h4&gt;
  
  
  Loaders
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/ConnorAtherton/loaders.css"&gt;Loaders.css&lt;/a&gt; is a collection of nice and well-designed loaders built entirely with css. They have some    cool designs so you should check it out!&lt;/p&gt;

&lt;p&gt;There are also some interesting css frameworks that are a base on which you can build your site, packaged with the styles people often use on certain elements of their site. The most popular are &lt;a href="https://github.com/twbs/bootstrap"&gt;Bootstrap&lt;/a&gt; and &lt;a href="https://github.com/zurb/foundation-sites"&gt; Foundation&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Javascript
&lt;/h3&gt;


&lt;center&gt;
&lt;br&gt;
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KTmUiKwx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://proxy.duckduckgo.com/iu/%3Fu%3Dhttp%253A%252F%252Fimg.stackshare.io%252Fservice%252F1623%252Fzepto-logo.png%26f%3D1%26nofb%3D1" alt="zepto.js" width="200" height="200"&gt;&lt;br&gt;
&lt;/center&gt;
&lt;h4&gt;
  
  
  Zepto.js
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/madrobby/zepto"&gt;Zepto.js&lt;/a&gt; is a minimalist javascript library that can help you simplify your js code immensely. It's simple to use and is similar to JQuery.&lt;/p&gt;


&lt;center&gt;
&lt;br&gt;
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Nxsgq3kq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://external-content.duckduckgo.com/iu/%3Fu%3Dhttps%253A%252F%252Ftse2.mm.bing.net%252Fth%253Fid%253DOIP.LcdYOPKDVu6tOPY6ln54DAHaEJ%2526pid%253DApi%26f%3D1" width="474" height="265"&gt;
&lt;/center&gt;
&lt;h4&gt;
  
  
  Modernizr.js
&lt;/h4&gt;

&lt;p&gt;&lt;a src="https://github.com/Modernizr/Modernizr"&gt;Modernizr&lt;/a&gt; is another javascript library that lets you use &lt;strong&gt;feature detection&lt;/strong&gt; to test if the website visitor is on a touch screen or which html, css or js features they're browser supports and etcetera.&lt;/p&gt;


&lt;center&gt;&lt;img src="/assets/images/jasmine.svg" alt="jasmine logo"&gt;&lt;/center&gt;
&lt;h4&gt;
  
  
  Jasmine
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/jasmine/jasmine"&gt;Jasmine&lt;/a&gt; is a javascript testing framework that lets you check the quality and performance of your browser and nodejs code. Test Driven Development is an important part of building quality code and Jasmine can help you with that.&lt;/p&gt;


&lt;center&gt;&lt;img src="https://camo.githubusercontent.com/9c24355bb3afbff914503b663ade7beb341079fa/68747470733a2f2f6e6f64656a732e6f72672f7374617469632f696d616765732f6c6f676f2d6c696768742e737667" alt="node" width="589" height="361"&gt;&lt;/center&gt;
&lt;h4&gt;
  
  
  Node.js
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/nodejs/node"&gt;Nodejs&lt;/a&gt; is a popular tool you probably already know about that lets you use javascript on your server instead of your browser.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;p&gt;You can also check this &lt;a href="https://github.com/sorrycc/awesome-javascript"&gt;awesome-javascript github repository that lists tons of other fun tools with js.&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Python
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QY5BHOiD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://proxy.duckduckgo.com/iu/%3Fu%3Dhttps%253A%252F%252Fupload.wikimedia.org%252Fwikipedia%252Fcommons%252Fthumb%252F0%252F05%252FScikit_learn_logo_small.svg%252F1200px-Scikit_learn_logo_small.svg.png%26f%3D1%26nofb%3D1" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QY5BHOiD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://proxy.duckduckgo.com/iu/%3Fu%3Dhttps%253A%252F%252Fupload.wikimedia.org%252Fwikipedia%252Fcommons%252Fthumb%252F0%252F05%252FScikit_learn_logo_small.svg%252F1200px-Scikit_learn_logo_small.svg.png%26f%3D1%26nofb%3D1" alt="scikit logo" width="880" height="474"&gt;&lt;/a&gt;&lt;br&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Scikit Learn
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/scikit-learn/scikit-learn"&gt;Scikit Learn&lt;/a&gt; is THE library for machine learning that can help you train you own algorithms. It's a neat tools I recommend you look at if you intend to work on machine learning.&lt;br&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aZMIdoCr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/altair-viz/altair/master/images/cars.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aZMIdoCr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/altair-viz/altair/master/images/cars.png" href="Altair%20example" width="527" height="351"&gt;&lt;/a&gt;&lt;br&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Altair
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/altair-viz/altair"&gt;Altair&lt;/a&gt; is a well-designed library to visualize data in Python. It can produce complex and simple graphs alike (see above).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vgkgCSdW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://proxy.duckduckgo.com/iu/%3Fu%3Dhttps%253A%252F%252Fwww.probytes.net%252Fwp-content%252Fuploads%252F2018%252F10%252Fflask-logo-png-transparent.png%26f%3D1%26nofb%3D1" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vgkgCSdW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://proxy.duckduckgo.com/iu/%3Fu%3Dhttps%253A%252F%252Fwww.probytes.net%252Fwp-content%252Fuploads%252F2018%252F10%252Fflask-logo-png-transparent.png%26f%3D1%26nofb%3D1" alt="flask logo" width="880" height="1131"&gt;&lt;/a&gt;&lt;br&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/pallets/flask"&gt;Flask&lt;/a&gt; is a lightweight framework for Python which you can build webapps with. It's simple to use and get started with. This &lt;a href="https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world"&gt;tutorial&lt;/a&gt; does a good job of covering the basics. &lt;br&gt;&lt;/p&gt;


&lt;center&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--U0ALEtwF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://external-content.duckduckgo.com/iu/%3Fu%3Dhttps%253A%252F%252Fcdn-images-1.medium.com%252Fmax%252F1600%252F0%2A4VR_lMPSRF_ir-Re.%26f%3D1%26nofb%3D1" alt="spacy logo" width="880" height="462"&gt;&lt;/center&gt;
&lt;br&gt;
&lt;h4&gt;
  
  
  SpaCy
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/explosion/spaCy"&gt;SpaCy &lt;/a&gt; is the most efficient python library to analyze text using machine learning. You can check out my simple tutorial &lt;a href="https://etherio.netlify.com/cs/ai/tech%20tutorials/python/2019/09/05/weekly-tech-tools-spacy-io.html"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can look at more python tools on the &lt;a href="https://github.com/vinta/awesome-python"&gt;awesome-python&lt;/a&gt; github repo.&lt;/p&gt;

&lt;h3&gt;
  
  
  Some Ruby Tools
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Sorcery
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/Sorcery/sorcery"&gt;The Sorcery ruby gem &lt;/a&gt;is extremely useful for authentication with Rails like signing in, resetting your password...&lt;/p&gt;


&lt;center&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--CcnnbOPm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://proxy.duckduckgo.com/iu/%3Fu%3Dhttp%253A%252F%252Fmainstreetcomputing.com%252Fassets%252Ftechnologies%252Frspec-a6d57cd7ff8186c261a23f03d186b716.png%26f%3D1%26nofb%3D1" alt="rspec logo" width="218" height="185"&gt;&lt;/center&gt; &lt;br&gt;
&lt;h4&gt;
  
  
  RSpec
&lt;/h4&gt;

&lt;p&gt;&lt;a href="http://rspec.info/"&gt;The RSpec ruby gem&lt;/a&gt; is useful and has an intuitive syntax to test your Rails or plain Ruby code. It's essential for Test Driven Development with Ruby.&lt;br&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Byebug
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/deivid-rodriguez/byebug"&gt;Byebug &lt;/a&gt;is a great debugger for Ruby that can help you find what's preventing your code from working the way it should be.&lt;br&gt;&lt;/p&gt;

&lt;p&gt;I hope you enjoyed this short list of software tools I use. If there are any others you think are worth mentioning you should comment them down below.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>python</category>
      <category>ruby</category>
    </item>
    <item>
      <title>Show us your personal website</title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Sat, 02 Nov 2019 21:33:51 +0000</pubDate>
      <link>https://forem.com/uzayg/show-us-your-personal-website-4o7d</link>
      <guid>https://forem.com/uzayg/show-us-your-personal-website-4o7d</guid>
      <description>&lt;p&gt;Hey! I'm currently working on my personal website and would love to see some of yours. &lt;br&gt;
I can't wait!&lt;/p&gt;

</description>
      <category>discuss</category>
    </item>
    <item>
      <title>Why I added a Bookmarks Section to my site</title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Thu, 31 Oct 2019 16:58:47 +0000</pubDate>
      <link>https://forem.com/uzayg/why-i-added-a-bookmarks-section-to-my-site-kpo</link>
      <guid>https://forem.com/uzayg/why-i-added-a-bookmarks-section-to-my-site-kpo</guid>
      <description>&lt;p&gt;I've been building my &lt;a href="http://uzpg.me"&gt;personal site&lt;/a&gt; and today I had an idea and decided to add a bookmarked section to my website where I share all the bookmarks I've saved as I learn how to code.&lt;br&gt;
I created this because it's a way to publicly keep track of all the amazing resources and tools available on the internet that have helped me.&lt;/p&gt;

&lt;p&gt;You can &lt;a href="http://uzpg.me/bookmarks"&gt;check it out&lt;/a&gt; and I hope it helps you. I think it's a cool idea and I would love it if you guys could share some of your best bookmarks that I'll add.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sections
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Ruby/Rails: everything Ruby and Rails and one thing about Jekyll&lt;/li&gt;
&lt;li&gt;Development in general: computer science, git, opensource and some nice tools&lt;/li&gt;
&lt;li&gt;beautiful sites: good looking websites (&lt;a href="https://www.vincentsaisset.com/"&gt;my favorite&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Javascript: in progress&lt;/li&gt;
&lt;li&gt;Design: in progress&lt;/li&gt;
&lt;li&gt;Other: entrepreneurship, career...&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;@Lee_Wynne by the way your site looks really nice and I bookmarked it!&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Interesting Podcasts for developers, designers and entrepreneurs</title>
      <dc:creator>Uzay-G</dc:creator>
      <pubDate>Thu, 31 Oct 2019 12:25:39 +0000</pubDate>
      <link>https://forem.com/uzayg/interesting-podcasts-for-developers-designers-and-entrepreneurs-44j</link>
      <guid>https://forem.com/uzayg/interesting-podcasts-for-developers-designers-and-entrepreneurs-44j</guid>
      <description>&lt;p&gt;This post is from &lt;a href="http://uzpg.me"&gt;my blog&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Podcasts can be fascinating, they are also sometimes very dull. I've listened to many on my daily commute and here are some of those that caught my interest the most or taught me new things about design, programming and entrepreneurship.&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Built This with Guy Raz
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.npr.org/podcasts/510313/how-i-built-this" rel="noopener"&gt;This NPR podcast&lt;/a&gt; consists of interviews with experienced startup founders explaining their journey through the not-so-easy startup world. It's not solely focused on tech, but more around how people built their business from the ground up. They have several tech episodes that I truly recommend:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href="https://www.npr.org/2019/08/02/747660923/shopify-tobias-l-tke" rel="noopener"&gt;Shopify - Tobias Lutke&lt;/a&gt; is an incredible episode about Shopify's creator that I loved because when you listen to the episode you really understand that the founder loves programming and that he built Shopify to help others and sustain himself. Coincidentally, Shopify built the opensource tool &lt;a href="https://github.com/Shopify/liquid" rel="noopener"&gt;Liquid&lt;/a&gt; that my blog and dev.to use.&lt;br&gt;
You can listen to it here:&lt;/p&gt;

 &lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href="https://www.npr.org/2019/02/28/699096835/squarespace-anthony-casalena" rel="noopener"&gt;Squarespace - Anthony Casalena&lt;/a&gt; details how Casalena built this huge company and the &lt;strong&gt;many&lt;/strong&gt; stresses he had to endure (especially the problems caused by server failure).&lt;/p&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href="https://www.npr.org/2018/07/27/633164558/slack-flickr-stewart-butterfield" rel="noopener"&gt;Slack &amp;amp; Flickr - Stuart Butterfield&lt;/a&gt; interviews Butterfield about how not once, but twice, he managed to pivot his failing startup into the huges companies that are now Slack and Flickr.&lt;/p&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Talk Python to me by Michael Kennedy
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://talkpython.fm/" rel="noopener"&gt;This show&lt;/a&gt; is a weekly podcast about Python that covers everything from its packages, frameworks and the people who built them. It interviews Python personalities and developers and is really helpful for Python developers whether you're interested in web development, robotics or data science.&lt;/p&gt;

&lt;h2&gt;
  
  
  Design Details by Marshall Bock and Brian Lovin
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://spec.fm/podcasts/design-details" rel="noopener"&gt;This casual design podcast&lt;/a&gt; talks about all things design. This podcast manages to wrap up so many interesting topics in one episode. They interview fellow designers and also share cool shows, movies, video games and websites they found.&lt;/p&gt;

&lt;p&gt;Their recent episode about designing a &lt;a href="https://spec.fm/podcasts/design-details/310206" rel="noopener"&gt;Dark Mode&lt;/a&gt; taught me a lot about how to make an enticing dark design.&lt;/p&gt;

&lt;h2&gt;
  
  
  To be continuous
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--znqrpsji--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.heavybit.com/wp-content/uploads/2016/04/to-be-continuous-1024x1024.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--znqrpsji--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.heavybit.com/wp-content/uploads/2016/04/to-be-continuous-1024x1024.jpg" alt="to be continuous logo" width="880" height="880"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.heavybit.com/library/podcasts/to-be-continuous/" rel="noopener"&gt;This software development podcast&lt;/a&gt; is hosted by the founder of &lt;a href="https://circleci.com/" rel="noopener"&gt;CircleCI&lt;/a&gt; and &lt;a href="https://launchdarkly.com/" rel="noopener"&gt;LaunchDarkly&lt;/a&gt;. I enjoy it because of the casual caramaderie between the two hosts as they explore subjects like open source, startups and the current trends in the tech industry. &lt;/p&gt;

&lt;p&gt;I loved their episode &lt;a href="https://www.heavybit.com/library/podcasts/to-be-continuous/ep-52-a-closer-look-at-open-source-today/" rel="noopener"&gt;A Closer Look at Open Source Today&lt;/a&gt; that evoked the changes in the open source landscape and the difficulties for open source maintainers to support themselves.&lt;/p&gt;

&lt;h2&gt;
  
  
  Mixergy by Andrew Warner
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.heavybit.com/library/podcasts/to-be-continuous/" rel="noopener"&gt;Mixergy&lt;/a&gt; is an entrepreneurship podcast similar to "How I Built This" that interviews startup founders and interrogates them about their journey. I use the word "interrogate" because something that makes this podcast special is the way the host drills the guest with uncomfortable questions about their businesses and failures to better understand the roots of their success.&lt;/p&gt;

&lt;p&gt;You should check out &lt;a href="https://mixergy.com/interviews/shazam-with-philip-inghelbrecht/" rel="noopener"&gt;this episode&lt;/a&gt; with Shazam founder Philip InghelBrecht.&lt;/p&gt;

&lt;p&gt;I hope you enjoy the podcasts and I'd love to hear about which ones you listen to and why you like them!&lt;/p&gt;

</description>
      <category>podcast</category>
      <category>design</category>
      <category>startup</category>
    </item>
  </channel>
</rss>
