Posts tagged ‘Hacks’

OMG! A deep fried hamburger!

This just in, from the “you must be kidding “files –

A deep fried curry burger on an artisan roll with fresh lettuce, sautéed onions, and a squirt of 53VG barbecue sauce.

a tasty crunchy burger

Yes, it turns out you can indeed deep fry a hamburger. There is no need for flour or breading.

You thaw you custom seasoned 8oz hamburger and when the fry oil is 375-385F, you carefully lower it into the oil. Keep the temp above 350F for 5-7 minutes. You get a burger which is crunchy on the outside and medium done on the inside.

I recommend you serve it immediately or the burger will start to lose its crunch.

Custom burgers will make you the Master at your next cookout

Grilling season is fast approaching the northern hemisphere and we want our guests to leave both full and raving about our fare.

Sometimes the menu calls for a great steak but what can you do to seriously impress when the menu is hamburgers? Grind your own!

A good quality ground beef can easily be north of $5/lb you can do better for less than half that price. How?

Raid the “butcher’s specials” – those cuts of meat which are about to expire. It can be most anything as long as you can get the right ratio of lean meat to fat. The best deals come from the “sub-prime” cuts. In my most recent example I picked up Boston Cut Steaks and Pork Short Ribs. (These were marked down to $1.90/lb)

Yes, you can mix meats and “the whole is greater than the sum of its parts”. 🙂

First, cut out any bones and toss them in a baggy and into the freezer. These can be used later for soup stock … or as an extra special treat for your four legged family member(s).

Next, cut into chunks you can cram into the opening on your KitchenAid mixer’s grinder attachment. We know you have that attachment and have never used it. Now is your chance.

Grind it all up. If you have more than one cut of meat, alternate so it starts to get mixed together.

Now it’s time for you to get creating. Pick a theme for your burgers and add the seasonings – mesquite spices, curry, smoke, teriyaki, steak seasonings, whatever hits the right buttons for you. I went with cumin and curry paste for this batch.

Gently mix in the seasoning using your fingers. Don’t over work it.

Toss it in the freezer for 30-60 minutes to chill it.

Feed the mix back through to grinder to completely mix things together. This will also give you an amazing burger when it comes time for the grill.

Make you patties and freeze. They will be ready for when you want to grill. You’ll have burgers with amazing flavor and they will relish being topped the lettuce, onion, tomato. (Relish … hah, get it?) Your guests will love how well the meat stands up to the fresh vegetables with no need for mustard or catsup.

iOS is not as homogeneous as it once was

Just a few years ago, the big complaint of the Android platform was that is was the wild west. Vendors could choose their own screen resolution and pixel density. This made it difficult for mobile app developers (and designers).

Fast forward to 2015 and there are iOS 7 and iOS 8 deployments, iPhone 4, 5, 5S, 5C, 6, 6P, iPad Mini, Mini Retina, iPad, and iPad Retina. If you want to render all of the needed icons and splash screens for your mobile app, it now looks like this …

iphone-size-comparison16px favicon
32px favicon
57px app icon
72px app icon
76px app icon
114px app icon
120px app icon
152px app icon
180px app icon
1536×2008 portrait launch image
768×1004 portrait launch image
1242×2148 portrait launch image
750×1294 portrait launch image
640×1096 portrait launch image
640×920 portrait launch image
320×460 portrait launch image
1024×748 landscape launch image
2208×1182 landscape launch image
2048×1496 landscape launch image

Thankfully, there is still ImageMagick and it’s ability to script the generation of all these different graphics.

Here is the updated script …

@echo off
echo Utility to generate all of the icons and splash screens for iOS.
echo One files needed in the current directory - mask.png
echo which is used to make iOS looking icons.
echo Assumes there is a file called src10241024.png and that the
echo 'important' material is 768x768 and centered with the remainder
echo of the area being solid color.
pause

for %%S in (16 32) do (
	echo making the %%Spx favicon
	convert src10241024.png -gravity Center -crop 512x512+0+0 -scale %%Sx%%S favicon%%S.ico
)

for %%S in (57 72 76 114 120 152 180) do (
	echo making the %%Spx app icon 
	convert src10241024.png -alpha off -gravity center mask768.png -compose CopyOpacity -composite -gravity center -crop 768x768+0+0 -scale %%Sx%%S -background transparent icon_%%S.png
)

for %%S in (1536x2008 768x1004 1242x2148 750x1294 640x1096 640x920 320x460) do (
	for /F "tokens=1,2 delims=x" %%A in ("%%S") do (
		echo making the %%Ax%%B portrait launch image
		convert src10241024.png -scale %%Bx%%B -gravity Center -crop %%Ax%%B+0+0 screen-%%Ax%%B.png
	)
)

for %%S in (1024x748 2208x1182 2048x1496) do (
	for /F "tokens=1,2 delims=x" %%A in ("%%S") do (
		echo making %%Ax%%B landscape launch image
		convert src10241024.png -scale %%Ax%%A -gravity Center -crop %%Ax%%B+0+0 -rotate 90 screen-%%Ax%%Br.png
	)
)

Eventually, the sour 1024×1024 image should be undated to about 2400×2400

Mobile toolbar icons – sprite generation with Imagemagick

Geek Alert ! Geek Alert ! Geek Alert ! Geek Alert !

OK, all normal people have been warned. This is what happens when you mate graphic design with UI development.

