diff --git a/_config.yml b/_config.yml index 3222e74..8bead65 100644 --- a/_config.yml +++ b/_config.yml @@ -84,7 +84,7 @@ prose: element: text label: category type: text - placeholder: useful | entertaining | motivational | dev + placeholder: productivity | entertaining | motivational | technology _drafts: - name: "published" field: @@ -114,7 +114,7 @@ prose: element: text label: category type: text - placeholder: useful | entertaining | motivational | dev + placeholder: productivity | entertaining | motivational | technology # Exclude from processing. # The following items will not be processed, by default. Create a custom list # to override the default setting. diff --git a/_layouts/category.html b/_layouts/category.html new file mode 100644 index 0000000..9086932 --- /dev/null +++ b/_layouts/category.html @@ -0,0 +1,5 @@ +--- +layout: default +--- + +{{content}} diff --git a/_layouts/home.html b/_layouts/home.html index aa0dcbc..0f254ea 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -4,7 +4,6 @@ layout: default
{% if site.posts.size > 0 %} -

{{ page.list_title }}

- {% endif %}
diff --git a/_layouts/post.html b/_layouts/post.html index 86cb0a7..75d2a65 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -8,6 +8,7 @@ layout: default itemtype="http://schema.org/BlogPosting" >
+
{{ page.category }}

{{ page.title | escape }} @@ -32,7 +33,7 @@ layout: default > | {% endif %} {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %} {{ page.date | date: date_format }} - +

