#can html id have spaces | Explore Tumblr Posts and Blogs

ceyhanmedya · 1 year

Text

HTML

New Post has been published on https://hazirbilgi.com/what-is-html-when-and-by-whom-was-html-created/

HTML

What is HTML? When and by whom was HTML created?

HTML is a markup language that defines the structure of web pages. HTML is one of the basic building blocks of every website . For this reason, it is among the first details that web developers will want to learn.

While HTML is an important building block, it is not enough to make a web page look good. It must be supported by CSS and JavaScript . HTML is essentially code and is used to structure the content of a web page.

The content on the web page can consist of a number of different paragraphs, images and tables. It is possible to format them with HTML. In this way, the web browser knows how to configure the web page that a person visits and displays it in the direction desired by the developer.

What is HTML and when was it invented?

HTML or hypertext markup language is a markup language developed for displaying materials or data on the internet. Each material has a known buyer location, called a web page . Web pages contain hypertext links that allow the fetching of related pages.

HTML is the markup language used to code web pages. HTML was designed by British scientist Sir Tim Berners-Lee in 1980 . HTML markup tags contain document elements such as headings, paragraphs, and tables. Once formatted, they can be viewed by programs or applications known as web browsers.

When viewing a web page, web browsers interpret it according to permitted technology. Thus, items such as headings, paragraphs, and tables are presented adapted to the screen size and font used. HTML documents also contain anchor links, called links to other web pages.

What is Semantic HTML?

Semantic HTML is the conveying of literal meanings for the uses of HTML tags. Semantic HTML was used effectively throughout most of the 90’s and became an important part of the standard HTML structure . Since the late 90’s, CSS has become more important in web pages when it has been used effectively .

Semantic HTML

It consists of tags such as , ,,, and . One of the most important reasons to use semantic HTML tags is that web crawlers can easily index the web page. In this direction, it is possible to improve the web page in terms of SEO . Also, semantic HTML is important for accessing web pages from screen readers.

What are HTML Versions?

After HTML was designed, it has developed in many different forms over the years. For this reason, the HTML versions that are used effectively have changed from time to time. There are five different versions of HTML that are used effectively. Each of them made extra contributions to the HTML structure, making it easier for the developers to use it.

HTML 1.0: It is the first version developed for HTML. It was published in 1991 and was used effectively until 1995.

HTML 2.0: Version released in 1995. It has been accepted as the standard version in web design. Added support for features such as text boxes and buttons.

HTML 3.2: Published by the W3C in 1997. It provided extra support in terms of table creation and form elements. It is considered the official standard since 1997.

HTML 4.01: Released in 1999. It is the stable language for the HTML language and is considered the official standard. It has added CSS support to the HTML language.

HTML5: It is the newest version of the HTML language and was announced in 2008. This version is developed by W3C and WHATWG .

What’s the Difference Between HTML Tags, Elements, and Attributes?

HTML tags , HTML elements, and HTML attributes are often confused and used interchangeably when defining. However, there are differences between these three elements. Each HTML tag has its own unique meaning. HTML elements are used to describe content. HTML attributes provide additional information for existing HTML elements.

What are HTML Tags?

HTML defines the formatting of a particular web page. For this reason, the text, images and other content on the page should be displayed in a shaped way. For example, you may want some text to be uppercase, lowercase, bold, or italic. To do this, you need to use HTML tags .

HTML tags are like keywords that define how the web browser will display the content. When a web browser reads a document containing HTML, it reads it from top to bottom and from left to right. Thanks to HTML tags, a web browser can distinguish between HTML content and simple content. Each HTML tag can have different properties.

What are HTML Elements?

HTML consists of three elements , opening tag, content and closing tag . Some elements are used as empty. HTML elements are often confused with HTML tags. However, an element consists of a combination of three different elements. All HTML files are made up of elements. These elements are responsible for creating web pages. They also describe the content on the web page.

Theoretically, the opening tag, content, and closing tag should go together. Some elements may not have content and closing tags. Such elements are called empty elements or self- closing elements . For example, a line spacer and a straight long line.

elements in this structure.

What are HTML Attributes?

HTML attributes are placed in the opening tag, and they range from the “style” to the “id” description. HTML attributes help convey more information about an element. In addition, these attributes ensure that needs such as styling elements on the web page with JavaScript are met.

While HTML attributes provide additional information about elements, they are modifiers of the HTML element. Each element defines the behavior of the element to which it is attached. HTML attributes must always be applied with the start tag. Although the names to be given to HTML attributes are case sensitive, standard usage consists of lowercase letters.

