Remember Lenny

Writing online

You are here: Home / 2013 / Archives for March 2013

Archives for March 2013

Internet browsers with Chinese characteristics

by

Being in China

The ex-patriots in China are very aware of the internet restrictions. Aka, internet with Chinese characteristics. It’s hard to explain to others what it’s like behind the Great Firewall. No facebook, no NY Times, and the sense of consistency. Beyond the occasional officially-unofficial media blackouts, most of the world doesn’t think about what the internet is like in China, even though there are more internet users in China than there are citizens of the United States. apira.org

The censorship is secondary to considerations of the internet for web developers targeting Chinese users. In China, Internet Explorer 6 was king for far too long. The fallout from its history is obvious for web developers from the West. Like myself, China facing websites do not have the luxury of ignoring “obsolete” users. In a country where there are over 250 million Internet Explorer users, China facing websites consider an incredibly aggressive browser ecosystem.

Battle against the obsolete

There have, however, been enormous improvements in browser technologies recently. Two years ago IE6 had a 60% market share in China (w3.org. Today, the wonderful website IE6CountDown states IE6 is a little more than 25% of the Chinese internet user population.

The problem with IE6 is not one of ignorance. IE6’s prior domination of the Chinese browser-share was the result of China’s piracy ecosystem. Remember the Windows XP system updates? If you remember correctly, only authorized editions of Windows XP are allowed to make those system updates. Because Chinese street markets sell a lot of “low-cost” software (aka, pirated software), a lot of Chinese computers can’t get official system updates. Old computers without system updates are unable to upgrade from their original IE6 browser.

Adding insult to injury, Chinese web developers target the IE6 browsers. Jerry Jinks from Maxthon (a Chinese web browser provider) elegantly explained the IE6 problem: “There’s a vicious cycle around IE6 in China: users keep using it because sites are designed for IE6, and people build sites for IE6 because users stay with it.” By having a market that depends on IE6, web developers can continue buildings for obsolete systems. Table based layouts, Dreamweaver WYSIWYG markup, and browser hacks litter Chinese websites.

Although the problem is large, the problem has not gone unaddressed. Microsoft partnered with Chinese anti-virus and internet browser company Qihoo 360 to systematically eliminate IE6. The partnership allowed Qihoo to make upgrades to the default browser on Windows XP systems from IE6 to IE8. Because Qihoo markets itself as a “security solution,” users recognize the need to download and install the new software. While users feel they are more secure, Qihoo is really just another web browser.

Qihoo’s browser is based on a Microsoft browser framework called Trident. Trident, like Webkit, is a rendering engine which allows browser makers to have a solid starting point. Rather than rewriting a complete browser engine, browser developers can start from solid footing to customize the user experience, rather than the rendering engine. For reasons related to China’s interest in Microsoft products, Trident has been very popular.

Two of the largest China based browsers, Qihoo and Maxthon, use Trident (sec.gov). Trident was developed by Microsoft to server as a web rendering engine for applications accessing web pages. Trident leverages parts of Internet Explorer, Webkit, and Chrome for various tasks. Interestingly enough, although Trident continues to develop today, the versions in Qihoo and Maxthon are dependent on IE8. Although the Chinese markets are moving off IE6, they are still using IE8. For web developers, that means no media-queries, no CSS3…

For browser developers, using an existing rendering engines makes sense. The W3C and WHATWG have both been emphasizing the need for browser consistency. After the intensional varriance of Netscape and Internet Explorer in the 90’s, browsers started keeping to a set of rules. For new browsers developing, like Qihoo and Maxthon, using existing rendering engines allows the companies to focus on other features. For example, Qihoo focuses on firewall and virus scanning tools. Compared to other alternative browsers, like Chrome and Firefox, marketing based on the value of security has worked in Qihoo’s favor.

Different priorities

China’s web infrastructure growth has impressed me with its high internet penetration rates, but the websites themselves are not so innovative. To be fair to Chinese web developers, though, there is a different focus on developing for the web in China. Users here don’t want the newest technologies just because they are available. Again, as Jerry Jinks stated, “They just want to see the Web”. The issue is along the expectations behind the Chinese internet consumers. Just because there are a lot of users, does not by any means result in high quality websites.

US web users are spoiled. If a website isn’t pretty or doesn’t load in a set period of time, they don’t want to visit the site. There is research that proves this (seomoz. Chinese users browsing habits are still developing. Standing on a train and looking over people’s shoulders, you see people reading websites rendered without any CSS.

Importance is not widely placed on web standards. Beautiful, shiny, CSS3-filled, progressively enhanced HTML5 websites are few in China. In fact, there are some web practices that are simply painful to watch (queue Flash splash page leading to table layout website). The need for old browser coverage results in the sheer inability to embrace innovative technologies. It doesn’t help that new libraries and frameworks are proudly dropping support for IE6 and IE7.
Ironically, in a place where old browsers are such a problem, I have yet to see a Chinese progressively enhance or gracefully degrading website. When Modernizer and polyfills are being developed for the exact purpose of serving the worlds edge case browsers, I don’t see a wide range of Chinese adopters.

There’s a plethora of digital and printed content about web development available in English, but rarely to I see the same kind of material circulated in China. While I don’t know if an internet growth market would be interested in the concepts of web standards, it could benefit from access to the discussions.

Conclusion

There is something to be said for the recent popularization of dropping support for old browsers. Undeniably, costs to develop for old browsers can be unreasonably high and unmanageable. Still, it should be considered that dropping support for old browsers entails dropping support for huge parts of the world. I am certain that in the coming years, China won’t be as affected by this issue. Mobile browsers are exponentially claiming internet browser marketshare. For mobile devices alone, heads are turning toward standards and HTML5.

Until then, don’t forget about the products Made in China and good luck finding stylish Chinese system fonts.

Basic TileMill: Making Beautiful Maps

by

Using TileMill

TileMill makes beautiful maps

TileMill is a downloadable program that allows you to make beautiful maps. The software is developed by MapBox, a company that provides OpenSource maps as a service.

TileMill is a basic GUI for skinning GIS data. Using a CSS like language, called CartoCSS, users can modify and add visual elements. CartoCSS provides conditional logic, allowing styles to target specific segments of data.

An example of segmented data styling is in open data regarding city populations. Using the CartoCSS, you can render a circle on all of the cities in the world. Using conditional logic, you can make the circle bigger or smaller based on the population of the city.

Getting started

To get an introduction to TileMill, I suggest going through the Crash Course provided by MapBox. The crash course will show you how to load in external data sets, provide conditional styling, and export your map (or upload it online).

Quick Lesson

I showcased a map I made for Acquinity Interactive on Forrst this week. On it, I showed the working files of the TileMill map I created. One of the users requested that I explain how to make something like this.

Step 1: Download and install

I won’t go into detail. Get the program here and install it.

Step 2: Start a new project

Click Projects > New project. Set a filename. Make sure the “Default data” box is check. Then click Add. Click the newly created project to open up the Editor.

Step 3: Add in open data

Just as you will learn in the Crash Course I mentioned above, we will add in a new layer of data. For the sake of this example, we will select the urban city data.

Click Add Layer, at the top right. Once the Add layer model pops up, click Browse. In Browse, click MapBox.

Once in MapBox, click to mapbox-geodata / natural-earth-1.4.0 / cultural / 10m-populated-places.zip. Then click done and save.

Step 4: Find the data to style

From here, you can style anything from the countries you can see, to the data that you just loaded in. For the sake of simplicity, we will make a selector on the cities we loaded in and differentiate them by population.

For more specific selectors, you can go to the CartoCSS documentation.

Step 4.5: Code example

After looking at the Layer’s “Feature” data, I found the data column POP_MIN that I would like to target.

The proper syntax for selecting a data attribute is similar to CSS. I will use #10mpopulatedplaces{} to make a selector for the data we imported.

Second, I will made a distinction between the small, medium, and large cities with a conditional selector. The conditional selector should go onsite the one we created above. You can make something like this:

#10mpopulatedplaces {
  marker-width:1;
  marker-fill-opacity: 0;
  marker-line-color:#ec9a14;
  marker-allow-overlap:true;

  [POP_MIN <= 1200000] { marker-width:100;marker-opacity: 0.4; marker-line-width:1.0; }
  [POP_MIN > 1200000]   { marker-width:400; marker-opacity: 0.1; }
  [POP_MIN > 10000000]   { marker-width:700; marker-opacity: 0.5; marker-line-width:.3;}

This will make three different styles targeting cities with a minimum population smaller than or equal to 1,200,000, larger than 1,200,000 and larger than 10,000,000. The styles that I select are the marker size, opacity, and border. CartoCSS documentation explains there are a number of other styling features such as fill, glow, and much others.

Step 5: Export

From here, you have a map with some generic circles. You can make some additional styling choices to the land and ocean. If you want to make the purple map that I had, you can find the style.mss content here

Go ahead and click Export to get the choices of different export formats. Personally, I like to screenshot the export screen, then modify the screenshot in Photoshop. I have found it looks more like the way I want it to. Otherwise, explore in PNG and set the dimensions.

Learning More

The above was a really basic instruction set. This doesn’t do justice to the capacity of TileMill, so I highly suggest that you go and follow the Crash Course provided by TileMill and experiment yourself.

If you are interested in digital maps, I highly suggest listening to the WebAhead podcast on Maps with Alex Barth. This was the first time I learned about TileMill and MapBox.

Using multiple icon fonts from Zurb

by

Zurb's Foundation Icons

Using multiple icon fonts from Zurb

Preface

The creators of Foundation, Zurb, provide useful tools for full-stack developers. One of their freely available tools are the Icon Fonts found here. The fonts are free. There are four sets: general, enclosed, social, and accessibility.

Of the four sets, it is difficult to simply choose one. Personally, I took a couple icons from each set. Because Zurb sets up their font sets in SASS files, this becomes exceptionally easy.

This guide is for users of Foundation and SASS

How to setup

1. Download

First, download the fonts that you want from the Foundation Icons page. The link is here: http://www.zurb.com/playground/foundation-icons.

2. Moving files

Second, grab the files located in the /sass and /fonts directory. Move these two directories to your website’s main root directory. My home directory is setup like this:

/
/index.html
/css/*.css
/css/*.scss
/css/[ONE-FONT-SET]/[scss-FILES]
/fonts/[FONTS-GO-HERE]
/images/
/scripts/

I have my SASS files and CSS files in the same directory. I create a separate directory in the /css/ directory for each individual font .scss file set. Because I use SASS, I try to keep my working directories as organized as possible. I place the font files (.eot, .svg, .tff, .woff) into the /fonts/ directory.

3. Update Foundation Icon .scss files

After your files are placed in their respective directories, you need to update the files paths declared in the files. Also, if you are using multiple fonts, then you need to update the CSS class names, so the fonts do not overwrite one another.

First, open the _settings.scss file for each font set. You should have something that looks like this:

$fontFileName: "../fonts/general_foundicons";
$fontName: "GeneralFoundicons";
$classPrefix: "foundicon-";

@mixin i-class($name,$pua) {
  .#{$classPrefix}#{$name}:before { 
    content: "f#{$pua}";
  }
}

@mixin ie-class($name,$pua) {
  .#{$classPrefix}#{$name} { 
    *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf#{$pua};"); 
  }
}

@mixin face {
  @font-face { 
    font-family: $fontName;
    src: url('#{$fontFileName}.eot');
    src: url('#{$fontFileName}.eot?#iefix') format('embedded-opentype'),
         url('#{$fontFileName}.woff') format('woff'),
         url('#{$fontFileName}.ttf') format('truetype'),
         url('#{$fontFileName}.svg##{$fontName}') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}

You need to change the first and third lines, respective to your own setup. The first line declares where you font files are located, respective to where you compiled .scss files appear. For me, my CSS files render in /css/*. To access the /fonts/ directory, I use ../fonts/general_foundicons to go up one directory and into /fonts/.

If you are using multiple fonts, you need to change the $classPrefix statement on the third time of _settings.scss to be unique. I change the name of my General Set from

$classPrefix: "foundicon-";

to

$classPrefix: "foundicongen-";

Similarly, I changed my accessibility, social, and enclosed sets respectively, by adding one three letters after foundicon.

4. Using icons in webpage

For this part, you can follow the directions on Zurb’s instructions. You need to find out the name of the font icon you want to declare. Then, using the <i> tag, set the class foundicon-[icon], where [icon] is the name of the icon you want to declare.

In my case, because I am using multiple fonts, I needed to rename the class prefix above. Therefore, depending on the icon set I am pulling, I need to declare class that reflects the icon set.

For example, if I want the globe icon from the General Icons set, I will declare:

<i class="foundicongen-globe"></i>

This will appropriately pull the Globe icon associated with the General Icon set.

5. Style Away!

Again, just as the Zurb page says, you can now freely use CSS techniques to manipulate the icons. You can change colors, add triggers (hover, focus, active), as well as set animations using CSS3.

Enjoy!

For any questions, feel free to contact me at @lkbcc

Deploying WordPress with Capistrano symlink issue fix

by

Fix from “Tutorial: Deploying WordPress with Capistrano” by Konstantin Kovshenin

I was using the three blog posts by Konstantin Kovshenin about using Capistrano with WordPress. The blog post tutorials were written in 2011.

I kept having issues with the symlink code used in the post. The code looks like this:

namespace :myproject do
    task :symlink, :roles => :app do
        run "ln -nfs #{shared_path}/uploads #{release_path}/application/wp-content/uploads"
    end
end

after "deploy:symlink", "myproject:symlink"

Problem: Tasks not being executed on cap deploy

Not having a Ruby background, I couldn’t easily debug the situation. To keep it short, every time I cap deploy the commands in the :myproject would not execute.

I believe the newest Capistrano no longer uses the "deploy:symlink" as a valid trigger. Therefore, the snippet originally provided was not working.

Solution: Change trigger

It’s not a fancy outcome, but I changed the line:

after "deploy:symlink", "myproject:symlink"

to

after "deploy", "myproject:symlink"

Now my symlink is run correctly and I am able to see my tasks run when I cap deploy.

This is a fix to issues I found in Tutorial: Deploying WordPress with Capistrano](http://theme.fm/2011/08/tutorial-deploying-wordpress-with-capistrano-2082/)

WordPress deployment using Capistrano

by

Acquinity Interactive hired me

I was recently hired by a marketing company to help them rebrand their digital presence. While this word is loaded with meaning, they wanted me to help them make a new website. The process is allowing me to start a development process from the complete beginning. Most interestingly, Im able to do things the right way.

Why WordPress?

I decided to use WordPress as the framework for their website. As a company of more than 250 employees, they need something that can be easily managed by otherwise untrained individuals. A straightforward CMS like WordPress is perfect for this job. For me, I prototype the website using Foundation from Zurb, then with the creative director, I find the right “style” of the website. Once we get past deciding the technical details, I can just go into WordPress and make page templates that fit out prototyped site. By using WordPress, I know that once I get past the html/css prototypes, I can translate the pages into php template files that will be populated from the administrative panel.

Why Capistrano?

This is a good question. People who think of WordPress either think of the SaaS version (wordpress.com) or blogs. Most people don’t consider it requiring a development process or a deployment strategy. Personally, I hate wasting time on things that don’t need to have time wasted on. I love to learn something new, but if I can find out how to automate a process, I’m going to take the initial time to set it up. By automating the deployment process, I know I can have consistent development environments.

Capistrano is a Ruby based package that runs SSH commands. Its largely used with Rails applications to manage various development environments (local/staging/production). Its great because at a touch of cap deploy you have your website up and running. Better yet, if you find out something broke, you just just cap deploy:rollback. In short, it’s pretty amazing because no longer do you need a designated “deployment” person. Instead, you can take time before your project begins to have the deployment strategy set up.

Why do you need development environments?

I won’t go to much into this because it’s one of the basic tenants of web development. Have a place where you develop (local), have a test environment where the site is as close to live without being live (testing), and have a separate place to have a autonomous production environment which will not be disrupted. One of the issues with these environments is that you have different files that you may be changing, but are not consistently updated.

You don’t want to screw up a site when other people may be using it. In the worst case scenario, you have files that you are working on a live site. Maybe you use the WordPress code editor, or maybe your using an FTP program to just edit the files directly on the server. In this situation, if you have a boo-boo, but don’t know whats wrong, you could lose traffic and confuse users.

In a slightly better situation, you have a local development environment and a production server. This is pretty normal. You might make your changes to your WordPress theme via a local server. You make sure the files are working and the visuals render properly. Once you like the final product, you will push the updated files through FTP. If you are really good, you will update the files via SSH.

The first example (aka cowboy coding) is all bad. The second example is not so obvious for some people. To explain most basically, FTP is very slow and error prone. Its not impossible to use FTP for site management, but its very likely that batch uploads will result in significant failed files. Yes, you can always make sure the files work by looking through your log. The point is you want to find a solution that doesn’t have any problems.

Enter Capistrano

Capistrano lets you have your local environment mirrored in other places. You can set certain folders that are not mirrored (i.e. file uploads, config files, etc), so that your updates to the site are fast and targeted. Capistrano uses SSH and Git to create your extended servers. By setting up Capistrano, you just need to develop using basic version control methods. If you already use Git normally, Capistrano is perfect for you.

Setting up Capistrano is a bit difficult for non-Ruby developers (aka me). There is some syntax that takes getting used to, but once you figure out the gist, its a walk in the park. Theres nothing more fulfilling than working at something that seems so foreign and finally seeing it work.

The tutorial I used to setup my server were by Konstantin Kovshenin from Automattic. The lists that I found most useful are below.

Deploying WordPress with Capistrano

Deploying wordPress with Capistrano Part 2: Staging Servers, Tagging & Database Security

Deploying WordPress with Capistrano Part 3: Backing Up and Restoring MySQL

Additionally, the Capistrano website has a series of links for using Capistrano on WordPress services.

http://capistranorb.com/

Yeoman EADDRINUSE error fix

by

Yeoman

I recently fell into the bandwagon of Yeoman. After spending time with Peepcode screencasts to deepen my understanding of jQuery, javascript and MVC frameworks, I decided TDD and Grunt were crucial to m y development process. Having people like Chris Coyer and Paul Irish on my radar made me finally fess up and get Yeoman running locally.

Getting Running

Issue with running Yeoman is initially my allergic reaction to automated terminal commands. I am not always fond of seeing foreign words run by my command line, but I try my best to understand what they are doing.

Grunt installs itself when you run Yo Webapp. Theres little you need to do to have working scaffolded application with TDD ‘infrastructure’ in place (aka Mocha, Grunt, JSLint, etc). When you follow the directions from Yeoman.io, its easy to get the web app running

Problems

I started having problems when I wanted to run Grunt server. When I ran Grunt alone, the process ran without any problems. For some reason, when I tried to test the server, Grunt would hang up on LiveReload. Specifically, I got this message:

Running "server" task

Running "clean:server" (clean) task

Running "coffee:dist" (coffee) task
>> Destination not written because compiled files were empty.

Running "compass:server" (compass) task
Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.

Running "livereload-start" task
... Starting Livereload server on 35729 ...

... Uhoh. Got error listen EADDRINUSE ...
Error: listen EADDRINUSE
    at errnoException (net.js:769:11)
    at Server._listen2 (net.js:909:14)
    at listen (net.js:936:10)
    at Server.listen (net.js:985:5)
    at Server.listen (/Users/lkbogdonoff/sites/portfolio/node_modules/grunt-contrib-livereload/node_modules/tiny-lr/lib/server.js:133:15)
    at Object.startLRServer (/Users/lkbogdonoff/sites/portfolio/node_modules/grunt-contrib-livereload/lib/utils.js:21:11)
    at Object.module.exports (/Users/lkbogdonoff/sites/portfolio/node_modules/grunt-contrib-livereload/tasks/livereload.js:44:20)
    at Object.task.registerTask.thisTask.fn (/Users/lkbogdonoff/sites/portfolio/node_modules/grunt/lib/grunt/task.js:78:16)
    at Object.Task.start._running (/Users/lkbogdonoff/sites/portfolio/node_modules/grunt/lib/util/task.js:282:30)
    at Task.runTaskFn (/Users/lkbogdonoff/sites/portfolio/node_modules/grunt/lib/util/task.js:235:24)

I posted a bug report to the Yeoman Github repository here and pinged sindresorhus. Within a day, another user replied on the Github issue thread explaining he had the same issue. Similarly, Sindre Sorhus also pitched in to help.

Solution

Eventually, I didn’t figure out what would solve the problem. I found a stop-gap measure which lets me continue running grunt server and have a local copy run without issues.

In Grunt.js, I needed to remove the line calling livereload-start. I did this by changing the grunt.task.run like this:

grunt.registerTask('server', function (target) {
    if (target === 'dist') {
        return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    }

    grunt.task.run([
        'clean:server',
        'coffee:dist',
        'compass:server',
      //'livereload-start',
        'connect:livereload',
        'open',
        'watch'
    ]);
});

Reflection

Even through I had googled portions of the error code in hopes of finding someone with a similar situation, there were no people with my exact situation. As a result, I thought about updating my Gems, Command-Line Tools and various brew packages. The Github issues response time was great. I’ll keep trying to get a better understanding of how to use Yeoman. For the time being it works!