r-efs - Tumblr blog

[r-efs]

jQuery-free TimeAgo Tumblr plugin

I've absolutely loved using @bychloethemes timeAgo(); plugin for several of my Tumblr themes, but wanted to utilize their timestamp feature without the requirement of jQuery since I no longer use it in my themes. This is my attempt at rewriting it in pure Javascript. I have, respectfully, used Chloe's options for easy usage.

→ Installation & guide

[r-efs]

Alternative Bigender Flag Design!

okay friends, so I’m not going to lie when I heard that the creator of the bigender flag wasn’t that great (see here) I was a little sad. it is without a doubt one of my favourite flags so I was pretty upset to see it go. none of the suggested alternative flags quite fit my experience as a bigender individual so I designed my own!

the meaning for each stripe are sort of up to you as I’m not quite certain about them, I’m completely open to suggestions if you want to throw those in the comments!

the pink/blue stripes are for presentation and the feeling of your identities (feminine, masculine, androgynous, whatever suits you)

the top white is for all kinds of good relationships

purple is for your unique bigender experience, how it feels and what it’s like! it’s also for understanding each other in this community!

and the bottom white is about self respect, pride and being true to yourself :)

[r-efs]

[r-efs]

.spoilerTags(); is a tag-filtering plugin for your tumblr theme based on the existing tag filtering system for the dashboard. You can set your own tags to filter, and if a post contains those tags, it will cover it up with a warning message, which readers can dismiss by clicking a button if they still wish to proceed.

Features:

filter anything from spoilers to content warnings!

custom warning message

option to include or exclude ‘#’ before tags

custom tags separator

custom ‘show anyway’ text

option to shrink posts until click expand

adjustable colors

♡ Install it here

[r-efs]

Tumblr is Tracking Shared Links

It looks like Tumblr @staff have finally implemented tracking garbage into shared links in the Tumblr mobile app. It took them years and years, but Tumblr is finally making an attempt to track shared links you click or links you share with friends.

When you share a post and choose to “copy” a link to your clipboard, you can see that they use their (new?) url shortener, at.tumblr.com.  The shortened URL appears to contain: your blog name; either the ID of the destination post, or the short string associated with the post; and an alphanumeric string.  Eg:

https://at.tumblr.com/pizza-and-ramen/im-fucking-dying-this-is-hilarious/uqndb20nkyob

The shortened URL redirects you to the destination link, but with 2 URL parameters: _branch_referrer and _branch_match_id.  Both are associated with a third-party analytics tool, branch.io.  Eg:

https://pizza-and-ramen.tumblr.com/post/118684413624/im-fucking-dying-this-is-hilarious?_branch_referrer=H4sIAAAAAAAAAxXEwQ2AIAwAwIlKH8aP21RQaaSAUIIyvZpczqvmuiCSGm2yhmJsEsw8BgFFB4Vki8gCe7MnxwPc86%2BeK3w8ByqcWsU7jHnql0u99xd0v%2FAuVQAAAA%3D%3D&_branch_match_id=1104914739086906151

_branch_referrer appears to be another shortened at.tumblr.com URL, except it’s been gzipped, base64 encoded, then URL encoded.  Eg:

H4sIAAAAAAAAAxXEwQ2AIAwAwIlKH8aP21RQaaSAUIIyvZpczqvmuiCSGm2yhmJsEsw8BgFFB4Vki8gCe7MnxwPc86%2BeK3w8ByqcWsU7jHnql0u99xd0v%2FAuVQAAAA%3D%3D

URL decode to:

H4sIAAAAAAAAAxXEwQ2AIAwAwIlKH8aP21RQaaSAUIIyvZpczqvmuiCSGm2yhmJsEsw8BgFFB4Vki8gCe7MnxwPc86+eK3w8ByqcWsU7jHnql0u99xd0v/AuVQAAAA==

base64 decode to (in hex for legibility):

1F8B0800 00000000 000315C4 C10D8020 0C00C089 4A1FC68F DB545069 A4805082 32BD9A5C CEABE6BA 20921A6D B286626C 12CC3C06 01450785 648BC802 7BB327C7 03DCF3AF 9E2B7C3C 072A9C5A C53B8C79 EA974BBD F71774BF F02E5500 0000