html,are html tags case sensitive,are html and css programming languages,are html and css the same,are html files safe,are html attachments safe,are html and javascript the same,are html tables still used,are html ids case sensitive,are html sites reliable,are html attributes case sensitive,create an html file,create an html page,can html files be dangerous,create an html table,create an html form,can html id have spaces,create an html element in javascript,create an html link,convert an html to pdf,

0 notes

wip · 1 year

Note

is there any possibility of keeping the legacy editor as an option? for content creators, the new editor completely ruins the quality of our gifs/edits/art and it's really frustrated to be forced into using an editor that's going to kill the quality of the creations that we spend time perfecting.

Answer: Hello, @junghaesin!

Thanks for writing in. And thank you to everyone else who has shared similar feedback.

So, tl;dr—this is actually a blog theme issue. Your theme is not showing images in posts created by the new editor as you expect.

GIFs uploaded via the legacy editor or the new editor are actually processed the same way. There is no difference in bit depth or in resolution. You can see this by looking at your posts inside the Tumblr dashboard instead (e.g. instead of yourblog.tumblr.com/post/id, go to tumblr.com/yourblog/id).

The reason why you see a quality difference is because posts created by the new editor are treated as text posts by older blog themes. Themes often add padding around all the content of a text post—including any images that appear in it. If your theme presents posts as 540px wide, then in a text post, with that additional padding, the available space for your images is actually less than 540px. As a result, the browser will scale your images down to fit, and when this happens, image quality takes a hit.

The solution—update to a more modern, up-to-date theme, like Vision or Stereo. Theme developer @eggdesign also built a theme template that works with new posts, that you can build on top of! These modern themes apply padding only to text blocks rather than the whole post, so image blocks receive no padding and are served at their full 540px width, just like the Dashboard. From what we’ve seen, this fixes all of the issues about perceived GIF quality on blogs.

We know. Changing your theme is a lot of work. In the near future, we’re looking into ways to make this transition easier—for example, helping you identify themes that work well with new posts in the Theme Garden. But working with new posts is the way forward—the new posts use a format that opens up a lot of opportunities in the future.

Why can’t you add post types to posts from the new editor? Why not serve new posts as photo posts instead of text posts?

The new editor uses a new post format, called Neue Post Format (NPF). NPF has given us a huge boost in flexibility when it comes to what content can be in posts—remember the time when you couldn’t even upload images to reblogs? Or how old chat and quote posts magically change authors? NPF helped us fix both of these things. It removed constraints—including post types, which limit each post to one specific type of content.

But existing blog themes still need to be able to display these posts. Because NPF posts can include media anywhere (while most of the old post types have a rigid structure for media), it was safest for us to categorize NPF posts as the least constrained post type—text posts. It’s the best we can do to make these posts backward-compatible with existing blog themes.

In lieu of post types, we’ve added an {NPF} theme variable per post that custom themes can leverage. Theme developers must update their themes to take advantage of this new data to retain full control of the HTML output of posts.

You can read more about these decisions, and the Neue Post Format specification, here and here.

Thanks for your feedback, and keep it coming!

With love,

—The Tumblr WIP Team

#feature #legacy editor #your suggestions

1K notes · View notes

saltminerising · 5 months

Text

We've had a few questions and a bunch of feedback about the new posting format so I'm just going to clarify a few things:

The new format was NOT intended to be permanent. I meant what I said when I said it was just an experiment we were trying because we got slammed with 80+ asks (and half of them were about the same thing).

Going forward, we will bulk post for similar situations in which a lot of asks are saying the same thing about a specific topic. This is largely to prevent topics dragging out for days and becoming circular and repetitive.

I find the bulk posting format much easier. This is mainly because Tumblr doesn't actually allow you to post blank replies to asks. Every ask we post has a space character in reply, and on top of this, the space doesn't count unless it's in HTML/Markdown, so for every post I have to switch the post formatting to one of those two. It's very tedious. You can test this by sending an anon ask to yourself and trying to post it.

One anon was concerned that people wouldn't be able to defend themselves here if we were no longer posting replies to posts. To be clear, if someone comes in like, "I want to say this in response to the anon who said blah" that's fine, we just won't post asks given with post ID numbers that could have been a reply. We delete a lot of asks that just look like: "/post/857372759699295 no, you're wrong"

I hope this alleviates some concerns and explains some of our reasoning. -Secretmin

#housekeeping #salt asks

31 notes · View notes

fostersffff · 5 months

Text

If you're someone who's interested in collecting physical media, especially DVDs and blu-rays, I cannot overstate how good an investment a blu-ray drive for your computer is.

There are copious free resources that will allow you to digitize your collection for additional preservation and convenience... and I've placed them beneath this break!

MakeMKV: https://www.makemkv.com/

