#define javascript | Explore Tumblr posts and blogs

lesbianashleywilliams · 6 years ago

Text

me every time i find the solution to a javascript problem i could have solved in five minutes instead of three hours

#*posts #today i learned you cant define sizes with percentages in javascript #thank gawd the ‘vh’ unit exists

2 notes · View notes

codesolutionstuff · 3 years ago

Text

What's the difference between undefined and not defined in JavaScript

New Post has been published on https://www.codesolutionstuff.com/whats-the-difference-between-undefined-and-not-defined-in-javascript/

What's the difference between undefined and not defined in JavaScript

undefined and not defined in JavaScript refer to memory space in JavaScript, but there is a very clear distinction between them. The variable name being accessed will not be declared if it does not exist in memory space, and it will be undefined if it does exist in memory space but has not yet be

#JavaScript #not defined #undefined

0 notes

orteil42 · 2 years ago

Note

How does Cookie Clicker handle such big numbers? Do you cheat by dropping the smallest units as time goes on and they become invisible? Is there actually an upper limit to the cookies you can have

while external libraries and new language features can help represent bigger numbers in javascript, Cookie Clicker does not use any special accommodations for large numbers! browsers define the biggest value they can store through "Number.MAX_VALUE", after which a number is simply handled as "Infinity" (if you cheat outrageous amounts of cookies in Cookie Clicker this is what eventually happens, and it breaks all sorts of things). thankfully modern browsers define that maximum value as 2 to the power of 1024 minus 1, or about 1.7976931348623157E+308, so we've got quite a bit of breathing room until we have to worry about that. another limit we do bump into however is "Number.MAX_SAFE_INTEGER", which is the maximum value a browser can handle before it starts losing precision, ie. small increments just get rounded off. this value is about 9 quadrillions, a very reasonably reachable amount in Cookie Clicker, meaning around that point some of your cookies get lost to the ether during certain calculations - but seeing as players are usually making billions of cookies per second by that point we can afford not to worry about that too much either.

#cookie clicker

983 notes · View notes

fukuo · 3 years ago

Text

How to implement the filtered tag posts on your blog theme

You can use this to prevent posts with certain tags or your own custom tags from showing up on your blog. The filtered posts will have an overlay obscuring the post itself with an explanation of why the post was filtered along with the option to view the post if you'd like.

This post is not going to explain the details, you'll be just provided an instruction to implement this on your blog. You need to be familiar with HTML, CSS, and JavaScript before proceeding with this.

Adjust the HTML element on your theme

This is required. We only need to add this variable from Tumblr called {TagsAsClasses}. Depending on your theme, the structure may differ. Put this variable where you render each post in your theme. This will look something like this (after {block:Posts})

{block:Posts} <article class="posts {TagsAsClasses}">ㅤㅤ {block:Text}…{/block:Text} {block:Photo}…{/block:Photo} {block:Quote}…{/block:Quote} … </article> {/block:Posts}

