(„• ֊ •„)

javascript studies // 23

[izzycodes]

I've seen a lot more people coming on Tumblr who are starting their coding journey, which is great! If you're just starting out with coding, here are a few tips that can help you get started and improve your skills:

1. Start with a language that is simple and easy to learn - These languages are designed to be beginner-friendly and will help you get a feel for the basics of coding. E.g. Python

2. Work through tutorials and online courses to learn the fundamentals of programming - There are many free resources available online that can help you get started, such as Codeacademy and Khan Academy.

3. Practice, practice, practice! - The more you code, the better you will get. Try to solve problems and write small programs on your own to improve your skills.

4. Don't be afraid to ask for help when you need it - There are many online communities, forums, and subreddits where you can get help and support from other programmers.

5. Keep learning and expanding your knowledge - As you gain more experience, try to learn new languages and technologies to broaden your skillset and improve your ability to solve complex problems.

I hope this helps and happy coding! 💻👍🏾❤️

*Advice from developers on Twitter and YouTube and my instructors

[vexacarnivorous]

~~daily challenges~~

we've added daily tasks to our server! in order, the tasks were to make a rock paper scissors game, program code that would draw a flower, and make a shopping list (if you press save list, it saves it to a separate text file. yes, i made mine saveable). hopefully there'll be many more to come!（*＾-＾*)

[cloudycodes]

intro to prototypes in javascript

i read that the concept of prototypes is very important in javascript so i took it upon myself to read and watch videos until it clicked. here’s a super concise explanation on what prototypes are.

javascript is a prototype based language, which means that object properties and methods can be shared through generalized objects that have the ability to be cloned and extended.

note that it’s CRUCIAL to understand objects first before getting into prototypes because every object in javascript has a prototype.

when trying to access a property or method, javascript first searches the object itself and if it’s not found, it will search the prototype. if no match is found, javascript keeps searching until the end of the prototype chain is reached.

the end of the prototype chain is Object.prototype. all objects inherit the properties and methods of said object. anything beyond the end is null. idk why i thought about biology n subatomic particles but i thought about how cells are made of molecules n molecules are made of atoms n atoms are made of subatomic particles… i literally suck at bio

v v basic example:

simply put, x is an empty object that inherits from Object. this means that the prototype chain is one link long.

the y array has inherited everything from Array.prototype, like all the methods and properties. it has also inherited everything from Object.prototype as its end chain. everything in javascript is built upon the Object.prototype.

in order to get/set the prototype, you can use Object.getPrototypeOf or Object.setPrototypeOf. many tutorials show you __proto__ but then say to not use it so… i will refrain.

tldr;

all javascript objects have that internal prototype property. objects can be extended and will inherit those properties and methods of the prototype of their constructor

prototypes can be chained and objects will inherit through that chain

--

hi it's been so long i am finally back from vacation and doing things!! if i missed or misunderstood anything do let me know!!! i feel like i forgot a lot of stuff and i missed a lot of notifications madge

also i'm considering changing this acc to @/cloudycodes n creating a @/cloudylogs for smth else... tumblr secondary blogs pls allow commenting liking n following pls i have different passions i want different tls!!!!!

[izzycodes]

hi hi! love your blog! I am also working on building sites for my portfolio but am a little stumped on how/where to deploy them. would you mind sharing what you are using for deployment? thanks!

Places to Deploy Your Website

Hiya! I know a few places I've tried in the past and some I am yet to try but I know other developers use them!

GitHub pages

GitHub Pages is a free static site hosting service that allows you to publish your website directly from a GitHub repository. It supports HTML, CSS, and JavaScript, as well as Jekyll, a static site generator. I used GitHub pages a lot since I use GitHub to keep all my repositories.

Replit

Replit is a cloud-based development environment that provides an integrated IDE, code editor, and hosting platform all in one place. With Replit, you can easily create and deploy web apps, games, and other projects in multiple programming languages such as Python, HTML, CSS, and JavaScript. I use Replit a lot too for my other much smaller projects that I can’t upload on GitHub to run the program online!

Netlify

Netlify offers a free plan for static site hosting that includes features such as continuous deployment, custom domains, and SSL encryption. It supports HTML, CSS, and JavaScript, as well as serverless functions and other backend technologies. 

Heroku

Heroku offers a free plan for hobbyist developers that allows you to deploy up to 5 applications. It supports many languages and frameworks, including Ruby, Node.js, Python, Java, PHP, and Go. Heroku allows free hosting for small applications.

Firebase Hosting