MakeMKV is the program I use for backing up blu-rays and DVD. It’s “free while in beta”, and as far as I can tell it’s going to continue to be in beta forever. You just need to register the program with the beta code, which can be found here: https://forum.makemkv.com/forum/viewtopic.php?t=1053. If your registration ever expires, you can just go to that post and they’ll have it updated with a new one.

“MKV” is “Matroska Video”, which is a container format (named after the Russian nesting doll) that collects the video track, audio track(s), and subtitle track(s) all into one file, which is super convenient for anime, because that means you don’t need to worry about making separate files for different combinations of dubs and subs. My understanding is that this is, essentially, a lossless video copy, and I’ve done comparisons comparing screenshots taken from video playing off the disc and from the .mkv, and I haven’t been able to notice a difference. As for playing .mkv files…

VLC Media Player: https://www.videolan.org/vlc/

The Combined Community Codec Pack (CCCP): https://download.cnet.com/Combined-Community-Codec-Pack/3000-2139_4-10966585.html

VLC is my media player of choice for watching back the stuff I back up. I’m not 100% sure if you need to download the CCCP for this- my backups play fine on my tablet just using the VLC app, and I recently found out they even work off a USB stick plugged into a Samsung Smart TV- but it doesn’t hurt to have.

MakeMKV can also be directly integrated with VLC Media Player to play blu-rays right from the drive, which is tremendously valuable if you're not interest in/don't have the hard drive space for digitization. I think I’ve encountered maybe one thing that couldn’t be played off the disc with this solution, and that was fixed in a subsequent update to MakeMKV. The full breakdown of how to do that can be found here: https://stolafcarleton.teamdynamix.com/TDClient/1893/StOlaf/KB/ArticleDet?ID=128854.

MKVToolNix: https://mkvtoolnix.download/downloads.html

Different companies author discs differently, and I like to keep my stuff organized the same way, which is where this tool comes in. I won’t go into too much detail on this here, but if you ever need to split one large file into smaller files (for example, a disc has 9 episodes of a show to a single title/file, and you want to split them into individual episodes), edit or remove chapter information, or rename audio/subtitle tracks, this is the tool to do it. There's a lot to this, so I would suggest reading the official documentation, but I could also whip up a guide if people are interested.

HandBrake: https://handbrake.fr/

The video encoder for shrinking those backups down to size- my favorite example was getting all 49 episodes of G Gundam down from almost 300gb off-the-discs to just under 50gb. This is also going to be heavily dependent on how powerful your computer is, because encoding takes up a lot of resources. On my computer, which is by no means top-of-the-line, I’d say on average it takes about 50 minutes to encode a 24 minute episode of anime, and that increases exponentially the longer the source material is.

I got the settings I use in HandBrake from this incredibly detailed breakdown of how video encoding works: https://kokomins.wordpress.com/2019/10/10/anime-encoding-guide-for-x265-and-why-to-never-use-flac/#tldr-summary-for-x265-encode-settings. There's a lot of information there, too, but it also provides generic settings to plug in to HandBrake if you don't care to manually adjust the settings for each project you're doing.

And that’s everything I use for my process! A lot of this was trial and error with other programs that cost money, performed worse, and were generally aggravating to use. It's a bit of elbow grease, but the reward is that once something is digitized, you have it forever, exactly the way you want it.

#blu-ray #DVD #home video #physical media

28 notes · View notes

simnostalgia · 6 months

Text

I've recently learned how to scrape websites that require a login. This took a lot of work and seemed to have very little documentation online so I decided to go ahead and write my own tutorial on how to do it.

We're using HTTrack as I think that Cyotek does basically the same thing but it's just more complicated. Plus, I'm more familiar with HTTrack and I like the way it works.

So first thing you'll do is give your project a name. This name is what the file that stores your scrape information will be called. If you need to come back to this later, you'll find that file.

Also, be sure to pick a good file-location for your scrape. It's a pain to have to restart a scrape (even if it's not from scratch) because you ran out of room on a drive. I have a secondary drive, so I'll put my scrape data there.

Next you'll put in your WEBSITE NAME and you'll hit "SET OPTIONS..."

This is where things get a little bit complicated. So when the window pops up you'll hit 'browser ID' in the tabs menu up top. You'll see this screen.

What you're doing here is giving the program the cookies that you're using to log in. You'll need two things. You'll need your cookie and the ID of your browser. To do this you'll need to go to the website you plan to scrape and log in.

Once you're logged in press F12. You'll see a page pop up at the bottom of your screen on Firefox. I believe that for chrome it's on the side. I'll be using Firefox for this demonstration but everything is located in basically the same place so if you don't have Firefox don't worry.