and unzipped with gunzip:

https://at.tumblr.com/pizza-and-ramen/im-fucking-dying-this-is-hilarious/xlz53wqdowww

which directs to the post with the same _branch_referrer but a new _branch_match_id:

https://pizza-and-ramen.tumblr.com/post/118684413624/im-fucking-dying-this-is-hilarious?_branch_match_id=1104899685865808870&_branch_referrer=H4sIAAAAAAAAAxXEwQ2AIAwAwIlKH8aP21RQaaSAUIIyvZpczqvmuiCSGm2yhmJsEsw8BgFFB4Vki8gCe7MnxwPc86%2BeK3w8ByqcWsU7jHnql0u99xd0v%2FAuVQAAAA%3D%3D

_branch_match_id, according to this stackoverflow answer, is an identifier unique to you, used to track users.  It could be based on browser fingerprinting, as branch.io’s branch_match_id is.

Anyway, there’s not a terribly easy way to avoid this tracking from the Tumblr mobile app, but if you get a link that has the id, not the string, you can modify it to the format of blog.tumblr.com/ID, like so before sending it to a friend:

https://at.tumblr.com/pizza-and-ramen/118684413624/uqndb20nkyob

https://pizza-and-ramen.tumblr.com/118684413624

Alternately, you could paste the link in your browser, allow it to redirect, then remove everything past the ? at the end, eg:

https://pizza-and-ramen.tumblr.com/post/118684413624/im-fucking-dying-this-is-hilarious?_branch_referrer=H4sIAAAAAAAAAxXEwQ2AIAwAwIlKH8aP21RQaaSAUIIyvZpczqvmuiCSGm2yhmJsEsw8BgFFB4Vki8gCe7MnxwPc86%2BeK3w8ByqcWsU7jHnql0u99xd0v%2FAuVQAAAA%3D%3D&_branch_match_id=1104914739086906151

https://pizza-and-ramen.tumblr.com/post/118684413624/im-fucking-dying-this-is-hilarious

Anyway, this has been my privacy rant of the day.  Thanks for reading, and let me know if you know more about this than I do!

[r-efs]

Ramen with Ham and Sausage from Run BTS 125

Ingredients

1 mild flavor ramen

1/5 can of ham (40g)

2 sausages (30g)

1 egg (60g)

1/3 cup green onions (30g)

1/2 cup cooking oil (80ml)

3 cups water (540ml)

Steps:

1. Cut the ham into 0.7 cm thick slices.

2. Cut marks on one side of the sausage.

3. Chop the green onions (Korean leek).

4. Put a generous amount of cooking oil on the pan and fry the hams and sausages while tossing them.

5. Add an egg to the pan and fry it (soft to medium).

6. Put water, seasoning powder, solid ingredients in the pot. When the water boils, add ham and sausages and bring to a boil.

7. When the water boils again, add noodles and bring to a boil.

8. When the noodles are loose and cooked, add green onions.

9. Plate the food and put fried egg on top.

Disclaimer: These instructions are based on a mix of the subs from the video, google translate, and my own knowledge of cooking. Which is to say, these instructions may not be entirely exact and you’ll have to forgive that.

[r-efs]

Making GIFs load faster

AKA why are some of my GIFs being turned into videos?

Overview

We’re experimenting with serving GIFs as MP4 videos instead of GIFV (which typically serves animated WebP) on the web to a small subset of folks on Tumblr, not everyone. This does not affect anyone using the mobile apps.

The performance improvements from using MP4s in this way are huge, and will make Tumblr load animated images faster and use less data in almost every circumstance, with no discernible loss in quality.

This conversion only applies to specific types of GIFs, such as ones without transparency in the first frame. We’ve tested this conversion on thousands of GIFs, and we’re still tuning it to be virtually indistinguishable from the original GIF.

XKit’s “Vanilla Videos” extension was causing a bug with this experiment, but a recent new XKit version release has fixed that issue.

If you’re served an MP4 instead of a GIF, clicking on the image will still open it in a lightbox, which you can download as GIFV or GIF, depending on what’s served.

Since this is still just an experiment, there is no way to opt-out yet; adding some kind of opt-out (on the creator and/or consumer side) is a possibility though.