@@ -73,7 +74,8 @@ layout: default >
Sign up to get {{ page.category }} posts like this periodically and + more. ## Now, what exactly is Github? @@ -23,7 +25,6 @@ Github hosts [all sorts of projects](https://github.com/explore) from Desktop ap There are other websites that serve this same purpose (like [Bitbucket](https://bitbucket.org) and [Gitlab](https://gitlab.com)) but Github is now the preferred home for most Open Source projects due to it being the oldest and its culture of openness. - ## Learn How Others Do It Because of this "openness", Github is not just the best place to start or contribute to an existing project. It is also a good place to see and learn how other developers write their code. You can even observe how collaborators communicate with each other to resolve their issues. @@ -38,7 +39,7 @@ In case you don't feel like joining others, you can always use Github to host yo You might even find that it's always a good practice to have a copy of all your code backed up in a Github repository for safekeeping. -If you don't want to start from scratch, you can just "fork" any interesting project to get a copy in your own account... then you can practically do *anything* you want with it! +If you don't want to start from scratch, you can just "fork" any interesting project to get a copy in your own account... then you can practically do _anything_ you want with it! ## Track Your Developer Journey diff --git a/_posts/2018-06-13-ubuntu-quick-dev-setup.md b/_posts/2018-06-13-ubuntu-quick-dev-setup.md index 4746591..4e9051f 100644 --- a/_posts/2018-06-13-ubuntu-quick-dev-setup.md +++ b/_posts/2018-06-13-ubuntu-quick-dev-setup.md @@ -3,6 +3,7 @@ title: "3 Steps How To Quickly Setup Ubuntu for Development" permalink: "/ubuntu-dev-setup" description: "In this post I go through how I quickly setup an Ubuntu machine for development" keywords: "" +category: technology image: "ubuntu-dev-setup" --- @@ -14,24 +15,26 @@ If you need instructions on how to setup the technologies separately, this artic ## 3 Steps: Quickly Setup Node.js, Python, and Ruby on Your New Ubuntu Machine - - 1. Go to NodeSource's [distribution page](https://github.com/nodesource/distributions/blob/master/README.md#debinstall) to get the command for the Node version you want. Open a terminal, and type the command. For example, the following command will download the .deb installer of Node.js 8 + ```bash curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - ``` 1. Update your repositories. The terminal may have to ask your password before it proceeds. + ```bash sudo apt-get update ``` 2. Install packages for development using nodejs, ruby, and python. This may take a while to finish (depending on your Internet connection speed). + ```bash sudo apt-get install -y nodejs ruby ruby-dev build-essential dh-autoreconf make python3-pip libssl-dev libffi-dev python3-dev virtualenv python3-venv ``` When the install finishes, you now have Node.js, Python, and Ruby installed. To verify if they are successfully installed and check for each of their versions, type the following on your terminal. + ```bash # to check for Node.js version node --version @@ -52,27 +55,33 @@ ruby --version Of course, this is not yet totally complete because I still have to setup Angular CLI next, or React.js, or other frameworks/tools. But after these 3 steps, I will have all the package management tools I need to proceed with all other setups. ## Bonus: Here's How You Can Setup Ubuntu for Jekyll Development + [Jekyll](https://jekyllrb.com) is a technology that will "Transform your plain text into static websites and blogs." It's like **blogging for hackers**, and I use it for this very blog, hosted for free on Github Pages. When all you need is a quick way to put content online, you can never go wrong with it, believe me. I will write more about Jekyll and Github Pages later, but for now, here's how I set it up. -1. Open a text editor, then add the following two lines at the end of the file ```~/.bashrc```: + +1. Open a text editor, then add the following two lines at the end of the file `~/.bashrc`: + ```bash export GEM_HOME=$HOME/gems export PATH=$HOME/gems/bin:$PATH ``` 2. On your terminal, run the following to reflect the changes: + ```bash source ~/.bashrc ``` 3. Then, proceed to install necessary Ruby Gems: + ```bash sudo gem update gem install jekyll bundler ``` 4. Go to jekyll project directory (if you already have one) or generate a new Jekyll, then install the dependencies: + ```bash # create new jekyll project jekyll new my-awesome-site @@ -83,10 +92,9 @@ bundle install ``` 5. After installing the dependencies, you may now start the Jekyll server: + ```bash bundle exec jekyll serve ``` -Your website will be accessible at ```http://localhost:4000``` by default. - - +Your website will be accessible at `http://localhost:4000` by default. diff --git a/_posts/2018-09-20-feels-fm.md b/_posts/2018-09-20-feels-fm.md index ba0b21c..9acab88 100644 --- a/_posts/2018-09-20-feels-fm.md +++ b/_posts/2018-09-20-feels-fm.md @@ -3,6 +3,7 @@ title: "Feels FM: An Emoji-Powered Jukebox for Your Mental Health" permalink: "/feels-fm" description: "There's nothing worse for your productivity than an anxiety or depression attack. What do you do when you don't want to do anything or talk to anyone?" keywords: "" +category: productivity image: "feels-fm" --- @@ -10,10 +11,10 @@ There's nothing worse for your productivity than an anxiety or depression attack Here's a tool that just might help when you don't feel like going out or doing anything at all. -[Feels FM](https://feelsfm.co.uk/) is an emoji-powered radio. It's really simple to use, you can do it even on days when you have zero motivation. Just choose an emoji that best represents your feels, answer some really simple questions like your birth year, and BOOM: a personalized music playlist to brighten up your day! +[Feels FM](https://feelsfm.co.uk/) is an emoji-powered radio. It's really simple to use, you can do it even on days when you have zero motivation. Just choose an emoji that best represents your feels, answer some really simple questions like your birth year, and BOOM: a personalized music playlist to brighten up your day! I'm listening to a playlist now as I write this. I have to say the music selection is on-point! You can even save the playlist to your Spotify account. Neeeeeat! The web app was made in collaboration with mental health charity "See Me". It aims to create a playful, interactive space where young people can share how they are feeling without the pressure of having to have a ‘big conversation’. -Check it out for yourself at [https://feelsfm.co.uk](https://feelsfm.co.uk/) +Check it out for yourself at [https://feelsfm.co.uk](https://feelsfm.co.uk/) diff --git a/_posts/2019-10-04-google-firebase-overview.md b/_posts/2019-10-04-google-firebase-overview.md index 28a345f..afe6316 100644 --- a/_posts/2019-10-04-google-firebase-overview.md +++ b/_posts/2019-10-04-google-firebase-overview.md @@ -3,6 +3,7 @@ title: "Choosing Backend Tech in 2019 and Why I Like Google Firebase" permalink: "/google-firebase-overview" description: "Let's discuss what Google Firebase has to offer for app development in 2019." keywords: "" +category: technology image: "drake_firebase" --- diff --git a/_posts/2019-10-14-forcing-javascript-dom-types.md b/_posts/2019-10-14-forcing-javascript-dom-types.md index 888f073..6a0cb4e 100644 --- a/_posts/2019-10-14-forcing-javascript-dom-types.md +++ b/_posts/2019-10-14-forcing-javascript-dom-types.md @@ -3,10 +3,11 @@ title: "How to Force JavaScript Variables to use Specific DOM APIs" permalink: "/forcing-js-dom-types" description: "To take advantage of code completion for Javascript, here's a smart way to force JS DOM variables to use a specific DOM API interface" keywords: "" +category: technology image: "javascript" --- -To take advantage of JavaScript *intellisense* and code completion when using a certain *awesome* text editor *\*ehem\** [VS Code](https://code.visualstudio.com/) *\*ehem\**, you need to be able to declare the correct interfaces for variables containing DOM elements. +To take advantage of JavaScript _intellisense_ and code completion when using a certain _awesome_ text editor \*\*ehem\*_ [VS Code](https://code.visualstudio.com/) _\*ehem\*\*, you need to be able to declare the correct interfaces for variables containing DOM elements. Yeah, I know this works like magic in TypeScript. @@ -21,13 +22,13 @@ Here goes. For example, if you want to make a variable use a specific DOM interface like `HTMLTableElement` and not the generic `HTMLELement`, just do: ```javascript -var x = document.createElement('table') // -> returns HTMLTableElement +var x = document.createElement("table"); // -> returns HTMLTableElement ``` before you assign it... ```javascript -x = document.getElementById('table-id') // -> always returns HTMLELement +x = document.getElementById("table-id"); // -> always returns HTMLELement ``` If you go straight to doing `var x = document.getElementById('table-id')`, the variable will have the generic type `HTMLElement`... and you don't want that. @@ -43,12 +44,11 @@ Well, this way, the variable `x` will have the type `HTMLTableElement` all the w Then, intellisense will work like magic and you will get more helpful code completion like, for our example... ```javascript -x.insertRow() // -> will be detected if x is HTMLTableElement, NOT if x is HTMLElement +x.insertRow(); // -> will be detected if x is HTMLTableElement, NOT if x is HTMLElement ``` `x` will now get code completion for all the methods and other awesomeness that `HTMLTableElement` has and `HTMLElement` doesn't. - You see, `HTMLElement` has a lot of great methods but when working on a specific HTML element, there are more options for you if you use the correct interface (which, most probably, extends `HTMLElement`, meaning they also get its methods and other awesomeness). ## Okay... Uh, I still don't know what you're talking about though... @@ -60,6 +60,7 @@ What are you doing here then? This is for people who know what I'm talking about Anyway... Here's the full list of specific HTML Element APIs: + - HTMLAnchorElement - HTMLAreaElement - HTMLAudioElement @@ -137,4 +138,3 @@ Here's the full list of specific HTML Element APIs: Whoa, quite a lot, right? For more info, you start with the `HTMLELement` Documentation [found here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) then read up on specific APIs from there. - diff --git a/_posts/2020-02-26-start-writing.md b/_posts/2020-02-26-start-writing.md index e522584..a9918f2 100644 --- a/_posts/2020-02-26-start-writing.md +++ b/_posts/2020-02-26-start-writing.md @@ -1,8 +1,10 @@ --- +published: false title: "Start" permalink: "/start-writing" description: "I'm going to start writing regularly. At first, I plan to do them quick and short just to establish the routine." keywords: "daily" +category: motivational image: "random-1" --- @@ -35,7 +37,7 @@ You may not even know about what I'm talking about. :) But more on that later, I guess? -### One other thing, on Mental Health +### One other thing, on Mental Health Also, this morning, I realized that: @@ -47,7 +49,7 @@ Keep this two things in mind, and hopefully it will help you keep moving forward I know it helps me. To add to these, I also noticed that strong feelings often have an effect on the physical body. Anxiety, to me, makes the muscles in my neck and shoulders tense. - + Though it is important to note that emotions are neither bad or good. It's how we handle them that could determine their effect on our lives. But more on this later? :) diff --git a/_posts/2020-02-27-routines.md b/_posts/2020-02-27-routines.md index 9c271b3..15c2cb6 100644 --- a/_posts/2020-02-27-routines.md +++ b/_posts/2020-02-27-routines.md @@ -3,9 +3,11 @@ title: "Routines" permalink: "/routines" description: "Let's talk about routines. Today I will be sharing the routines I try to observe, and the benefits I find when I actually do them." keywords: "" +category: productivity image: "batanes-boat" --- -Today I will be sharing the routines I *try* to observe, and the benefits I find when I actually do them. + +Today I will be sharing the routines I _try_ to observe, and the benefits I find when I actually do them. Spoiler Alert: I am not talking about skin-care routines, so sorry if that's what you are looking for. @@ -21,7 +23,7 @@ Worse, if you don't get on top of life soon, you may just find things you care f Most of the time, even just going through the day feels like sailing on a boat with strong waves crashing all around you. -Because, we all know, there are things we *want* to do, and then there are things that we *need* to do. +Because, we all know, there are things we _want_ to do, and then there are things that we _need_ to do. And sadly, not everything can fit the day. @@ -31,7 +33,7 @@ It is never too late to start thinking about **routines**. Routines will be the anchor upon which we will establish our daily lives. -If you have some routines established, you will give yourself some "quick wins" that will help give you the daily boost to *get the ball rolling*. +If you have some routines established, you will give yourself some "quick wins" that will help give you the daily boost to _get the ball rolling_. And once you get that ball rolling, that is when you can expect to get some productivity kill streaks. @@ -72,4 +74,4 @@ What positive change do you want to happen in your life and what activity do you Just remember, we are most productive when we feel positive about ourselves. -And observing healthy routines consistently can most definitely help you get the motivational boost you need to face the rest of your day --your *life* even. :) +And observing healthy routines consistently can most definitely help you get the motivational boost you need to face the rest of your day --your _life_ even. :) diff --git a/_posts/2020-02-28-weakness.md b/_posts/2020-02-28-weakness.md index 3b0e0a3..4f3a50c 100644 --- a/_posts/2020-02-28-weakness.md +++ b/_posts/2020-02-28-weakness.md @@ -3,6 +3,7 @@ title: "Weakness" permalink: "/weakness" description: "We all have things that hold us back from reaching our goals." keywords: "" +category: motivational image: "tokyo-temple" --- @@ -12,7 +13,7 @@ What made me watch longer was that despite his difficulty and seeming pain, he w When he slightly calmed down from coughing, he lifted the cigarette up to his mouth and puffed twice, triggering his cough once again. -*Why?* I wondered. +_Why?_ I wondered. It's likely he knew that the thing in his hand is the very cause of his discomfort. @@ -42,7 +43,7 @@ I have been fortunate enough to have friends who trust me with their stories. An We really cannot judge others based on our limited understanding of their personal battles. -At the end of the day, we are all just fighting our own weaknesses. +At the end of the day, we are all just fighting our own weaknesses. What I can only do is share from my perspective. diff --git a/_posts/2020-02-29-influence.md b/_posts/2020-02-29-influence.md index db3643c..80b9e9b 100644 --- a/_posts/2020-02-29-influence.md +++ b/_posts/2020-02-29-influence.md @@ -3,6 +3,7 @@ title: "Influence" permalink: "/influence" description: "If it is outside your circle of influence, do not waste time and energy." keywords: "" +category: motivational image: "team-lab" --- diff --git a/_posts/2020-03-01-growth.md b/_posts/2020-03-01-growth.md index 01d389b..6cedae7 100644 --- a/_posts/2020-03-01-growth.md +++ b/_posts/2020-03-01-growth.md @@ -3,6 +3,7 @@ title: "Growth" permalink: "/growth" description: "Healthy growth is always bi-directional." keywords: "" +category: motivational image: "trees" --- diff --git a/_posts/2020-04-07-hardships.md b/_posts/2020-04-07-hardships.md index fe6c0cd..833fefa 100644 --- a/_posts/2020-04-07-hardships.md +++ b/_posts/2020-04-07-hardships.md @@ -3,6 +3,7 @@ title: "Hardships" permalink: "/hardships" description: "I hope that as we complain about our individual situation this also moves us to think about others." keywords: "" +category: motivational image: "egg" --- diff --git a/_posts/2020-04-09-reading.md b/_posts/2020-04-09-reading.md index 2c46ed2..eb57b9c 100644 --- a/_posts/2020-04-09-reading.md +++ b/_posts/2020-04-09-reading.md @@ -4,6 +4,7 @@ permalink: "/reading" description: "I have been striving to rekindle my love for reading books and it has felt so good." keywords: "" image: "reading" +category: motivational image-attrib: Daria Shevtsova image-attrib-url: https://www.pexels.com/@daria --- diff --git a/_posts/2021-03-17-simple-thoughts.md b/_posts/2021-03-17-simple-thoughts.md index 80fd514..dd4b407 100644 --- a/_posts/2021-03-17-simple-thoughts.md +++ b/_posts/2021-03-17-simple-thoughts.md @@ -3,6 +3,7 @@ title: "Simple Thoughts I Remind Myself" permalink: "/simple-thoughts" description: "This is now a typical set up for work, play, and everything in between." keywords: "" +category: motivational image: "little-corner" image-attrib: "Instagram: @ayoayco" --- diff --git a/assets/main.scss b/assets/main.scss index 31b4c45..eebd02d 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -41,6 +41,10 @@ body { } } +.category-head { + text-transform: capitalize; +} + header.site-header { background: rgba(141, 191, 66, 0.97) !important; width: 100%; @@ -531,6 +535,24 @@ table.image caption { .blog-post { &__header { + &__category { + span { + a:hover { + text-decoration: none; + color: #bb4a03; + border-bottom: solid 3px #bb4a03; + } + a { + text-transform: uppercase; + padding: 3px; + border-bottom: solid 3px #333; + width: auto; + + font-size: small; + color: #333; + } + } + } &__title { --x-height-multiplier: 0.342; --baseline-multiplier: 0.22; @@ -538,7 +560,7 @@ table.image caption { font-weight: 900; font-style: normal; font-size: 56px; - margin: 10px 0 10px -2.63px; + margin: 0 0 10px -2.63px; line-height: 1.04; padding-top: 5px !important; } diff --git a/category.html b/category.html new file mode 100644 index 0000000..fe6725c --- /dev/null +++ b/category.html @@ -0,0 +1,23 @@ +--- +layout: page +permalink: /categories/ +title: Categories +--- + +
+ {% for category in site.categories %} +
+ {% capture category_name %}{{ category | first }}{% endcapture %} +
+ +

