What I’ve learned about coding for now
A summary of what I’ve learned and how coding evolves constantly.
Hey! It’s me again, now as a developer student. I would like to tell you about my experience as a dev student before moving to Vancouver and how is it now, studying the same but more specific. This story started in June 2018 in Spain, when coincidences of life brought me to study a web dev program focused on HTML, CSS, and Javascript. I have to say that I was looking to study a program related to this area in order to become a more complete professional in my area: advertising and graphic design.
Starting from the bottom, this first program let me learn some concepts and functionalities that are no longer valid or old-fashion. Here I go with some examples:
For HTML, we can find some obsolete tags:
<acronym>
What was this tag for? Just indicates what was the meaning of the acronym when the mouse was hovering the word abbreviated. Inside the tag, you have to add the attribute ‘title’ to describe the meaning. At present, this tag was substituted by the tag <abbr>, preserving ‘title’ as an attribute.
<blink>
This tag was perfect just to annoy someone because as the name indicates, makes the text blinking. At the moment, if you want to make any text blink, you’ll use animation on CSS or blink() method using Javascript.
<marquee>
Another 90’s cool tag which made the text scroll in any direction you want like those Windows old-fashioned save screens.
‘cellpadding’ or ‘cellspacing’:
These attributes were part of the <table> tag. Both indicated the cell spacing on the table. Now you can set this feature using margin or padding on the CSS.
Also, CSS is evolving as well and there are some properties less in use:
float
Float property place the element tag on the left — float: left — , right side — float: right — , in the beginning — float: inline-start — or in the end — float:inline-end — of the container element tag. Sometimes it can be unprecise so, it is preferable to use flexbox or grid properties which are better for responsive websites.
And don’t forget about meta-tags:
http-equiv = content-language
This meta-tag property set the default language for the website. But not anymore! You can use charset for that purpose.
At the present, as a student here in Vancouver and looking at all these obsolete or non-necessary tags and properties, I can say that there are new ones that substitute the old ones for a better purpose. Let’s take a look at the HTML and see what’s new for me.
<i>
I didn’t know much about this label, just that it is used for text. Concretely, to make it italics. What I didn’t know was you can use this tag for icon implementation. Then, if you want to add some style, you can use CSS and add the text properties. Easy peasy!
<blockquote>
This tag is for long quotes. You can implement it inside a <p>. You can use the attribute ‘cite’ which indicates the source where the quote comes from.
<q>
The same as <blockquote> but for short quotes. And yes! You can use ‘cite’ as an attribute as well.
Let’s go with the CSS:
‘Grid’
‘Grid’ is a pretty new property for me. With ‘flexbox’, both are the natural evolution of ‘float’ — more responsive, more organized, and more effective.
‘Grid’ is better when organizing content in different columns and rows. You don’t need any position or any display: block or inline. Just start with a display: grid — this element is going to be the container. Then, choose how you want your grid from a bunch of properties. I’ll mention some of them:
- grid-template-area sets the grid structure by mention the area per line:
- grid-template-columns and grid-template-rows properties create columns and rows with a specific dimension by using fr — for fractions.
- grid-column-gap and grid-row-gap for defining the gap between cells columns or rows. There is a grid-gap property that is used as a shortcut to define both properties.
- justify-items and align-items can be found as a flexbox property. The first one aligns elements horizontally. The second one aligns elements vertically. Both are applied in the main container but affect the children's elements.
- justify-content and align-content modify all the elements together.
And the list can continue…
‘Flexbox’
Flexbox substitutes some properties like float or inline / block properties. Flexbox is more useful for organizing the content in one column. The very basic: by default it has a horizontal orientation. To set flexbox, just type display: flex. Then, you can set all its properties. I’ll mention some of them:
- flex-direction as the name says, set the main axis for the content and it’s horizontal by default and you can control the order of the elements. You can choose between row, column, or the same but the opposite: row-reverse and column-reverse.
- flex-wrap makes the elements stay inside the container… or not. You can choose between no-wrap — inside the container, all the elements are the same line — , wrap —it can be outside the container and in different lines — , or wrap-reverse — the same as wrap but the opposite direction.
- flex-flow is a shortcut for flex-direction and flex-wrap.
‘filter’
Filter establish some properties for images such as contrast, saturation, blur, shadows, and more. It’s perfect if you are not a masterpiece in Photoshop or you don’t want to retouch the images.
‘clip’ and ‘mask’
You can create a mask shape for an image. What is really cool about clip-path is when animates the mask layer, creating different shapes. The difference between these two is that mask is more for images and the clip is more for vectors. However, it can be sometimes confusing because of the similarity. Here’s an example of how you can animate an image by using clip-path property:_:
Obviously, I can’t forget SCSS which is a more organized, efficient, and simple way to write CSS. It can generate a CSS automatically, coding some characteristics that CSS doesn’t have such as variables, mixins, or functions. Some remarkable aspects of SCSS:
- Child elements can be nested inside parent elements.
- It can take time to learn how it works and also because it’s a new CSS extension and takes time to compile all the SCSS into CSS. There’s an example of SCSS and CSS:
As you can see looking at the image, this picture compares the code when using SCSS and CSS. It shows how automatically SCSS code is converted in CSS code. the code typed when using SCSS is longer than the result in CSS. This is more simple because there are some properties like the variables $font-stack and $primary-color are just only part of the SCSS which is kind of similaris to id or class functionality.
To sum up…
These are some examples of what I could learn before and at present about HTML and CSS. Some of them are not recommended or obsolete. Some of them offer a bunch of possibilities and enrich the code. To be more specific, this is a result of how our beloved World Wide Web Consortium (W3C) makes decisions about this pseudolanguage and others in order to improve, standardized, make it better, efficient, and can be adapted to all the changes that came every year from the hand of the web and technology.
You may ask:
“How does World Wide Web Consortium work?”
They organize different workgroups of experts that are focus on different specifications of the language and after some stages, they decide to implement this new functionality or recommendation.
Coming back to the concusion— So, being a professional in this field is a way to continue learning, studying, and improving all these changes in order to not stay behind. Also, you can see how this pseudolanguage has evolved in just two or three years since I started studying this field. Sometimes, it was like learning right from the start. And it will continue…
