Forem: JavierCunat

An Intro to DOM Manipulation

JavierCunat — Mon, 11 Jan 2021 03:58:26 +0000

Hello Enthusiasts of the Computer Science World!

What is DOM?

Document Object Model, we need DOM to change, get, add, or delete HTML elements. The DOM is something the browser creates to allow us to modify the HTML and CSS. DOM works along with its partner a JavaScript Engine, each browser has one of these to look at the JavaScript file, read it line by line and execute. When first learning this I thought to myself well, how do these even tie together? The answer is that now we can use JavaScript to talk with the DOM, so in essence a web browser has a window object, the major parent of a web page that has a property document that specifies what should get displayed, to decide what to get displayed the DOM reads the HTML and CSS, finally the JavaScript that is read by a JavaScript Engine reads though it and if it ever needs to change anything JavaScript can speak with DOM and modify the HTML and CSS. Soon you can start manipulating DOM to make your projects more interactive.

Example of how DOM would look like as explained:

Now that we know that the web page Document is an object with attributes and properties which we can access and modify them. For example the most simple yet highly compulsory methods that we need to use are the Selector and Query methods to change, add, or delete whatever that we want for to be displayed and available to human eye wandering over our project.

First we have the Selector Method

document.getElementByTagName("any element")
//Put any TagName for example "h1" so the console returns it

document.getElementByClassName("any class element")
//Put any class element in the html file so the console returns it

document.getElementById("any ID element")
//Put any ID element so the console returns it

Next we have the Query Method you can choose your preference.

document.querySelector("anything")
//Selects first element of any tagname
//Keep in not that if you decide to put a class or id you will have to use the CSS tpyes such as the # for id and . for classes

document.querySelectorAll("anything")
//Selects all elements of any tagname
//Same rules apply

How to Find and Change Attributes

document.querySelector("anything").getAttribute("anything");
//Gets the attribute of any certain element you call

document.querySelector("anything").setAttribute("anything");
//Gets and changes the attribute of the element you called

Changing Styles

document.querySelector("anything").style.background = "blue";
//I used background but you can change any type of style
//This is an *okay* way of changing the CSS but it would just be like changing CSS from HTML so lets look at better ways

anything.className = "anything"
//This would change your element to a different class

document.querySelector("anything").classList
//Gives you all the attriubtes in the element you called for
//This classList will help us accomplish much more

document.querySelector("anything").classlist.add("addanything")
//This adds to our element any attribute that we want

document.querySelector("anything").classlist.remove("removeanything")
//This removes any attribute from the put element that we want

document.querySelector("anything").classlist.toogle("anything")
//This just alternates the attributes between true and false useful for something like switches

So far we have learned that we should use query selectors to grab the element and change the styles with our newly found classlists. Now lets use one that's even more useful, innerHTML.

document.querySelector("anything").innerHTML = "anything"
//this changes the actual html of any element you desire

These which we have just learned are basic methods to Manipulate the DOM.

Finally I would like to introduce you coders into DOM events, DOM events basically notify you when something has happened in your page. Events give you everything and anything through the event interface and can be combined with functions to gain additional information which is what will do.

Example

//While making a website we can create a button in html and manipulate its action in Javascript adding whats called an eventlistener

