#learn how to code | Explore Tumblr Posts and Blogs

izicodes · 1 year

Text

Coding A Simple Firefox Extension

Hiya! Today I want to share my experience creating a simple Firefox extension. I was a bit intimidated by the idea of creating an extension, but I was determined to give it a try! Been on my 'projects to-do' list for a long time! 😅

I found that the process was actually quite straightforward, and with some guidance from a couple of YouTube videos, I was able to create a working (temporary) extension in just an hour. My hope is that this post will serve as a helpful guide for anyone who is interested in creating their own Firefox extension~!

What exactly are we making?

We will be making a simple temporary extension - an extension that only you have access to e.g. end-users will not be able to use the extension. This is a way to test if your extension works and find issues. I might make another post on how to actually upload it for other people to use, but for now, this method is for you to use the extension.

This is the link to the official Mozilla Firefox 'Temporary installation' Guide' for extenisions - LINK

Now, for the steps into making the extension:

Setting up the development environment

Creating a manifest file

Adding a pop-up window

Attaching JavaScript functionality to a button

Load your extension in Firefox

Let's get started~!

Step 1 - Setting up the development environment

Obviously, you will need to have Firefox installed on your computer. You will also need a code editor, such as Visual Studio Code or Sublime Text, to write your code. I'm going to use VS Code.

In your code editor, create a new folder where you will store your extension files. You can name this folder whatever you like. For this example, I will call it 'Firefox Extension'. I also recommend adding the following files in the folder:

index.html (or in this case popup.html file)

icon image in .png or .jpg or similar formats

manifest.json - talked about in the next step

script.js

Step 2 - Creating a manifest file

The most important file I believe when creating an extension is the manifest JSON file. This file will contain metadata about your extension, including its name, version, and permissions. In your new folder, create a new file called "manifest.json".

This is the general structure of the file. The icon size you need to have is 48x48 pixel size image and then you can have others to be responsive to screensizes, I just added one extra. The 'browser_action' part includes the default icon image that will display an icon in the Firefox toolbar and the popup html file. In 'scripts', that is where we will add the JavaScript code to run.

Step 3 - Adding a pop-up window

The code simply displays the text "Hello World" and a button in the center of the window. I assume you're good at your HTML and CSS so I won't go into too much detail here but the CSS is in the style tags within the head tags and what we can see also is what is between the body tags - the 'Hello World' and the 'Click me!' button.

Don't forget to include the script tag at the end of the body tag so it'll link to the script.js file in your folder AND include "scripts": ["script.js"] in the manifest.json for the javascript code.

Step 4 - Attaching JavaScript functionality to a button

Again, I hope you very basic JavaScript. This code basically adds an event listener to the button with the ID "myBtn" (which is the button with 'Click me!' on it). When the button is clicked, it changes the heading 1 text from 'Hello World' to 'The button was clicked!'.

And that it! Done with all the coding part and now to upload it for you to use~!

Step 5 - Load your extension in Firefox

Open Firefox and type "about:debugging" in the address bar. This will open the Firefox Developer Tools page. Click the "This Firefox" section to the left of the page, then click "Load Temporary Add-on". Navigate to your extension folder and select the manifest.json file.

The extension is now loaded in Firefox! Click the icon in the toolbar to see your pop-up window!

Whenever you make changes to the extension, back on the Firefox Developer Tools page, click the 'Reload' button on your extension section and changes should show up!

I hope that this post has been helpful to you and that it has inspired you to create your own Firefox extension! 👩🏾‍💻💗 Remember, the most important thing is to have fun and experiment with different ideas - play with the colours or sizes or the javascript code! Don't be afraid to try new things and explore!!

Extra links that helped me learn:

How to build an extension for Firefox in less than 5 minutes [video]

Temporary installation in Firefox [webpage]

Thanks for reading 🥰💗

163 notes · View notes

code-es · 1 year

Text

Learn flexbox!

Although it is IMPOSSIBLE to ever get align-items vs justify-content right on the first try, getting familiar with how flexbox works will allow you to know at least one of them does what you want them to. If there's anything I've learned during my studies it's that development is much more about knowing you can do certain things and being able to google it when you don't know how, rather than having everything memorized. What you need to memorize you will memorize from practice, repetition and experience.

That being said: here are some (two) resources for learning flexbox!

Play Flexbox Froggy

This was such a huuuuuge help for me when learning flexbox. I completed all of the exercises once, and then I would use this as a guide and reference when trying to figure stuff out on my own projects. It's a great interactive way of learning, and it really simplifies and makes flexbox digestible. I recommend just crunching through it once, and you will be exposed to all the different ways of using flex! Then you will have in the back of your head what is possible with flex, and you will be able to recall this and maybe use the next resource to implement it if you don't remember all the keywords yourself!

