Category: Technology

Obnoxious Bugs in CSS3 Columns

I got pretty excited when I found a promising application for CSS columns in a project I’ve been working on for my wife – she sells Dog Collars and Toys on Etsy, and we’ve been collaborating on creating a site to complement her Etsy shop. I figured that CSS columns would be the perfect way to responsively show the different styles she offers and materials she uses in her collars. Unfortunately, as I played around with actual layouts, I found that the implementation of columns in the various browsers is pretty flawed.

Issues

Thus far, I’ve tested out the same column layout in Chrome 40, Firefox 35, and Safari 8. Each one has its own bugs and quirks. I’m sure Internet Explorer has its own issues, too. In any case, though CanIUse.com shows over 90 percent support for the feature, none of that support is without issues. Sad day.

Chrome’s Bugs

Chrome has a couple apparent bugs in its columns implementation.

First, Chrome fails miserably at correctly calculating the height of elements in columns. Therefore, after ending a column, or after attempting to use column-span: all, an unsightly empty space appears between the end of the columns and the beginning of the next content. Ugh.

Secondly, Chrome can’t seem to render transitions in anything but the first column. Why this is, I’ll never understand. But hey, it’s there, and there’s currently nothing you can do about it.

Firefox’s Bugs

Firefox, on the plus side, only has one real issue. Unfortunately, it’s a pretty big issue if you want to have elements that span multiple columns using column-span. Otherwise, you’ll probably never even notice it. Unfortunately, column-span is something that I wanted to use.

Safari’s Bugs

Safari, inexplicably, can’t figure out column-span either, but in an entirely different way. Rather than not spanning them at all, it decides to duplicate certain elements both above and below the element that uses column-span. Fun stuff!

That’s That

Unfortunately, now I’ve got to seek out some other method of laying out my columns. Maybe I’ll have to revert to using good ‘ole float with all its quirks, and just add in the responsive magic myself. At least its quirks are well-documented. In any case, I’ll figure something out, and perhaps post it here when I figure it all out.

2015-02-10
Building a Better Data Generator

Photo by Marcin Ignac on flickr

In my capacity as a Quality Engineer at a company building data analysis software, I often find myself looking for quality data sets that I can use in my testing. Sometimes, I take the time to find some real data that fits my needs, but oftentimes it’s impossible (or takes far too long) to locate any such data set. In these circumstances, I find myself either writing a simple script to generate data or just creating some tiny amount of data that meets my needs.

Unfortunately, this takes too much time, and doesn’t generally yield the quality of data that I’d like to see. It’d be nice to have something to generate better quality data on-demand.

Current Issues

Though a number of data generation tools exist, I find them lacking at times, especially in generating non-tabular data. Most of theme are capable of creating some decent data, but this doesn’t extend to things like documents, comments, or links between separate entities or distinct types of entities.

Some of these tools, however, are super useful. A couple that I’ve used (and liked, with the shortfalls listed above) include Generate Data and Mockaroo. In terms of document generators, I’ve never actually found one. The only document generator I’ve ever used was one I created, but it was written for one specific purpose, and with only one format.

A Better Way?

I think that in order to have something really valuable, it needs to build upon previous generators. It needs to be flexible enough to generate any sort of data given a pattern to follow, whether it’s numeric, string-based, or an entire document.

Realistic Data

It needs to generate realistic output from those patterns. It needs to be able to choose values from a set that’s widely varied, but do so in a way that reflects realistic distributions on the data.

For example, given a set of names, it doesn’t make sense to choose names at random. Names like ‘Jacob’ occur much more often than names like ‘Deantoine’. Numbers for amounts, like financial transations, generally follow Benford’s Law. And ages aren’t just random. The probability that a random individual is 102 years old vs. 22 years old is quite large.

Accessible Data

The generator should be widely accessible via an API, so that developers can directly access data that meets their needs. This would allow access on the fly, and could allow periodic calls to simulate things like user sign-ups, message traffic, etc.

Open Source

Finally, I think it should be open source. Open source applications allow anyone to contribute, build upon, and improve existing applications. With a utility that’s widely usable, I think this is the only way to go.

Development

On that note, I’d like to say that though I know it’ll take a lot, I’m going to begin the development of such a system. I’ll be putting the code on Github, as you might expect from an open source project. If you’ve got any thoughts, feel free to drop them in the comments below!

2014-09-07
Automatic Deployment with Gitolite
About Gitolite

About a year and a half ago, I came across a great open-source git repository management tool called Gitolite. It’s a great tool for hosting and managing git repositories. It worked especially well for me because I run my own web server where I could set it up. If you’d like to give it a try or read up on it, I suggest you visit the Gitolite documentation.