If you’re served a GIF as MP4 and it looks wrong, please contact Support with a link to the image and what looks wrong about the conversion. We need examples to help us improve the experience. Also, please do not send duplicate support requests.

What

As a recent Changes post mentioned, we’re experimenting with transforming GIFs into MP4s on the dashboard on web. Our goal is to get GIFs onto dashboards as fast as possible, while retaining as much of the original quality as possible.

For years now, we’ve delivered GIFs using our GIFV format, which transparently transcodes GIFs to more modern formats, like WebP, supported by the <img> tag. We’ve made improvements to that process over the past year, better supporting large GIFs and increasing the quality of the transformation, but conversion to WebP has limited benefits. A typical conversion only halves the file size and animated WebP isn’t well supported by Safari. Meanwhile, MP4 conversions offer even smaller files, often 8 to 10x smaller than the original GIF, as well as faster loading times and broader browser support.

We’re being picky about which GIFs get converted to MP4. We only apply the transformation to GIFs that pass our criteria for transformation. Currently, that means GIFs that don’t use transparency in the first frame, have constant frame rates, and are under 10 seconds long. 

We’ve tested this new process against thousands of GIFs from Tumblr, ranging from your typical TV show gifset to pixel art to animated text, and are confident the transformation looks good for the vast majority of content. However, we’re still tweaking the algorithm and are open to feedback. This is a subjective process, and if you see an MP4 that looks worse than the GIF, please send it our way!

Currently, the change only affects the experience within Tumblr (www.tumblr.com). The blog network (i.e. your-blog.tumblr.com) is not affected and continues to use GIFV to deliver GIFs.

Why are we doing this?

