izicodes
IziCodes
21 | UK BasedFrontend Software EngineerPosts about me programming, tips, and resources!
1082 posts
Don't wanna be here? Send us removal request.
Last Seen Blogs
fynnisshit
☆ chaos in the making ☆
flitterly
Roaming in Between the Worlds of Sleep and Awake
litoria-caerulea
Frogs and Girls :)
cosmos-kitty
C o s m o s K i t t y
justcommander
The name's Just Commander
Note
Since you're reducing your social media presence, does that mean you'll be on neocities still or is that going too?
Hi, I’ve deleted my neocities yeah. I deleted my instagram (personal and coding one), twitter, dev.to, YouTube (privated my videos). The only ones I have open is:
Tumblr so because can have access to my resources I’ve shared in the past
GitHub (not social media but still) because of my old projects
22 notes
·
View notes
Text
Convert HTML to Image: A Step-by-Step Guide ✨
Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?
Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!
This is an old tutorial I made 🐼
💛 Set your environment
Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:
We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.
Your page should resemble the following:
As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.
💛 Using the html2canvas JavaScript Library
The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:
The steps to put the library in your project:
Visit the html2canvas website for more information.
Copy the CDN link from here
and include it in a script tag in your project's head tag in the HTML file:
That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.
💛 JavaScript Functionality
Here's the JavaScript code to handle the conversion:
In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.
I also put the button into a variable in const button = document.querySelector("button");
I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!
You can find similar code like this in the documentation of the html2canvas library:
What is happening here is:
We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)
Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc
Created an anchor/link tag, added the href attribute to imageDataURL
The download attribute is where we will give the default name to the image file, I added "dog.png"
Perform the click() function to the anchor tag so it starts to download the image we created
And that's it!
💛 The End
And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.
If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼
#my resources#coding#codeblr#programming#progblr#studying#studyblr#programmer#html#html css#javascript#neocities#coding tips#html5 tutorial#html tutorial
86 notes
·
View notes
Text
Monday 11th March 2024
The thing I avoided so much during this project, I am facing bit by bit. Thankfully for the downloading the files part, I found a Zip creation library that would put the files into a .zip file so for the 'Download All' button you won't get a spam of popups to download 5 files in one go (my initial plan... I know, terrible idea)!!
Later today, I will complete the 'insert user's inputs and selections into the custom-made files' functionality for the download buttons = the hard part for me.
** It's not hard hard, I'm just lazy and wish it would magically get done by itself :p
For reference, this was my old personal tags extension I made 5 months ago (made a post about it). Just making it better and for other people to use~!
#taggerator#personal projects#programming#coding#studyblr#codeblr#studying#comp sci#progblr#tech#pink study#pinkcore#codeblr pink girl#pink aesthetic
51 notes
·
View notes
Text
Not enough Lua developers in the wild... we need more of them because Lua is so cool.
#codeblr#coding#studyblr#studying#programming#comp sci#progblr#memes#lua programming#lua#tech#I love Lua so much
78 notes
·
View notes
Text
Sunday 10th March 2024
The copying and pasting is working now! It was quite simple really but I had to go to Church, so that's why it took so long for me to post! I was literally thinking of the code during service (sorry God-)!!
I'm doing all of this and avoiding the real "tough" part for me which is the conversion of the user input to a local extension (so, no this won't go on the Chrome store or anything like that)... I'm just lazy-
Don't mind the Grammarly icons, she's annoying
#taggerator#personal projects#programming#coding#studyblr#codeblr#studying#comp sci#progblr#tech#pink study#pinkcore#codeblr pink girl#pink aesthetic
13 notes
·
View notes
Text
Sunday 10th March 2024
Added the 'copy tags' button to the extension. So, on the site when you enter the list of tags you use frequently in your Tumblr/social media posts, they would be grouped and made into their own copy button in the actual extension~!
I haven't gotten to adding the functionality to it yet but the design is done~!
#taggerator#personal projects#programming#coding#studyblr#codeblr#studying#comp sci#progblr#tech#pink study#pinkcore#codeblr pink girl#pink aesthetic
25 notes
·
View notes
Text
Sunday 10th March 2024
I made the theme selection section! Unfortunately, Pink isn't for everyone, so I wanted to tailor it to the unfortunate people who don't like pink (I'm joking~)! The colours are basic but I have plans to upgrade it and include a custom theme creation part!
Next, I want to work on creating the JSON, HTML and CSS files based on the user input and selection!
#taggerator#personal projects#programming#coding#studyblr#codeblr#studying#comp sci#progblr#tech#pink study#pinkcore#codeblr pink girl#pink aesthetic
36 notes
·
View notes
Text
Saturday 9th march 2024
I started making the design for the extension. I want to make various themes with colours and emojis because I know not everyone would love the gorg cute pink theme!
The original website is built using React and Tailwind CSS for the styling, which is very easy to use. But, obviously and as far as I know, you can't build extensions using frameworks, meaning plain HTML, CSS and JavaScript are allowed. So, had to translate my Tailwind CSS classes into plain CSS... which I manually had to type up. There must have been an easier way of doing this but I guess I was too lazy to find out haha...
#taggerator#personal projects#programming#coding#studyblr#codeblr#studying#comp sci#progblr#tech#pink study#pinkcore#codeblr pink girl#pink aesthetic
17 notes
·
View notes
Text
Saturday 9th March 2024
I changed the design completely from the old one - I'm a sucker for that old Windows GUI style -_-
It's so lame but I got so happy when I figure how to make the moving text thing! Yeah, it's simple CSS animations but then again, I'm not too good at CSS animations 😭
Got the input boxes to work now! Coming along nicely~!
What's this project? It's a way for a user to convert text in textboxes and make a custom extension from a template I made. I think the amount of time into this project would be the same as my TumblrTextTint project~! Which I am excited for~!!
#taggerator#personal projects#programming#coding#studyblr#codeblr#studying#comp sci#progblr#tech#pink study#pinkcore#codeblr pink girl#pink aesthetic
16 notes
·
View notes
Note
Hello, I’ve been following your blog because it’s interesting to hear about your journey for coding and the absolute joy that I see as you talk about it. S o I wish you the best! And i’m curious, currently I’m training to be a health administrator. Is there any starting coding programs or any subjects in coding or programming that I can pick up?
Hiya!
First of all, thanks so much for reaching out and following along on my journey (4 years going strong LET'S GO!). It truly means a lot to hear that you find it interesting enough - that's exactly the feeling I hope to convey!
Second, courses in coding/programming in regards to Health Admin; from the top of my head, I would presume that data would be involved, so any SQL courses online would help! SQL is a fundamental programming language for querying and manipulating data stored in relational databases. Getting good at it could be a plus! (Always looks nice on a CV/Resume anyways~).
Python could also be good for data analysis. Also, look into Medical Coding and see if that's something you want to go into later - it's like if you merged healthcare with programming! I don't know courses from the top of my head but you can find courses on Udemy, Coursea, or even for free YouTube (more for SQL and Python) or buy a course that gives you a certificate at the end to add to your resume or LinkedIn in the end!
Good luck! 🌷
10 notes
·
View notes
Text
Lua x Electronics
: ̗̀➛ Lua is a beginner-friendly scripting language that is well-suited for individuals starting out in Electronics. A simple roadmap to learning it for electronics projects! It'll break down the learning process into clear steps!
Due to its lightweight and efficient nature, Lua is perfect for microcontrollers (tiny computers in electronics) with restricted resources. This language enables users to engage with sensors and manage electronic components such as LEDs and motors in various projects.
!! There are other more popular programming languages for getting into Electronics such as C, C++ and Python! I'm just promoting Lua because it's still a good language to start with~!
#my resources#coding#codeblr#programming#progblr#studyblr#studying#comp sci#computer science#robotics#electronics#lua#tech#studyblr community#cs academia#programmer#study tips
103 notes
·
View notes
Note
hey question!
im currently a data analytics major in uni and currently learning python! i’m currently doing well grasping the concepts with the reading and writing it down. however, i know its better to learn to code by actually..writing code.
I read that I should follow a random code (like a snake game or something) and then copy it and write it code for code but then change some things up etc (i hope that makes sense how im asking this)
is there any websites that show an actual code and then I can just copy and follow that to learn? or how should I go about learning to actually write code and not get stuck in “tutorial hell” ?
thank you!! sorry if this is a lot :)
Hiya!
When I was learning back 3 years ago, I did more the "watching videos + replicate the code" method to learning how to plan, build and deploy projects, even with the very beginner project videos! I didn't do much searching online for projects in maybe articles, blog posts, etc and replicate it. However, that was because I learn more in seeing than reading - that's why I'm bad at reading documentation(!) (I would search for video explainations to the documentations...).
I know on my blog I promote "don't idly watch tutorial videos all the time and actually start coding" kind of mindset but I'm not completely disregarding the benefits of watching such tutoiral videos. Seeing how other people's approach to a project idea is great! One project idea, hundreds of approaches to it!
: ̗̀➛ Tips:
Take notes while following tutorials. Write down what you learn and how you solve problems in your project. This will solidify your understanding and serve as a reference later.
Once you grasp the basics from a tutorial, experiment within your version of the project. Try modifying the code, adding features, and see what happens. This is where the real learning happens. LITERALLY HOW I LEARNED.
: ̗̀➛ Best places I can think of from the top of my head is to find projects on GitHub and maybe Dev.To by searching the project idea and someone must of done it or something similar and uploaded the project/talked about it in a blog post!
18 notes
·
View notes
Text
Thursday 7th March 2024
It's lunchtime at work and I am pausing my PHP studying to work towards this new project idea I came up with last night! This is my nth time programming a pink-themed project...!
Since it is a pink project, I obviously had to find a nice playlist to listen to while programming!
#taggerator#codeblr#coding#programming#progblr#studyblr#studying#pink study#pinkcore#codeblr pink girl#pink aesthetic#comp sci#tech
12 notes
·
View notes
Note
Hey Izzy! I learned about Lua recently but I have only used Python. Since you use both, which one do you prefer?
Hiya @thebrilliot 🌷
Honestly, I love both so much. Learning Python was my first programming language. I started coding in a weird path: HTML -> CSS -> Python -> JavaScript -> C# -> Lua etc. So, I still have that special bond with Python like that's my baby?
I'm a Python babygirl 𓆩♡𓆪
HOWEVER
I lovvvvve Lua, Lua is cute. Not only does it have a cute name like?? But I enjoyed it a lot when I was learning... how to make Roblox games (didn't make one).
So, I'm also a Lua babygirl 𓆩♡𓆪
Nowadays I use Lua more than Python! More for pseudocode usages, so simple and cool. But I prefer both honestly!
12 notes
·
View notes
Text
【☆】 Coding Study Tips
Some study info + tips on cramming coding/programming concepts~!
#izicodes tips#coding tips#codeblr#coding#programming#progblr#studyblr#study motiviation#study aesthetic#studying#studyspo#academia#study motivation#study inspo#study inspiration
251 notes
·
View notes
Text
Wednesday 6th March 2024 - [ Week 1 Day 4 ]
Today I studied primarily on Codecademy's "Learn PHP Skill Path" and still on the basics but it's pretty easy??? Programming languages have a trend of starting off relatively the same, each having small differences.
What I learnt today:
🩵 Defining Functions
🩵 Invoking Functions
🩵 Return Statements
🩵 More on Return Statements
🩵 Return Values
🩵 Returning NULL
🩵 Parameters
🩵 Multiple Parameters
🩵 Default Parameters
🩵 Pass By Reference
🩵 Variable Scope
💌 Day 4: What has been easy so far from learning PHP?
Like I said in yesterday's post, learning the basic fundamentals is fair easy because most programming languages start off the same~!
[ The challenge ]
#5in5weeks#study challenge#programming#coding#studyblr#codeblr#studying#comp sci#progblr#tech#programmer#php#study#study hard#studyspiration#night study#stay productive
26 notes
·
View notes
Text
Built a Mini Robot
Wednesday 6th March 2024
I bought a kit online a while ago because I felt like wanting to build something. And this is the lil robot that I made last night! She’s a rover kind of robot so she just zooms around!
I’m so glad I got to complete this kit and I’m already wanting to buy more to keep myself busy that’s not programming all the time haha 😅😇
#robots#engineering#programming#coding#studyblr#codeblr#studying#comp sci#progblr#tech#programmer#php#study#study hard#studyspiration#night study#stay productive
168 notes
·
View notes