So you'll need to click on some link within the website. You should see the area below be populated by items. Click on one and then click 'header' and then scroll down until you see cookies and browser id. Just copy those and put those into the corresponding text boxes in HTTrack! Be sure to add "Cookies: " before you paste your cookie text. Also make sure you have ONE space between the colon and the cookie.

Next we're going to make two stops and make sure that we hit a few more smaller options before we add the rule set. First, we'll make a stop at LINKS and click GET NON-HTML LINKS and next we'll go and find the page where we turn on "TOLERANT REQUESTS", turn on "ACCEPT COOKIES" and select "DO NOT FOLLOW ROBOTS.TXT"

This will make sure that you're not overloading the servers, that you're getting everything from the scrape and NOT just pages, and that you're not following the websites indexing bot rules for Googlebots. Basically you want to get the pages that the website tells Google not to index!

Okay, last section. This part is a little difficult so be sure to read carefully!

So when I first started trying to do this, I kept having an issue where I kept getting logged out. I worked for hours until I realized that it's because the scraper was clicking "log out' to scrape the information and logging itself out! I tried to exclude the link by simply adding it to an exclude list but then I realized that wasn't enough.

So instead, I decided to only download certain files. So I'm going to show you how to do that. First I want to show you the two buttons over to the side. These will help you add rules. However, once you get good at this you'll be able to write your own by hand or copy and past a rule set that you like from a text file. That's what I did!

Here is my pre-written rule set. Basically this just tells the downloader that I want ALL images, I want any item that includes the following keyword, and the -* means that I want NOTHING ELSE. The 'attach' means that I'll get all .zip files and images that are attached since the website that I'm scraping has attachments with the word 'attach' in the URL.

It would probably be a good time to look at your website and find out what key words are important if you haven't already. You can base your rule set off of mine if you want!

WARNING: It is VERY important that you add -* at the END of the list or else it will basically ignore ALL of your rules. And anything added AFTER it will ALSO be ignored.

Good to go!

And you're scraping! I was using INSIMADULT as my test.

There are a few notes to keep in mind: This may take up to several days. You'll want to leave your computer on. Also, if you need to restart a scrape from a saved file, it still has to re-verify ALL of those links that it already downloaded. It's faster that starting from scratch but it still takes a while. It's better to just let it do it's thing all in one go.

Also, if you need to cancel a scrape but want all the data that is in the process of being added already then ONLY press cancel ONCE. If you press it twice it keeps all the temp files. Like I said, it's better to let it do its thing but if you need to stop it, only press cancel once. That way it can finish up the URLs already scanned before it closes.

#Sims tutorial #Tutorial #HTTrack #website scraping #old web #internet archive

39 notes · View notes

phospadparadscha · 1 month

Text

a non exhaustive list of things i love about tumblr that have made it the only Usable Social Media(tm), as someone who follows the maximum amount (5000) of people and has seen it All:

-the tags. every othere sm requires tags to be uninterrupted, no spaces phrases and you can write full fucking novels in the tags on tumblr. this created a completely new ecosystem for how conversations and posts are structured on here. ppl post screenshots of tags, mention previous tags, encourage other people's writing and art in the tags, all while avoiding cluttering the original post's text with every reblog when you want to comment. you can make hushed commentary that sometimes gets noticed and adds a lot to posts when its picked up on!

-the ask system. we used to have fan mail on this site a few years ago but i don't know that it was as successful, so the ask and submissions system became the main way to go. its not as common to have themed ask blogs anymore (like "ask rainbow dash" where people draw responses, i've had a few of these kinds of blogs in the past) but it really allows people to acknowledge each other, get questions answered, and interact in a way i think is really missing from the internet in the late 2020s. its abused sometimes and anon hate still shows up on this site, but i think the culture has changed noticeably in that this kind of hate is brushed off more easily in most cases.

-the longevity of posts and how everything is archived. its so much easier to find old posts on tumblr than other places and you can sort archives of people's blogs based on a lot of different types, like photos only or text only, years posted, etc. really cool especially for looking back on your blog through the years and in the age of the New Posts Only its really refreshing to be able to revisit old posts. I see posts on here that show up from 2012 and its such a pleasant surprise since so much of the internet is being overwritten

- the absurdly customizeable color palettes and appearances of the site. its so customizeable and even though desktop blog sites aren't as common of a way to interact anymore (i miss them rip blogs with no desktop versions) you can literally edit the css and html and show your own personal aesthetics as much as you want to.

-the april fool's day rebrands

-the art is so good and photosets allow for longform posts which i never see ANYWHERE else on social media. you can post like up to 30 images in a photo set i think??? which was increased from i think max 10 and its all consecutive. also that we have a read more button to give people the option to choose to open long posts or not.

