(„• ֊ •„)

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

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.

—

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

--

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.

--

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.

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

--

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

--

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