actions_60Toolbars are a pretty common user interface mechanism. A series of graphical icons – each representing some action – are displayed side by side by side. Clicking or tapping on one, will initiate its specific action. Ideally, it will change color or shape or give some other indication that it has been effected.

Let’s assume we have four actions. That equates to four graphical icons. We also need alternate versions which indicate one has been effected. So we have eight images. For performance reasons, we really want to have just one image that is the combination of all eight images. This is called a sprite or sprite sheet. (Many of the web applications frameworks even assume the images have been combined.)

It’s not overly difficult to take a bunch of graphical icons, duplicate them and color or shade the duplicates, and then position them side by side by side and finally save the result as a single image.

It’s 8*4+1 steps (assuming our 4 icons). But wait. The graphic designer just changed one of the graphics. No worries, it’s just another 8*4+1 steps. Oops. There was a problem with one of the graphics. OK. Another 8*4+1 steps. Hey, can we change the coloration a bit ? Ugh. Another 8*4+1 steps. Umm … the new color still isn’t quite right. #%^%%&^&% 8*4+1 steps ! OK, the boss just asked us to add an icon. GET OUT OF MY OFFICE OR I WILL … #$^&$%#%

Calmer heads prevail and we reach for ImageMagick.

Lets’ break things down into a few steps.

  1. the graphic designer was working with black icons but since our toolbar will have a gradient grey/black background, we need light grey icons
  2. we want each icon to have an orange hint to it when it is selected
  3. we want to combine the icons into two rows with the light grey on top and the orange on the bottom. Finally, we want two different sizes for the output
    • one set will have all of the icons 40×40
    • one set will have all of the icons 20×20

 

we use the ImageMagick "convert" command to process each icon …

convert iconX.png -negate -modulate 85 tmp\normal_iconX.png

This command inverts the black icon to white and then make it 85% of its original brightness.

Now we process each icon again …

convert iconX.png -negate -modulate 65 -fill "#ff7f00" -tint 100 tmp\selected_iconX.png

Again we invert the black icon and lower its brightness a bit before tinting it with our color. The trick here is to pick the color first and then adjust the modulation to affect its brightness.

Finally we use the ImageMagick "montage" command to create the sprite …

montage -background transparent -tile 4×2 -geometry 20×20+2+2 tmp/*.png sprite20.png
montage -background transparent -tile 4×2 -geometry 40×40+2+2 tmp/*.png sprite40.png

Here we are combining all of the images. We specify we want the output to be 4 icons across in two rows. We also scale the individual images to 20×20 or 40×40 and we add 2 pixels of padding (the padding is not absolutely required but makes the resulting sprite easier to view.)

In production, all of this is done is a script file so the process of each icon is done in a loop and the montage can account for how many icons are in each row as well as control the order. … but you get the idea.

Oh, one more thing. Sprites are useful even if you are not using a JavaScript framework. You can reference any graphic in a sprite using CSS …

/* increment by 44 pixels = each icon is 40×40 and has 2 pixels of padding on all sides */
background: url(sprite40.png’) -44px 0;} // second image, first row
background: url(sprite40.png’) -88px -44px;} // third image, second row

Keep telling your boss that each change takes 8*4+1 steps. That way, you can say you’ll finish the new update in 30 minutes – click a button, have it done in 30 seconds, and go get a coffee !

The 5-minute desert your guests will kill for

Nearly a year ago I wrote about cake in a cup. It’s time to make it even better.

The original recipe takes less than a minute to prepare and a minute to cook.

I am making desert for guests so I made six cakes using small ramekins.

Now, take some kahlua and some caramel sirup – 2oz of sirup in 1/2c of kahlua for six cakes. Mix well and then spoon over the cakes while they are still in the ramekins.

Refrigerate for at least 30 minutes but can easily be a few hours.

When its time to serve, turn the cakes out onto individual serving plates and top with whipped cream.

For a real hack, pull out your French press. Pour in 1/2c heavy cream and 1oz of caramel sirup. Pump to froth. It will soon form soft peaks. Spoon over the cakes. Drizzle a little caramel on the plate and serve.

Watch out for the zombie apocalypse. Guests will kill for a second desert!

A fancy and quick egg sandwich

I grew up with the “Egg Sandwich” as a regular solid breakfast – especially with time was short. Here is an updated version that is even faster than the one my mime use to make.

The trick is in using a few non-conventional pieces of kitchen equipment in efficient new ways.

The “bread” for this sandwich is actually two buttermilk biscuits but no worries, you don't need to whip up a batch of batter or dough for these. These biscuits are actually those “biscuits in a can” from the grocery store refrigerated case. These are the jumbo size with 8 to a can. Rather than bake to 25-30 minutes in an oven, they get cooked for 5-6 minutes in a waffle iron. They end up about 6″ round. Go ahead and cook the whole can. The “waffled biscuits” keep nicely in the refrigerator or freezer.

The egg and cheese is done in the microwave. I know, I know – microwave eggs look weird. So what?! You can't see much of the egg once it in the sandwich. Take a large ramekin or similar sized cup or bowl that is microwave safe. Coat the inside of the dish with a no-stick spray and then add one egg, a tablespoon of grated parmesan cheese (even the cheap stuff works in this case), a tablespoon of water. Now beat with a fork to mix it all up. Don't worry if its not frothy and perfect. No one will be able to tell. Finally, microwave for 1 minute.

Flip the egg from the ramekin onto one of the waffled biscuits and top with the other!

Now, get out the door and get something accomplished – you've started you day with a hearty breakfast and done it in hardly any time at all 🙂