-the id system. i've seen a lot of people id posts and make posts more accessible. also people providing trigger warnings which you don't get other places tbh like i've never seen anywhere online where you could straight up choose what you didn't want to see so you don't have to encounter it in the wild! its really nice especially for someone like me who has several phobias lol

i could keep going but like.....i love you tumblr as someone who has been here for literally over a decade.

#tumblr #text #if tumblr dies i dies

3 notes · View notes

eliias-bouchard · 2 years

Text

[09/11] in light of the fact that tumblr is dying, my discord is jonahfagnus. go friend me if you want to keep in contact mutuals or not

gods i spent so fucking long on the html in this stupid post let's hope it worked

eliias-bouchard -> autistic-grey-wind -> bigender-sliver-of-straw -> eliias-bouchard

hi im lynx (or just see my pronouns.page). im some sort of thing or entity. welcome to my blog. please please view my blog as a site the theme is so good i spent a lot of time on it

edit: ed/sh blogs will be blocked on sight. no exceptions. dont follow me

my ao3

- disused writing tag: #tmabsent

- when i make a new “my writing” tag ill put it here -> temp writing tag

look at my ocs also check out starfallverse

favourites tag -> #%3C3 (its supposed to be a heart)

i cant guarantee consistent cwing but i generally try & do “cw thing” and “thing cw”. all of my posts are ask to tag forever and ever (do link to the post you need tagging though)

if ur my friend i might have a specialised tag for posts that remind me of u. i also might not. dont feel bad if i dont have one for you, its not indicative of how much i like you. also i usually wont tell you if you have a tag or what it is you gotta find that out for yourself

humans tag for ender

no particular dni criteria but i am pro any and all good faith identities & choose to trust the person on what their identity is. i'll just block if i dont like you

all blinkies made with blinkies.cafe

[ID1: a blinkie with the bigender flag in the background reading “bigender & better than you”.

ID2: a blinkie with the bigender flag in the background reading “trans in both directions”.

ID3: a blinkie with rainclouds on either side reading “mike crew lover”.

ID4: a blinkie reading “gerry keay lover”.

ID5: a blinkie with the plural symbol reading “not a gatekeeper”.

ID6: a blinkie with the tbh creature on one side reading “autistic af”.

ID7: a blinkie with the aro flag reading “unloveable <2″

ID8: a blinkie with the ace flag reading “-1 bitches”

ID9: a blinkie with the tbh creature on one side reading "ask me about rw"

ID10: same as above but with "ask me about ksbd"

ID11: same as above but with "ask me about hk"

ID12: same as above but with “ask me about tma”

ID13: same as above but with “ask me about aurora”

ID14: same as above but with "ask me about my ocs"

ID15: a blinkie with the homestuck cat on one side reading “hi lev hows the omniscience coming”

ID16: a blinkie with an octopus on one side reading “<-- fish :)”

ID17: a blinkie with a space background reading “ur local vastard”

ID18: a meme reading "you can always ask me for my discord; its never socially unacceptable" /end ID]

112 notes · View notes

pinkmoondoll9shihtzu · 1 year

Note

i was looking at your neocities site and i noticed you have a 144 page. this has been a special number to me for a long long time, i was curious what it means for you as well! n.n

love your site also... the way theres multiple images/gifs layered over one another is very cool. been wanting to try making my own neocities sometime soon.

wahhh thanlku so much doll TwT please make a site...id love to see what u come up with! i wld love if more ppl did it so i can set up a page for linking all the sites of my friends ^^ plus i find it to b a very relaxing activity.. i havent worked on my site in a few months tho cus i been preoccupied w/ other things but. im finally feeling the html juices flowing again this past week or so.. ur message inspires me to take action <3

for the 144 page, well, basically all the numbers for the pages are divisible by 9. because 9 is my obsession ^^ so while 144 itself isnt especially significant to me, i love all versions of 9 very much. 144 i will admite is a super cute 9. visually its just adorable. i also love that 144p is the lowest resolution for online videos lol cus i loooove that crunchiness. one time i lisened to something on why all the video resolutions (144p,360p,720p etc) add up to 9 but i forget the exact reason now lol. but it all ties into th simple fact that pretty much everything in space & time adds up to 9. heh heh..im also curious to know what 144 means to u cus ive seen u talk about it being special to you even before this and i wondered ^^ <3

12 notes · View notes

dioticodes · 1 year

Text

how to add masonry and infinite scroll to a tumblr theme

Hi, welcome. If you’re here, it’s because you want to add either Masonry, Infinite Scroll or both to your custom Tumblr theme.

Heads up, this guide requires some familiarity with HTML, CSS and Javascript as you will be editing your current theme and since all themes are different, I can't give step-by-step instructions on how to edit your exact theme.

