#TumblrTextTint | Explore Tumblr Posts and Blogs

izicodes · 1 year

Text

Turning TumblrTextTint Into An Extension - Part 2

I finally did it!

I told myself around a month ago when I completed my TumblrTextTint web app that I would make an extension so it would be easier for users to access the text formatter since using an extension is better than going to the actual page everytime you want to get the code!

It was difficult at first because I just thought "I'll just use the same HTML, CSS and JavaScript code I used for the webpage verison, now for the extension!"... but that didn't work properly so I had to take time to alter the code everywhere so it could fit in a small little box... and then the JavaScript code wasn't working so I had to fix that too 😅💔

Overall an unique but not so unqie experince! Now I will try and figure out how to upload for other people to use on Firefox's Add-ons!

161 notes · View notes

xiabablog · 1 year

Text

@hezalife I wanted to make a post about this because my answer was longer than what I could put in a reply comment! The comment was about this post I made about the project ideas I have saved in my notes app on my phone!

Okay to answer the question, I get a bunch of ideas from literally everywhere. Here are some of the ways I come up with ideas:

Hobbies/interests I have and think of a way to make a web app/program/web page out of it. E.g. I like playing Minecraft, Pokemon, Stardew Valley, The Sims etc so I would thing of ideas around those games and create a programming project out of it.

Get the stereotypical “beginners” project ideas and expand on that. Calculator? How do I make it better, more advanced! To-do list? Don’t like basic, add more and more features to it. Text-based RPG console game? Make it more complex. Stuff like that.

Same with the other point above but add a theme to it. Hello Kitty version (my go-to theme since I started programming…)

I follow people on GitHub and Twitter that share their projects and I think of something similar or get inspiration from them and think “Okay, how do I make myself and better?” Sometimes not even better but how would I tackle that project myself.

What would make my life a little bit easier - I made TumblrTextTint generate the code needed for formatting colours in text for me. I coded it and I use it. Don’t care if someone in the past did it already, I sat down and coded my own one. It’s all experience and a good feeling in the end~!

Since I’m all for experimenting and gaining experience with programming, I also follow some tutorials on YouTube and from that’s programming blogs online. I don’t like following the instructions exactly, I like to add my own twist!

Get stuck? Use those online generators to give you a prompt on a theme or a whole idea for a next project.

I have a blog and I like to add pages and changes to the theme a bit so I make a whole ass project out of it. “Build a navigation page”, “Build an About Me page” etc.

Things I use a lot and create a project idea from it e.g. I have a lot of Tumblr-related project ideas because I use Tumblr a lot. Find something you use and do a lot and create an idea from it to work on.

Hope this answers your question!! Sorry, it’s a long post!

#codeblr #progblr #studyblr #coding #programming #computer science #web development #projects #coding projects #studying #code #comp sci #learn to code #coding blog #css #html #javascript

280 notes · View notes

izicodes · 1 year

Text

Turning my old project into an extension

It's getting there! This is so cool to me, I'm excited! Once I am able to figure out to alter the CSS and JavaScript code to suit the extenison, I'll try making it public~!

I just want to learn how to make extensions, and my old projects will be my ginuea pigs for testing! This time I am using my TumblrTextTint project!

>> Slight problem: Colour pickers don't work properly with extenisons (or I just haven't figured it out yet 😅) so I deleted the colour picker section and just have the end-user rely on having the HEX code to use. Maybe I'll use a dropdown menu for other colour picking options e.g. rgba values. I'll think about it!!

#xc: project logs #TumblrTextTint #codeblr #studyblr #progblr #programming #coding #javascript #html css #tumblr #comp sci #devlog #computer science #webdev #firefox #extensions #firefox extensions

71 notes · View notes

izicodes · 1 year

Text

Building TumblrTextTint - Log #7 (Completed) 🎉

◀ previous log

Hiya, I am super excited to share with you that I just completed TumblrTextTint! It took me between 4-5 days to complete it and I'm proud of myself for sticking with it until the end.

Initially, I just wanted to add some colour to my blog posts on Tumblr, but I wasn't satisfied with the default options available. That's when I stumbled upon this JS Fiddle (l i n k) that makes the prompt's text's colours into gradients using two colour prompts (credit to the creator!). From there, I got inspired to create my own version of it and TumblrTextTint was born!

I designed the application on a piece of paper and pen and used that sole image as a reference throughout coding the HTML and CSS. Whenever I was stuck on an idea being implemented, I would google and watch similar YouTube tutorials on how to code the idea.

Throughout the process, I continuously worked on the Readme.md and instructions.md files in the repo to make it look "professional" but fun at the same time. I want anyone who uses my app to feel confident and supported.

I also want to give thanks to the people who encouraged me throughout and wished me well on the project. Your support means everything to me!!

