My Google Searches

A running list of my searches and the results that helped me accomplish my tasks. |

“Reverse video photoshop” (or How to reverse video frames to create a better looping GIF)

by

What I was after

Looking at my Timeline in Photoshop, I couldn’t see an option to reverse my video in order to create a slightly smoother looping GIF of something embarrassing my friend did (you know, the best catalyst to learn something new). Basically, I wanted to accomplish what Boomerang for Instagram does since the video was not conducive to being looped directly start to finish and over again due to camera zoom (I mean, I could have done that, but it would have been a more abrupt loop).

The result(s)

I found that the first result on Google for my search, a YouTube tutorial called 0400 Photoshop : How to reverse a video sequence by user EPFLDITSUP did a decent job of explaining how to accomplish the task through a kind of indirect workaround method.

Watch the video yourself here if you like, and see my summary for a list of steps if you can’t be bothered:

The important bits

In essence, the video tells us to:

  • Open our video file, find and cut the part we want to loop and export it as a new video (File \ Export \ Render Video)
  • Create a new document importing the cut video as layers (File \ Import \ Video Frames to Layers)
  • In the Timeline panel (Window \ Timeline), click the menu option on the top right and select Select All Frames
  • In that same menu, select Copy Frames
  • In that same menu again, select Reverse Frames
  • In that same menu again, select Paste Frames…

There you go, you’ve now got the video going front-ways then back-ways. Export your GIF and laugh at your friend’s shame.

 

“Style bullet points CSS” (or How to style coloured bullets without using image assets)

by

What I was after

One of the sites I was working on needed green bullets for unordered lists. I know there are two common workarounds to achieve this without making the text in the list items green: using an image as the list-style-image or adding span tags within the list item and targeting span tags with a specific color attribute. I didn’t want to rely on images because I felt it made the code less clean and the span tag workaround was not an option due to the non-technical authors who would be publishing posts.

The result(s)

Google’s fifth result, How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate] (http://stackoverflow.com/questions/5306640/how-to-set-bullet-colors-in-ul-li-html-lists-via-css-without-using-any-images-or), gave me the answer I was after with an entry from Lea Verou.

The important bits

Here’s what I pieced together from several comments and some tinkering to land with a version that was essentially the same result visually as the built-in unordered list style, but with the green bullet made of a text character and the authors not having to worry about any special styling during their content creation:

ul {
  list-style: none;
  padding:0;
  margin:0 0 10px 10px;
}
ul li {
  padding-bottom:4px;
  padding-left: 2em; 
  text-indent: -2em;
}
ul li:before {
  content: "■"; 
  font-family:"Arial Black", Arial;
  color:#8dc63f;
  padding-right:1.5em;
  position:relative; 
  top:-.05em;
}
ul li ul {
 margin:8px 0 0 10px;
}

 

“Delete my local branch and then re-track it from scratch (Git)”

by

What I was after

In this case, I was working on a site where my local master branch (Git) had somehow become almost 50 commits behind and I also had some unusual conflicts. Knowing that the remote master branch was current and had all of my previously merged changes already, I was looking for a way to reset my local master branch to match the server side without doing a typical pull request (since I was getting too many weird conflicts).

The result(s)

I ended up asking a friend to remind me of the command since we were chatting. He pointed me to Reset local repository branch to be just like remote repository HEAD (http://stackoverflow.com/questions/1628088/reset-local-repository-branch-to-be-just-like-remote-repository-head).

The important bits

In the end, with the master branch checked out, it was as simple as running two commands:

git fetch origin
git reset --hard origin/master

“How to put blinking type character on site”

by

What I was after

I was trying to create the blinking “|” character in the header of this web site without putting too much load on it because it’s not really a major element of the site. Because of the potential for abuse and poor user experience, blink is a contentious topic online amongst developers.

The result(s)

In the 5th result on Google, Alternative for <blink>, user edCoder redirects to a Stack Exchange answer by pstenstrm to the question How to make text blink on website? [duplicate] (http://stackoverflow.com/questions/20270096/how-to-make-text-blink-on-website/20270551#20270551).

The important bits

The relevant bit in the code was setting up a character you want to flash and then surround it by a span tag with a unique class (like blinking-text), then add the following to your CSS:

.blinking-text {
 -moz-animation-duration: 600ms;
 -moz-animation-name: tgle;
 -moz-animation-iteration-count: infinite;
 -moz-animation-direction: alternate;
 -webkit-animation-duration: 600ms;
 -webkit-animation-name: tgle;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 animation-duration: 600ms;
 animation-name: tgle;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 }
 @-moz-keyframes tgle {
 0% {
 opacity: 0;
 }
 49.99% {
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 99.99% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}
@-webkit-keyframes tgle {
 0% {
 opacity: 0;
 }
 49.99% {
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 99.99% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}
@keyframes tgle {
 0% {
 opacity: 0;
 }
 49.99% {
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 99.99% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}

“Adjust font baseline css”

by

What I was after

I knew there was a way to shift the baseline of a character within a paragraph using CSS, but I couldn’t remember the code for it. I wanted to shift the search logo in my post titles on this site so that I could call it as a character, but make it smaller than the post title without it looking weird for being so low compared to the text…

Baseline_shift_diagram

The result(s)

The first result in my Google search, Improve your web typography with baseline shift (https://stuffandnonsense.co.uk/blog/about/improve_your_web_typography_with_baseline_shift) gave me exactly what I was looking for.

The important bits

The relevant bit for me was that if you made a child of a parent class and positioned it relative, you could adjust the top value to shift the baseline, for example:

.content span { position:relative; top:-.2em;}

So if you had a paragraph with the class content, and inserted a span tag within it, the baseline of the span tag would be shifted up.

<p class="content">Here is my test content <span>wow, what shift!</span></p>

Output: Here is my test content wow, what shift!