CSS tricks - a complete guide to flexbox

This was recommended to me by a developer waaay back when i started studying, and it has saved me countless times. It's so good for referencing the different properties, with clear visual examples and a super easy-to-follow structure of the page. I have this bookmarked because of how often I use it.

Good luck in your studies 💻🐸

173 notes · View notes

anndcodes · 1 year

Text

day 21/100

i finished the first javascript project that consist in making a simple console rock-paper-scissors game that the user plays with the computer for 5 rounds and in the end it shows the final winner (the one with more points).

although it was simple, it was still a bit difficult and i struggled a lot, to be honest, but i'm glad that i finished and it's working pretty well.

i used functions, conditionals, methods to return random values, and case-insensitive inputs.

#codeblr #code #programming #codenewbie #progblr #javascript #100daysofcode #100daysofproductivity #studyblr #learn how to code #fronted #web development #webdev #21/100 #mine

68 notes · View notes

sannastudies · 2 years

Text

So ....I have finished my first week of my IT / Programming classes.

This week we focused on Java &, next week we will be doing Network Engineering & the weak after we will be doing Web Dev.

Then, the cicle repeats.

I have finished all my Week 1 & half of the Week 2 content, so I am ahead by a bit.

My instructor said I am diligent & among the group of those who are faster, which is nice. However I notice my weakness are my logical thinking skills - especially when I have to work with abstract variables.

However, I have also heard that this way of thinking can be learned and improved and we also learned the techniques of Pseudo Code & flow charts to better help us visualize stuff. I realized these tools help me a lot.

Yesterday and today I spent rather big amounts of time on 2 tasks - but I focused on doing them on my own as much as possible, with as little help as possible.

Since i am ahead a bit, I felt like it was important to take the time to sort these tasks out, so I can learn.

I also plan to practice more Java during the course of next week & this weekend, because I want to get a better understanding of the basics and core principles.

Summary of what I learned this week, in Java:

• common data types

• if, if else, else

• switch cases

• loops

• operators (+,-,..., &&, ||, ^ ,...)

• arrays

• pseudo Code, flow charts,..

I must admit, I felt very tired after every day - I physically feel that I have to think and concentrate a lot. More than in school and university, cause this is a way of using my brain and a way of thinking i havent used like this before.

Unfortunately this means I didnt have as much energy for other areas of my studies - However the long bus rides allowed me bring down my big pile of due NativShark Vocab cards.

I have a Programming-study date with a friend in 45 minutes, so I ll play some Genshin, get the tea ready & then its back to the keyboard, before i ll start the weekend.♡

#studyblr #study motivation #studyspo #study #studying #coding #learn how to code #java

2 notes · View notes

chloesimaginationthings · 3 months

Text

Michael teaches Gregory the old FNAF technique

5K notes · View notes

captainjonnitkessler · 1 year

Text

I truly, TRULY do not know how to say this, because the fact that I have to say it makes me feel like I am losing my grip on reality. But no, in the post-capitalistic anarchist utopia, I will not be relying on “autistic minecraft girlies” to be building inspectors because - and this may shock you - one of those occupations takes years of education in how to read and interpret hundreds of thousands of lines of regulations based on complicated math and physics that were the result of decades of tragedy and death, and the other one involves playing a children’s video game.

#i am begging this website. BEGGING it. to stop acting like building codes are state oppression #and please stop reducing blue collar jobs to 'so easy any handyman could do it with a youtube video'#that's how people fucking die #i didn't spend five years learning how to do my job safely to watch people online tell me it could've just been a course in high school #i know that this is like. a minority minority opinion and not really worth getting worked up over #but it's so annoying to see supposed leftists denigrating blue collar jobs like this #same poster also opined that we won't need garbagemen #because 'if the trash is bothering people they'll figure out a way to clean it without having to pick it up'#like what??? does that even fucking mean????#construction

12K notes · View notes

apollos-polls · 2 months

Text

#my polls #random polls #tumblr polls #poll time #poll game #polls #programming poll #coding poll #coding #programming #just wanted to see how many other people know how to code #if anyone sees this and has resources for people to learn code #please link it #thanks <3 #java is the best language though

1K notes · View notes

hackeocafe · 1 year

Video

youtube

Swift Programming – Full Course for Beginners

Learn the Swift programming language in this full tutorial for beginners. After learning the basics of Swift, you will learn how to use UIKit and SwiftUI for development of front-end iOS, macOS and watchOS applications. You will also learn how to use Vapor and other Swift-backend technologies.