Firebase Hosting is a free service that allows you to host and deploy your web app or static content to a global content delivery network (CDN) with SSL encryption. It supports HTML, CSS, JavaScript, and other static assets. It allows free hosting for small applications.

Surge

Surge is a free static site hosting service that allows you to publish your website with a custom domain or a Surge subdomain. It supports HTML, CSS, JavaScript, and other static assets. Allows free hosting with unlimited bandwidth.

Each of these free deployment options has its own cons such as: 

Its lack of server-side functionality

Limited database support

The cost of advanced features

Limited control over the infrastructure

May not be suitable for more complex websites or applications 

However, for small projects, I think you’ll be fine with the free options!

Hoped this helps and good luck with your websites’ deployments! 🥰🙌🏾💗

[tenaciousdeveloper-deactivated2]

JavaScript Visualized 👩‍💻👨‍💻

✨♻️ JavaScript Visualized: Event Loop

🔥🕺🏼 JavaScript Visualized: Hoisting

⚡️⛓JavaScript Visualized: Scope (Chain)

🚀⚙️ JavaScript Visualized: the JavaScript Engine

🎉👨‍👩‍👧‍👧 JavaScript Visualized: Prototypal Inheritance

💡🎁 JavaScript Visualized: Generators and Iterators

⭐️🎀 JavaScript Visualized: Promises & Async/Await

This series on DEV by Lydia Hallie about JavaScript gives you a good visual explanation of some of the JavaScript internals and advanced features that some beginners may not know about.

It's always good to not only learn a language but go deep into it to learn more about how to use it more effectively. It makes you a better programmer and software developer, and it's just plain cool to learn more about technology and how things work under-the-hood.

Enjoy! 🤓

[izzycodes]

Essential HTML5 Tags for Web Development | Resources ✨

HTML5 Tags poster by me!

[cloudycodes]

march 2023 coding goals

finish the intermediate html/css section this section is all on display: grid so i’m gonna go thru the curriculum and do the final project, which is an admin dashboard. i rly wanna commit to finish this one in its entirety bc i lowkey always get lazy finishing up choosing good fonts and color after i get all positioning right.

—

i’m LATE grr i haven’t posted lately bc html/css to me is easier to learn hands-on than to reiterate/write... going out of the country for 2 weeks at eotm to mid april so i need to spend time planning and getting all my stuff ready and i basically did not hit my goals in feb so i'm gonna aim for smth more practical

[cloudycodes]

february 2023 coding goals

keep doing algorithm practice since i will be working with html css most of the month, i’ll work to make sure i brush up on javascript algorithm practice

get through as much as i can on the odin project intermediate htm/css i hope to get to finish the sign up form but i have a suuuuper busy month (・_・;)

post more content on concepts i leaned a lot towards posting my algorithms because i was working on a project for a while but now that i have to read so much content from TOP curriculum there will be more to learn and write about

--

i think thats it so gl everyone on their studies!! love seeing new content tbh omg ALSO i don't check my notifs often i'm sorry if i ignored u ヾ(_ _*)

[cloudycodes]

wow i did a whole lot of NOTHING this month... updates below

keep doing algorithm practice i think i did algorithm and javascript practice like 3-4xs this month max, i started exercism and got through like 5 problems and did maybe 2 codewars problems

get through as much as i can on the odin project intermediate html/css i finished the signup form (for how much of it i wanted to do) honestly i was not in the mood to sit here and cram css rn so i basically just practiced like css units and styles that i never used

post more content on concepts grrrr i barely posted this month my b a d but taking notes on css and html felt redundant to me so i only rly paid attn to what i felt like was completely new/actually confusing

-- pls i hope march is somewhat more productive i'm not sure what goals i have just yet but i'll think about them and update tmr ( ˘ ^˘ )=3 all the content i've seen is crazy tho everyone on here is so innovative i am inspired

[cloudycodes]

sizing in css

short n sweet list of the more commonly seen units in css for sizing n their differences

pixels

an absolute (unchanged) unit of measurement that is based on the physical size of the screen. one pixel is one dot on your screen. since pixels are an absolute unit, they can cause issues with responsiveness on different screen sizes and resolutions.

i would use pixels for logos and images for exact sizing or if i was working with any design tools, as design tools use pixels as their default

em

a relative unit of measurement based on the font size of the parent element. to elaborate - 1em is the fontsize of the element, meaning if the parent font size is 16px, then 1em would be 16px. em is scalable and responsive to your parent font size, but can be difficult to deal with in layout design

em can help control an area of design, like if i wanted to scale the type in a specific area, i would use em.