{{ category_name }}

+
    + {% for post in site.categories[category_name] %} +
  • +

    {{post.title}}

    +
    • + {% endfor %} +
+
+ {% endfor %} +
diff --git a/entertaining.html b/entertaining.html new file mode 100644 index 0000000..8ca7141 --- /dev/null +++ b/entertaining.html @@ -0,0 +1,56 @@ +--- +layout: category +category-name: entertaining +--- + +

Entertaining Posts

+ +
+ {% if site.categories.entertaining.size > 0 %} +
    + {% for post in site.categories.entertaining %} +
  • +
    + +
    + {{post.description}} +
    +
    +
    + {% if post.image %} + {{ post.description | escape }} + {% else %} + {{ post.description | escape }} + + {% endif %} {{ post.excerpt }} +
    +
    + Continue Reading +
    +
    • + {% endfor %} +
+ {% else %} + No posts to show. + {% endif %} +
diff --git a/motivational.html b/motivational.html new file mode 100644 index 0000000..85deecf --- /dev/null +++ b/motivational.html @@ -0,0 +1,56 @@ +--- +layout: category +category-name: motivational +--- + +

Motivational Posts

+ +
+ {% if site.categories.motivational.size > 0 %} +
    + {% for post in site.categories.motivational %} +
  • +
    + +
    + {{post.description}} +
    +
    +
    + {% if post.image %} + {{ post.description | escape }} + {% else %} + {{ post.description | escape }} + + {% endif %} {{ post.excerpt }} +
    +
    + Continue Reading +
    +
    • + {% endfor %} +