Also, this post is best viewed on my desktop theme. Blame Tumblr for not supporting Markdown properly.

OVERVIEW

Alright, so what are we even adding? Basically, Masonry is used to display your posts in a nicely laid out grid, even if they're all different sizes. You tell it what your posts are, what you want them to fit into and it'll come up with a nice grid layout for you. Infinite Scroll is used to... infinitely scroll through posts with having to go to another page. It’s the endless scrolling of your Twitter/Instagram/whatever feed.

Now maybe you’ve already got one or the other in your theme and you’re looking to add the other one. Sounds pretty simple, yeah? It kind of is. The trouble is that Masonry and Infinite Scroll interact with each other. When you’re using Infinite Scroll, whenever you scroll down and load more posts, Masonry needs to check whether your post layout is still okay and correct it if it isn't.

PLUGINS

For the sake of this guide not getting too confusing and because they integrate so easily together, we’ll ONLY be using David DeSandro's Masonry and Infinite Scroll Javascript plugins. If you’ve got different versions of these plugins, remove them now as they may cause issues.

First, we need to add the plugins to your theme’s head:

HTML

To get Masonry working, we need to know what your posts are and the container that they're in. Give your posts a class (e.g. .post) and your container an id (e.g. #posts). We can also specify additional options, such as column width and spacing between the posts. We want the layout to be responsive, so by following the example code Masonry provides, we'll create post-sizer and gutter-sizer.

To add Infinite Scroll, we need to know what the posts are (same as Masonry) and where to get the new content from - this will be the next page of posts on your blog. Tumblr lets us get that easily using pagination variables. Make sure you give the next page a class (e.g. .pagination__next), since this is where we'll be loading new posts from.

Your HTML might look something like this:

<div id="posts"> <div id="post-sizer"></div> <div id="gutter-sizer"></div> {block:Posts} <div class="post" id="{PostID}"> <div class="post-content"> {block:Text} {/block:Text} </div> </div> {/block:Posts} </div> <p id="footer"> {block:PreviousPage} <a href="{PreviousPage}">« Previous</a> {/block:PreviousPage} {block:NextPage} <a href="{NextPage}" class="pagination__next">Next »</a> {/block:NextPage} <a href="/archive">Archive</a> </p>

CSS

For the styling, we want the layout to be responsive so we'll set post-sizer and gutter-sizer to have a % width. For the rest of the styling, we'll use some of Masonry's example code again.

Your CSS might look something like this:

* { box-sizing: border-box; } #posts { width: 800px; } #posts:after { content: ''; display: block; clear: both; } #post-sizer, .post { width: 32.66%; } #gutter-sizer { width: 1%; } .post { background-color: lightgrey; margin-bottom: 10px; } .post-content { width: 100%; padding: 10px; float: left; }

JAVASCRIPT

In your theme's head, we can create a new script and set up Masonry inside it like this:

Then to actually get Masonry to generate a layout, we need to call it like this:

msnry.layout();

Usually, that's all you really need for Masonry but for Tumblr posts, any media embeds might take a bit of time to load. For example, Instagram embeds get taller when they're fully loaded (or at least they used to) and this can screw up the layout of your posts. To deal with this, you can add an observer that checks for any changes with media embeds and calculates a new layout if needed:

const embedObserver = new MutationObserver((m, o) => { msnry.layout(); }); embedObserver.observe(document, { childList: true, subtree: true });

Then finally, we need to set up Infinite Scroll. Remember, we're using the same posts that Masonry is changing. Since this plugin is made by the same guy who wrote Masonry, we can integrate it easily using outlayer:

let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', outlayer: msnry });

Every time it loads a new page, it'll update the URL in your address bar. If you want to turn that off, you can add a new line to the previous codeblock, setting history to false:

let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', history: false, outlayer: msnry });

And that should be it! The whole script should be something like this:

FINALLY...

Do keep in mind that your theme code will be different to this, so it's not a case of just copying and pasting everything directly. Remember to remove any old Masonry or Infinite Scroll plugins you already have. Your class and id names will probably be different and you may need to add certain HTML elements if you're missing them. You'll almost certainly need to tweak the styling too.

Feel free to shoot me a message if you need help or want to heckle me about the guide being outdated.

#tumblr themes #tumblr theme #masonry #infinite scroll #theme resources #tumblr #original

20 notes · View notes

amber-gimlet · 8 months

Text

I'm still a novice in it obviously, but I have to say, the dynamic between html and css, specifically an html page and a css external style sheet, is just

sublime

the way that content and presentation can be efficiently adjusted independently from each other, that with sufficient foresight in terms of class and ids, you can simply reconfigure the final outcome according to your whims.

adjust colors and spacing, or adjust text with the comforting knowledge that the spacing will adapt automatically to compensate