Why Automatic Deployment?

Now, having worked in web development for at least a few years, I wanted a simpler way to automatically deploy my sites. Ideally, this should use Git. I’ve become quite fond of Git, so I’ve been using it for all my projects lately. Before I even open a text editor to start a new project, I’ve usually already typed git init (or, as it is with Gitolite, git clone).

There’s something to be said for entering git push and having your commits reflected live on the web. It’s not something you want for every site, but it can certainly be useful when you want it.

Getting it Set Up

If you’ve managed to get Gitolite set up, you probably won’t have much trouble with getting the rest figured out. If you do happen to have some questions, I’ll do my best to answer them.

In order to set up your automatic deployment, you’ll need direct access to the gitolite account on your server. As a matter of fact, having root access would probably be helpful. Because unfortunately, the autodeployment isn’t something you can just set up using the gitolite-admin repository (for some very good security reasons, I might add). With that in mind, follow along with the steps below.
1. Add your web server user and your gitolite user to the same group. While this probably isn’t strictly necessary, it’s what I decided to do to make it work. Mainly, you just need your web server to be able to properly access the files that your gitolite user will be checking out.
  
  In my case, I simply created a new group and added both users to that group using usermod (check out usermod’s man page for more info). However, as I said, you can handle this however you’d like to, especially if your UNIX knowledge surpasses mine (which certainly wouldn’t surprise me).
2. Create your repository and deployment directory.
3. Change your deployment directory to allow the gitolite user access. This will depend on exactly how you handled things in step 1, but if you followed my pattern, I’d suggest changing the group of the directory to the group you added in step 1. In case you aren’t completely familiar with how you do this, you can try chown user:group directory -R on your target directory (More info here).
4. Add the following to your /home/{gitolite_user}/.gitolite/hooks/common/post-receive script:
```
if [ "$GL_REPO" == "gitolite/path/to/repo" ]; 
    git --work-tree /path/to/webroot --git-dir ./ 
    find /path/to/webroot -type f -print | xargs chmod 664 
    find /path/to/webroot -type d -print | xargs chmod 775
fi
```
5. Modify the script (from above) as needed. Basically, this script will run any time a repo is pushed to the server. If the repo matches the path you put in, it’ll execute the script within the if statement. That simply checks the repo out to the directory you specify, then adjusts the permissions on the files and subdirectories. You can modify the script as needed, because your specific case may need some special treatment.
6. Push to your repo!
Hopefully I’ve covered everything. If you try this tutorial and run into problems, let me know in the comments and I’ll do what I can to get you sorted out.
2013-02-08
Monitoring a Web Page for Changes
Today, I found myself needing a way to monitor a page. I didn’t need anything fancy, just something that would alert me if a page changed in any way. So, I set up a simple bash script and cron job to monitor the page. For me, this was a perfect solution. Since I’ve got a server running 24/7, it’s always able to monitor the page. This wouldn’t work quite as well from, say, a laptop, but a server or always-on desktop work perfectly. But in truth, all you really need is a system capable of running cron jobs. So, without further ado, whip open your favorite text editor and plug this in there:
```
#!/bin/bash
pageAddress="http://example.com/index.html"
pageHashFile=/path/to/pageHash.txt

newhash=$(curl "${pageAddress}" | md5sum | awk '{ print $1 }')
oldhash=$(cat $pageHashFile)

# Check the hashes, send an email if it's changed
if [ $newhash != $oldhash ]; then
    echo "${pageAddress}" | mail -s "Page changed!" [email protected]

    # Only update the hash if the email was successfully sent.
    returnCode=$?
    if [[ $returnCode == 0 ]] ; then
        echo "${newhash}" > $pageHashFile
    fi
fi
```
Of course, you’ll need to change the page address, the path to where you want the hash put, and the email so that they meet your situation. Finally, just add the script to your crontab, and you’re good to go! I’ve got mine set to run every 10 minutes. To put it in your crontab, run crontab -e, and insert the following (adapt it as needed):
```
*/10 * * * * bash /path/to/script.sh
```
It could be adapted to be more versatile and enable monitoring multiple pages, but since I just needed one (at least for now), this does the trick nicely.
2012-11-15
Android Honeycomb Tablet

A video of an Android tablet running Android version 3 (otherwise known as Honeycomb) is out. It’s incredible! First, Google has updated Google Maps to be totally vector-based (meaning it uses mathematical formulas to create the graphics, rather than downloading pictures), which makes downloading map information much faster. Second, it’s a tablet… Running a version of Android made for tablets… (more…)

2010-12-13