#youtube #swift programming #Swift Programming Full Course for Beginners #Swift Full Course for Beginners #learn swift programming #free education #learn how to code

1 note · View note

marrowwife · 7 months

Text

Characters that crumble without any pressure, characters who can only function when the stakes are high and fall apart in normalcy, characters who are so honed into weapons of the narrative that when the narrative slows they are left with nothing

#characters #inspo #character inspo #tropes #writeblr #this is so zuko coded #characters who never learned how to just be #writing #marrow writes

3K notes · View notes

jade-len · 5 months

Text

please help i just had a dream where svsss was a dating sim. so, of course i tried pursuing shen qingqiu, but it ultimately backfired because suddenly he realized that he was in a dating visual novel?? and since i put myself as a guy, he just refused to show up to special in game events to avoid me interacting with him???

and obviously i was like "wtf why isn't he here?" when he didn't show up. then at some point i explored the area, and the screen suddenly zoomed in to show sqq talking to sqh (supposedly telling him all about the little situation). next thing i know, both of them are slowly turning their head to stare at the screen in pure and utter terror

also in some part of the dream, i think i did some liu qingge events or something and as his affection levels rose, he would continuously jump scare me by popping up out of nowhere and go, "its not like i like you or anything!!" while covered in blood and holding out a demonic beast head as if it were a box of treats

anyways, totally random question guys haha if i made an svsss visual novel dating sim would you guys play it. no reason in particular at all.

#im actually learning how to code right now #if i hyperfixate enough ill turn this to reality bc im kinda bad at writing fanfiction #no promises though #i prob had this dream bc i stayed up till 5 am last night playing a date with death #idk if dream liu qingge was accurate bc personally i see him more as just being like 'for you.' before leaving #but its a funny thought to have with liu qingge acting like that sporty emotionally constipated tsundere character lmao #anyways dw if i do make the game i would build a chaotic ass harem route jesus fucking christ that'd be hilarious #the scum villain's self saving system #svsss #mxtx svsss #shen qingqiu #shang qinghua #liu qingge #cumplane

1K notes · View notes

izicodes · 1 year

Text

Dynamically vs Statically-Typed Programming Languages

Hiya!🌍💻 I know I haven't done one of these posts in a while but now I came up with a new topic to talk about!

Today, we're going to dive into the world of programming languages and explore the differences between dynamically-typed and statically-typed ones. I actually got the idea from explaining the whole difference between languages such as C# and Java to Lua and Python! Also just wanted to talk about how various languages handle data types~! So, buckle up, and let's get started~! 🚀

The Main Difference

It all lies in how they handle data types:

In a dynamically-typed language, the type of a variable is determined at runtime, which means you don't have to specify the type explicitly when declaring a variable.

In a statically-typed language, the type of a variable is determined at compile-time, and you must declare the type explicitly when defining a variable.

Example Code

Not getting the picture of what I'm talking about? No worries, let's take a look at some code examples to illustrate the difference. I'll use my beloved Lua (a dynamically-typed language) and C# (a statically-typed language)~!

Lua

C#

In the Lua example, we can see that we don't need to specify the data type of the variable x. We can even change its type later in the code and it would still work!

In the C# example, we must specify the data type of x when declaring it, and attempting to change its type later will result in a compile-time error. Remember though, you can convert an int to string in C# via 'Convert.ToString()'!

Recap!

In dynamically-typed language, the type of a variable is determined at runtime.

Lua, Python, and JavaScript are programming languages that are dynamically typed.

In a statically-typed language, the type of a variable is determined at compile-time.

C#, Java, and Go are programming languages that are statically typed.

Obviously, there is more to know about each type as dynamically-typed and statically-typed languages each have their advantages and disadvantages - but I wanted to focus more on the data type declaration part~!

Here are some further reading pages:

Dynamic Typing vs Static Typing - LINK

Advantages and Disadvantages of Dynamic and Static Typing - LINK

That's all, thanks for reading, and hope you learned something new! Happy coding, folks~! 🌟💻🚀

#xc: programming blog post #coding #programming #studying #studyblr #codeblr #progblr #computer science #project #tech #developer #web dev #comp sci #learn how to code

83 notes · View notes

arthur-lesters-right-arm · 2 months

Text

Malevolent video game from Arthur's POV. Yes its just a black screen but you have a mysterious voice guiding you and you have a hunch that he is lying and he also degrades you homoerotically every 12 minutes

#malevolent #Harlan you should learn how to code just to make this #malevolent podcast #arthur lester #arthur malevolent #john malevolent #malevolent arthur #john doe malevolent #malevolent john

591 notes · View notes

anndcodes · 1 year

Text