idk I just want to stare at the text for awhile.

#three distinct siege modes

3 notes · View notes

wilderlingdev · 2 years

Note

what do you mean by formatting?? sorry im new to twine, so still learning

no problem, nony! i mean this:

this is vs code! it's a code editor and i use it daily at my day job (im a very junior web dev) and i have it set up so it automatically formats everything for me if i save the file. it also has other nice things like syntax highlighting, linting, etc.

(ignore the actual code above, its from my typescript course exercise lol)

meanwhile twine is is like...

there is no god here, nony. there is syntax highlighting, which is nice, but making the code look pretty/readable is such a pain and you are otherwise on your own.

also, in passages its downright impossible to tell code from writing at a glance, like:

which is why its so easy to miss obvious bugs/misspellings. and the editor for passages lacks any sort of actual editor-y (?) features, too! it relies on markdown, which i dont hate, but it isnt very writer-friendly imo. so it's like... this is not a code editor, but you gotta code, and also this is not really a writing editor, but you also gotta write! also, whitespaces actually take up space in the final game, which is bizarre. i know there are macros like nobr or silently, but it all gets pretty cluttered pretty fast.

compare it with renpy, for example:

mind, ^ this would never work in renpy bc renpy doesnt deal with html (or sugarcube code lol) but since you gotta use an out-of-the-engine editor to write your code, this means that (unless you dont fear god and use like, notepad) you can easily have syntax highlighting, linting, formatting, etc. it will never be a rich text editor, of course, and it doesn't try to be.

when i used to mess around in renpy id write directly into vs code, throw everything into google docs to catch errors and then throw it all back into vs code and tada! which is not the best experience ever but it still easily beats twine's code editor that isnt really an editor so you better use a real one + rich text editor that isn't really a rich text editor so you gotta use a real one + now cobble all the pieces together inside this gui where all your set up code is miles away from the passage you are building experience.

and dont even get me started in how annoying it is to write a few if statements in twine/sugarcube. like, writing this:

took a few weeks off my lifespan just based on how annoying it was. and it isnt even a complex passage!

what i love about twine is how easy it is to plan out routes with the zoomed out view of the passages. but everything else drives me up a wall. maybe i just need to find a workflow that works for me bc so far i havent been lucky. maybe giving tweego a real shot will solve my problems.

sorry anon i hijacked your ask to rant about twine lol

#replies #i feel bad complaining about twine this much bc its still a free software #but im annoyed

12 notes · View notes

spikeinthepunch · 1 year

Text

i feel like it may be worth just rambling about my website and what things id like to do with it in terms of rehauling the look. i am always the type to say "no, this will stay in my brain until i know for sure what i want to do". but that often means fleeting ideas dont stick and not talking about it makes it hard to properly envision

my website kind of got a solid look mid-early last year after i learned more html formatting and i quite like it- a landing page, a home page, and a few spin off pages (project site and coffini outlet). i didnt feel like i acheived what i wanted to emulate out of the old web though- making the page feel like a proper "home" or diving into my own personal world.

i mostly considered the first solid design to be temporary as i figure out what i wanted to do with a theme that felt more homey, but that didnt happen for a variety of reasons.

the main struggle out of all of it is actually making the assets. there is a lot of ways i could tackle the "old internet" look with assets. low quality jpegs? pixel art? low poly 3d gifs? many other things i am not experienced with making either- and the aesthetic i think i would go for most is pixel art. and even outside of the style is just SO much stuff to make. i gotta make the background? the containers? the buttons? the borders? scroll bar? and every other little decoration!! it is overwhelming especially when i dont even know if i can make it all myself in a way i like because i havent done much pixel art.

in terms of what i want to do though (lets not forget i am writing this to also remind myself what i want to do) outside of my annoyance for procrastinating- i want to rework my landing page to be cuter and more themed. everything to be more themed. obviously i lean a lot on space aesthetics, and would certainly want the landing page to be about that. either something like, a spaceship gif and the puffs of smoke linking to the homepage/etc. or a solar system. home page, i still want to be similar layout as to keep it easy to navigate... but id want to carry that look very heavily still. want think giving the containers a sort of mechanical sci-fi look would be neat, like youre inside a ship. or maybe make it look like holographic screens (id want to try and keep my light color text on a dark background look). for coffini outlet, i want to make all the graphic myself and probably alter the layout a bit? but not too much, as i think this one is ideal for reading still. so really, just a more original header image. for my project page? i quite like it as is, i made it more recently with some help of a template.

so those are the thoughts i have. aside from the aesthetics i know i really want to improve on my code in terms of making it semi workable on phones but also way more usable on different window size.... currently this is a big problem still on some pages:

