Category: Web Development

Online Grep – Extract Strings from Text

When you want to search a file and extract all lines or regular expression matches, the Unix program, grep, is very handy. However, if you’re on a Windows machine or you have the contents of the text file you want to run grep on, you can easily run grep online using an online grep utility like the one at

http://www.online-utility.org/text/grep.jsp

It has many useful options like

  • Invert Match (Display Non-Matching Lines)
  • Ignore Case
  • Line Number (as Output Prefix of Each Line)
  • Only Matching (Print only the part of matching lines that actually matches PATTERN)
  • Whole Line (Select only those matches that exactly match the whole line)

online-grep

Google Chrome: Preserve Network Log Across Multiple Pages

Google Chrome Inspector’s Network tab allows you to see HTTP requests and responses when a page is loaded. However, by default, if you click on a link and go to another page, the network log is cleared and HTTP requests and responses for the new page is shown. If you’d like to preserver the network log across multiple pages / page loads, click the Preserve Log checkbox. This is especially handy if you are filling out a form which posts to a page that causes a page reload and you want to see the request form data sent.

preserve-log

Kraken.io: Reduce Image File Size More Than Photoshop Save-for-Web

We all know that images are the heaviest assets of websites by file size and should be optimized first more than anything else. Pretty much everyone uses Photoshop’s Save-for-Web to optimize images for web use. But, it’s possible to easily get even smaller file sizes without any noticeable different in image quality. I recently tested a service called Kraken (https://kraken.io/) and it reduced a banner background image by 44% (126 KB).

Without Kraken: 282KB
With Kraken:     157KB

The two images are below. Can you tell any difference between the two? Click on the image to see a larger version.

code-background3-compare

 

Update: Actually, Compressor (https://compressor.io/compress) was able to compress the image by even more (70%)!

Some other image optimization sites are:

  • https://tinypng.com/
  • http://pnggauntlet.com/
  • http://optimizilla.com/

The Different Types of Dashes

Hyphen
You know how to type a hyphen and that’s exactly why you use it so often in all the wrong places. The hyphen is used to break single words into parts (like when lines of type break within a word) or to combine separate words into one single words.
I’m hungry in a get-in-my-belly kind of way.

En dash
The en dash is used in dates to replace “to” or “and”. It can also be used to indicate the relationship between two different words. In German it is also used for a break of thought, with a space before and after the en dash.
I lived in the United States from 1976–1978.
I have a love–hate relationship with San Francisco.

Em dash
The em dash is used for a break of thought that is stronger than a thought within parentheses. It is a break in the sentence in order to create attention or stress a thought. The em dash is uncommon in the German language and most common in American type setting.
I once had to replace 1,000 hyphens in a single document—exhausting.

For more related information, visit http://www.typogui.de/

▲