Self-Taught Developer’s Survival Guide: What Even is Web Development?, Part Two

Last time on STDSG, we took a look at the major technologies involved in web development. This Friday, we’ll see them come together.

The Anatomy of a Web Page

Below is an example HTML page:

Example HTML

 

Going line by line:

  • <!DOCTYPE html> serves as both the document type declaration. This tells the browser that this document is an HTML5 page. There are other, older versions of HTML and related markup languages (XML = Extensible Markup Language, XSL = Extensible Stylesheet Language), and I will touch upon these briefly in a future entry focused on HTML. For the most part, what you see here is what’s used in most modern use cases. This is a self-closing tag. Unless I state otherwise like I just did here, assume the tags I discuss are not self-closing.

 

  • <html lang=”en”> is the opening tag of the page proper. The ‘lang=”en”‘ portion of the tag is what’s known as an attribute in HTML. These give instructions to the browser as to certain options for tags, and provide extra information. It’s considered a best practice to include an attribute tag containing the language of the page in the main html tag.

 

  • The <head> tag contains certain ‘behind the scenes’ information about the page. These include links to stylesheets or web fonts, the title of the webpage, and other important meta tags. I’ll be taking a closer look at some of the more common ones seen in my first deep dive into HTML. I will take the time to note that one major reason that stylesheets are included in the <head> tag to prevent the page from loading with unstyled content.

 

  • The <body> tag encloses all content that actually appears on the page. Included above are some paragraphs to serve as a simple example.

 

  • The <script> tag is used to include code that needs to be executed on the page, usually JavaScript. It’s included at the bottom of the body so that loaded scripts minimally impact the initial loading of the page, known as “first paint”.

 

  • Lastly, we see the closing tags for the body and the document itself, closing out the page!

This example is a minimalist version of how this works: there is one main or home page, typically named ‘index.html’, that is fed CSS and JavaScript from separate files. It then is served out to the internet at large, by a computer called a server.

Next time on the Self-Taught Developer’s Survival Guide: I break down the tools and resources you should get to know when you’re first starting out to set yourself up for success!

 

 

Forms and Functions: What Martial Arts Taught Me About Programming, Part One

Jet Li in a fighting stance
When I was in my 20s, I was often learning some type of martial art, mostly Taekwondo. My initial motivation for doing so wasn’t the deepest (“Whoa, Jet Li is cool! I want to be able to do that!”), but what I got out of the experience was far more than I had initially hoped. I became more disciplined, more patient, and my ability to focus was substantially increased. What’s even better is that the mental benefits persisted for a long time after I stopped actively practicing. Today, I’m going to talk about how learning martial arts forms informed my approach to algorithms and problem-solving.

Martial arts are a visual practice, in that they’re extremely dependent on the master /sifu/sensei demonstrating to students how techniques work. One area where this is particularly vital are within forms (aka kata in Karate, poomsae in Taekwondo, etc), which are a formal set of moves performed in sequence, with or without a weapon. They are an excellent endurance exercise and can be looked to for a source of possible move combinations, but their primary purpose is to build coordination and body control. So what do forms and programmatic problem-solving have in common?

Students in a karate class

Solving algorithms or learning a new programming technique (setting up a basic web server in Express, to name an example) are much like learning forms in that you need to approach them step by step, one sub-problem at a time. Everything you do is based in skill, whether it be segueing from a low side-kick with your left leg to a high punch with your hand or returning a copy of an array in JavaScript without modifying the original array. This takes deliberate practice on your part. This is not a surprising take, and most folks know this.

However, many newer programmers overlook the value of seeking out masters in certain programming specialties and learning from how they approach the work. This is not only valuable in terms of learning new or improved techniques, but also in seeing what mastery in that field specifically looks like, so they can adjust expectations accordingly.  Also? Sometimes you *can’t* be reasonably expected to independently come up with the answer to a problem because you haven’t encountered similar problems. The example I give in the above paragraph about returning a copy of an array wouldn’t be at all difficult to someone familiar with functional programming techniques, but much more difficult to someone who isn’t. There’s nothing wrong with looking up answers provided you take the opportunity to break down the solution and learn from it, so you can add it to your toolbox of solutions for the future.

Kung Fu teacher with student

