Category Archives: Technology Tips

My Newbie CSS mistakes

CSS 3 badge
CSS 3 badge

Whew! I’ve been (re)learning CSS and have discovered a few newbie misconceptions of mine that had really held me back.

CSS = Cascading Style Sheets. In an ideal web app, the HTML defines the page structure, the CSS defines the presentation (look), and the JavaScript/jQuery defines the behavior.

Two tremendously useful resources I’ve found:

Now to the parts of CSS I was confused about:

  • border-style default is none and border-width default is 0. So you have to set BOTH of those attributes to see a border.  I had expected to have to set border-width, but was blindsided by the default border-style.  so from now on it’s { border-width: 5px; border-style: solid; } for me.
  • right is measured backward from the right side of the container.  Almost every other layout system I’ve used measured right from the origin (the upper-left or bottom-left corner of whatever).  I couldn’t make sense of the numerous examples that set right: 0; now I know that they are saying “the right side lines up with the right side of the container.”
  • bottom is similarly measured upward from the bottom of the container.  So bottom: 0; says “the bottom edge lines up with the bottom of the container.”

Now that I have these CSS basics through my head, layouts make a lot more sense to me.

The Hidden Mounting Holes in your Breadboards

This story has a bad beginning.

I’ve stored my Robotic Glockenspiel on its side since I finished it in April (it’s huge).  The other day I opened the lid and found, to my horror, that the breadboard had completely pulled away from its adhesive pad – only the wires are keeping the breadboard from falling off completely!

The breadboard has pulled away from its adhesive
The breadboard has pulled away from its adhesive

I immediately started shopping for breadboards with mounting holes and, strangely, didn’t have much luck finding any.  Meanwhile, I saw a project photo where the designer had put screws through a sheet of plywood into the breadboard.  Wouldn’t that risk shorting out the power supply to ground?  I had to learn more.

A little investigation revealed that my breadboards did have mounting holes… hidden underneath the adhesive pad, and not mentioned in the datasheet.

Under the adhesive...a mounting hole!
Under the adhesive…a mounting hole!

A little more surgical cutting revealed the hole, but avoided exposing the power and ground rails.  All I have to do now is find the right size screw and I can mount my breadboards securely in my projects.

Exposing the mounting hole without exposing the wires
Exposing the mounting hole without exposing the wires

A little hammer can be a big help to your 3D Printer

A few months ago our team at work bought a LulzBot TAZ 5 3D Printer. We love it.

It comes with a spatula to pry your prints off the base of the printer.  For larger, flat prints, that can be a bit difficult.  I found myself occasionally pressing the spatula with such force that I wondered whether I was harming the printer alignment, and whether I would slip and jab myself with the spatula.  The 3D printing forums are filled with suggestions of ways to make prints come free more easily using hair spray, masking tape, or other jury-rigged solutions.

A print that can be difficult to pry off the printer bed
A print that can be difficult to pry off the printer bed

Fortunately, I’ve found a simple solution: a lightweight hammer such as this 2-ounce ballpein hammer from Amazon.  I’ve found only a few light taps are necessary to free the most immovable prints.

Tapping a print free using a small hammer
Tapping a print free using a small hammer

Now we’re even happier with this fine printer!

Arduino Pro Mini, and how to solder male headers

I recently decided to try out the Sparkfun Arduino Pro Mini 5V board.  It has almost all the I/O that an Arduino Uno has, in a much smaller board. It comes without connectors, so you can solder in whatever style connector you need. For my uses, I needed to solder on male headers that allow it to plug into a breadboard.

So I tried out a new way of soldering male header pins onto a board. First I snapped off two 12-long headers from a strip of break-away male headers. Then I plugged those headers into a breadboard and laid the Arduino Pro Mini board over them.  To keep the flux and solder spatter from getting into the breadboard holes, I put a piece of paper over the unused parts of the breadboard.

Male Pin soldering, step 1
Male Pin soldering, step 1
The paper keeps solder and flux spatter out of the unused breadboard holes
The paper keeps solder and flux spatter out of the unused breadboard holes

With the pins plugged into the breadboard, the Arduino Pro Mini dropped onto those headers, and the paper protecting the breadboard, I soldered the pins. I then unplugged the board from the breadboard, and  used my regular QuadHands to hold the programming pins to the board, because those pins point “up” instead of down.

