My Google Searches

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.

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;
}

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

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;
 }
}

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…

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!