In a profession as bloated with learning possibilities as web development, I can’t over-stress the importance of keeping your personal goals and expectations down to earth this way. I watched Google Developer Expert Stephen Fluin give an Angular 6 demonstration in which he impressively hand-coded Angular boilerplate in notoriously difficult text-editor Vim, but still made the same temporary mistakes and syntax errors you or I make every day when programming. A good source of these demonstrations are often conference talks or long-form demos on YouTube, like this Twitch stream by Angular Style Guide author John Papa.

One last thing I’ll leave you with: as anybody who’s studied either martial arts or programming knows, it is hard work, and there are no shortcuts. But approaching them with a determined, positive attitude and a willingness to learn will make the path easier. See you next week!

Luke Skywalker, Pot Roast, and How to Approach Problem-Solving

Welcome to this Friday’s blog entry! You might have been expecting the second part of the primer to web development technologies, but it’s not quite ready yet. Instead, here is the first of many one-off entries about the attributes a great developer needs!

Luke Skywalker and the Cave of Evil

Luke and Yoda
There is a striking scene about halfway through the film The Empire Strikes Back. Luke Skywalker has been training with Jedi Master Yoda on the swamp planet Dagobah. During a break in training, Luke notices a cave that is obviously strong in the Dark Side of the Force.

Luke:  “What’s in there?”

Yoda: “Only what you take with you.”

Luke prepares to enter the cave, putting on the belt with his lightsaber. When Yoda cautions him that he won’t need the weapon, Luke ignores him and heads into the cave. Inside, he is confronted with a vision of Sith Lord Darth Vader. He engages him and wins, striking his helmet off. The helmet hits the ground and explodes, revealing……Luke’s face.

Grandmother’s Pot Roast Recipe

Pot Roast
I once read an apocryphal story about a woman who was preparing a recipe that had been passed down from her grandmother. When she had all of the ingredients in front of her, she couldn’t help but be puzzled by one particular instruction: why in the world did the ends of the pot roast need to be sliced off?

The woman phoned her mother, who said that she had no idea why the ends were cut off; that’s just how her own mother did it. The woman then phoned her grandmother, who was able to definitively answer the question: “Why did I cut the ends off? Because it was the only way I could fit it into my old oven!”

The Point

In the first example, Luke Skywalker failed the test of the Cave of Evil because he ignored his teacher and entered armed for combat, contrary to the way of the Jedi and all but begging for the worst possible outcome in a place that would prey on negative emotions. In the second example, a small modification to a recipe made necessary by the physical limitations to the grandmother’s oven was arbitrarily passed down as integral to the recipe, never questioned until the granddaughter thought to do so.

When solving a problem in web or software development, it’s important to take a step back and make sure that you are approaching the problem with an open mind. Doing so ensures that you’re taking into full consideration the context of that particular problem, and holding a healthy skepticism towards past solutions for that and other problems. This is true on a large scale (What framework would be best for this project, given the demands of the project and the resources available?), and a smaller scale (This algorithm is using a lot of processing power. Can this be refactored to run more quckly and still do what’s required of it?). The old saying about every problem looking like a nail to someone with a hammer is particularly relevant to developers; the ability to bring a variety of approaches and tools to a problem is an integral one to us. Until next time!

Dev Diary, Entry #0

Picture of a Diary

Welcome to my development diary! This will be a supplemental feature on this blog discussing in depth the work I do, the subjects I am currently learning, and the challenges and little victories I run into along the way!

So what does a typical day look like for me at the moment?

  • A portfolio website I am working on for a freelance client
  • Building out a guitar practice tracking application in Angular 6 as practice in full-stack development.
  • Learning about MongoDB, advanced CSS, and SSH from Udemy, my current favorite learning resource.
  • Reinforcing and improving overall skills on Free Code Camp, which just went through a huge, comprehensive overhaul with lots of new material!
  • And of course, working on this blog!

Coming soon in the first entry: Where I’m at in all of the above!

 

 

 

Self-Taught Developer’s Survival Guide: What Even is Web Development?, Part One

Let’s answer that question right away and not keep you waiting! Web development is the practice and craft of creating websites and applications for distribution and use on the internet. For the first real entry in this blog, I’m going to give a basic overview of the major technologies used in web development, and what they do. At the most basic level, all of these technologies operate by taking input and outputting it in a certain manner, though they go about that differently, with varying levels of complexity. Let’s get started!

