Tom Leo's Blog

Web Developer from Boston, MA

[tomleos]

An excelent explination on the evolution of responsive design tequines in CSS over the years. Starting with basic word-wrapping of text, to break-points, to flex-box, and finally the CSS grid.

[tomleos]

Install Python 3.7 on Ubuntu

tar xzvf Python-3.7.0.tgz cd Python-3.7.0 ./configure --enable-optimizations make altinstall

[tomleos]

Make Frontend Shit Again

The first website I ever made was geocities

[tomleos]

Batch Convert FLAC files to MP3 files

You can convert a flac file to mp3 via ffmpeg.

ffmpeg -i "{}.flac" -c:v copy -q:a 0 "{}.mp3"

That command will need to be run for each flac file in a directory. To find files in a directory use the find command:

find ./ -maxdepth 1 \ -type f \ -iname '*.flac' \

One thing to note is that files with a ' in them will break when piping the outputs of find to xargs. To fix this you must add printf argument to find.

find ./ -maxdepth 1 \ -type f \ -iname '*.flac' \ -printf '"%p"\n'

The printf arugment will ensure each file is quoted when being passed to xargs.

Next you'll want to remove the file extension from the file, this can be done via sed.

sed -e 's/\.[^.]*$//' will find the everything from the last dot until the end of the file and replace it with nothing. i.e. "a.flac" will become "a.

To add back the ending quotation mark, simply substitude .flac" with " resulting in "a".

Finally we'll want to take these find results and pass them into ffmpeg via xargs

find ./ -maxdepth 1 \ -type f \ -iname '*.flac' \ -printf '"%p"\n' | sed -e 's/\.[^.]*$/\"/' | xargs -I '{}' \ ffmpeg -i "{}.flac" -c:v copy -q:a 0 "{}.mp3"

By removing the file extension via sed we were able to easily specify the intput and output files by adding the expected file extension.

Finally you can remove theh flac files with a similar method:

find ./ -maxdepth 1 -type f -iname '*.flac' -printf '"%p"\n' | xargs -I '{}' rm "{}"

[tomleos]

Which Programming Language Are You? - Eureka Software

Like programming languages themselves, programmers are just as diverse and unique. Which programming language are you? Take our quiz and find out.

My least favorite language lol

[tomleos]

The big benefits of little changes.

Really interesting read about tiny out of band changes.

This was a one-line code change that took a few minutes… This tiny change solved a seemingly small frustration, but it turned out to be very significant to many of our users.

individual responses tell a story of how meaningful even the smallest tweak can be to your users.

If there is even a slight inefficiency or frustration, it compounds with every use. One confusing moment that takes an extra 5 seconds—repeated multiple times a day in perpetuity—adds up to a lot of anxiety and wasted time.

I noticed something weird about the issues we solved with these changes. They were almost never reported.

Hundreds of people were ecstatic when we added that arrow to PR pages. Out of those, not a single one indicated that this flow was confusing. A lot of people assumed it was their own fault for not just “getting” it.

you can’t exclusively rely on existing user feedback and tickets. You need to dig deeper.

[tomleos]

Using BrowserSync with Django

python manage.py runserver 0.0.0.0:8000 browser-sync start --proxy localhost:8000 --no-open --files "**/*.+(css|js|html)"

[tomleos]

Advent Of Code 2017 Day 1

Advent Of Code 2017 has begun. Here is my solution for day 1: https://gitlab.com/tomleo/koans/blob/c83405b202d2d3837b09c73a01b8de3cdcacbbbd/advent-2017/day_01.py

[tomleos]

google-drive-ocamlfuse - FUSE filesystem over Google Drive

Really Beautiful Library, I really should learn ocaml... or finish reading SCIP... or finish that Haskell book...

[tomleos]

The origins of hotmail

Random Though: My first ever email account was Hotmail. My sister helped me with the sign-up form. Later I switched to yahoo, and in highschool I was given an invitation to gmail.

Hotmail was released in 1996. The name was chosen because it included the letters HTML to emphasize it being ‘on the web’ (it was original stylized as ‘HoTMaiL’)

Hotmail was originally implemented using FreeBSD, but in a decision I’m sure every engineer regretted, it was moved to Windows 2000 after the service was bought by Microsoft.

Zack Bloom via https://eager.io/blog/history-of-email/

[tomleos]

not see the forest for the trees

Learned this idom today, it means to pay too much attention to details and not understand the general situation not see the wood for the trees. This seems extremely applicable to developers. Definition via idioms.thefreedictionary.com

[tomleos]

Revision Control Copy Edits

Normally diffs are done line by line. However git diff --word-diff allows word diffing. The inital commit had a misspelling of the word fleece. However a normal git diff makes this change hard to see as it highlights lines that have changed (in this case the whole poem is on one line).

tom@tom-All-Series:~/hacking/git-test$ git diff diff --git a/mary-lamb.md b/mary-lamb.md index e803864..5781cd7 100644 --- a/mary-lamb.md +++ b/mary-lamb.md @@ -1 +1 @@ -Mary had a little lamb. Little lamb. Little lamb. Marry had a little lamb, his flece was white as snow. +Mary had a little lamb. Little lamb. Little lamb. Marry had a little lamb, his fleece was white as snow.

Here is the output using word-diff

tom@tom-All-Series:~/hacking/git-test$ git diff --word-diff diff --git a/mary-lamb.md b/mary-lamb.md index e803864..5781cd7 100644 --- a/mary-lamb.md +++ b/mary-lamb.md @@ -1 +1 @@ Mary had a little lamb. Little lamb. Little lamb. Marry had a little lamb, his [-flece-]{+fleece+} was white as snow.

Tip thanks to Harry Roberts @csswizardry

[tomleos]

Splitting a video file

If you have a Fat32 formated harddrive and you try to copy a hi-def video to it, chance sare it will not work. Fab32 has a 4GiB max file size, while hi-def movies can go well above that file-size. One solution is to split the video up into multipl pices.

filename=filename fname = "$filename.mp4" ffmpeg -i $fname -acodec copy -vcodec copy -ss 00:00:00 -t 00:15:00 $filename-01.mp4 ffmpeg -i $fname -acodec copy -vcodec copy -ss 00:15:00 -t 00:45:00 $filename-02.mp4

[tomleos]

Really fun read where the Gökberk plays around in wireshare, finds an odd multicast stream, and figures out what data is being sent around the hotel using Python. He was able to determine the packets being broadcasted were audio packets, and the data being sent was elevator music.

[tomleos]

Instant Loading with Service Workers (Chrome Dev Summit 2015)

Service workers can power your web app while offline, but they can also offer substantial performance benefits while online. We’ll explain how to structure y...

Intresting talk that highlights some of the awesome power of the service worker

sw-precache

sw-toolbox

web-starter-kit

[tomleos]

It's really inspirational seeing skeuomorphic web design done well when the design trends of late have focused on "Flat" design.

[tomleos]

Really intresting talk about progressive enhancements and unobtrusive javascript at twitter.

Side Deck

Related Blog Post