In the future, I plan to add more features to the page such as making the text bold, italic, etc in the code generated. I am also thinking about using increasing my experience with WPF in C# by converting TumblrTextTint into a mini desktop app.

>> Instructions on how to add the code to your tumblr blog post is in this link: LINK

Thanks for reading and I hope you give TumblrTextTint a try!

⏩ The GitHub repo | The web application

What have I done?

Completed the web app

Did a release(??) - first time doing it, unsure if I did it right!

Worked on the Readme.md

Worked on the instructions.md

Added gifs tutorials on how to use it and add the code to your post

51 notes · View notes

izicodes · 1 year

Text

Building TumblrTextTint - Log #4

◀ previous log

Continuing the application again! I made big progress this time!

I styled the colour picker to match the theme of every other elements. It was super tricky that I had to look at 5 StackOverflow questions about styling the picker. I could have easily added a library but I don’t know how to use JavaScript libraries like Pickr which has prettier colour pickers, so I’ll have to make do with doing everything in vanilla JavaScript. The struggle is real.

Next main thing I made were the error messages! A lot of if-else if-else statements were involved but I think I handled and tested every possible input that the user could enter in the HEX code input box e.g. the user forgets to add the # at the beginning of the code. I still need to add more error handling of the input box but will add that later!

Lastly, I added the main JavaScript code behind everything. So, when you input the text in the first text box, pick a colour, and click the “Tint my text!” button, the code is then generated!! I did it! I did the main part of the whole application! That’s it!

Not really, I still have other design + extra code to add so it’s still not ready for use! 🥰👍🏾

What have I done?

Styled the colour picker

Added JS code to the 1st and 2nd buttons

Added errors messages for the textboxes

Added a message when you click the copy button

That’s all! Thanks for reading and soon I'll post about the next update! 😅🙌🏾💗

50 notes · View notes

izicodes · 1 year

Text

Building TumblrTextTint - Log #2

◀ previous log

Logging entry numero dos of me building my little application! Still no JavaScript at this point but I am styling more on the elements! At this point, I still have to figure out how to do the error messages and the retrieving of the colour codes from the colour pickers.

I just went into his project always blindly without proper planning because I was so excited to start it!...

What have I done today?

Added styling to the textboxes, textarea, and radio buttons

Fixed the logo a bit

Fixed the readme file a bit more

Planned the JS code to make the page actually work

That’s all! Thanks for reading and soon I'll post about the next update! 😅🙌🏾💗

41 notes · View notes

izicodes · 1 year

Text

Building TumblrTextTint - Log #3

◀ previous log

Continuing the application! I did some work on the CSS of the app, I wanted to make it look cartoon-ish (and did a terrible job at it). But everything seems to be aligned properly on the desktop version.

I haven’t started on he media queries for smaller screens. I want to get everything working in terms of the JavaScript code and then finally I will work on smaller screen fixes.

What have I done?

Completed the styling of the whole page

Aligned the elements to the centre properly

Planned the error messages for the HEX code textbox

That’s all! Thanks for reading and soon I'll post about the next update! 😅🙌🏾💗

53 notes · View notes

izicodes · 1 year

Text

Building TumblrTextTint - Log #1

Hiya and welcome to me creating a new project even though I have 2 outstanding personal projects, work task to do and 4 outstanding assignments from Emmy coding class to do! This will be fun, I promise! Let me talk about it!

Background Info

I don't know about you but as a Tumblr user, I scroll on my dashboard and sometimes see "pretty" posts and by this I mean they use cute colours on their posts, pictures and text symbols such as '⋆⋅��⋅⋆ '. And I'm always thinking "Aww I want custom colours on my text... pretty..."

Don't get me wrong, Tumblr does give you colours to choose from but none of them suits my blog's aesthetic. Like none of these work:

There is a tool already that I use to give me the custom colours but in a gradient form! It's good if I want to use gradients in my text, but it is a problem if I want to use just one colour - it generates a very long code that could be condensed into one! So, I’m making my own tool! It’s mainly thought of the idea for me to use but wanted to share it here as well for the bloggers that want to add colour as well to their text! I will keep using the gradient tool for gradients but one colour kind of thing, I will use my tool.

Important Info: If there is an application out there that does the exact same thing as what I am coding up right now, that's great!! - I'm still going to continue coding my application just for the experience and something that I would be using a lot because I like custom colours on my text posts.

What have I done today?

Sketched the wireframe on my book

Set up a GitHub repository for the project

Designed the logo + favicon

Got the basic HTML structure and CSS styling down

That's all! Thanks for reading and wish me good luck on making this! So far, I'm having so much fun and I'm learning by making frustrating mistakes 😅🙌🏾💗

28 notes · View notes

izicodes · 1 year

Text

Building TumblrTextTint - Log #5

◀ previous log

