Jul 2014 03

When developing websites, you often need to browse to a bunch of  URLs to check each page visually. Since I got tired of copying and pasting URLs from a text editor to my browser for each URL, I created a simple tool to convert a newline-delimited list of URLs to hyperlinks that opens each link in a new tab. After clicking on a link, its background turns yellow so you can keep track of where you left off. You can use the tool at

http://www.abdullahyahya.com/multiple-url-browser.html

multiple-url-opener

Share
Jun 2014 26

When developing websites, you sometimes run into pages that are very long. You may have your CSS at the top of the page and your HTML below. The SublimeText editor has a neat feature that let’s you view and edit a single file in multiple views so you can view and edit one part of your file in one window and another part of the same file in another window. To do this, open a file and then click File > New View into File.  I then like to drop my 2nd view of the file into a new pane like below. If you edit the file in one view / pane, that change will also be applied in the 2nd view because you’re essentially editing the same file even though it may look like 2 separate files.

sublime-text-edit-single-file-two-views

Share
Jun 2014 02

Recently, I needed to find the name of a French song. Since I don’t speak French and didn’t know how to spell some of the lyrics to do a Google search based on lyrics, I needed a different type of search. Apparently there’s an Android app called Google Sound Search which will listen to any sound and try to find the song information based on a sampling of some of the audio. Surprisingly, it actually worked!

google-sound-search

Share
Jun 2014 02

If you’re looking for a fast, user-friendly tool to check broken links on a page you’re currently viewing, the Check My Links Google Chrome extension is pretty nice. Links that are good are highlighted in green and ones that are bad are highlighted in red.

check-my-links

Share
May 2014 16

While most people don’t feel the need nor want to print websites anymore, some people still print them. Developing a website to see how it looks when printed can be a hassle. You can keep printing your pages on paper until you get things to look right or you can keep previewing how it would look in your browser’s print dialog window. You can also temporarily change the CSS media of your print CSS to “screen” while you develop. Fortunately, if you use Google Chrome, there’s an ever easier way as pointed out by my colleague, Keith Shaw, the other day. If you open a page in Chrome and Chrome’s Inspector, you can hit the escape button to toggle additional controls as shown in the screenshot below. With the control panel open, click “Emulation”, “Screen”, and check the “CSS Media” checkbox with the media selection set to “print”. You can then view how your pages will look when printed right in your browser and easier adjust CSS styles instantly.

chrome-inspector-print

Share
Page 1 of 6712345102030...Last »