This variable basically adds a class based on your tag on the post. We need it because it gives us the flexibility of which posts need to be generated with the spoiler overlay (so it won't be applied to all of our posts).

After that, put this code below the <head> tag:

The code above will be shown on your theme options on the customize page so you can easily change the filter lists, button text, and warning text.

Add the styling on your theme (CSS)

Add this external resource link element and style tag to your code before the </head> tag

Implement the JavaScript

Please add the code below before </body> tag.

The default comes with pre-defined tags such as “spoiler”, “spoilers” or “warning” above. You can replace it from the theme options with whatever tags you want. Just be careful with the formatting! Don’t forget the quotation mark and comma!

Once everything is all configured and done. You can just tag your posts as “spoilers”, "spoiler" or "warning" (without the quotation mark) and the filtered post will be automatically implemented on your blog theme!

And here’s the live preview if you want to know what it will look like!

Let me know if you experience the issue!

#tutorial #tutorials #addons #tumblr

573 notes · View notes

izicodes · 2 years ago

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

masterprograming · 4 years ago

Text

JavaScript Functions In Hindi – Functions In JS in Hindi

JavaScript Functions In Hindi – Functions In JS in Hindi – Function in Hindi in JS ko Ham Isliye Istemal Karte Hai Taki Hame Ek hi Code Ko Bar Bar Likhna Na Pade Isliye JavaScript Language Me functions ko Banate hai | JS Data TypesJS Operators JavaScript Functions In Hindi Functions Ko Understand Karne Ke Liye Hamne A to Z Point Ko Cover Kiya Aap Niche Inhe Read Karke Understand Kar Sakte Hain…

View On WordPress

#Built In Function In JavaScript #Functions In JS #Functions In JS in Hindi #JavaScript Functions #JavaScript Functions In Hindi #JS in Hindi #User Defined Function In Js #User Defined Function In Js In hindi

0 notes

tariqk · 7 years ago

Text

⁣

#oh and another character set you can use as variable names #is futhark #(i.e. ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛈᛇᛉᛊᛏᛒᛖᛗᛚᛜᛞᛟ)#those are ALL valid JavaScript variable names #only one down side #from what I can see you'd have to define your own Compose Key sequences #which is kind of boring #tech adventures #JavaScript

3 notes · View notes

iamishraqhcdev · 3 years ago

Text

Application Programming Interface (API)

What is API?

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. It is a way for computers to share data or functionality, but computers need some kind of interface to talk to each other.

When you use an application on your mobile phone, the application connects to the Internet and sends data to a server. The server then retrieves that data, interprets it, performs the necessary actions and sends it back to your phone. The application then interprets that data and presents you with the information you wanted in a readable way. This is what an API is - all of this happens via API.

Building Blocks of API

There are three building blocks of an API. These are:

dataset

requests

response

Let’s elaborate these blocks a bit.

An API needs a data source. In most cases, this will be a database like MySQL, MongoDB, or Redis, but it could also be something simpler like a text file or spreadsheet. The API’s data source can usually be updated through the API itself, but it might be updated independently if you want your API to be “read-only”.

An API needs a format for making requests. When a user wants to use an API, they make a “request”. This request usually includes a verb (eg: “GET”, “POST”, “PUT”, or “DELETE”), a path (this looks like a URL), and a payload (eg: form or JSON data). Good APIs offer rules for making these requests in their documentation.

An API needs to return a response. Once the API processes the request and gets or saves data to the data source, it should return a “response”. This response usually includes a status code (eg: “404 - Not Found”, “200 - Okay”, or “500 - Server Error”) and a payload (usually text or JSON data). This response format should also be specified in the documentation of the API so that developers know what to expect when they make a successful request.

Types of API

Open APIs - Also known as Public APIs. These APIs are publicly available and there are no restrictions to access them.

Partner APIs - These APIs are not publicly available, so you need specific rights or licenses to access them.

Internal APIs - Internal or private. These APIs are developed by companies to use in their internal systems. It helps you to enhance the productivity of your teams.

Composite APIs - This type of API combines different data and service APIs.

SOAP - It defines messages in XML format used by web aplications to comunicate with each other.

REST - It makes use of HTTP to GET, POST, PUT or DELETE data. It is basically used to take advantage of the existing data.

JSON-RPC - It uses JSON for data transfer and is a light-weight remote procedural call defining few data structure types.

XML-RPC - It is based on XML and uses HTTP for data transfer. This API is widely used to exchange information between two or more networks.

Features of API

It offers a valuable service (data, function, audience).

It helps you to planabusiness model.

Simple, flexible, quickly adopted.

Managed and measured.

Offers great developer support.

Examples of API

Razorpay API

Google Maps API

Spotify API

Twitter API

Weather API

PayPal API

PayTm API

HubSpot API

Youtube API

Amazon's API

Travel Booking API

Stock Chart API

API Testing Tools

Postman - Postman is a plugin in Google Chrome, and it can be used for testing API services. It is a powerful HTTP client to check web services. For manual or exploratory testing, Postman is a good choice for testing API.

Ping API - Ping API is API testing tool which allows us to write test script in JavaScript and CoffeeScript to test your APIs. It will enable inspecting the HTTP API call with a complete request and response data.

VREST - VREST API tool provides an online solution for automated testing, mocking, automatic recording and specification of REST/HTTP APIS/RESTful APIs.

When to create an API and when not to

Its very important to remember when to create and when not to create an API. Let’s start with when to create an API…

You want to build a mobile app or desktop app someday

You want to use modern front-end frameworks like React or Angular

You have a data-heavy website that you need to run quickly and load data without a complete refresh

You want to access the same data in many different places or ways (eg: an internal dashboard and a customer-facing web app)

You want to allow customers or partners limited or complete access to your data

You want to upsell your customers on direct API access

Now, when not to create an API…

You just need a landing page or blog as a website

Your application is temporary and not intended to grow or change much

You never intend on expanding to other platforms (eg: mobile, desktop)

You don’t understand the technical implications of building one.

A short 30 second clip to understand it

View this post on Instagram

A post shared by Ishraq | Frontend • Backend • Fullstack Developer 🇧🇩🇩🇪 (@codewithishraq)

instagram

Word of advice for newbies

Please don’t wait for people to spoon-feed you with every single resource and teachings because you’re on your own in your learning path. So be wise and learn yourself.

Check out my book

I have curated a step by step guideline not just for beginners but also for someone who wants to come back and rebrush the skills. You will get to know from installing necessary tools, writing your first line of code, building your first website, deploy it online and more advanced concepts. Not only that, I also provided many online resources which are seriously spot on to master your way through. Grab your copy now from here. Or you can get it from this link below.

About Me

I am Ishraq Haider Chowdhury from Bangladesh, currently living in Bamberg, Germany. I am a fullstack developer mainly focusing on MERN Stack applications with JavaScript and TypeScript. I have been in this industry for about 11 years and still counting. If you want to find me, here are some of my social links....

Instagram

TikTok

YouTube

Facebook

GitHub

181 notes · View notes

regexkind · 2 years ago

Text

Make-a-fish

There is a very cute site out there: http://makea.fish

It was written by @weepingwitch

If it is 11:11 AM or PM according to your machine's clock, you can visit this page and get a cute procedurally-generated fish image. Like this:

At other times, you will get a message like this:

This is charming enough that I have a friend who has a discord channel devoted entirely to people's captures of fish at 11:11. But it's also a fun code-deobfuscation puzzle. Solution below the cut--I checked, and it's ok for me to share the solution I came up with :)

If you show source for the makea.fish website:

Basically:

an image, set by default to have a pointer to a source that doesn't really exist

a script, that is one big long line of javascript.

The javascript is where we are going. Start by loading it into an editor and prettifying it up. It's like taking home a scrungly cat and giving it a wash. or something idk.

Believe it or not this is better. Also, maybe there are some low-hanging fruits already we can pick?

Like this:

Each of the strings in this array is composed of escaped characters. Escaped hex characters are useful if you need to put characters in your string that are not available on the keyboard or might be interpreted as part of the code, but here I think they're just being used to hide the actual contents of the string.

I used python to deobfuscate these since the escape sequences should be understood by python as well. And lo--not only are they all symbols that can be rendered (no backspaces or anything!) but they also look like base64 encoded strings (the =, == terminators are a giveaway).

What happens if we run these through a base64 decoder?

We see that the array actually contains base64-encoded strings. Perhaps a portion of this code is converting these strings back, so that they can be used normally?

At any rate I am going to rename the variable that this array is assigned to to "lookupTable" because that's what I think of it as.

We are making an anonymous function and immediately calling it with two arguments: lookupTable and 0xd8. 0xd8 is 216 in decimal. By renaming the variables, we get:

Confession time, I am not a person who writes lots of javascript. But it occurs to me that this looks an awful lot like we're being weird about calling functions. Instead of traditional syntax like "arrayInput.push(arrayInput.shift())" we're doing this thing that looks like dictionary access.

Which means that, according to the docs on what those two array functions are doing, we are removing the first element of the array and then putting it on the end. Over and over again. Now I could try to reason about exactly what the final state of the array is after being executed on these arguments but I don't really want to. A computer should do this for me instead. So I in fact loaded the original array definition and this function call into a JS interpreter and got:

['Z2V0SG91cnM=', 'd3JpdGVsbg==', 'PEJSPjExOjExIG1ha2UgYSBmaXNo', 'PEJSPmNvbWUgYmFjayBhdCAxMToxMQ==', 'Z2V0TWlsbGlzZWNvbmRz', 'Z2V0U2Vjb25kcw==', 'Z2V0RWxlbWVudEJ5SWQ=', 'c3Jj', 'JnQ9', 'JmY9']

This is our array state at this time. By the way, this comes out to

['getHours', 'writeln', '11:11 make a fish', 'come back at 11:11', 'getMilliseconds', 'getSeconds', 'getElementById', 'src', '&t=', '&f=']

(there are some BR tags in there but the Tumblr editor keeps eating them and I'm too lazy to fix that).

What's next? Apparently we are defining another function with the name "_0x2f72". It is called very often and with arguments that look like small numbers. It is the only place our lookupTable is directly referenced, after the last little shuffler function. So my guess is deobfuscator for the elements of the array.

It takes two arguments, one of them unused. Based on my hunch I rename the function arguments to tableIndex and unused.

One of the first things we do seems to be using the awesome power of javascript type coercion to get the input as an integer:

tableIndex=tableIndex-0x0;

Normal and ranged.

The next thing that is done seems to be assigning the return value, which may be reassigned later:

var retVal=lookupTable[tableIndex];

The next line is

if(deobfuscatorFn['MQrSgy']===undefined) {...

Again, I'm not exactly a javascript person. My guess is that "everything is an object" and therefore this value is undefined until otherwise set.

indeed, much further down we assign this key to some value:

deobfuscatorFn['MQrSgy']=!![];

I don't know enough javascript to know what !![] is. But I don't need to. I'll as a js interpreter and it tells me that this evaluates to "true". Based on this I interpret this as "run this next segment only the first time we call deobfuscatorFn, otherwise shortcircuit past". I rewrite the code accordingly.

The next block is another anonymous function executed with no arguments.

Within the try catch block we seem to be creating a function and then immediately calling it to assign a value to our local variable. The value of the object in our local variable seems to be the entire js environment? not sure? Look at it:

My guess is that this was sketchy and that's why we assign "window" in the catch block. Either way I think we can safely rename _0x2611d5 to something like "windowVar".

We then define a variable to hold what I think is all the characters used for b64 encoding. May as well relabel that too.

Next we check if 'atob' is assigned. If it isn't we assign this new function to it, one which looks like it's probably the heart of our base64 algorithm.

I admit I got lost in the weeds on this one, but I could tell that this was a function that was just doing string/array manipulation, so I felt comfortable just assigning "atob" to this function and testing it:

vindication! I guess. I think I should probably feel like a cheater, if I believed in that concept.

we next assign deobfuscatorFn['iagmNZ'] to some new unary function:

It's a function that takes an input and immediately applies our atob function to it. Then it...what...

tbh I think this just encodes things using URI component and then immediately decodes them. Moving on...

deobfuscatorFn['OKIIPg']={};

I think we're setting up an empty dictionary, and when I look at how it's used later, I think it's memoizing

Yup, basically just caching values. Cool!

We now have a defined deobfuscatorFn. I think we can tackle the remaining code fairly quickly.

First thing we do is get a Date object. This is where the time comes from when deciding whether to get the fish image.

Actually, let's apply deobfuscatorFn whenever possible. It will actually increase the readability quite a bit. Remember that this just does base64 decoding on our newly-shuffled array:

relabeling variables:

In other words, if the hours is greater than 12 (like it is in a 24 hour clock!) then subtract 12 to move it to AM/PM system.

Then, set "out" to be x hours minutes concatenated. Like right now, it's 16:36 where I am, so hours would get set to 4 and we would make x436x be the output.

Next, if the hours and minutes are both 11 (make a fish), we will overwrite this value to x6362x and print the makeafish message. Otherwise we print a request to comeback later. Finally, we lookup the fish image and we tell it to fetch this from "makea.fish/fishimg.php?s={millis}&t={out}&f={seconds}"

(there's a typo in the pictures I have above. It really is f=seconds).

Thus, by visiting makea.fish/fishimg.php?s=420&t=x6362x&f=69

we can get a fish. It appears to be random each time (I confirmed with weepingwitch and this is indeed truly random. and the seconds and millis don't do anything).

Now you can make fish whenever you want :)

#ana works

51 notes · View notes

manonamora-if · 2 years ago

Note

Heyyy! I have a twine sugarcube coding question and I have no eloquent way of asking it so here it is: I want the user to be able to click on a word and a description pops out from underneath and then I want them to be able to re-click that same word and the description is hidden again. sos pls do you know how :) is what im asking even a thing

Hey Veirse!

That's totes possible. And there different ways of going at it (depending on what you want to do with your page, and how far you want the description to appear).

As always, the code below can be found on my PasteBin account.

How To Toggle a Description!

Chapel's Message Macro

The MVP of SugarCube custom macros has something to help: the << message >> macro. It allows you to toggle a part of text by clicking on a link. Click once, it appears. Another time and it disappear. It's pretty much the << linkappend >> macro, but you can hide the text again.

You just need to add the Macro code to the JavaScript, and use the macro as such:

<<message "Clickable Text">> Description Text/Message to appear <</message>>

Note: by adding btn after the "Clickable Text", the links become a button instead.

This method is nice if you want the text to appear just below the link. If you want a working example, check the Drawers section in Scene 1 of CRWL.

CyCy's Liveupdate Fix

Technically, not specific to your case, but still works. I've used it for the toggable menu of Exquisite Cadaver (which uses the Simple Book Template). This method is similar to Chapel's macro, but the toggled text doesn't have to be just below the link.

You can find CyCy's Liveupdate Custom Macro here, just need to add that to your JavaScript. Then it is just a matter of creating a link and some conditions:

<<link "Clickable Text">> <<if not $trigger>> <<set $trigger to true>> <<else>> <<set $trigger to false>> <</if>> <<update>> <</link>> <<liveblock>> <<if $trigger>>Description Text/Hidden Message<</if>> <</liveblock>>

Note: if you have multiple << liveblock >> on the page, the << update >> macro will trigger them all.

Maliface's On/Trigger Macro

Works like Cycy's but you can target one block rather than all of them. You can find the JavaScript code here, and the manual there. And it goes something like this:

<<link "Clickable Text">> <<if not $trigger>> <<set $trigger to true>> <<else>> <<set $trigger to false>> <</if>> <<trigger 'blockname'>> <</link>> <<on 'blockname'>> <<if $trigger>> Description Text/Hidden Message<</if>> <</on>>

Note: Chapel's Event Macro uses the same macro name. These two macros cannot be used together, unless the name of one of them is modified in the JavaScritpt (Macroadd line)

Span, Link and Replace

And finally, if you want to go OG Sugarcube Code, here's the thing: using the << replace >> macro. It's essentially Maliface's On/Trigger Macro, but with the Base SugarCube Macros.

I have used this option in TTATEH (asking questions) and La Petite Mort (doing actions).

You will need: a span (div works too) with a defined ID/Class, a link, a conditional statement and the replace macro.

<<link "Clickable Text">> <<if not $trigger>> <<set $trigger to true>> <<replace "#target" t8n>>Description Text/Hidden Message<</replace>> <<else>> <<set $trigger to false>> <<replace "#target" t8n>><</replace>> <</if>> <</link>> <span id="target"></span>

Notes: the t8n adds a transition effect to make the new block appear. If you want to target a class instead of an idea, change the # into a . and the id into class.

Overall Notes: for all options, aside from Chapel's, you can use a temporary variable (_var) instead of a permanent one ($var).

#coding support #Twine #twine code #twine tutorial #tutorial #coding resource #toggled description

58 notes · View notes

themekets · 2 years ago

Note

Hey, I'm wondering if you'd be able to give me some advice. On my theme, the newer audio posts just show up as default mp3 modules, without all the css that would normally apply to an audio post. Tumblr seems to have changed its coding for new audio posts, and I'm not exactly sure how to get my old theme to apply to new posts. The old posts were classified as 'audio posts' in the code, but the new code seems to have removed that, so it only has the audio controls, not the player code.

Hey, sorry for the long delay in answering, I haven't been keeping close tabs on it. But if you still need a hand here (or for anyone else who's also wondering about this!) here's a run-through of what's up here.

The TL;DR: is summarised a bit obliquely in Tumblr's custom theme documentation (which I'm surprised they even update still, there's a lot that goes unmentioned here that you can really only find by pulling down a complete theme from the Tumblr theme selections and inspecting the code, I've found):

Basically, pretty much any new audio post is going to be NPF-style, so any styles that use any of the Audio-post specific functionality will not be used. Instead, as you can see below, Tumblr renders NPF posts as a text post (note the <article class="post text" in the markup below).

What you can also see here is that NPF audio posts can contain multiple audio players, and will have them laid out with the following structure:

The styling of these audio players is pretty much exclusively done by your browser, and is pretty variable between browsers, but always fairly simple and bare-bones. Tumblr itself has very little control over them, even.

The only real way to "style" these things is to effectively hide them completely with something like display: none; in CSS, and then use JavaScript to control them with some additional buttons or something that you embed around them. Because you don't have a lot of granular control of the audio players or even have much indication of where they'll be embedded with how NPF works currently, I'm pretty sure you'll essentially have to cobble together some JS to detect these elements and fill in some more traditional HTML buttons and whatnot around them, and rig them up to events that control the actual (hidden) audio element.

I'm somewhat hopeful that eventually @staff will update their custom theme framework to properly work with NPF posts, because the only proper solution in my mind is that the old {block:Audio} and other posts type placeholders are "brought back" in some form or another to allow us to define what, exactly an NPF post "block" should look like for each of the NPF content types.

Till then, any possible solution will have to be hacky as all heck, I'm afraid.

#asks #theme questions #npf #audio posts

17 notes · View notes

codesolutionstuff · 3 years ago

Text

What's the difference between undefined and not defined in JavaScript

New Post has been published on https://www.codesolutionstuff.com/whats-the-difference-between-undefined-and-not-defined-in-javascript/

What's the difference between undefined and not defined in JavaScript

undefined and not defined in JavaScript refer to memory space in JavaScript, but there is a very clear distinction between them. The variable name being accessed will not be declared if it does not exist in memory space, and it will be undefined if it does exist in memory space but has not yet be

#JavaScript #not defined #undefined

0 notes

trivalentlinks · 2 years ago

Text

I made some (un-beta'ed) Discount Tumblr Bells as a Firefox Add-on!

EDIT: Temporarily making this post unrebloggable, because I think I might have figured out how to actually put them on the dashboard.

It hasn't quite finished Mozilla's Review Process yet, but if anyone wants to test it as a temporary extension on an instance of their browser (meaning you open a Firefox browser and load the add-on to that browser, but it goes away the moment you close it) and give advice etc, I'd be grateful!

This is how to test it:

Download the zip file here:

(You do NOT need to extract the file to try the add-on, but if you want to, you can unzip the file and look at the code, almost all of which is in the folder called "popup". I largely cribbed the structure of the code from beastify, which is Mozilla.Org's 2nd demo extension, aka Your Second Extension.)

Then open a firefox browser (or go to a new tab if you have one open), put

about:debugging

in the url, and go to that page.

Then, on the left panel, click "This Firefox" and then "Load Temporary Add-on". Then you navigate to wherever you downloaded the zip file and select it.

Now there should be a little blue bell icon to the upper right (next to the Firefox hamburger menu icon) that looks like the following but much smaller:

Click the icon and it should pop up something that looks like:

Unfortunately, they are overlaid on top of, and not actually on your dash the way tumblr bells are. This is because I am BAD at javascript and html; this is literally the second web extension I've written in my life, after PlusEqualsQWAT, which was an order of magnitude simpler than this one.

(I tried to get the bells to end up on the dash like tumblr bells were, but could not get the code to work that way. If you do know how to do this and are willing to offer advice I would love that and be very grateful!)

Also I know this is not how the tumblr bells looked, but I don't actually remember how they looked well enough to draw them, and these bells were in the public domain.

Anyway, when you hover over a bell it should turn blue like this:

And it should play the bell sound.

The bell sounds are vibraphone sounds. Tumblr bells were jingle bells, but I started this add-on long after tumblr bells were removed, and I couldn't find jingle bell sounds in even one full octave, much less two.

(So, yeah, they unfortunately don't look OR sound how the tumblr bells did, and also don't appear on your dash; I'd love help on any of these fronts, but in the meantime, this is why I called them Discount Bells.)

Typing a number from 1-8 or a letter from Q,W,E,R,T,Y,U,I, also plays a relevant bell sound. (It is Not case sensitive with the letters.)

'q' though 'i' is one octave down from 1-8. Note that this means 'i' and '1' are actually the same note, that's why there's no bell for 'i'.

(You get two octaves. Tumblr Bells only had one octave, but I prefer two, sorry.)

You can also type into the "To Play" thing, which is also not case sensitive.

In the To Play textbox, anything that is Not a letter among q,w,e,r,t,y,u,i, and also not 1-8 gets treated as a rest.

You can also set the tempo of the To Play box, which is defined as the number of milliseconds between notes, so for the default, which is 500, this means two notes a second. (In particular, larger tempo means Slower music, which is not how music works, but as a non-music person I totally forgot what 'tempo' meant until after I submitted the add-on for approval, and approval takes hours if not days so I can't change that.)

For example, my best approximation of Hallelujah (both verse and chorus) is:

et,tt,ty,yy,et,tt,ty,yy,ty,yy,yy,tt,et,t,,,,,,,,et,tt,ty,yu,ti,ii,yi,12,12,22,23,33,21,1,,,,,,e,ty,,y,,,,,y,te,,e,,,,,e,ty,,y,,,,,y,te,,,rew,,,,qq

With Tempo set to 250 or 300.

When you hit the Enter key, it plays at your specified tempo (unless your specified tempo contains letters or other non-digit characters, in which case it sets to the default of 500).

I'd appreciate any comments!

EDIT: Temporarily making this post unrebloggable, because I think I might have figured out how to actually put them on the dashboard.

#tumblr bells #discount tumblr bells

27 notes · View notes

morrigan-sims · 2 years ago

Note

Hiiiiii how did you do your character page it's so so so cool! Is the appearance customizable at all? Like can the rectangles containing the character portraits be a rounded rectangle or a different shape entirely? Have a great rest of your day!!

Hello! Thanks for asking!

So, I used two existing page codes for the base of my page. You can find those here and here. Like all tumblr pages (and web pages in general), they're based on html, and as such are highly customizable.

For example, I changed some of the icons in the individual character pages, as well as the size of the text boxes and images to make things fit better. (It's kind of hard to tell based on just the image on the post, but if you look at the preview compared to mine, you can tell.) Additionally, I totally changed the colors of the everyone page, along with redoing the filters to make them fit my needs. Also, if I remember correctly, I had to change the text box size when you click on it to make it fit the right number of lines without looking weird? I think??? Could be wrong.

html is a very wonderful coding language, and you don't even need any formal training to start learning it. 95% of what I know about html coding for visual purposes (like tumblr pages) I've learned through trial and error and examining existing codes. (Note: I know nothing about JavaScript and html to make different functionalities, so I'm useless in that department.)

If you are interested in learning more, there's lots and lots of websites dedicated to teaching code, including html and JS.

I'll talk about your question about shapes under the cut, cause this is already super long.

In html, you define the shape and size of the image using width and height in pixels. My limited experience involves only circles/ellipses and rectangles/square.

If I remember correctly, there is some amount of code that you can use to make rounded edges to images (I don't know what it is, but I'm aware that it's possible), but it might be relatively easy to also just round the edges in photoshop. So long as the overall image meets the same width and height as displayed in the html, you shouldn't run into any issues. (Unless the image has a frame on it in the code, in which case you would have to change the frame if you wanted it to also be rounded.)

(A google search of "how to make rounded corners in html" should be helpful. I'm typing this right before going to dinner, so I'm slightly short on time.)

There is also a section of coding that can allow images to be auto-resized to fit the space specified in the code. However, this relies on the images still having the right crop ratio to prevent the image getting "squished".

Also, in a similar vein to what I mentioned above, you can use a "square" or "rectangular" image that is transparent outside of the funky shape you want to use and place it in a square or rectangular space in code.

Okay, I think that's all I have to say on the topic! Thanks for the ask! <3

#ask Morrigan #tips #tutorial #coding #html #novac2281

10 notes · View notes

wuggen · 3 years ago

Note

72, 73, and multiples of 15 for that math ask game

15. Do other people think you're good at math?

Generally speaking, yeah. The more mathbrained among them might think I'm not especially good at their particular favorite branch of math (which is probably true).

30. Who is/was the most attractive Mathematician, living or dead? (And why is it Grigori Perlman?)

(Looks up Grigori Perlman) Hm, y'know, he's not quite my type, but I do see the appeal! I'd have to say that it's the very striking facial features, the strong brow, the unkempt but nonetheless clean appearance, and the paralyzing, piercing gaze that sits alongside a gentle smile.

45. Are you a Formalist, Logicist, or Platonist?

I think I'm somewhere at the intersection of formalism and platonism, which is like. A kinda weird place to be, I guess? Like I think ultimately all of our mathematical systems are arbitrary symbol shuffling that, by design or by coincidence, happens to have an interpretation that is useful in reality, so that'd be formalism. But also, I think it's inescapable that those systems of symbol shuffling seem to produce definite patterns and have fundamental limitations, and those seem to be immutable facts of the universe on a level of abstraction above matter, so like what's that about? And I guess that'd be platonism, or something like it.

60. What’s you favorite number? (Wise-ass answers allowed)

Every non-negative integer power of 2. Which is not really a wise-ass answer, but also isn't a single number... I guess there's probably some algebraic structure in which that set is a single element, and we could be wise-ass about it and call that my favorite number. Yeah, that's what we're gonna do. Define some suitable algebraic structure in which the set of all non-negative integer powers of 2 is a single element; that element is my favorite number.

72. Are you a fan of algorithms? If so, which are your favorite?

I love algorithms with all my heart, but I gotta tell ya it has been a while since I was anywhere approaching well-versed in, like, the catalog of existing algorithms out there. I remember really enjoying the Gale-Shapley algorithm for the stable matching problem. It's like almost a greedy algorithm, but not quite, it's linear time (in the input size), and it solves the problem in a pretty decidedly optimal way! Also really enjoy that it's basically the algorithm that the medical industry uses to match residents to hospitals, that's pretty fun.

73. Can you program? What languages do you know?

Oh y'all know I can program, I hardly ever shut up about programming languages and type systems lmao. Y'all also know by now that I know at least Rust and Haskell, cuz I never shut up about them either. Other languages that I know at least decently well include: C, C++, Python, Javascript, Typescript, Coq. Languages that I know a little of in passing or once knew but have since fallen way the fuck out of practice with include: Java, Prolog, Erlang, Fortran, Lean, Lua, Forth, Solidity (don't judge me), Haxe, GML (Game Maker Language), GLSL, HLSL, Maxima (if that counts?), possibly a few others that I'm forgetting?

#too gay to not like math

8 notes · View notes

webtutorsblog · 2 years ago

Text

HTML 101: The Ultimate Beginner's Guide to Writing, Learning & Using HTML

HTML serves as the backbone of every web page, allowing us to structure content with paragraphs, headings, images, links, forms, and more. If you're eager to delve into web development or explore the world of coding, mastering HTML is a fantastic starting point.

Join us on webtutor.dev as we unveil the ultimate guide to HTML for beginners. In this comprehensive tutorial, we'll demystify HTML, explore its diverse applications, and equip you with the skills to write your own HTML code. From essential elements to crucial attributes, we'll cover it all.

Get ready to embark on your HTML journey with webtutor.dev – your go-to resource for empowering web development education. Let us dive in and unlock the potential of HTML together.

Join us now on webtutor.dev!

What is HTML?

First published by Tim Berners-Lee in 1989, HTML is now used by 94% of all websites, and probably all the ones you visit. But what is it, exactly?

HTML, short for HyperText Markup Language, is the backbone of the web. It is a markup language that structures the content of web pages. HTML utilizes tags to define the elements and their attributes, such as headings, paragraphs, images, links, lists, forms, and more. These tags instruct web browsers on how to display and render the content to users. With HTML, developers can create interactive and visually appealing web pages. It plays a vital role in creating a seamless browsing experience by allowing users to navigate through hyperlinks and access information across different websites. HTML is the foundation upon which websites are built, providing the structure and organization for displaying text, multimedia, and interactive elements. By learning HTML, individuals can gain the skills to create and customize web pages, making their mark in the digital landscape.

Is HTML a programming language?

No, HTML (Hypertext Markup Language) is not considered a programming language. It is a markup language used for structuring the content and presenting information on web pages. HTML provides a set of tags that define the structure and semantics of the content, such as headings, paragraphs, links, images, and more.

While HTML is essential for web development, it primarily focuses on the presentation and organization of data rather than the logic and functionality found in programming languages. To add interactivity and dynamic behavior to web pages, programming languages like JavaScript are commonly used in conjunction with HTML.

What is HTML Used for?

HTML (Hypertext Markup Language) is used for creating and structuring the content of web pages. It provides a set of tags that define the elements and their layout within a web page. Here are some of the key uses of HTML:

Web page structure: HTML is used to define the structure of a web page, including headings, paragraphs, lists, tables, forms, and other elements. It allows you to organize and present content in a hierarchical manner.

Text formatting: HTML provides tags for formatting text, such as bold, italic, underline, headings of different levels, and more. These tags help in emphasizing and styling specific parts of the content.

HTML Hyperlinks: HTML enables the creation of hyperlinks, allowing you to connect different web pages together or link to external resources. Links are defined using the <a> tag and provide navigation within a website or to other websites.

Images and media: HTML allows you to embed images, videos, audio files, and other media elements into web pages. It provides tags like <img>, <video>, and <audio> for adding visual and multimedia content.

Forms and user input: HTML provides form elements, such as text fields, checkboxes, radio buttons, dropdown menus, and buttons, allowing users to enter and submit data. Form data can be processed using server-side technologies.

Semantic markup: HTML includes semantic elements that provide meaning and structure to the content. Examples of semantic elements are <header>, <nav>, <article>, <section>, <footer>, which help define the purpose and role of specific parts of a web page.

Accessibility: HTML supports accessibility features, such as providing alternative text for images, using proper heading structure, using semantic elements, and other attributes that make web content more accessible to users with disabilities.

Overall, HTML serves as the foundation of web development, providing the structure and presentation of content on the World Wide Web. It is often complemented by other technologies like CSS (Cascading Style Sheets) for styling and JavaScript for interactivity and dynamic behavior.

How to Write HTML?

<!DOCTYPE html><html><head><title>My Page</title></head><body><h1>Hello, World!</h1></body></html>

Explanation:

<!DOCTYPE html>: Specifies the HTML version.

<html>: Opening tag for the HTML document.

<head>: Contains metadata about the page.

<title>: Sets the title of the page displayed in the browser's title bar or tab.

<body>: Contains the visible content of the page.

<h1>: Defines a heading level 1.

Hello, World!: The actual content to be displayed.

Please note that this example is a very basic HTML structure, and for more complex pages, additional tags and attributes would be required.

How to Create an HTML File

To create an HTML file, you can follow these steps:

Open a text editor: Open a text editor of your choice, such as Notepad (Windows), TextEdit (Mac), Sublime Text, Visual Studio Code, or any other editor that allows you to create plain text files.

Start with the HTML doctype: At the beginning of your file, add the HTML doctype declaration, which tells the browser that the file is an HTML document. Use the following line:

<!DOCTYPE html>

Create the HTML structure: After the doctype declaration, add the opening and closing <html> tags to enclose the entire HTML document.

Add the head section: Inside the <html> tags, include the <head> section. This is where you define metadata and include any external resources like stylesheets or scripts. For now, let's add a <title> element to set the title of your page:

<head>

<title>My First HTML Page</title>

</head>

Create the body: Within the <html> tags, include the <body> section. This is where you place the visible content of your web page. You can add various HTML tags here to structure and format your content. For example, let's add a heading and a paragraph:

<body>

<h1>Welcome to My Page</h1>

<p>This is my first HTML file.</p>

</body>

Save the file: Save the file with an .html extension, such as myfile.html. Choose a suitable location on your computer to save the file.

Open the HTML file in a browser: Double-click on the HTML file you just saved. It will open in your default web browser, and you will see the content displayed according to the HTML tags you added.

Congratulations! You have created an HTML file. You can now edit the file in your text editor, add more HTML elements, styles, scripts, and save the changes to see them reflected in the browser.

Common HTML Attributes

<a href="https://example.com" target="_blank">Link to Example</a>

<button onclick="myFunction()">Click me</button>

</select>

Explanation:

<input>: Attributes like type define the input type (text, checkbox, etc.), name sets the input's name for form submission, placeholder provides a hint to the user, and required specifies that the input is mandatory.

<img>: src specifies the image source URL, and alt provides alternative text for the image (useful for accessibility).

<a>: href sets the hyperlink URL, and target="_blank" opens the link in a new tab or window.

<div>: id assigns an identifier to the element, and class adds a CSS class for styling or JavaScript targeting.

<button>: onclick triggers a JavaScript function when the button is clicked.

<table>: border adds a border to the table.

<form>: action specifies the form submission URL, and method sets the HTTP method (GET or POST).

<select>: name assigns the name for the selection input, and <option> defines the selectable options within the dropdown menu.

These are just a few examples, and there are many more HTML attributes available for different elements, each serving specific purposes.

#learn to code for free #coding course online #Online Web Tutorial #learn coding for free #online tutorial #learn code #learn code for free #introduction to coding #learn html #programming training courses #best way to learn coding #how long does it take to learn coding #learn coding for beginners #best online platform for learning coding #best place to learn to code online

5 notes · View notes