As mentioned above, GIFs are almost always inefficient compared to modern formats. They’re larger in size, take longer to load, are slower to render, and use more cache space. Whereas our GIFV conversion usually halves the size, the new GIF->MP4 conversion is often 8 to 10 times smaller for film- or TV-like content. We have a lot of that kind of content on Tumblr (go check out #filmedit or #moviegifs) and delivering the content as MP4 makes those tag pages load quite a bit faster, especially on slower connections. 

As an example, here’s an original GIF that’s 3.4 megabytes. Converting it to webp using GIFV gets us down to 2.3 MB, 68% of the original. But converting it to MP4, gets us down to 641K, 19% the size of the original and 5x faster to load. On tag and search pages, where we often show many many GIFs at the same time, this makes a huge difference in the loading and browsing experience. 

However, Creators on Tumblr regularly churn out hand-tuned, pain-stakingly optimized GIFs that really take advantage of the format. We really don’t want to make these look bad – they’re works of art, and they’re natively better than these modern competing formats. For now, since this is still just an experiment, we haven’t determined yet how we’ll handle the ability to opt-out of this change (for creators and/or consumers of GIFs), but we have it in mind. 

In the meantime, if you’d like to download the actual GIF version of any GIF, just replace the extension on the image url with .gif. So https://64.media.tumblr.com/af554ca5b0e60d313e40c8c47e13824b/d422d5f60551ce04-12/s2048x3072/4b5293df9726acfe461f7eaf661f92acd060dd21.mp4 becomes https://64.media.tumblr.com/af554ca5b0e60d313e40c8c47e13824b/d422d5f60551ce04-12/s2048x3072/4b5293df9726acfe461f7eaf661f92acd060dd21.gif

When

We’re rolling out this change on the web in phases over the next month. We’re currently only analyzing newly uploaded GIFs, so existing GIFs won’t be affected for a while. And it’s only rolled out to a percentage of users, so you may or may not see the feature yet today.

Guidelines for GIF creators

Reporting bad conversions

If you found a poor quality conversion on one of your GIFs, we’d love to hear about it. Please contact Support with the URL of the post and let us know which GIFs could be better. Please include what aspect of the transformation is problematic.

How can I preview what my GIF will look like after the transformation?

If you want to see how any GIF would look converted to MP4, just find the media URL for the GIF and replace the extension in the URL from gif or gifv to mp4. This works for any GIF on Tumblr, not just the GIFs that we’ve flagged as good candidates, so that we can see what the results could be like.

As a GIF creator, how can I opt-out?

For the moment, adding a single transparent pixel to the first frame of the GIF will opt that image out of conversion to MP4. It will not opt you out of conversion to WebP or other formats that our GIFV implementation may support. We’re still thinking through what another kind of creator and/or consumer opt-out could look like.

That said, we would love to hear from you! So please send in anything that looks wrong. Also, keep an eye on the Changes blog for more updates about this.

[r-efs]

Speed up your blog by using InstantClick

It’s a script which smartly preloads links that people are likely to click on making your blog feel instant.

Before someone click on a link, they hover over that link. InstantClick makes use of that time to preload the page so that it is ready when they click. 

Keep reading

[r-efs]

How to make a custom “Not Found” page on Tumblr

Have you ever wondered, is there any way to customize a “Not Found” page on Tumblr? The answer is yes, it is possible. 5 months ago, I made a new layout for this blog and was wondering exactly as said above. So I decided to sacrifice my time to look for my solution on Google. I actually have found a good tutorial made by Anarchei. But unfortunately, this method will only replace the text on the posts, not the whole page itself.

Not satisfied, I put my efforts to search the solution and I’ve finally found another solution on Stackoverflow. There was an answer by mikedidthis said that the only solution for this problem is using Javascript/jQuery — to be honest, yes this is the only solution.

The example jQuery code that he shared:

$(document).ready(function() { $("p:contains(The URL you requested could not be found.)").html('YOUR TEXT HERE'); });

This code is working fine for me. But sadly, this method will only replace the text on the posts as well. So I am here sharing my code that could replace the text with the whole page differently.

HTML: Creating a div element

We are going to create a new div layers beforehand. I am assuming that you have a knowledge of HTML, CSS, and jQuery before following this tutorial. Put this code under <body> tags:

<div class="wrapper_notfound"> <div class="actual_notfound"> <h1>Not Found</h1> Sorry, friend. The URL you requested could not be found. Please go <a href="/">here</a> to refresh the page. </div> </div>

CSS: Styling the element

After putting the code above, we want our page to look pretty, right? Therefore, I made my own CSS here, put the code within <style> or <style type=“text/css”> tags:

.wrapper_notfound { position: fixed; visibility:hidden; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #f9f9f9; z-index: 999999999999; } .actual_notfound { position: absolute; left:50%; top:50%; font-family:'Source Sans Pro', sans-serif; transform:translate(-50%, -50%); width:calc(600px + 0.25vw); font-size:calc(22px + 0.25vw); line-height:170%; text-align: center; } .actual_notfound a { color:#444; text-decoration: none; border-bottom:3px solid #EDC951; }

Since I used the font from Google Fonts, insert this code above <style> tags:

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>

Here’s the final result. You can change/customize your page as you wish.

jQuery

We’re almost done! You need this code in order to make our “Not Found” page is working. I’ve added the if statement to specify a block of JavaScript code to be executed if a condition is true and add some syntax. Add this tag before </body> tags:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script> $(document).ready(function() { if ($('p:contains("The URL you requested could not be found.")').html()) { $(".wrapper_notfound").css( "visibility", "visible" ); $(".article_position").remove(); $('title').prepend( "Not Found | " ); } }); </script>

Explanation:

As explained above, if is used to specify a block of code to be executed, if a specified condition is true. Please go here for more information.

The .css() method sets or returns one or more style properties for the selected elements. This code will replaces visibility:hidden; to be visibility:visible; so that the wrapper of the not found page will be visible.

.remove() is used to remove the element itself. This code is used to remove the container of my posts so that it will be removed from the page. You would have to replace the .article_position selector with your own code.

.prepend() is used to insert specified content at the beginning of the selected elements so the name on tabs in browsers is filled with the text shown above. You can replace the text as you wish.

Let your creativity rule!

Ugh..boring. We don’t want to make our page is only a plain text, don’t we? How about adding an emoticon on the page? Sure thing! You can find more icon at http://www.flaticon.com but I decided to use Color Emotions Assets made by baianat. I used this sad icon to accompany the text below. There will be 5 options to use, but I chose SVG as it scales to any size without losing clarity and looks great on retina displays.

That’s all! Any form of credit, like and reblog are really appreciated, thank you!

[r-efs]

Difficulty: ★ ★ ★ ★ ☆

In this tutorial I will explain how you can use Isotope filtering with multiple filter groups and multiple filters from the same group. You can see a preview here or play around with it/read the full explanation and source code here.

This tutorial is based on a StackOverflow answer that you can find here. Thanks also to @isaacsthemes for asking me to write this script haha

You’ll need HTML/CSS knowledge and it’d be best if you had at least some basic jQuery/Javascript experience before using this.

Keep reading

[r-efs]

Redirect your old tumblr links to your new url--the correct way!

A quick Google search told me that apparently no one knows how to do this properly :P You can redirect all your links from your old tumblr url to the same respective links on your new tumblr url (as long as you have your old url saved i.e. on a sideblog). This doesn’t just always redirect old links to your new tumblr’s homepage.

This is like going to: http://oddhouredproductivity.tumblr.com/tagged/tips (try it!)

and the URL automatically changes to: http://oddhour.tumblr.com/tagged/tips

If you’ve ever tried to find a post from someone’s old url on their new url, you know how annoying it can be.

How to use: Add this script either before your end body tag (</body>) or in the head section (<head></head>) of the tumblr where you saved your old URL. Change oddhour.tumblr.com to whatever your new URL is.

<script> /* redirect to new blog :: questions? ask oddhour on tumblr */ location.replace('http://oddhour.tumblr.com' + location.pathname); </script>

To add a delay before redirecting, refer to this post.

For a simple redirect theme like mine or for an example of this script in use (with delay), see the code here.

Have a question? First check the #redirect code tag.

[r-efs]

Tumblr Theme Preview Marker Remover

I’ve used this script a lot now so I figured I should share it!

I was always having problems with figuring out what styling would actually work and when I was poking around in the inspect feature I noticed that in the theme preview window, tumblr adds these seemingly useless divs that mess up layouts and good styling practices??? So I coded a script to remove them so I could get a more accurate gauge for what a theme would look like while in the preview pane.

I never leave this in after I’m done customizing because I made it for customizing and it feels pointless to have one more script to load when it won’t do anything outside the customization pane?

Installation:

You only need the first <script></script> bit if you don’t have a jquery reference in your theme already. If you have a reference to an older version, try it and if it doesn’t remove the divs with the tumblr_preview_marker___ class then use the entire provided script.

Paste this before </body>

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script> <script> // script by alyssa @thm97 $(document).ready(function(){    $(".tumblr_preview_marker___").remove(); // removes the tumblr preview markers that interfere with layout preview in customize }); </script>

This could probably be done with simpler code but this was what was easiest for me as a relative beginner!

as always, if you have any questions, feel free to message me!

[r-efs]

₊⁺  GRIDDERY ⁺₊

Inspired by David DeSandro’s masonry, griddery is a script that automatically organizes divs into a grid without relying on .height() and position:absolute, instead utilizing table-row, table-cell, and :nth-child to mimic a grid by sorting the divs into columns.

I played around with this idea for my tags panel in my Bliss page, and wanted to tidy up the code and share it.

🎉 𝐌𝐀𝐘 𝟐𝟎𝟐𝟐 𝐔𝐏𝐃𝐀𝐓𝐄: v2.0 is here! you can now use gridderyV2() for as many different elements as you want.

🍹 DEMO  //  INSTALL + INSTRUCTIONS 🍹

[r-efs]

Random Image Script Tutorial | Beginner

The tutorial about the random image script is for when you want to have different sidebar images (or technically any other image - except background image) change when you refresh. It will explain how to install the code in any theme. As long as you know how to CTRL + F and know how to upload images to an image host, you will be able to do this.

It’s a long tutorial so be prepared to read - but it’s a thorough tutorial.

[r-efs]

This is a masterlist consisting of links to different types of posts here on Tumblr. I compiled this for theme-makers in mind as a way of double-checking if any elements have been accidentally left unstyled. You can reblog the posts onto your test blog to check if everything looks as intended. Particularly for NPF posts, there may be some default properties you wish to override. I had these links saved all over the place so I decided to group them in one post for easier access. This list is by no means definitive, but I hope it can help somewhat. ♡

💌 If you have any suggestions or additions to this list, let me know!

Keep reading

[r-efs]

Python 3 Cheat Sheet | Resource ✎

Link to source: Python 3 Basic Cheat Sheet

[r-efs]

e5f6ea ✧ e5eff1 ✧ e5f6ea