cool, now I know what I wanna do.

cool, now I know what I wanna do.

The last few days were spent coding, yes, but also thinking about reverse engineering my future. After reading various explanations of different jobs it’s possible to get after learning how to code, I came across the best one yet, at:

https://www.theodinproject.com/courses/introduction-to-web-development/lessons/what-a-web-developer-does

So now I know. I have decided. I’m going to reverse-engineer myself to become a full-stack web app developer.

Amen and goodnight!


Today’s resources:

http://www.w3schools.com

http://www.freecodecamp.com

http://www.theodinproject.com

more more more

more more more

Getting right back to it:

Phishing is when someone masquerades as someone else (often with a fake website) to trick people into sharing their personal information.

Malware = malicious software (usually installed without your knowledge). Malware can be in the form of software masquerading as good (like an anti-virus program that’s really a virus) or it can install itself without asking because of some site you visited. Once on your computer, malware can access your data and files and do whatever with them. Eek!

URL = uniform resource locator, consisting of the protocol (like “http://”), the domain (like “google.com”) and the path (like “/internet.html”)

◊ The web = the part of the Internet that uses HTTP (hypertext transfer protocol). Which leads me to ask – what are the other parts of the Internet and what are they used for?

◊ A website = a collection of webpages (documents written in HTML) on the same domain.

◊ A browser = a program that can open webpages and display them (by interpreting the source code).

◊ Basically, everything that an everyday user interacts with is a program. 知らなかったよ。

◊ Again, take this as you will (it’s coming from a complete beginner), but I did not previously know that you can “inspect”, aka see the HTML code, of basically any website you’re on. That’s cray-cray!

◊ And one point from actual coding I did (ha): In CSS, classes are marked with a “.” and ids are marked with a “#”. Both of them are more specific than the generic element styling (body, p, h1, h2, li, etc.). However, the rule is only 1 id per page – unlike classes, which you can add to as many elements as you like.

Today’s resources:

https://bento.io/topic/web

https://www.youtube.com/channel/UCVTlvUkGslCV_h-nSAId8Sw (LearnCode.academy’s YouTube channel)

While I’m by no means making crazy leaps and bounds here in my understanding of HTML and CSS, I am starting to wonder why I don’t just try building my own blog layout. Like, from scratch. Instead of this template.

あぁ。。。そっか

あぁ。。。そっか

このポーストの前書きは、日本語で書きます。最近新しいものをたくさん習っていますから、覚えがちょっと心配します。いやだですか。いいえ。難しいですができますよ!

じゃ、リストを作りましょう:

♥ The computer is reading my HTML code from top to bottom. This means that the last line of code it reads is what will stick. So if I have conflicting orders, like a style element that directs text to be pink and then another that directs text to be blue, the earlier order(s) will be ignored in favor of the latter. And apparently – the code will still work! (?) In that example then, the text would appear blue without a tinge pink.

div elements can be used to separate out a piece to be treated on its own.

input elements, like link elements, are self-closing.

clockwise notation can be used when changing values of the four cardinal directions surrounding elements: top right bottom left.

♥ I can imagine that in larger projects keeping code as succinct as possible would be crucial in terms of both memory space and readability.

♥ In CSS, id elements override class elements and in-line style elements override both. To override all other CSS, the keyword !important can be employed.

♥ There are multiple ways to program in colors: hex code uses hexadecimals (base 16 numbers) which use 0-9 and then A-F for values 10-15 (A=10, B=11, C=12, D=13, E=14, F=15). So while a maxed out value byte can be written “11111111”, the same value (255) in hex can be written “FF”. And that’s a lot shorter. To declare colors in hex the 1st 2 digits are used to calculate the R value, the next 2 are for G, and the last 2 are B. Here’s black: #000000 …and red: #FF0000 …and, you get the picture. RGB values can also be used, but they appear to be more typing work. They’re written: rgb(0-255, 0-255, 0-255). So red would be rgb(255, 000, 000).


上記は先週書き始めました。その時に友達に会うためにカフェを出てから、ドラフトを忘れました。

Going through Bento’s “Web Fundamentals” track gave me insight and understanding as to how the Internet actually works. If I’m going to be building apps or websites on it, I think this is important base knowledge.

Here’s what I’ve learned:

♦ The Internet was developed through combining the progress of various companies/institutions from the US, England and France.

♦ The Internet is not a cloud in the sky – it’s physical. Information is sent, for example, underground or on the sea floor through a cable with wires in it, through which light is able to carry data incredibly fast. (Obviously I don’t completely get it – but the concept is there.)

♦ If the Internet is a big wire, then two computers directly connected in to this wire (through wires of their own, I’m assuming) (called “servers“) can communicate. Web pages are files on a server’s hard drive. Every server has a unique address – an Internet Protocol address – or IP address. IP addresses help computers find each other. (They’re also often renamed something interesting, like “Facebook.com”.) So… right now I’m using the server that has been named for the public WordPress.com to create a web page (my blog) which is stored on WordPress.com’s hard drive. (Am I right?)

♦ This computer I’m typing on is not a server, because it’s not directly connected to the Internet. So what is it? It’s a client (a computer connected indirectly to the Internet through an Internet service provider (ISP)).

♦ When I want to look at something online, my computer first goes through my ISP, which is connected in directly to the Internet wire, and thus can take me to any IP address I want.

♦ Whenever an email, picture or web page (or any other data) travels across the Internet from one address to another, computers break the information into packets (smaller chunks of information, sent separately and then reassembled). When I go to YouTube.com and watch a video, the video files are being segmented into data packets that can be sent and reassembled to form the video that I watch through my browser (Chrome). This process of sending packets, even though they have to be reassembled at their destination, is more efficient.

♦ To make sure the data is going to the right places (like an email I write to my mom), there is a router between any two pieces of machinery (server, client, ISP).

♦ The Domain Name System (DNS) takes the nice readable names like WordPress.com and translates them into IP addresses – through a series of steps by which different servers (like the “root name servers” and the “authoritative name servers”) talk to the resolving name server that’s with your operating system to find the IP address that goes with that domain name. It could be a complicated process if at none of these steps the IP address is found in cache (memory), but it all takes the blink of an eye to us.

♦ The Internet Protocol Suite (TCP/IP) was created back in the 70s by a bunch of computer researches to give structure and rules for successful communication between computers (think: grammar). All the interconnected devices in the Internet use TCP/IP when sending information back and forth.

Bandwidth = the amount of data that can be sent over an Internet connection per second (aka how fast your connection is). Bandwidth is being increased by better physical infrastructure (fiber optic cables can send information close to the speed of light) and better ways of encoding information onto the physical infrastructure (who knows?).

Cloud computing is when we use servers on the Internet (aka the “cloud”) to store and manage data rather than on my computer’s hard drive. Example: my email account. My email files are not stored on this MacBook’s hard drive. They are in the “cloud”, so to speak – on the Internet. So even if this physical piece of machinery I’m holding in my lap right now gets run over by a truck, or in another way physically destroyed, none of my data is lost. From any computer anywhere with an Internet connection, I can access all of my data. If cloud computing had been more of a thing back when all those Windows computers of mine kept breaking down, I wouldn’t have annoyingly lost all my files time after time – like my music, Word documents, etc. As far as I can tell, the only upside to storing personal data on a PC’s hard drive rather than on the cloud is privacy/security.

Web apps = Facebook, Google Maps, online games, Amazon, etc. | Apps = applications = programs = software. |  Web apps = apps that run tasks inside a web browser. These days, they are focused on one task (like Google Maps providing map features within a web browser). Desktop applications = data usually stored on my computer’s hard drive, and therefore inaccessible if I left my computer at home. Not so with web apps. Web apps also self-update automatically, so I’m always using the latest version (plus no lengthy install process to download the apps onto my hard drive). In contrast to traditional computing, the web is an open platform so programs don’t have to be formatted to a specific operating system/device (like Mac vs. Windows, or a tablet vs. a desktop computer). Because web apps aren’t downloaded onto my computer’s hard drive, their code and my computer’s code are kept separate, so other tasks on my computer and my overall machine performance can’t be messed with, no matter how many web apps I’ve been using.

♦ HTML can be used to create static web pages. The more dynamic web pages we use today are made by using JavaScript, and particularly within JavaScript, XHR (XMLHttpRequest). XHR enables individual parts of a web page to be altered without needing to reload the entire page ( = web apps are faster, more responsive).

AJAX (Asynchronous JavaScript and XML – extensible markup language) = the combination of JavaScript, XHR, CSS + other web technologies that allows websites to be as cool as they are these days.

HTML5 is a product of the changing times – a reflection of what users want and therefore developers need. Case in point? The <video> tag, which allows videos to be embedded and played in web pages without the need for additional software (called plug-ins) to be installed on users’ devices.

♦ Plug-ins were invented as work-arounds to deliver more content (like videos) due to the limitations of early HTML (no videos, just lines of text and static images). Plug-in = additional piece of software specializing in processing particular kinds of content. Example: Adobe Flash Player might be used to view a video or interactive game on a web page.

♦ A browser cookie is a small piece of text containing info that I may want remembered sent to my browser by the website I visit (like language preferences or other settings that’ll make the next visit to that site already personalized). Shopping carts use cookies so that I can add items even without being logged in. Online ads use them to remember my interests and show me related ads. Local data stored by Adobe Flash Player = Flash cookies.

Phew! That was a lot. Let’s pick this back up tomorrow.

HTML Thoughts

HTML Thoughts

I have to say – the thing I’m learning about computers in all this “let’s coding” business is that if you know what you’re doing, you can really make them work for you. It’s like having a fancy washing machine but not really knowing how to use it. Sure, you’ll put in loads rather than doing them by hand, but you make do with the basics and never get to enjoy all the options that are at your disposal. Maybe you have a bunch of delicates that get put on the same spin cycle as everything else because you just didn’t know that there’s a button to push that changes the settings especially for delicates. (I’m this person, metaphorically with regards to computers and also literally – but that’s because my washing machine’s buttons are all in Japanese. Who knows what I’m missing there…)

As I continue to journey on this mission of mine to learn how to code, I look forward to understanding more of what’s available to me. So many people have gone before me, and there’s so much to learn.

Screen Shot 2017-06-21 at 10.05.12 PM
A silly thing I coded today, using Gimp for the first time to create this glorious background image
End of the week evaluation time!

End of the week evaluation time!

Thank God it’s Friday! Well, and what have I learned since Monday? To be honest, between baseball games, part-time work and my husband, I haven’t put as many hours into actual programming as I’d have liked.

But! Look at how excited my newbie self is to share THIS – a result of me finally sitting down and coding something (in HTML, the first language I’m starting with). Oh, and check me out – I even used a cascading style sheet (CSS).

My first web page!! (Screen Shot 2017-06-15 at 11.56.25 AM)
My first ever try at coding anything.
1st cascading style sheets (Screen Shot 2017-06-16 at 2.25.47 PM)
What delicate use of CSS! What mastery!

 

I wonder if I’ll look back in 5 years and laugh…

Honestly, I’m kind of laughing at myself now. But WHO KNEW it only took 5 minutes to actually MAKE something? Even if it is junk. I still MADE it. I coded it. Blows my mind. Now if only the rest of my coding journey could be this instantly gratifying.

Things I’ve Learned So Far…

Things I’ve Learned So Far…

It’s been a total of 2 days, and here are the things I have learned. (Remember, we’re starting at 0 here.)

Computers cannot think, but they are excellent at reading and following instructions.

Programming code is like writing a cooking recipe – for a creature with no intuition. Example: Step 1, Stand up. Step 2, Walk to the cupboard. Step 3, Open the cupboard. Step 4, Take out the bag of sugar. (You get the idea.)

A computer can only read 1s and 0s. This is a binary system, and that’s different from the decimal system everybody learns to use in elementary school. In the binary system, instead of each place value going up by a factor of 10, each place value goes up by a factor of 2.

A single piece of data is called a bit. If we have two bits together and they are both 1s, then our value will be 3 (one 1 in the ones place and one 1 in the twos place). If there are three bits together and they are all 1s, then our value will be 7. And so on.

8 bits together is a byte. 16 are a word, and 32 are a double word. (Care for a game of computer data Scrabble, anyone? I have to make this little jokes to stop from being terrified at the wealth of knowledge that I do not know.)

RAM. Stands for random access memory. With RAM, we can go directly to any specific byte in memory and do 2 things: read its current value, and write a new value. Each byte has a unique address. These addresses are added sequentially (address 0, then 1, then 2…). If there isn’t anything written yet at a particular address, it will contain a random value. RAM preserves each address’ value until the power’s off.

ROM. Stands for read-only memory. With ROM, we can still go directly to any specific byte in memory, but we can only read its current value. We can’t normally change the value. Unlike RAM, ROM remembers its values even if the power’s cut off. The idea is that values in ROM were written once when the computer was being built, and don’t need to be changed after that.

GUIs are graphic user interfaces. They’re the things that everyday folk using computers will see – the pretty colors and button-pressing magic of modern technology. I’m going to learn how to make them.

A microprocessor is what controls and directs everything by reading instructions one at a time from memory. It has no built-in knowledge of anything but what’s been programmed in. So what’s been programmed in? Built-in behavior that tells it to go to memory address 0 and read the instructions there. After executing those instructions, more built-in programming tells it where to find the next instruction (memory address 1). ROM is put in first, for example memory addresses 0-1000, and then RAM in after, like memory address 1001 and beyond.

A program counter points to some location in the memory, usually the first piece of instruction. Having executed this instruction, the counter goes up by 1 and moves to the next instruction. Some of the instructions will involve tests, and if the test is true, it might change the counter value and move to another location in the sequence of instructions. This is the flow of control within a computer program.

Software allows us to interact with a computer. Users don’t deal in 1s and 0s, they deal with software. Even the keyboard I’m typing on is a piece of software! When I press the a key, an a comes out. See: a.

So, I came from 0. Here’s hoping that the electrical impulses in my brain can help me turn that 0 into a 1!

Today’s resources:

http://www.codenewbie.org/podcast

https://www.takeupcode.com/