All today I worked on the responsiveness of the web app! This is my weak point because I am absolutely terrible with media queries and I always leave it till the last because I just don’t want to deal with it 😅

It would be a lot easier if I implemented a responsive framework like Bootstrap but too late for that now because if I just add the <link> in now, everything will just change and I can’t be bothered to fix an issue like that right now SO we make do with what we have and try my best! 👩🏽‍💻🤞🏾

What have I done?

Used media queries for responsiveness

21 notes · View notes

izicodes · 1 year

Text

Turning TumblrTextTint Into An Extension - Part 3

Wednesday 5th April 2023 | previous post

I am super happy with my progress in making browser extensions! I am using my TumblrTextTint as my guinea pig project to convert into an extension and things are going great!

Firefox

The first browser I tested was Firefox, which is my default browser! I made a few versions of the extension and now it works amazingly! It's now uploaded to the Mozilla Add-ons website - which you can view here!

Chrome

The next browser I tested on was Chrome. It is similar to how you upload extensions on Firefox, but I had to change my .json and JavaScript code multiple times because I had to use a newer version of the manifest.json file (Manifest V3) per Google Chrome's request. Besides that, everything ran okay from the developer side so I uploaded it and now I'll have to wait for the review!

Unlike the Firefox version (because it wouldn't work on Firefox for some reason), I made an onboarding page for when the user installs the extension, they get to see a page to say the installation is a success and guides the user to the instructions page.

Microsoft Edge

The laptop I use for work has both Chrome and Microsoft Edge on it so I thought why not learn how to upload it on Microsoft Edge Addons too! I read and it said that Chrome and Microsoft Edge are connected in a way so minimal changes to your extension's code are needed. Now I've uploaded it and now I waiting for a review to say it's published!

Comparing the different browser's process experience

Being that I used Firefox first, I had to learn everything from scratch! The Developer's Hub, where you organise your extensions and themes, is pretty straightforward! Easy to upload and update new versions of your extension. It took around 9 hours for my extension version 1 to be approved but whenever you update it, it would only take around 10-20 mins for nice approval! So, a good 8/10!

Google Chrome came in confusing me. It talked about my manifest.json file's version is out of date and that I need to switch from manifest V2 to V3. Fair enough, the documentation for the migration was somewhat confusing so I had to use places like StackOverflow for help. Plus I decided to add the onboarding page I wanted to use for Firefox on this version of the extension so a bit of extra work! The Developer's Hub is easy to use too! I'd rate the experience a 6/10 - you do need to pay a one-time payment of $5 (£4) to be allowed to upload any extension to the Web Store!

Lastly, Microsoft Edge was also a bit confusing on where their actual 'create an extension' page was located. I looked everywhere for 20 mins looking for it and turns out it was on the hamburger menu to the left... silly me for not looking there. You do need to sign up to their Microsoft Partner Center to be able to upload (free). Besides that, everything was the same and now I am waiting for the approval! I'd rate the experience an 8/10 too!

Thanks for reading! 🥰🙌🏾💻💗 I'll share some links involving this mini-project! :

The GitHub Repo for TumblrTextTint - LINK

The official website for TumblrTextTint - LINK

Want to add the extension to your Firefox browser?* - LINK

Want to learn how to make your own extension for Firefox?** - LINK

* I will make add the links for the Google Chrome and Microsoft Edge when they are approved and published

** I will make Google Chrome and Microsoft Edge versions of the tutorial in the near future!

#xc: project logs #TumblrTextTint #codeblr #studyblr #progblr #programming #coding #tumblr #comp sci #devlog #computer science #web app #technology #programmer #webdev #firefox extensions #extensions #learn to code #learning

11 notes · View notes

izicodes · 1 year

Text

Building TumblrTextTint - Log #6

◀ previous log

Ooo a gif demo! Yes yes, I’m super proud of myself so far! I know it’s a super small and niche program but this has been a great experience watching the application break multiple times but being able to fix it multiple times. This is an important part of the learning process and will only make me a better programmer in the long run.

I'm going to keep working greatly and enjoy my time building this web app!

What have I done?

Fixed a lot of errors with the error handling

Organised the JS code file - variables in random places hurt my brain

Worked on the media queries for phones to work

7 notes · View notes

izicodes · 4 months

Text

My 2023 Projects

Wednesday 3rd January 2024

I thought it would be cool to share some of the projects I made last year that I liked and enjoyed working on! Most of them were small projects, some were projects I built straight after I learnt a new concept and a few are discontinued (I won't finish them anytime soon)!

I really hope, which I know I will because it's natural for me at this point, to make lots of more cool projects! This year, I want to make more with other people! Coding alone is cool and all but with other people I get more inspired!

Lastly = always remember to build projects that you're interested in. Projects you will have fun working on for a while. Every single one of these projects I've made, I was interested in somehow. And I had fun!!

Anyhoo, check out the projects below~! 🙋🏾‍♀️😊🖤

TumblrTextTint

Basically a formatter for Tumblr posts by adding custom colours to your text! Even learnt how to make FireFox extensions so I could add it as an extension to my browser - link 1, link 2

Web Odyssey

I looked at old Windows GUI on Pinterest one day and decided to recreate the GUI with HTML, CSS and JavaScript! - link 1, link 2

Cat Fact Generator

For one of the projects I did for the #3Days1Project challenge, I created a cute cat generator. Learnt how to work with APIs and a CSS library (Pattern.css) - link 1, link 2

Studyblr Valentines Gift 2023

It was valentine season in the Studyblr community and I participated! I made a poem webpage for a studyblr who was learning Russian! (I don't know anything in Russian but for a couple of weeks I learnt some of the poems!) - link 1, link 2

Saint Jerome Tribute Page

I made a page for my favourite patron saint, Saint Jerome, for his feast day (Sept 30)! I haven't had time to complete it fully and there's no live page for it but I did make posts about it! - link 1

Trigun Quote Generator

Just finished the Trigun anime series at the time so I decided to make a project for it for the #3Days1Project challenge! The anime is so good, it is my 2nd favourite (JOJO comes 1st place) - link 1, link 2

Froggie To-Do

Just came from learning the absolute BASICS of React.js, so I wanted to test my skills so far so I made this project! Shared it on my blog and some people started using it for studying (which made me so happy!) and it became a mini open-source project because random people started adding mini features to the app! Very special project for me! - link 1, link 2, link 3

#codeblr #coding #progblr #programming #studyblr #studying #computer science #tech #comp sci #my projects showcase #2023 wrapped #coding projects #projects #studyblr community #computer academia

75 notes · View notes

izicodes · 2 months

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

izicodes · 7 months

Text

Thursday 12th October 2023

Had a good morning and I hope everyone liked the New Year’s resolution tracker I made! I know it’s only October but I like doing things like this early since it’s makes me feel more productive and love planning the future!

Anyhoo, today I have a mate help me learn C++ randomly because I helped him code some pages in his website so in return he said he would teach me C++! This is so random I don’t really have a use for C++ right now however C++ is on my ‘programming to-try list’ so I’m like why not~? I’ve learnt about pointers, references, RAM and heaps(???)!

🍂 What's something you've worked on that you're most proud of?

I think it would be the TumblrTextTint and working on the #3days1projects challenge! I spent so much time on the first project so I feel like it’s my baby! The set of projects I made during the challenge were super fun so yeah those are my most proud ones (I probably have other but can’t think from the top of my head properly)!

🍂 What do you do/ what would like to do with programming? Or is it just a hobby?

I learn it to build websites and work on projects I like! I primarily focus on designing and building websites but if I find a cool project that I want to be a part of but it's a programming language I am not used to, I will learn it to start working on that project. In the future I would like to see how I can use my programming skills in Robotics but that's for way into the future!

{ Codetober challenge | previous post }

⤷ ○ ♡ my shop ○ my twt ○ my youtube ○ pinned post ○ blog's navigation ♡ ○

#xc: 100DoC #codetober #codeblr #coding #progblr #programming #studyblr #studying #computer science #tech #100 days of code #100daysofcode #study challenge #studyblr challenge

33 notes · View notes

izicodes · 1 year

Text

April Study Challenge - Day 2

• Sunday 2nd April | 🌐 link to challenge's info page

“Three goals for April?” 1) Complete at least one personal project 2) Create a CRUD based project 3) Complete the SheCodes Plus course

What I did today

📖 Reading: Buckland’s Book of Gypsy Magic

👩🏾‍💻 Coding: Turning my old project TumblrTextTint into a browser extension

🎧 Listening to: Because We Want To - Billie Piper

#wilstudiesapril #april study challenge #codeblr #progblr #studyblr #coding #programming #studying #coding study #goals #computing #comp sci #study aesthetic #study challenge #computer academia #tech #motivation #productivity

60 notes · View notes

izicodes · 1 year

Text

April Study Challenge - Day 5

• Wednesday 5th April | 🌐 link to challenge's info page

“What initially sparked your interest in the subjects you take?” Programming is my main subject and it’s the ability to build, code and play with cool things. I know right now I am more focused on learning Web Development but I do want to take a course in Electronic & Robotics because my true passion is to be able to program mini cute robots and even build one to have at home. So, knowing I can achieve those dreams by learning how to program, I started learning to program!

What I did today

📖 Reading: Buckland’s Book of Gypsy Magic

👩🏾‍💻 Coding: Converting my TumblrTextTint into other browser extensions!

🎧 Listening to: Dear Diary, - Bring Me The Horizon

40 notes · View notes