Rounded Rectangle Container - Images and HTML

The objective of this page was to find an efficient way to create a rounded rectangle that would dynamically resize based on content.

The width is fixed, but the height is variable.

Notes

  • Border for center area uses a CSS border attribute instead of an image. It just works better. It also reduces the HTTP request count by 2.
  • The color code used (#77777777) is for approximately 50% opacity.
  • The header is a gradient, chopped for good contrast.
  • ImageMagick commands are included.

Tint with ImageMagick

This is a bash script. To use it, create the file, use chmod +x tint, then run it with tint green (for example). You might have to adjust the fuzz factor.

#!/bin/bash
if [ $# -lt 1 ]
then
echo “Usage: tint color”
fi
d=’../box-1/’
for f in `ls $d`
do
convert $d$f -fill $1 -fuzz 4% -opaque “#eee” $f
done

d is the source directory, where the original images are stored. The directory this script is running in serves as the destination.

Learning New Technologies, From Scratch, Quickly

  • Be patient. It will be difficult. Remember all the other technologies you learned and how hard you worked.
  • Be persistent.
  • Google. Lots of other people learned the same things, and many posted what they learned on the ‘net. Learn and share.
  • Accept responsibility. Don’t expect anyone else to do the work for you or figure it out.
  • Read the documentation, in the depth required to do the tasks. If it helps you to read the entire user and developer manuals, do it. If you can get by quickly referencing the manuals, do that.
  • Follow the directions. If you don’t install it properly, you’ll have problems. If the target machine isn’t ready, you’ll have problems.
  • Spend a good amount of time wandering around the filesystem to see where things are. Often the filesystem architecture gives clues to the application architecture.
  • Find the logs and learn how to read them - so you can tell when things have crashed, or if they started properly. You don’t have to be able to fully understand them, but have a ‘red light / green light’ perspective, of it is running or it’s not. If you can figure out why, things get even easier.
  • Use find -mtime 0 to find updated files.
  • Use grep -ril to find code.
  • Commit to working with the system, instead of trying to bypass it. Respect those that wrote the software and learn to use their code if possible. If you can use their code, you won’t have to write as much.
  • Don’t forget about security. Be sure you have some sort of protection in the code. Check how the existing system authenticates and validates, and use it if possible.
  • Take baby steps. Start with hard-coded actions to get the program flow, then expand it to allow dynamic actions.
  • Look for ways to reduce the development cycle, if there is a build process, try to find a way to develop the code and logic outside the build process. When it is working, fold it back in to the build.
  • Use the existing images and icons as much as possible for a consistent visual interface.
  • If you don’t know why it’s not working, save a copy of your work and reinstall. Often, reinstalling takes less time than finding the cause. Then you can incrementally add your changes back in to identify the issues.
  • Restart the server, clear the caches, frequently. Otherwise, the first time the server goes down, it may not come back up.
  • Focus on the mechanics of the solution first, passing data between client and server, accessing the database, integrating with the existing code. Then begin working on specific functionality.
  • Don’t worry too much about performance, you can go back and tune later. This doesn’t mean be careless or wasteful, but focus on the task first.
  • Test out different approaches when possible. Often there is more than one way to do something. A good example is java/jsps. You can use a taglib or java to do the same things - and there are advantages and disadvantages to both approaches.
  • Be honest with management. If there is no way you can give an accurate estimate, or you don’t think this is a cost-effective solution, say so. Then, do whatever they tell you to - it’s their money.
  • Understand the different interfaces into the product. If you can use an API, it may be better than modifying the front-end code.
  • Welcome the opportunity to learn.

How to kill processes out of a ps list

ps eaux | grep  'uniquestring' | sed "s/^root *\([0-9]*\).*$/\1/" | xargs kill -9

Get the Colors from an Image

The link above allows you to upload an image which will be run through ImageMagick and deliver a 200px wide version of the image and the colors, as colors and as hex codes.

Helpful for matching image colors with CSS.