The result was fine. I did have a little trouble with the solder, but I just need a little more practice, and I need to clean the soldering iron’s tip better.

The soldered Arduino Pro Mini, ready for use.
The soldered Arduino Pro Mini, ready for use.

Next I tested each of the pins. Notice in the picture that I’m using the Sparkfun 5V FTDI breakout to connect the Arduino to the laptop. It works like a charm!

Testing my soldered Arduino Pro Mini
Testing my soldered Arduino Pro Mini

Now all I need to do is decide what to build with this tiny, easily-battery-powered Arduino – whee!

A little info on using SSL in your web site

I recently made a rash Tweet saying that if you don’t have SSL (Secure Sockets Layer; what HTTPS uses) your WordPress site will be hacked. That’s an overstatement. I’ve known people who’ve run WP sites without SSL with no problems.

So here’s a little web SSL orientation for people who have better things to do than learn the details of computer security.

First, some people think that you need SSL on your web site/service only if you’re doing things you want to hide, or if you’re doing financial transactions.

My opinion is that your web needs SSL for anything that involves posting or login. As plenty of people have pointed out, if you as a web client don’t use SSL when you post or login to a site, an attacker – an eavesdropper – can easily post or login to that site as you. So if you don’t have SSL, you can’t trust that the poster or login isn’t somebody whose life goal is to sell counterfeit shoes, inflate the Google ratings of their bogus web site, or worse.

Another benefit of SSL is that it gives your web clients better assurance that when they go you your site, say “https://needhamia.com”, they are talking to the real site and not some imposter site (who wants to sell shoes, etc.)

SSL can involve a bit of sticker-shock on the scale of buying web hosting in the first place, so think about the costs to you and your users of your site getting hacked or their accounts or data being stolen. If your site and data need to be safe, you’ll probably choose to bite the bullet and pay the money necessary to make your site secure. (I know, I know, it sounds like a racket doesn’t it?)

SSL also involves a lot of lingo. Thankfully, you don’t have to understand the details of the meaning of the words or how SSL/HTTPS works to use it.

So here’s my recommended sequence of things you need to do to support SSL. I’ve left off the details because I just want to give you an orientation rather than a tutorial.

  1. Get a web host that supports SSL. Most do, but a surprising number don’t. If you’re building your own web host from scratch, I expect you’ll be able to setup SSL.
  2. Buy a domain name.  For example, my domain name is Needhamia.com. It will cost you a small amount per year. This name is necessary for SSL registration. Some web hosts support only domain names that they sell, vs. domain names sold by other domain name registration services.
  3. Once you have your domain name, connect it to your web site. If you bought your domain name from your web hosting service, they can help you do this.  It’s not complex.
  4. Once you have connected your domain name to your site, order an SSL certificate.  It can cost you a surprisingly large amount per year – but think about the costs to you of not having it: suppose somebody hacks your site or impersonates a user. There are several kinds of cerfiticates. Again, some web hosts support only SSL certificates that they sell vs. certificates sold by others or ‘signed’ by yourself. Filling out the paperwork can seem daunting, but it’s not so bad for the simpler types of certificates.
    • “self-signed”. These certificates are the simplest/cheapest because you can make one yourself. It gives your web clients the security they need to keep from being eavesdropped. It doesn’t give them any assurance that your site is real – but that’s ok in some applications.
    • “standard” certificates. These are often the least expensive certificates a web host will sell. They’re probably fine if your site doesn’t deal with money directly.  This is the level certificate I’m using on Needhamia.com.
    • Fancy certificates. These are more about what kind of logos various browsers will show for your site, and how much assurance the certificate gives web clients that your site is who it says and you are who you say you are. Useful if you’re selling stuff.
  5. Once you have your SSL certificate, install it on your web site. Your web hosting company can make this easy for you, especially if you bought the certificate from them.
  6. Ta Da! Now https://yourdomainname uses SSL!
  7. To make your browser-based clients safer, it’s a good idea to make your web site “redirect” http to https. That is, if they type “http://yourdomainname” their browser automatically goes to “https://yourdomainname” instead. I found it hard to find the instructions I needed for this step, but a little searching turned it up.

To sum up: you need to, in this order, get a site, get a domain name for it, get an SSL certificate for that domain, install the SSL certificate on your site, and (optionally) redirect http to https.

Now you can build some really cool web apps!