improving the technical side of the website is important and i think my meds working will help me focus on that a bit more in terms of...learning how to lol. and i do want to sit down and learn properly about the aesthetic parts i feel i dont have the skills for too- ive kind of put a lot of that onthe backburner with all the fan art i have gotten into as well and i feel like i want to pull away from it just a tad in order to focus on original things.

#illunet

1 note · View note

rajmithwebagency · 2 years

Text

TOP 5 TECHNOLOGIES IN WEB DEVELOPMENT?

Modern technology has paved the way for individuals to complete daily tasks more efficiently. Advancements in technology, especially in web development, are changing drastically in order to satisfy the needs of individuals who are no longer satisfied with what the current technological product can do. In an attempt to expand the Web, various organisations and companies are willing to customise their personal Web spaces and move towards a completely remote platform, all while making it more convenient for individuals online. However, as we know, since we cannot communicate with computers, a platform with codes and a set of rules are necessary. Computers use web technologies and programming languages to form their interface.

Websites are built using HTML, CSS, and JavaScript, all programming apps that have changed society drastically. According to client specifications, the websites are modified and updated using these frameworks in order to deliver the desired content that needs to be displayed. Web development varies from the simplest texts to complex kinetic pages, and the developer is supposed to take up the required technologies in line with the stipulations of the client.

Analysing the prevailing web technologies, let’s take a look at the most renowned breakthroughs:

Ruby on Rails (RoR)

It's trendy! As the new update comes out regularly, the fever is high. In a least amount of time, Minimum Viable Product (MVP) could be built and help contribute to its popularity, ultimately becoming the developers’ choice.

Angular

For desktop web applications and mobile apps, Angular is the best alternative. This app is known for reducing the redundancy of texts and data. In an attempt to achieve this purpose, Web designers may use HTML as the template language. AngularJS will allow the extension of HTML syntax and convey the necessary components of applications. Angular is a JavaScript based open-source front-end web framework for developing single-page applications.

• Controls over scalability

• Angular-specific help and feedback with nearly every IDE

• Productivity supports Google's largest applications

Symphony PHP

Symphony PHP is a set of PHP components and frameworks for building web applications. It is also an open source with MVC architecture. The main use of this technology is to build high-performance web applications. Furthermore, it has a competitive periphery over other frameworks in many aspects of application development, ultimately saving time and hectic code work.

ASP.NET

Asp.net is an open-source web application framework designed to produce versatile web pages. It is capable of developing dynamic content-driven websites by providing simple and faster solutions based on HTML5, CSS, and Javascript. It is extremely scalable as it comprises both frontend and backend languages.

Motion UI

For the next decade, motion design can be considered as one of the main web design trends as it has drawn attention due to its minimalist designs along with subtle interactions. Many elements of this technology can help you display your unique style!

Apart from these technologies, React JS, Python, Vue JS, Express.JS, Cake PHP, DJango, Laravel, and so on are a few more frameworks which are in demand. In fact, from the servers, technology goes to clients and clients to end users. So, advancements, as always, would continue to make amazing breakthroughs and benefit humankind.

#website development #webdevelopment #web development company in gurgaon #website development company in gurgaon #website developer in gurgaon #rajmith

3 notes · View notes

aubabiwilson · 4 months

Text

web workshops 1 + 2 notes

session 1 -

Step 1

Show them Front End vs Back End of test site...

Step 2

Get them to their own URLs

Step 3

Get them logged into Back End - /wp-admin

Step 4

Get them to open Front End in a new private browser / incognito window

Step 5

Settings > General

Site Title - Their Name

Tagline - Something relevant or blank (SEO)

Do not change Wordpres or Site Address… Explain why.

Also do not change admin email… Explain why

Save Changes

Step 6

Appearance

Add New

Upload Theme

Choose File > Lay.zip

Install Now

Activate

Step 7

Dashboard > Updates

Update Wordpress if you need to

Update All Plugins

Update Lay Theme

Step 8

Appearance

Menus

Menu Name

Tick Primary Menu

Create Menu

Step 9

Projects

Trash - Hello World

Add New

Edit the title

Explain Gridder

Add Images

Alt Text

Title

Caption

Description

Arrange images

Add Title to Text

Add Text

Add Feature Image

Publish

Step 10

View post

Look at how the image and site title bar interact

Adjust set frame top = 60px

Update

Step 11

All Projects

Duplicate Post

Edit Copy

Step 12

Edit the title

Edit the permalink

Edit the images and Upload new ones

Edit layout & text

Remove Featured Image

Add new featured image

Update

Step 13

Projects > Categories

Edit Work

Add Project Thumbnails

Adjust frame if you want

Update

Step 14

Appearnce > Menus