mirror of
https://github.com/foo-dogsquared/website.git
synced 2025-02-07 09:19:00 +00:00
Add a new weekly learnings post and update some parts
This commit is contained in:
foo-dogsquared
parent
39ebbf955e
commit
90c3154d5b
@ -41,6 +41,8 @@ theme: minima
|
||||
plugins:
|
||||
- jekyll-feed
|
||||
- jekyll-paginate
|
||||
- jekyll-sitemap
|
||||
- jekyll-redirect-from
|
||||
|
||||
pinpost: ["A Freebie's Resource List (Mostly Related to Programming)", "An Absolute Beginners' Complete Web Development Resource List"]
|
||||
|
||||
|
||||
@ -54,11 +54,12 @@
|
||||
}
|
||||
|
||||
function convert_to_wpm(number_of_words = document.querySelectorAll(".no-of-mins")) {
|
||||
// const imgs = document.querySelectorAll("main > .wrapper .post-content[itemprop='articleBody'] center > img");
|
||||
if (number_of_words === undefined) return null;
|
||||
number_of_words.forEach((num) => {
|
||||
const wpm = 225 /* avg wpm for an adult */
|
||||
num.textContent = Math.round((Number(num.textContent) / wpm) + 1 /*+ (imgs.length * 0.2) */);
|
||||
return;
|
||||
const minutes = Math.round((Number(num.textContent) / wpm) + 1)
|
||||
num.textContent = minutes;
|
||||
return minutes;
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -15,8 +15,8 @@ GitHub Pages decided to not accept it for some reason), I decided to write this
|
||||
Well, IDK how to write an introduction for this, so let's get on to the main branch of this post but first, let us be familiar
|
||||
what Git really is.
|
||||
|
||||
<center><img src="{{ 'assets/pictures/git-logo.png' | relative_url }}" alt="Git Logo" width="250px">
|
||||
<p class="caption">Git Logo (as of 2018)</p></center>
|
||||
<img src="{{ 'assets/pictures/git-logo.png' | relative_url }}" alt="Git Logo" width="250px">
|
||||
<p class="caption">Git Logo (as of 2018)</p>
|
||||
|
||||
## Primary Primer on Version Control Systems
|
||||
Version control, it may sound fancy, but it is a simple thing. You probably have done some form of version control in some
|
||||
@ -233,8 +233,8 @@ and easy to be referenced to but also helping towards other people not wasting t
|
||||
|
||||
I think this [*xkcd* strip](https://xkcd.com/1296/) portrays a situation of writing not-good commit messages.
|
||||
|
||||
<center><img src="{{ 'assets/pictures/xkcd-git-commit.png' | relative_url }}" alt="A xkcd comic strip">
|
||||
<p class="caption">Me when my site build failed</p></center>
|
||||
<img src="{{ 'assets/pictures/xkcd-git-commit.png' | relative_url }}" alt="A xkcd comic strip">
|
||||
<p class="caption">Me when my site build failed</p>
|
||||
|
||||
If you have read a handful of tutorials and articles about the basics of Git, you probably minded about writing a good
|
||||
commit message. The following rules are ripped from the book
|
||||
@ -290,7 +290,7 @@ OK, now that we have a GitHub account (presumably), we now have a reference to a
|
||||
If you are just starting to use (or be familiar with) GitHub, you can view this video then go through the
|
||||
[playlist](https://www.youtube.com/playlist?list=PLg7s6cbtAD15G8lNyoaYDuKZSKyJrgwB-) to be more intimate with GitHub.
|
||||
|
||||
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/noZnOSpcjYY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/noZnOSpcjYY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
||||
|
||||
Now that you are familiar with GitHub (presumably), we shall now push our test to the remote repository which is located
|
||||
on the GitHub's server.
|
||||
|
||||
@ -22,8 +22,8 @@ Alrighty then, onto the basic concepts around Node.js...
|
||||
Also reading this means that assuming you have basic familiarity*
|
||||
|
||||
<!-- Node.js logo -->
|
||||
<center><img src="{{ '/assets/pictures/nodejs-logo.png' | relative_url }}" alt="Node.js logo" style="width:300px">
|
||||
<p class="caption">Node.js Logo (as of 2018)</p></center>
|
||||
<img src="{{ '/assets/pictures/nodejs-logo.png' | relative_url }}" alt="Node.js logo" style="width:300px">
|
||||
<p class="caption">Node.js Logo (as of 2018)</p>
|
||||
|
||||
## What is Node.js?
|
||||
According to the [official Node.js website](https://nodejs.org/en/):
|
||||
@ -92,7 +92,7 @@ more or less an extension of JavaScript, it must deal with the same way how Java
|
||||
If you understood how the process work in the given link, this will make it a whole lot easier to understand.
|
||||
If else you didn't, here's a YouTube video that I saw from a Medium article (which is linked in the Re(Sources) below).
|
||||
|
||||
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/8aGhZQkoFbQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/8aGhZQkoFbQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
||||
|
||||
Now how does the event loop works on Node? (For a more detailed explanation of that, go [here](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#phases-in-detail))
|
||||
|
||||
@ -114,7 +114,7 @@ One of the concepts that we have to know about is **modules**.
|
||||
Everything that we use in Node are called modules. Whether be it a built-in library, a third-party framework, a preprocessor, that
|
||||
is a module (at least that's what it said on the command line when executing something, anyway). Queue the meme...
|
||||
|
||||
<center><img src="{{ '/assets/pictures/oprah-module-meme.jpg' | relative_url }}" alt="A meme used in the wrong way, don't mind me here." style="width:400px;"><p class="caption">Cue the cringe...</p></center>
|
||||
<img src="{{ '/assets/pictures/oprah-module-meme.jpg' | relative_url }}" alt="A meme used in the wrong way, don't mind me here." style="width:400px;"><p class="caption">Cue the cringe...</p>
|
||||
|
||||
This, in concept, is quite similar to how we import modules in other languages, say in Python:
|
||||
|
||||
|
||||
@ -68,7 +68,8 @@ This machine was supposedly created for creating fabric patterns and nothing muc
|
||||
|
||||
So, how does this machine was considered by most to be the precursor to modern computing and programming?
|
||||
|
||||
<center><img src="{{ '/assets/pictures/jacquard-card.png' | relative_url }}" alt="A Jacquard card." width="75%"><p class="caption">A Jacquard card</p></center>
|
||||
<img src="{{ '/assets/pictures/jacquard-card.png' | relative_url }}" alt="A Jacquard card." width="75%">
|
||||
<p class="caption">A Jacquard card</p>
|
||||
|
||||
First, the machine uses wooden punched cards (pictured above) which can be considered as the descendants of the punched cards
|
||||
early computers usually use. These wooden cards then being read from the machine by a needle that will pass through the holes. If
|
||||
@ -155,8 +156,8 @@ the more featured inventions are the vacuum tubes which serves as a replacement
|
||||
faster computation. It does have flaws like its fragility and burning out similar to light bulbs but it was a better solution
|
||||
than the previous way of managing electric flow which is a relay.
|
||||
|
||||
<center><img src="{{ '/assets/pictures/vacuum-tube.jpg' | relative_url }}" alt="A vacuum tube" width="50%">
|
||||
<p class="caption">Sample of a vacuum tube</p></center>
|
||||
<img src="{{ '/assets/pictures/vacuum-tube.jpg' | relative_url }}" alt="A vacuum tube" width="50%">
|
||||
<p class="caption">Sample of a vacuum tube</p>
|
||||
|
||||
One of the more iconic machines associated with vacuum tubes is the *Electronic Numerical Intergrator And Calculator*, also known
|
||||
by its shortened form as ENIAC. This machine was noted because of its speed and featured to be the world's first general-purpose
|
||||
|
||||
@ -158,7 +158,7 @@ understood it well. Well, this is a chance for you to go for a introspection and
|
||||
## Books of the Week
|
||||
#### [Programming Notes for Professional books](https://goalkicker.com/)
|
||||
I know this has been featured as one of the very much recommended items on my
|
||||
[free resource list]({% post_url 2018-05-1-free-resource-list %}) but man, I really can't recommend it enough, it's very
|
||||
[free resource list]({{ site.baseurl }}{% post_url 2018-05-1-free-resource-list %}) but man, I really can't recommend it enough, it's very
|
||||
good in my opinion. This is basically like an unofficial, offline documentation of the languages but they way they
|
||||
guide you to the basics is quite good since I find it hard to get into the basics reading from some of the official
|
||||
documentation. On a formal note, this is a site that hosts a plethora of books on a plethora of tools (programming languages and
|
||||
|
||||
@ -9,7 +9,7 @@ tags: [programming-notes, computer-science, real-notes]
|
||||
updatedOn: Jul 3, 2018
|
||||
---
|
||||
|
||||
Another resource list? What is the difference of this and [that one]({% post_url 2018-05-1-free-resource-list %})?
|
||||
Another resource list? What is the difference of this and [that one]({{ site.baseurl }}{% post_url 2018-05-1-free-resource-list %})?
|
||||
|
||||
This resource list, as you might have read from the title, is aimed towards beginners who wants to begin some web design,
|
||||
web development, or programming, in general. This curated list contains tutorials and stuff that makes a beginner follow
|
||||
@ -61,8 +61,8 @@ down in this list that is categorized according to how they present their inform
|
||||
|
||||
## Pick Your Tools!
|
||||
Basically this image:
|
||||
<center><img src="{{ '../assets/pictures/web-dev-tools-expanding-brain.png' | relative_url }}">
|
||||
<p class="caption">This is what you are here for, yeah?</p></center>
|
||||
<img src="{{ '../assets/pictures/web-dev-tools-expanding-brain.png' | relative_url }}">
|
||||
<p class="caption">This is what you are here for, yeah?</p>
|
||||
|
||||
But seriously speaking, here are some of the tools that can help you in your budding growth as a web developer. Just take note
|
||||
that these tools do not entirely define your path as a developer so don't rely on it a bit too much. That said do note to get
|
||||
|
||||
@ -11,7 +11,7 @@ Wow! Fourth entry? I've never been this consistent in my life. Inspired me to do
|
||||
|
||||
## What I've learned this week
|
||||
### Sorting algorithms (REVIEWED)
|
||||
OK! If you have read the tiny endnote from the [last entry]({% post_url 2018-07-24-weekly-resources-and-learnings-3 %}), you
|
||||
OK! If you have read the tiny endnote from the [last entry]({{ site.baseurl }}{% post_url 2018-07-24-weekly-resources-and-learnings-3 %}), you
|
||||
might have noticed the thing where it said about the exclusion of the sorting algorithms since I found little use of it and
|
||||
my brain tends to forget those kinds of information, especially the ones that I haven't practiced to a good use, yet. Luckily,
|
||||
I found [Brian Holt's Four Semesters of CS in Six Hours](http://btholt.github.io/four-semesters-of-cs/) that offers some
|
||||
@ -328,7 +328,8 @@ it whatever you're doing. That is the subject of the talk given by a famed psych
|
||||
will very much butcher the pronounciation of it if I were to orally speak that name (also, his last name is pronounced as
|
||||
'chik-sent-mi-ha-yi', according to the YouTube comments).
|
||||
|
||||
<center><img src="https://78.media.tumblr.com/f346da16707adaeec7e5e5c490070c4d/tumblr_nnsu1r37wH1qe60t4o1_400.gif"><p class="caption">Into the zone we go</p></center>
|
||||
<img src="https://78.media.tumblr.com/f346da16707adaeec7e5e5c490070c4d/tumblr_nnsu1r37wH1qe60t4o1_400.gif">
|
||||
<p class="caption">Into the zone we go</p>
|
||||
|
||||
I suggest that you watch the video in order to get the idea from the psychologist himself since the following statements are
|
||||
pretty much the fruit of my researching labors (and unlike Csikszentmihalyi, I'm not certified for this so you better watch it).
|
||||
|
||||
@ -15,7 +15,7 @@ computers that can serve a variety of purposes such as calculating simple arithm
|
||||
digital art, and creating programs.
|
||||
|
||||
<!-- PICTODO: insert image here of different electronic devices -->
|
||||
<center><img src="https://source.unsplash.com/Ae5jmF2PJXg/1024x512" alt="Different electronic devices at usual life."></center>
|
||||
<img src="https://source.unsplash.com/Ae5jmF2PJXg/1024x512" alt="Different electronic devices at usual life.">
|
||||
|
||||
You get the idea, electricity pretty much integrates with everything now and it helped us a lot in a lot of ways. If you would
|
||||
think of an object that doesn't involve electricity, you would have a hard time thinking about that.
|
||||
@ -43,7 +43,8 @@ prepared to be get your hands dirty and get your organizing skills on to your da
|
||||
components and you won't have a big worry, probably.)
|
||||
|
||||
<!-- PICTODO: example of a workspace -->
|
||||
<center><img src="{{ 'assets/pictures/intro-to-electronics/my-workspace.png' | relative_url }}" alt="My workspace."><p class="caption">Also, welcome to my chaotic workspace, everybody.</p></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-electronics/my-workspace.png' | relative_url }}" alt="My workspace.">
|
||||
<p class="caption">Also, welcome to my chaotic workspace, everybody.</p>
|
||||
|
||||
Usually, with electronics, you would want to have some basic components like LEDs, resistors, capacitors, switches, integrated circuits, and
|
||||
transistors and some tools like a breadboard, wire splicer, tweezers, and your ol' handy-dandy paper and pen because we are not
|
||||
@ -60,7 +61,8 @@ for a very quick headstart:
|
||||
- integrated circuits — it refers to any circuit that is *integrated* into a chip or any viable small container
|
||||
|
||||
<!-- PICTODO: insert image here of the different electronic components like the breadboard, transistors, resistors, wires, and such -->
|
||||
<center><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Componentes.JPG/1200px-Componentes.JPG"><p class="caption">Can you identify some parts at the end of the part two of this entry?</p></center>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Componentes.JPG/1200px-Componentes.JPG">
|
||||
<p class="caption">Can you identify some parts at the end of the part two of this entry?</p>
|
||||
|
||||
With all of these said, it is usually recommended for a complete beginner to just buy an beginners' electronic kit since all of the materials
|
||||
needed to get started are already there. You would just have to practice to choose components yourself on the later part when you are more
|
||||
@ -90,14 +92,14 @@ the protons and the neutrons make up the nucleus and the electrons just fly outs
|
||||
imagine it as if the atom is like the solar system: the nucleus is the sun and the electrons are the planets orbitting around it.
|
||||
|
||||
<!-- PICTODO: insert image of the structure of an atom with the labelling of its parts -->
|
||||
<center><img src="{{ 'assets/pictures/intro-to-electronics/atom-structure.jpg' | relative_url }}" alt="Structure of an atom"></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-electronics/atom-structure.jpg' | relative_url }}" alt="Structure of an atom">
|
||||
|
||||
The number of protons and electrons make up the composition and define what type of atom it is. For instance, if we would want to have
|
||||
a hydrogen atom, we would just have an atom that is mainly composed of one proton and one electron. Substances containing only one type
|
||||
of atom are often referred to as an *element* as in the elements that can be found in the periodic table.
|
||||
|
||||
<!-- PICTODO: insert image here of a hydrogen atom -->
|
||||
<center><img src="{{ 'assets/pictures/intro-to-electronics/hydrogen-atom.jpg' | relative_url }}" alt="Hydrogen atom"></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-electronics/hydrogen-atom.jpg' | relative_url }}" alt="Hydrogen atom">
|
||||
|
||||
Objects (i.e. a chair, a speaker, or a USB cable) and materials (i.e. leather, rubber, or plastic) are a larger bunch altogether that
|
||||
these are usually made from several elements mixed together into what they call a *compound*. These compounds and elements are what
|
||||
@ -116,7 +118,7 @@ pole and repelled to the same pole. This is what essentially the *Law of Attract
|
||||
> Like charges repel, opposite charges attract.
|
||||
|
||||
<!-- PICTODO: insert image of a magnet with two opposite poles -->
|
||||
<center><img src="{{ 'assets/pictures/intro-to-electronics/law-of-attraction.jpg' | relative_url }}" alt="Law of attraction"></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-electronics/law-of-attraction.jpg' | relative_url }}" alt="Law of attraction">
|
||||
|
||||
There are some objects whose the atoms’ electrons are freely flying around the atom shell, labelling them to be as *free electrons*. These
|
||||
extra electrons are now moving freely wherever they want as long as they hang around the atom unless they are being interacted with an
|
||||
@ -172,7 +174,8 @@ interacted with it that much. In a simple electrical circuit like a LED circuit,
|
||||
Take note of this analogy as we will continuously add comparisons as we go on further into the concepts.
|
||||
|
||||
<!-- PICTODO: electrical circuit and water pipe analogy -->
|
||||
<center><img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Electronic-hydraulic_analogy.svg" alt="Water pipe analogy"><p class="caption">Water pipe analogy (I have to put a picture there)</p></center>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Electronic-hydraulic_analogy.svg" alt="Water pipe analogy">
|
||||
<p class="caption">Water pipe analogy (I have to put a picture there)</p>
|
||||
|
||||
How does an electric flow occurs?
|
||||
|
||||
@ -185,12 +188,14 @@ Let's think about that last statement and elaborate with an example. Let's think
|
||||
around them.
|
||||
|
||||
<!-- PICTODO: picture of a chain of atoms -->
|
||||
<center><img src="{{ 'assets/pictures/intro-to-electronics/chain-of-atoms.jpg' | relative_url }}" alt="A chain of atoms"><p class="caption" >A chain of atoms</p></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-electronics/chain-of-atoms.jpg' | relative_url }}" alt="A chain of atoms">
|
||||
<p class="caption" >A chain of atoms</p>
|
||||
|
||||
Let's imagine there's an electron is moving for whatever reason.
|
||||
|
||||
<!-- PICTODO: picture of a moving electron with its path -->
|
||||
<center><img src="{{ 'assets/pictures/intro-to-electronics/atom-chain-movement.jpg' | relative_url }}" alt="A chain of atoms"><p class="caption" >Then a chain reaction will occur</p></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-electronics/atom-chain-movement.jpg' | relative_url }}" alt="A chain of atoms">
|
||||
<p class="caption" >Then a chain reaction will occur</p>
|
||||
|
||||
Since electrons repel from each other, whenever there's a movement of an electron, surely there will be other electrons that will be affected
|
||||
from it. Even though this is not true for most of the time, we can say that we can move one electron without affecting the other.
|
||||
@ -198,7 +203,8 @@ from it. Even though this is not true for most of the time, we can say that we c
|
||||
From the example above, let's scale things up from a chain of atoms to an assembly to atoms, say from a conductor.
|
||||
|
||||
<!-- PICTODO: atom arrangement of a conductor -->
|
||||
<center><img src="{{ 'assets/pictures/intro-to-electronics/conductor-atom-composition.jpg' | relative_url }}" alt="The atoms inside of a conductor, probably"><p class="caption" >Simplified representation of the atom structure inside of a conductor</p></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-electronics/conductor-atom-composition.jpg' | relative_url }}" alt="The atoms inside of a conductor, probably">
|
||||
<p class="caption" >Simplified representation of the atom structure inside of a conductor</p>
|
||||
|
||||
Since conductors have an arrangement that is loosely bound only held by protons that stay in one place preserving the structure of the
|
||||
metal, electrons can freely move jumping from one atom to another. From that point, we can really see the chaotic and numerous movements that
|
||||
@ -272,7 +278,7 @@ move on to different parts of the circuit. Or any components waiting for their w
|
||||
|
||||
Next is the *per unit of charge* part of the definition. That's easy as we've already discussed that before: coulombs. A coulomb is a *unit*
|
||||
of charge. What about for energy? Generally, when talking about energy, it uses what they call a *joule*. Therefore, one of the ways to
|
||||
describe voltage in units is $ V = frac{J}{C} $. To put it into words: for each coulomb of charge flowing through the circuit, a certain
|
||||
describe voltage in units is \\(V = \frac{J}{C}\\). To put it into words: for each coulomb of charge flowing through the circuit, a certain
|
||||
amount of joules of energy is released.
|
||||
|
||||
OK. Now's let take a look at the definition again:
|
||||
|
||||
133
_posts/2018-08-21-weekly-resources-and-learnings-7.md
Normal file
133
_posts/2018-08-21-weekly-resources-and-learnings-7.md
Normal file
@ -0,0 +1,133 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Weekly Resources and Learnings #7"
|
||||
date: 2018-08-21 12:57:34 +0800
|
||||
author: foo-dogsquared
|
||||
categories: general
|
||||
tags: [programming-notes, computer-science, learning]
|
||||
---
|
||||
|
||||
Seventh entry, I'm feeling lucky. How will my learning journey unfolds to me?
|
||||
|
||||
Well, I'll be now posting these learnings every month, starting from the next month, now so I guess it'll be called as "Monthly Resources and
|
||||
Learnings". It might have a different classification of sorts like I'm going to put the site, channel, and tool of the week into one
|
||||
category now. IDK, I'll take some time thinking about that.
|
||||
|
||||
The reason why I want to make this into a monthly basis is mainly for two reasons:
|
||||
- I'll have a lot more time to write so I'll be able to write more posts in better quality. This includes my future non-learnings post such as my *Simplified!* series.
|
||||
- With more time, I'll be able to focus more on learning the more complex stuff on the fields I want to get in (i.e. computer science, electronics, mathematics) as they take more time to understand those topics. This will also affect my time efficiency as I am able to manage my time better.
|
||||
|
||||
Having this in a monthly format means I'm now mainly reviewing what I've learned once a month but who says I can only review it once per
|
||||
month? There are still ways to review it, you know: your ol' paper notebooks, digital notebooks, recalling information once in a while, and
|
||||
testing yourself which is one of the most effective way to retain information (or at least for me). The only difference is that my notes are
|
||||
just offline.
|
||||
|
||||
Anyways, let's get this seventh entry on the track and kiss the weekly format goodbye.
|
||||
|
||||
## What I've learned this week
|
||||
### More Git
|
||||
Well, this week I've encountered some problems building my site on GitHub Pages (and eventually move my blog onto a new repo). I've had my
|
||||
fair share of frustration and self-reminders that I should take this as a challenge because that proves I have little knowledge with this
|
||||
thing. Anyway, I've learned a bit more about Git. The workflow of a distributed version control system (DVCS), branching, rebasing, and
|
||||
having your credentials verified since [Git can apparently be used to spoof commits](https://dev.to/agrinman/spoof-a-commit-on-github-from-anyone-4gf4)
|
||||
making anyone look like that they have contributed into the scene.
|
||||
|
||||
Branching is a process on the workflow that flows out from the root / master branch. This is mostly used to make developing new features
|
||||
more organized and not so much of a chaotic process unlike a sole master branch that carries the burden of being the development repo which
|
||||
shouldn't be since the master branch should be used as a production code, in some cases. Then those development branches, when the supposed
|
||||
task is done, is supposed to be pull requested into the master branch. Integrating the code from the dev branch into the master branch and
|
||||
possibly fix some merge conflicts while at it. Yeah, you can tell that I don't branch out my workflow a lot.
|
||||
|
||||
Rebasing, on the other hand, is simply "rewriting" the history of the repo, mostly through its commits. You can erase one of the commits or
|
||||
squash them all into one commit. Rebasing also affects other files and taking you back into the state of the repo at that time of that commit
|
||||
so be prepared to fix some merge conflicts.
|
||||
|
||||
I'll be a little more mindful when using Git since I have to say that my practice using Git is quite bad. Putting all of the code, whether in
|
||||
development or not, into the master branch. Also with my practices, it caused some very bad events like not having a complete backup or
|
||||
restarting back into a valuable point when the code really goes bad and out of control.
|
||||
|
||||
### More electronic stuff
|
||||
I've been digging a lot more about electronics lately that I decided to make a *Simplified!* post out of it. There's still an upcoming part of
|
||||
the post so keep an eye out for that, not like that I upload very often, anyway.
|
||||
|
||||
In that upcoming second part, you'll learn on what electronics is all about and the related concepts that you need to learn in order to get
|
||||
started: schematics, practical application of the theoretical parts that have been discussed on the first part, and the electronic components
|
||||
that you'll always see as a budding electrical engineer.
|
||||
|
||||
About the meat of the stuff, I've been learning how different electronic components work and basically reviewing the stuff that I passed off
|
||||
when I was in high school: the diodes, the resistors, the batteries, and all kinds of electrical stuff. I've been also going a bit deeper on
|
||||
using Arduino wherein I made some basic stuff that is the examples provided in the Arduino IDE. Nothing special in any way but I still think
|
||||
it's cool. Anyways, a bit of summary for each components:
|
||||
- *diode* — An electronic component that lets electric charges flow in one direction. The name diode comes the fact that it has two parts, one that is positively charged or the anode which attracts the electrons and the other that is the negatively charged or the cathode which where the electrons will flow out of the component. Since there is different charges for each end, you might encounter to refer these electronic components as polarized where it refers to the distribution of electrons throughout the object but it is still electrically neutral. Also, since it has different charges for those ends, you would have to connect them in a proper way, depending on the flow of the electrons.
|
||||
- *breadboard* — A tool that lets you build a circuit without permanently soldering them onto a circuit board which is exactly why they are perfect for prototyping, creating, and debugging your circuit. A breadboard is basically just organized metal strips that provides a route for electrons to build your circuit. In a typical breadboard, you would see that there are two parts: the *terminal strip* which is where you usually place your electronic components and it is electrically connected horizontally for each row except at the center, leaving two rows of metal strips per row and the *bus strip* which where you usually use it as the ground and source line, connecting your voltage source to the bus strip and connecting it to your terminal strip in order to make your circuit fully functional.
|
||||
- *resistor* — An electronic component that reduces the voltage by converting electric energy into heat. Unlike diodes, the resistors is not polarized which means you can connect them in any way and doesn't have two different charges. There are different appearances for the resistor such as the [wirewound resistor]() and the [carbon film]() resistor but normally, you would see the carbon film variation with a group of colored stripes. Those colored stripes indicate the resistance value of the resistor which dictates how much of the current can it resists.
|
||||
- *capacitor* — It stores the electric charge of the circuit. This is the component that your RAM in the computer relies on by representating the bits through whether the capacitor is filled or not, 0 if mostly empty or 1 if it is not. Anyways, the capacitor is mostly used to introduce time delays for your circuits. When the capacitor is trying to build up charge, that's when the circuit will fully work or something along those lines. The capacitor comes in different types but mostly we categorize them whether it is *polarized* or *non-polarized*. As you've read from the previous items about components with polarity, a polarized capacitor has a positively charged side and negatively charged side, meaning you have to place them in a correct position. Non-polarized capacitors, on the other hand, does not. As a beginner, we mostly fiddle with the non-polarized capacitor since the polarized capacitor is mostly used for the circuits that consumes fairly large values.
|
||||
- *transistor* — It's basically a wire that blocks or allows electrons to pass through. It has three wires that represent the switch-like function whether the electrons will be blocked or not. Technically, the electrons are "blocked" by letting it flow into the collector, instead, where the electrons just stay there. The way on how it works is that its function will be dictated by the electrical signal. If a signal that tells the transistor to block the upcoming flow, it will rightfully do its duty and block the electrons and instead go to the collector part of the transistor. A transistor's service does not end being a switch-wannabe, it also has another function which is amplifying these electrical signals. This is where the collector part of the transistor will be used as additional energy for the signal. This is what hearing aids relies on: it amplifies sound by recieving these sounds as electrical signals and amplify it from the transistor.
|
||||
- *integrated circuit* — Integrated circuit or IC, for short, is basically a circuit that is compressed into one tiny chip. This is one of the most important component as they come in different forms and different functions. In order to understand an integrated circuit, you would have to refer to their datasheet which describes the arrangement of the components and the function of different pins as it is one of the ways how you can put some input and get some output.
|
||||
|
||||
## Article of the Week
|
||||
#### [Follow these simple rules and you’ll become a Git and GitHub master by *Ariel Camus*](https://medium.freecodecamp.org/follow-these-simple-rules-and-youll-become-a-git-and-github-master-e1045057468f)
|
||||
Speaking of Git, here's an article I found about standard practices of using Git. It's not a law or something that is set in stone but it
|
||||
is good recommendation of utilizing it in order to make the development process easier. If you're already familiar with Git and GitHub, you
|
||||
probably won't have much to learn here but in case you're in the same level of familiarity as mine, you'll learn a few tidbits here and
|
||||
there.
|
||||
|
||||
## Book of the Week
|
||||
#### [Self Debug by *Karan Kurani*](https://leanpub.com/selfdebug/)
|
||||
It's a book for those who are in software development industry at any point in their career, whether you're a professional or someone's
|
||||
who's just starting out. It is not complete yet and it might have some glaring errors here and there but the most important thing that
|
||||
we should focus on is the content. This is a book that talks about how you can improve as a software developer just not technically
|
||||
because there's still a lot of stuff outside of code that you have to deal and polish: soft skills and emotional wellbeing. There is
|
||||
also a [video from freeCodeCamp](https://www.youtube.com/watch?v=ZU1B9LGjnAA) about it so be sure to check it out, I guess?
|
||||
|
||||
## Podcast Episode of the Week
|
||||
#### [Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More from *Syntax*](https://syntax.fm/show/058/advice-for-beginners-tech-skills-applying-for-jobs-focus-imposter-syndrome-more)
|
||||
Another week, another Syntax podcast episode. As you can tell from the long title, this is a podcast episode mainly targeted for
|
||||
beginners like me. It's a perfect podcast episode at this time. It's a bunch of tips about how you can start out as someone who is
|
||||
starting to gain a foot inside the industry house. Very good podcast episode especially that it comes from the two credible developers,
|
||||
[Wes Bos](https://www.youtube.com/user/wesbos) and [Scott Tolinski](https://www.youtube.com/user/LevelUpTuts/), both has a YouTube
|
||||
channel for their content. Really recommend this one.
|
||||
|
||||
## Site of the Week
|
||||
#### [The Noun Project](http://thenounproject.com/)
|
||||
A site that features free icons, although you can pay for it, you can still use it for free as long as you give the right amount of
|
||||
attribution to the creator. I've been using this only about a week ago when making a slight overhaul for my blogsite with the new
|
||||
icons and everything. You can find some stuff on almost everything: icon to indicate updates, notifications, or errors? They have that.
|
||||
Pretty cool stuff and pretty much worth it.
|
||||
|
||||
## Tool of the Week
|
||||
#### [Grammarly](https://app.grammarly.com/)
|
||||
It's a proofreading tool that checks and correct your grammar and stuff. Also, you can know the definitions of the words on-the-fly with this
|
||||
tool. Anyways, this has been recommended to me after giving some feedback about the pros and cons of a two-parter post (which my previous
|
||||
*Simplified!* entry is). Anyways, it also has a premium option but the free version is mostly enough for me. Although I forgot to use it
|
||||
on my most recent *Simplified!* post, I'm now working with this tool to improve on it. Well, that reminds me to make this as a habit and
|
||||
include it in my writing toolbelt.
|
||||
|
||||
## Watch of the Week
|
||||
#### [Learning and Memory: How it Works and When it Fails](https://www.youtube.com/watch?v=a_HfSnQqeyY)
|
||||
If you have a *lot* of time to watch this 2-hour video, then go ahead and watch this in one gulp or you can go and watch it in sessions just
|
||||
like what I did. Anyways, this is a video that tackles how our memory works and how it interacts with the different parts of it
|
||||
subconsciously. I found some parts of the lecture to be discussed on other references on memory, specifically the book, [A Mind For Numbers](https://www.goodreads.com/book/show/18693655-a-mind-for-numbers)
|
||||
and its associated course at Coursera, [Learning How to Learn](https://www.coursera.org/learn/learning-how-to-learn/) which I recommend a
|
||||
lot, too.
|
||||
|
||||
## Channel of the Week
|
||||
#### [Professor Messer](https://www.youtube.com/channel/UCkefXKtInZ9PLsoGRtml2FQ)
|
||||
Professor Messer is a figure in IT industry who's pretty much known for his free IT course that provides knowledge for those who will take
|
||||
some IT certifications like the CompTIA A+ training. His videos in the site is pretty embedded from YouTube and this is where you can take
|
||||
a look on his contents. If you are someone who are siding on the software side on the computer often, you might want to take a primer on
|
||||
the hardware systems since at the end of the day, computers are basically simple yet complex arrangement of electronic components that
|
||||
makes up the hardware: motherboard, CPU, extension cards, keyboard, mouse, monitor, and so on. You don't really need to know the
|
||||
nitty-gritty details in each of the video but understanding the core of each is quite enough, in my opinion.
|
||||
|
||||
---------
|
||||
|
||||
Yup, I've moved my blog now to be a part of my site since my `username.github.io` will be a front-page now, something like a portfolio page.
|
||||
Anyways, I've also enabled the comments now because I can't activate it for some reason weeks ago and I don't know what to do.
|
||||
|
||||
Also, I'll just casually mention my [study playlist](https://www.youtube.com/playlist?list=PLz7wMhmjqqBzxaZPxosxdJOAhrPx9B3cw), IDK. You can
|
||||
create one for yourself if you are not quite a fan of the genre I used to listen to. We're building some positive productivity habit in here
|
||||
now.
|
||||
|
||||
Next plan, I'll try to automate the creation of these weekly learning posts. "If you do this task frequently, try to automate it", I say.
|
||||
I think I'm going to build this kind of tool with C or maybe Python, IDK. I'm more comfortable with C.
|
||||
@ -90,7 +90,8 @@ If the program is done running, the allocated resources would be freed and rende
|
||||
Now this allocated resource, the memory set, do have individual segments that make up the entire picture for our program (info from [GeeksForGeeks](https://www.geeksforgeeks.org/memory-layout-of-c-program/)).
|
||||
|
||||
<!-- TODO: Introduce the main segments of the memory in C (DONE) -->
|
||||
<center><img src="{{ 'assets/pictures/intro-to-memory/memory_segment.jpg' | relative_url }}" style="width:500px;" alt="Memory segment in C"><p class="caption">The mistake in writing on the 'heap' part is glaring.</p></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-memory/memory_segment.jpg' | relative_url }}" style="width:500px;" alt="Memory segment in C">
|
||||
<p class="caption">The mistake in writing on the 'heap' part is glaring.</p>
|
||||
<!-- insert memory segment drawing here -->
|
||||
|
||||
Starting from the low address, we have the:
|
||||
@ -139,7 +140,7 @@ work, it utilizes the First In, Last Out (FILO) approach. That means the most re
|
||||
|
||||
```
|
||||
<!-- insert image here -->
|
||||
<center><img src="{{ 'assets/pictures/intro-to-memory/stack_frame.jpg' | relative_url }}" style="width: 500px;" alt="A visualization of the stack."></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-memory/stack_frame.jpg' | relative_url }}" style="width: 500px;" alt="A visualization of the stack.">
|
||||
|
||||
Within each stack frame is an allocated memory space that is included with a set of data and values that have
|
||||
been passed on from the previous function(s). The most recent stack frame also gets to have
|
||||
@ -176,7 +177,7 @@ used to describe the memory spaces so the dynamically allocated space must go so
|
||||
Unlike the stack which has some form of organization, heap does not have. It assigns memory spaces randomly in the memory pool.
|
||||
|
||||
<!-- insert image here -->
|
||||
<center><img src="{{ 'assets/pictures/intro-to-memory/stack_and_heap.jpg' | relative_url }}" style="width:500px;" alt="Simplified visualization of the stack and the heap."></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-memory/stack_and_heap.jpg' | relative_url }}" style="width:500px;" alt="Simplified visualization of the stack and the heap.">
|
||||
|
||||
Also, unlike the stack which pops out the memory space of the most recent stack frame when the function finishes running, the
|
||||
heap does not have any form of automatic deallocation and we would have to deallocate it ourselves. This does add on the random
|
||||
@ -203,11 +204,12 @@ initialize two variables with the same value but it would be on two different me
|
||||
value*.
|
||||
|
||||
<!-- Insert image here -->
|
||||
<center><img src="{{ 'assets/pictures/intro-to-memory/diff_addresses.jpg' | relative_url }}" alt="A simple visualization of what I'm talking about, supposedly."></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-memory/diff_addresses.jpg' | relative_url }}" alt="A simple visualization of what I'm talking about, supposedly.">
|
||||
|
||||
Well, we can take the idea outside, shall we.
|
||||
We can say that the concept of pointers are similar to URLs, which is a form of address to the file.
|
||||
<center><img src="{{ 'assets/pictures/intro-to-memory/diff_url_addresses.jpg' | relative_url }}" alt="Another visualization of my stuff, don't mind the drawing."><p class="caption">Like I said, don't mind the drawing.</p></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-memory/diff_url_addresses.jpg' | relative_url }}" alt="Another visualization of my stuff, don't mind the drawing.">
|
||||
<p class="caption">Like I said, don't mind the drawing.</p>
|
||||
|
||||
We can get the very exact file through different addresses but then, on the computer's term, they are considered different.
|
||||
Plus if one of the maintainer updates a file, only one of them would be updated.
|
||||
@ -245,7 +247,8 @@ You might also notice the ambersand (&) on the initialization of the pointer var
|
||||
As one might conclude, the pointer variable needs an address in order to make it work and not get an error with unmatched type in
|
||||
the initialization of the pointer variable.
|
||||
|
||||
<center><img src="{{ 'assets/pictures/intro-to-memory/pointers.jpg' | relative_url }}" alt="Simple pointer visualization"><p class="caption">Uhh... the design around the text is a design decision, yup. Not a mistake that has been decided into a design by accident at all. Yeah, it looks worse than I thought.</p></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-memory/pointers.jpg' | relative_url }}" alt="Simple pointer visualization">
|
||||
<p class="caption">Uhh... the design around the text is a design decision, yup. Not a mistake that has been decided into a design by accident at all. Yeah, it looks worse than I thought.</p>
|
||||
|
||||
If we would describe it what happening on line 6 on the code example above, we would say that we assign a pointer named `i` that
|
||||
points to the memory location which contains an integer, `7`. On line 8, we assign a pointer named `f` that points to the memory
|
||||
@ -328,7 +331,7 @@ Another example from the previous subpoint:
|
||||
```
|
||||
|
||||
Would have this as a simple visualization when an indirection was needed:
|
||||
<center><img src="{{ 'assets/pictures/intro-to-memory/dereferencing.jpg' | relative_url }}" alt="A simple dereferencing visualization."></center>
|
||||
<img src="{{ 'assets/pictures/intro-to-memory/dereferencing.jpg' | relative_url }}" alt="A simple dereferencing visualization.">
|
||||
|
||||
This has been previously mentioned but to nail the point: when the pointer points to a null pointer and we dereferenced it, the
|
||||
compiler would compile the program (assuming no errors were thrown at compile time, of course) but it would get a segmentation
|
||||
@ -527,7 +530,7 @@ Here are some of the topics/concepts that you'll expect to encounter if you want
|
||||
## Author's Note
|
||||
Yes, it is another new series that's called *Simplified!* which sounds like one of the most common name for a beginner-friendly
|
||||
kind of posts out there. If there's a more cool-sounding name, I would take it but I'm not good at naming things. If we would
|
||||
take the previous regular posts such as [this one]({% post_url 2018-06-21-a-closer-look-on-computers %}) or [that one]({% post_url 2018-05-18-git-concepts-and-mechanics %}), they would be probably one on the series too but I don't want to include
|
||||
take the previous regular posts such as [this one]({{ site.baseurl }}{% post_url 2018-06-21-a-closer-look-on-computers %}) or [that one]({{ site.baseurl }}{% post_url 2018-05-18-git-concepts-and-mechanics %}), they would be probably one on the series too but I don't want to include
|
||||
them in this series since I'm currently making a new writing and content style.
|
||||
|
||||
So I put the debut of this kind of series since I might make an more detailed version of this topic. It is kind of an interesting
|
||||
|
||||
@ -11,7 +11,7 @@ not so much to the other things, hehe.
|
||||
|
||||
## What I've learned this week
|
||||
### Memory and memory management (REVIEWED)
|
||||
Yeah, this has been reviewed for too long that I decided to make it into its own post in which you can visit it [here]({% post_url 2018-08-7-simplified-introduction-to-the-memory-and-memory-management %}).
|
||||
Yeah, this has been reviewed for too long that I decided to make it into its own post in which you can visit it [here]({{ site.baseurl }}{% post_url 2018-08-7-simplified-introduction-to-the-memory-and-memory-management %}).
|
||||
Anyway, here's a summarized version of it: the memory is a part of the computer that is used to hold and store data; in context of
|
||||
computer science, the memory is mostly referring to the RAM which is a type of memory that can hold and transfer data at a higher
|
||||
rate compared to other forms of storage such as a hard drive disk (HDD) and a solid state drive (SSD).
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// custom default properties for normal tags
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-behavior: smooth
|
||||
}
|
||||
|
||||
a,
|
||||
@ -58,10 +58,14 @@ iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
li > ul, li > ol {
|
||||
li > ul, li > ol, ul > li, ol > li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
ul.social-media-list > li, #list-container > ul > li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Table custom properties
|
||||
table:not(.rouge-table) {
|
||||
th {
|
||||
@ -191,6 +195,15 @@ h2.post-alt-title {
|
||||
margin-top: $spacing-unit * 1.15;
|
||||
}
|
||||
|
||||
> p {
|
||||
word-spacing: 1px;
|
||||
}
|
||||
|
||||
p > img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
ul.resources-link {
|
||||
list-style: none;
|
||||
margin-left: 1.9em;
|
||||
|
||||
@ -6,7 +6,7 @@ $base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvet
|
||||
$base-font-size: 16px !default;
|
||||
$base-font-weight: 400 !default;
|
||||
$small-font-size: $base-font-size * 0.875 !default;
|
||||
$base-line-height: 1.5 !default;
|
||||
$base-line-height: 1.75 !default;
|
||||
|
||||
$spacing-unit: 30px !default;
|
||||
|
||||
|
||||
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 60" x="0px" y="0px"><g><path d="M46 24c0 12.131-9.869 22-22 22-7.192 0-13.963-3.411-18.107-9h10.107v-2h-13.000000000000002v13h2v-8.881c4.559 5.542 11.58 8.881 19 8.881 13.233 0 24-10.767 24-24h-2zM24 2c7.213 0 13.985 3.411 18.112 9h-10.112v2h13v-2h-.005l-.057-11.005-2 .011.046 8.846c-4.545-5.525-11.556-8.852-18.984-8.852-13.233 0-24 10.767-24 24h2c0-12.131 9.869-22 22-22z"/></g><text x="0" y="63" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Shmidt Sergey</text><text x="0" y="68" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 60" x="0px" y="0px"><g><path d="M46 24c0 12.131-9.869 22-22 22-7.192 0-13.963-3.411-18.107-9h10.107v-2h-13.000000000000002v13h2v-8.881c4.559 5.542 11.58 8.881 19 8.881 13.233 0 24-10.767 24-24h-2zM24 2c7.213 0 13.985 3.411 18.112 9h-10.112v2h13v-2h-.005l-.057-11.005-2 .011.046 8.846c-4.545-5.525-11.556-8.852-18.984-8.852-13.233 0-24 10.767-24 24h2c0-12.131 9.869-22 22-22z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 792 B After Width: | Height: | Size: 443 B |
Loading…
Reference in New Issue
Block a user