cloudycodes
(„• ֊ •„)
javascript studies // 23
33 posts
Don't wanna be here? Send us removal request.
Last Seen Blogs
Text
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
821 notes
·
View notes
Text
~~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!（*＾-＾*)
25 notes
·
View notes
Text
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!!!!!
85 notes
·
View notes
Note
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! 🥰🙌🏾💗
197 notes
·
View notes
Text
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! 🤓
113 notes
·
View notes
Text
Essential HTML5 Tags for Web Development | Resources ✨
HTML5 Tags poster by me!
283 notes
·
View notes
Text
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
24 notes
·
View notes
Text
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
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 ヾ(_ _*)
22 notes
·
View notes
Text
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 (•̀ᴗ•́ )و
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
86 notes
·
View notes
Text
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
86 notes
·
View notes
Text
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.
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!
2K notes
·
View notes
Text
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
80 notes
·
View notes
Text
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
9 notes
·
View notes
Text
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 ヾ(_ _*)
22 notes
·
View notes
Text
tbh cool stuff, i wanna learn more ab design but haven't rly looked at resources 😵💫
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 （⊙_⊙）
23 notes
·
View notes
Text
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 （⊙_⊙）
23 notes
·
View notes
Text
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
4 notes
·
View notes