rem

another relative unit of measurement based on the font size of the like root or html, but does not change like the complexity of the parent font size. if the font size of the root element is 16px, then 1rem is equal to 16px. rem is also scalable and responsive, but are easier to work with in layout design due to their fixed reference point

i would use rem over em if i'm working on layout design as a whole since you can a global size and space in your root and having that consistent value in your root makes your layout more predictable in regards to size

vw/vh

or viewport width/viewport height. one vh is 1% of the height of the viewport. voh units can help ensure that the design of a page is responsive to different screen sizes, as it scales to the height of the viewport. it's recommended for creating full-height elements such as hero images, sections, and sliders that adapt to the viewport height

--

help me i am so behind

[tenaciousdeveloper-deactivated2]

I really like the way you explain things @cloudylogs, it's very simple and clear. Thank you for sharing your notes with us as you continue learning. 👍

[cloudycodes]

ty!! i like keeping my notes concise and clean because i have prob the worlds worst attn span when it comes to rereading notes/long articles LOL thanks for reading/following along (•̀ᴗ•́ )و

[cloudycodes]

sizing in css

short n sweet list of the more commonly seen units in css for sizing n their differences

pixels

an absolute (unchanged) unit of measurement that is based on the physical size of the screen. one pixel is one dot on your screen. since pixels are an absolute unit, they can cause issues with responsiveness on different screen sizes and resolutions.

i would use pixels for logos and images for exact sizing or if i was working with any design tools, as design tools use pixels as their default

em

a relative unit of measurement based on the font size of the parent element. to elaborate - 1em is the fontsize of the element, meaning if the parent font size is 16px, then 1em would be 16px. em is scalable and responsive to your parent font size, but can be difficult to deal with in layout design

em can help control an area of design, like if i wanted to scale the type in a specific area, i would use em.

rem

another relative unit of measurement based on the font size of the like root or html, but does not change like the complexity of the parent font size. if the font size of the root element is 16px, then 1rem is equal to 16px. rem is also scalable and responsive, but are easier to work with in layout design due to their fixed reference point

i would use rem over em if i'm working on layout design as a whole since you can a global size and space in your root and having that consistent value in your root makes your layout more predictable in regards to size

vw/vh

or viewport width/viewport height. one vh is 1% of the height of the viewport. voh units can help ensure that the design of a page is responsive to different screen sizes, as it scales to the height of the viewport. it's recommended for creating full-height elements such as hero images, sections, and sliders that adapt to the viewport height

--

help me i am so behind

[code-es]

Coding resource!

exercism.org

A free website where you get specific problems to methodically learn small concepts of a programming language. Do 10 minutes to 1 hour every day, and then you will keep practicing every day, and you will be able to use the skills you learn in your real projects. They walk you through the problem all the way, and it's a super good way to learn!

[cloudycodes]

i started using this site recently and i actually really like it!! i've been busy so i'm not super far in or anything but the problems are pretty fun and interesting so it keeps me pretty engaged - it's also really helpful with refactoring your code in readable ways.

[cloudycodes]

css positioning

css is not my forte there are so many different things my brain is fried but i just read about positioning and wanted to clarify the different values

the position property specifies the type of positioning method used for an element. we have static, relative, absolute, fixed, and sticky

position: static;

default value. follows the normal flow of the document. you would only normally apply static if you are trying to forcefully remove some other positioning that got applied to the element.

position: relative;

elements are positioned according to the normal flow but offset relative to itself based on values of top right bottom left. so if you just put position: relative with no values, there are no changes at all. but if you were to put like top: 10px, it’d move 10px down from its original position.

setting position relative introduces z-index, and the default forces the element to appear on top of any statically positioned element. this is not changeable.

positive: absolute;

element removed from normal document flow. you can use absolute to position something at an exact point on the screen without disturbing other elements.

you want to consider before using this, it can easily mess with the flexibility of your site

position: fixed;

positioned relative to the viewport. you tell it where to stay and it’ll stay fixed there as you scroll.

consider that this means it literally will not move and may potentially block other elements as you scroll.

position: sticky;

this is probably the most unique one of the values. some people call it a hybrid of relative and fixed positioning. the element is considered relative positioned until it crosses a specified threshold, it behaves as fixed positioned. do note that the element moves with its parent block.

you wanna use sticky when you want something to scroll into view and then stop once it reaches a certain point.

--

sry super text heavy i tried to tldr

[cloudycodes]

html tables

i was on twt the other day and ppl were all talking about how much they do not enjoy html tables LOL but lemme take a shot at it rq