+ {% else %} + No posts to show. + {% endif %} +
diff --git a/productivity.html b/productivity.html new file mode 100644 index 0000000..9a255da --- /dev/null +++ b/productivity.html @@ -0,0 +1,56 @@ +--- +layout: category +category-name: productivity +--- + +

Productivity Posts

+ +
+ {% if site.categories.productivity.size > 0 %} +
    + {% for post in site.categories.productivity %} +
  • +
    + +
    + {{post.description}} +
    +
    +
    + {% if post.image %} + {{ post.description | escape }} + {% else %} + {{ post.description | escape }} + + {% endif %} {{ post.excerpt }} +
    +
    + Continue Reading +
    +
    • + {% endfor %} +
+ {% else %} + No posts to show. + {% endif %} +
diff --git a/technology.html b/technology.html new file mode 100644 index 0000000..7259de3 --- /dev/null +++ b/technology.html @@ -0,0 +1,56 @@ +--- +layout: category +category-name: technology +--- + +

Technology Posts

+ +
+ {% if site.categories.technology.size > 0 %} +
    + {% for post in site.categories.technology %} +
  • +
    + +
    + {{post.description}} +
    +
    +
    + {% if post.image %} + {{ post.description | escape }} + {% else %} + {{ post.description | escape }} + + {% endif %} {{ post.excerpt }} +
    +
    + Continue Reading +
    +
    • + {% endfor %} +
+ {% else %} + No posts to show. + {% endif %} +