button.addEventListener("click",function() {
   console.log("click is working") // to see if working
}
//Click is also an event which when the user clicks on the button it returns the notification from the console.log

References for more events can be found here: https://developer.mozilla.org/en-US/docs/Web/Events

That's it! Although this is basic information they are crucial fundamentals and you can go beyond limits with just these few methods and events creating a riveting and amusing project, good luck, don't forget to work hard!

How I started JavaScript

JavierCunat — Sun, 06 Dec 2020 17:55:42 +0000

Hello Enthusiasts of the Computer Science World!

What is JavaScript?

JavaScript can be the biggest step you can take in your developer career, however when first starting JavaScript it was the hardest thing to grasp, I remember being confused and frustrated along the way. Although this is true I'm here to tell you this is the right option and you need to stick through it, just like learning any language with enough time and practice you will become fluent. Lets stay strong and stay determined.

JavaScript was created in 1995 by the Netscape web browser, it was a way to add actions to websites, JavaScript is like the verb of a website, call to action. In 1995 it was a way to beat the competition, JavaScript became the standard also called ECMAScript when it was first introduced. Every website nowadays uses an excessive amount of JavaScript for example, adding something to your cart on Amazon, signing in to your account in any website, liking a post on DEV, virtual reality, robotics, this is all made possible through JavaScript. This one skill will take you very far into your career and opens up a lot of possibilities, however take things step by step and think simply that JavaScript is just a file that you can write instructions to a computer telling it to do as you desire and code.

Principles of JavaScript

First lets talk about JavaScript types, there a seven types or primitive values , you can open and try these commands in any console, example go to any website, right click, inspect element, open console:

JavaScript Types	Examples
Number	2+2 = 4
String	"Hello" + "World"
Boolean	Represents and Gives either True or False
Undefined	Used when nothing is assigned to a variable
Null	the value represents the intentional absence of any object value
Symbol	returns a value of type symbol, has static properties that expose several members of built-in objects
Object	objects are containers for named values called properties or methods they follow name:value pairs

Secondly we have JavaScript Comparisons, these come in very useful with Booleans and they are very simple to understand as they are literally just comparing any type to another:

JavaScript Comparisons	Examples
!==	3!==3 the ! basically means not, therefore 3 doesn't not equal three would return false
===	3=3 would not work therefore always 3===3
>=	3>=3 three is greater than or equal to three would return true
<=	3<=3 three is less than or equal to three would return true
>	3>3 would return false
<	3<3 would return false

Next you would look into JavaScript Variables now this is when JavaScript starts to get fun, this is how a program starts to remember things. A variable stores something and we can access that content through it for example:

var post = "This is my blog about starting JavaScript"
// Type in post now in console 
post
"This is my blog about starting JavaScript"

These variables are super important and can hold any type of content here are the different ways of calling them:

JavaScript Variables	Examples
var	var= "hello" the first and basic way to declare a variable
let	let= "hello" the new and improved version to declare a variable
const	const="hello" unlike the other two this variable you cannot modify its not interchangeable like others, hence its constant

Fourth on the list is JavaScript Conditionals, these conditionals are to control and make decisions that you have written in your code, there are a few:

JavaScript Conditionals	Examples
if	basically if would say if this is right then right true
else	if its anything other than the if or later on else if then finally run this
else if	the computer would run after the if the else to see if that is correct to run that

For example:

var name = "Billy"
if (name === "Billy") {
   alert("hi Billy!");
}

P.S. All alert() does is make a pop up for the user to display that information that it is correct so the computer will return a pop up saying HI Billy! when running in console.

Afterwards there are three logical operators in JavaScript. Although they are called “logical”, they can be applied to values of any type, not only boolean. Their result can also be of any type. Let's take a look:

JavaScript Logical Operators	Examples
&&	The AND operator is represented with two ampersands &&. AND returns true if both operands are truthy and false
"//"	OR is meant to manipulate Boolean values only. If any of its arguments are true, it returns true, otherwise it returns false
!	The Boolean NOT operator is represented with an exclamation sign ! Converts the operand to Boolean type: true/false. Returns the inverse value.

Finally we have JavaScript Functions these are the most important values you will learn in JavaScript to execute everything, they are pieces of code that perform actions, without them JavaScript wouldn't really do anything these actions can preform one or multiple. All functions are followed by () these call the function and then are {} these are the arguments, what's given to functions. These are different types of function:

JavaScript Functions	Examples
var a = function name() {}	function declaration
function name () {}	anonymous function
return	this returns a value in a function, it's important to have this to make sure the function acts the way we want it to
console.log()	the Console method log() outputs a message to the web console

Function Explanation Diagram

Hopefully now you have a better understanding of JavaScript and realize that it goes a lot further than just these principles and fundamentals which you should practice and master to continue your path smoothly. I hope it wasn't as bad as you thought because at first I really did, and if you're still not there continue practicing, make fun simple projects I believe those maximize your understanding and comprehension in a not so frustrating way. Thank you for reading and remember to keep coding!

What it takes to become a Web Developer

JavierCunat — Sat, 14 Nov 2020 14:53:05 +0000

Hello fellow enthusiasts of Computer Science!

What is a Web Developer, how do I start?

The internet has grown exponentially since the beginnings of the 20th century, due to this substantial increase everyone uses the internet, naturally this creates a huge amount of Web Developing jobs. Nowadays, web development has become one of the most attractive best-paid career choices in the modern world. What these people do is write lines of complicated code using a variety of languages, its a quite difficult job because you have to know understand a language such as English and translate it into a language that a computer understands. These workers take a lot of time and effort and requires an intricate understanding of a variety of different programming languages and how they are used. Furthermore different types of developers specialize in different areas which we will talk to a further extent later on. The possibly best way to start in this new world would be obviously a professional career in college, however thanks to internet and many new platforms developed you can learn most aspects in online courses. You would like to familiarize yourself with the fundamentals of everything, this seems overwhelming but not to worry many things tie together. In essence I want to promote the idea that if committed any one of you can earn a three digit figure income with hard work and dedication, and although it sounds like a cliche trust me and the process it works.

The Start

Lets commence your journey! Now comes that part about hard work, don't worry most subjects wont bore you, if you like this type of stuff these sections should fly by. I have provided you guys with charts, do research on these topics for not to long to start thinking like a Developer and their Basic Fundamentals.

Branch	Child Elements	Examples (Most popular)
Basics	Editors/IDE	Vs Code
Basics	Git and Github	Get Familiar
Basics	Terminal Commands	Git Bash/Terminal
Basics	Internet	How Websites work
Basics	HTTP/HTTPS	Get Familiar
Basics	Domain Name Servers	GoDaddy.com

Once becoming familiar on all these basic fundamentals you would like to move on to the Front End,because all that wont get you a job yet :(, however it is good to have this foundation. Front end is the path i recommend if you want to want to become a Web Developer whether or not if you are interested in Front End or not understanding is critical. A front end developer are the once that say what should i display in the website? This is where things get intresting and areas were you can get a job! Lets get to it!

Branch	Child Elements	Examples (Most popular)
Front End	HTML5	File that Displays Text Learn
Front End	CSS3	Styles the Displayed Learn
CSS3	CSS Layout	FlexBox/CSS Grid/Bootstrap
CSS3	Preprocessors	Saas
CSS3	Organizing CSS	Atomic CSS
Front End	JavaScript	Fundamentals Learn
JavaScript	Frameworks/Libraries	React
JavaScript	Frameworks/Libraries	State management (Redux, Apollo)
Front End	JavaScript	Component Libraries
Front End	JavaScript	SSR
JavaScript	Helpers	Babel, ESlint, Prettler
Front End	Reponsive/Mobile First Design	Learn
Front End	Package Management	NPM Reistry
Front End	JAMStack	Static Sites

If you have learned about all these and know how to use them and build projects with groups that you should have learned along the way you have done it! Now this is a vast amount of knowledge many people quit so dont be one of them and make it through once you do you can earn yourself a job position. Lets talk more about what to do once you have the knowledge and practice down.

Process of getting a Job and Types of Jobs

Getting the Interview

What if you don’t have enough experience? Most people don’t love resumes, however without a resume you cant get an interview. And in order to create a good resume you need to put something on it to show you have great experience. I understand that though you may not have any experience since your just getting started but I have a solution, right now it seems like you may have no hope since your just a beginner without work experience. Experience doesn’t come just from working at a company, there are many ways that your can demonstrate experience without a past job. Here are the things I suggest you do to get that interview.

Getting the interview requirements	What about them
GitHub	Good Profile with almost daily use
Website	Simple Website putting important information about yourself
1-2 Big Projects	Shows Complex understanding important to make stand out
Blog	Good to show you are in contact frequently with computer science world/problems

A good tip is that you don’t want to go into that job that you know everything about already, you do not want to do things which you already mastered. What you should try to do is get a job where you know the area but not perfectly to then perfect it and move on to a higher position, like this continuously.

Finally here are a few different Job titles in the Web industry which meet interest you in taking a look at.

Job Titles	Information	Salary
Web Designer	Deciding and implementing how websites look and work	Average Salary:$40-70k
Front End Designer	Focused on HTML,CSS,JavaScript deep skill on core technologies	Average Salary:$62-82k
Web Developer	Focused on back-end work, languages like PHP, ASP, Ruby, Python etc, medium skill in database/server work	Average Salary:$42-91k
Full Stack Developer	Combination of front and back end work, high-end job	Average Salary:$80-110k
UI Designer	Really good at design-tools-of-choice with light HTML and CSS Skill	Average Salary:$48-90k

Everything to know about CSS Grid!

JavierCunat — Tue, 10 Nov 2020 14:38:49 +0000

Hello Enthusiasts of the Computer Science World!

What is CSS Grid?

CSS Grid is an element in the world of CSS that seem to appear out of nowhere and gain popularity rapidly, which makes us think what is the reason for this exposure? As we are used to these kind of things in the web development world, many of us end up being skeptical about trying something new and seeing how things really work.

My personal background starting with Css-Grid was in a school project, we had to in about a week or less create a website making full use of this new engaging property. As my typical luck in school I messed up the whole project and only to realize it was the last day to turn it in. Recalling this memory from the back of my head to make sure my fellow coders don't give up as we know coding can get stressful, however the outcome is worth the suffering. Furthermore, I started with my project, first you would most likely want to start with knowing that Css-Grid as you can guess is a css property element. If you want to code your whole website with Css-Grid I suggest doing something like this body{ display:gird; }, this makes our whole body of the website take the property of the grid system. From here I provide you the resources and definitions with examples necessary to create your website remember you do NOT have to use all to make your website responsive and successful, good luck and do not fear the unknown!

Important Definitions

Grid Layout- This is a way to divide a page into major region or sections, or a way of customization in terms of size, position, layers. Like a table, the grid layout enables the creation of columns and rows. However it makes it simple because you dont have to imply floating or positioning.

Grid Container- In CSS using the grid-template-rows and grid-template-columns defines how many rows and columns there will be, also adjust the width and height, however you would also put a container div element in CSS like this.

<div class="container">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
</div>

Grid Item- A grid container contains grid items, by default it has one grid item for each column, in each row, but you can obviously style this and change it, the items would be the span elements on the example ontop.

Grid-Template-row- CSS property defines the line names and track sizing functions of the grid rows. (Try using fr as sizing it makes it simpler its about same thing as saying 20% but facilitates when trying to change sizing. )

Grid-Template-column- CSS property defines the line names and track sizing functions of the grid columns.

For Template-Columns and rows it would be best to apply something like this to the body to apply sizing and Css Grid to your whole page:

/*Play with the fr to get spacing */
body{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    min-height: 100vh;
}

How we can implement this in our daily coding!

Explanation

Many are more visual learners therefore, I myself created a Halloween themed website layout making the use of the CSS grid. It would be best to first do a simple layout like this one to then put content inside of it. Making these sections such as a nav, hero section, gallery, and footer will facilitate a lot of things and make your website look professional. Using all the definitions seen above I made this possible and you can too try it out yourself here are a few guidelines and always remember to stay positive and do great!

Html

CSS

Figma

Website Link:
https://repl.it/join/tvzzlmno-javiercunatt