apparently people used to use the table element for layouts before css layouts came to be, but this is bad bad bad now because

the accessibility for visually impaired users is lower. screen readers cannot interpret the tags and are more complex than css, so it causes confusion

more complex markup = harder to write, maintain, debug

unresponsive and require extra styling to effectively work between devices

i went through the mdn tutorial and finished their final assessment on creating a table on planet data. the assessment is here if you wanna try. i don’t wanna post my full code but here is basically all i needed to know when creating the table.

here are the table attributes i learned

<table></table>: creates a table <caption></caption>: the title of the table <th>..</th>: table header <tr>..<tr>: table row <td>..<td>: table data cell <rowspan =""><colspan ="">: specifies the number of columns/rows a cell should span for example, if one <td> takes up two columns, it’d become <td colspan=”2”> <colgroup><col>..<colgroup>: defines a group of columns within a table <th scope="col | row | colgroup | rowgroup">: takes the value to determine whether a header cell is a header for a column, row, or group of columns or rows

final tldr review questions

what is a table? data in the form of tables and columns

why is it a bad idea to use html tables for page layout? reduces accessibility for visually impaired users, lack a logical layout for a page, and are not responsive

what are caption elements useful for? i called it a title for the table earlier, but it is also helpful for screen readers to get a general idea of the contents of the table before having their screen reader render the whole thing

what is the scope attribute? the scope attribute specifies what the header cell is used for, taking values row/col/rowgroup/colgroup. they make no visual difference, but it helps screen readers detect the header’s purpose.

that's really it they're like a bit irritating to make ngl but not to difficult?? just tedious

[cloudycodes]

february 2023 coding goals

keep doing algorithm practice since i will be working with html css most of the month, i’ll work to make sure i brush up on javascript algorithm practice

get through as much as i can on the odin project intermediate htm/css i hope to get to finish the sign up form but i have a suuuuper busy month (・_・;)

post more content on concepts i leaned a lot towards posting my algorithms because i was working on a project for a while but now that i have to read so much content from TOP curriculum there will be more to learn and write about

--

i think thats it so gl everyone on their studies!! love seeing new content tbh omg ALSO i don't check my notifs often i'm sorry if i ignored u ヾ(_ _*)

[cloudycodes]

wow hi sry it’s been a minute. i finished the odin project foundations course so i’ve hopped to the javascript stack, currently working on the intermediate html css section.

what are svgs?

scalable vector graphics. basically easy to scale to any size and retain their quality without changing the file size. vector graphics are built on formulas that are more adaptable to resizing, while raster graphics are built with pixels, making them susceptible to quality loss

they’re often used for icons, charts/graphs, large simple images, patterned backgrounds, effects via filters.

there are two ways to embed them:

you can use the html <img> tag or link with css background-image

you can also paste the contents directly into the code without linking it to an image. this can allow for altering via css and javascript

why use svgs (or why not)??

PROS

defined using XML (extensible markup language), which is html like syntax used for APIs, RSs, spreadsheets and word editing software

makes it easy to integrate into html files without changes

CONS

not good for textured/photo realistic images

you don’t really want to create them from scratch - you’ll more often find yourself copying or downloading from an image editor, like adobe illustrator or figma

here's an excerpt of some simple svg code

some of these attributes are pretty recognizable, but a simple breakdown:

xmlns: XML namespace that specifies the dialect of the svg, imagine like defining the language you're using

viewbox: defines the aspect ratio and origin

class, id: same as html, allows us to target an element

circle, rect: click here for elements that are defined by the svg namespace

--

wow hi sry it’s been a minute, studying w a full time job is so inconsistent sometimes zzzz BUT i finished the odin project foundations course so i’ve hopped to the javascript stack, currently working on the intermediate html css section. the next couple posts are prob gonna be more html css oriented （⊙_⊙）

[lode5tars]

Other pros: For single colored SVGs you will often be able to change colors:

<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 3.51262L1.63636 5.05578C5.70273 1.22103 12.2973 1.22103 16.3636 5.05578L18 3.51262C13.0336 -1.17087 4.97455 -1.17087 0 3.51262ZM6.54545 9.68526L9 12L11.4545 9.68526C10.1045 8.40444 7.90364 8.40444 6.54545 9.68526ZM3.27273 6.59894L4.90909 8.1421C7.16727 6.01254 10.8327 6.01254 13.0909 8.1421L14.7273 6.59894C11.5691 3.62064 6.43909 3.62064 3.27273 6.59894Z" fill="#AB5050" fill-opacity="0.78"/> </svg>