HTML

What is it?

HTML stands for HyperText Markup Language, and it is one of three core languages of web development. A markup language essentially takes input and tells the software “please take this input, and render it with certain qualities as dictated by the instructions contained in this tag”. For example, let’s look at a heading tag in HTML

HTML elements are enclosed within two tags, as seen above. There are some elements that can go in self-closing tags, but we will go over those as we come across those in future entries. The symbols telling the browser how to render that particular element are identical, save for the forward-slash symbol seen in closing tags.

The above example tells the browser to render text on a page as the largest heading, then the second largest heading possible. There are tags for many types of text, tables to contain data, different types of lists, and web forms. I’ll be talking about these in detail in upcoming blog entries. HTML is the absolute foundation of a web application, and the easiest technology out of the core three languages to learn.

What does it do?

In addition to telling the web browser to render input in a certain way, it forms the basic architecture of a web-page or application by forming the DOM, or Document Object Model. The DOM is a lot like the blueprint or scaffolding of a building, dictating size, shape, and other fundamental details. I’m going to discuss the anatomy of a basic web page in two weeks, and go into much more detail about HTML pages and the DOM there.

CSS

What is it and what does it do?

CSS stands for Cascading Style Sheets, which are used to dictate the appearance of HTML elements. CSS looks something like this:

h1 { font-family: serif; color: blue }

You first declare the HTML element to target as the selector, which the h1 tag acts as in the preceding example. A declaration is enclosed within a block marked by curly braces (you can have one or more declarations within the block) and is comprised of a property and a value. In the above example, the first declaration has font-family as a property and serif as a value. Putting all of that together tells the browser “Render all h1 elements on the page with a font of serif”. CSS is like the parts of a building that goes over the girders: brickwork, paint, windows, carpets, etc.

At first glance, CSS may appear to be as straightforward or even simpler than HTML, but it is deceptively complex when you factor in default styles from a particular browser or the element itself, how certain CSS rules interact, etc. The positioning and layout of elements with CSS can be infamously thorny, though recent innovations like Flexbox and Grid have helped make this much more logical. We are going to go through this in a lot of detail over the coming weeks, and I will navigate you towards a (relatively) painless approach to learning CSS.

JavaScript

What is it?

JavaScript is a full-fledged programming language that happens to be the only full-fledged programming language that the web browser understands. As some of you might be aware, JavaScript (hereafter abbreviated in this piece as JS) is NOT the same language as Java, despite the confusing naming convention (I’ll be writing about JS’s chaotic early days in my first entry dedicated exclusively to JS). You can do basically anything in JS that you can do in any other major programming language such as C#, Java, or Python.

JS began as a tool to add functionality to web-pages that has blossomed into a varied suite of tools including front-end frameworks (Angular, React, Vue.js), NoSQL data-visualization libraries (D3), databases (Redis, MongoDB), and Node.js for server-side and command line JS use. There is a lot to learn about JavaScript, and we’ll be talking about a lot of that in the near future.

SQL

What is it?

SQL (short for Structured Query Language), is a language that powers databases. Using SQL, you can create, read from, update, and delete (these are frequently called CRUD operations) from databases and the information they contain. SQL has been around since the 1970’s and has a very accessible syntax that reads like complete sentences in English.

I will note that while SQL is not technically one of the major technologies required for the web, I think you should learn it, and learn it well. It will give a strong introduction to database concepts that will be tremendously helpful, even for database stacks that don’t utilize it.

Other Languages I won’t be discussing

There are other programming languages out there used on the web, such as Ruby, Python, Java, PHP, etc. I won’t be delving into these as JavaScript is my area of expertise, and I don’t want to stray too far from that.

Thanks for taking the time to read this! Next week: How these all fit together and how information gets transmitted on the web!

Welcome to the Self-Taught Developer’s Survival Guide!

Hi there! I’m Michael, and I’m a web developer from Boston. I’ve been studying web development for a few years, and I just made the transition from my old day job to concentrate on development full-time. The main focus of this blog will be to provide guidance, advice, and other resources to newer developers so that they can get the most out of their learning experience, and avoid some of the time-wasting mistakes that I’ve made (and still make!) along the way. Additionally, there will be some bonus content discussing non-development topics that influence and inspire me. Watch this space for major entries every Friday, and welcome aboard!