<path d="M30.6 0H10.2C8.33 0 6.8 1.53 6.8 3.4V23.8C6.8 25.67 8.33 27.2 10.2 27.2H30.6C32.47 27.2 34 25.67 34 23.8V3.4C34 1.53 32.47 0 30.6 0ZM25.5 8.5H22.1V17.629C22.1 19.788 20.57 21.777 18.428 22.049C15.555 22.44 13.141 19.924 13.668 17.034C14.008 15.164 15.674 13.719 17.578 13.6C18.649 13.532 19.618 13.872 20.4 14.467V6.8C20.4 5.865 21.165 5.1 22.1 5.1H25.5C26.435 5.1 27.2 5.865 27.2 6.8C27.2 7.735 26.435 8.5 25.5 8.5ZM1.7 6.8C0.765 6.8 0 7.565 0 8.5V30.6C0 32.47 1.53 34 3.4 34H25.5C26.435 34 27.2 33.235 27.2 32.3C27.2 31.365 26.435 30.6 25.5 30.6H5.1C4.165 30.6 3.4 29.835 3.4 28.9V8.5C3.4 7.565 2.635 6.8 1.7 6.8Z" fill="white" fill-opacity="0.5"/>

you can modify the attributes in red for example. And manually change color. SVGs are also useful for when using big background graphics since as long as they are inserted as SVGs and not images these will not lose quality.

One can open an SVG either with a code editor, but simple double click will often open them in a broswer page since these are read as code as contrary to images. And while making them yourself can be long, when getting designs directly from Figma can work, figma also has included a big amount of icon plugins that can be easily formatted and worked with and later exported as SVGs.

[cloudycodes]

tbh cool stuff, i wanna learn more ab design but haven't rly looked at resources 😵‍💫

[cloudycodes]

wow hi sry it’s been a minute. i finished the odin project foundations course so i’ve hopped to the javascript stack, currently working on the intermediate html css section.

what are svgs?

scalable vector graphics. basically easy to scale to any size and retain their quality without changing the file size. vector graphics are built on formulas that are more adaptable to resizing, while raster graphics are built with pixels, making them susceptible to quality loss

they’re often used for icons, charts/graphs, large simple images, patterned backgrounds, effects via filters.

there are two ways to embed them:

you can use the html <img> tag or link with css background-image

you can also paste the contents directly into the code without linking it to an image. this can allow for altering via css and javascript

why use svgs (or why not)??

PROS

defined using XML (extensible markup language), which is html like syntax used for APIs, RSs, spreadsheets and word editing software

makes it easy to integrate into html files without changes

CONS

not good for textured/photo realistic images

you don’t really want to create them from scratch - you’ll more often find yourself copying or downloading from an image editor, like adobe illustrator or figma

here's an excerpt of some simple svg code

some of these attributes are pretty recognizable, but a simple breakdown:

xmlns: XML namespace that specifies the dialect of the svg, imagine like defining the language you're using

viewbox: defines the aspect ratio and origin

class, id: same as html, allows us to target an element

circle, rect: click here for elements that are defined by the svg namespace

--

wow hi sry it’s been a minute, studying w a full time job is so inconsistent sometimes zzzz BUT i finished the odin project foundations course so i’ve hopped to the javascript stack, currently working on the intermediate html css section. the next couple posts are prob gonna be more html css oriented （⊙_⊙）

[cloudycodes]

2023 january 17, tuesday

codewars algorithm practice

not a lot of new informational content lately, kinda just grinding codewars n working on my calculator project. i think i’m gonna start the top javascript path next month so there are prob a lot more readings i’ll need to take notes on

your job here is to implement a function factors, which takes a number n, and outputs an array of arrays comprised of two parts, sq and cb. the part sq will contain all the numbers that, when squared, yield a number which is a factor of n, while the cb part will contain all the numbers that, when cubed, yield a number which is a factor of n. discard all 1s from both arrays.

time to dissect the prompt.

setting up variables: created an empty array for each sq and cb so i can later add the values needed. discard all 1s: easiest way would be to start my for loop at index 2, as no other value would have 1 s a cubic or square factor besides 1... output an array of two parts: created my return statement to be an array of the two abovementioned variables

now comes the actual loop. in order to check if any value yields a square or cubic factor of n, it must leave a remainder of 0. this is when the modulo % operator comes in handy. then, i just use .push() to add the value in question to the empty arrays i set up earlier

i went through a couple other problems today but more basic so i didn't bother writing so that is all thank u godspeed to all of u and ur studies