Alright, we’ve gone through the first quarter of 2014, let’s head on to the fourth month of the year. This round, April 2014, we have a framework for building WordPress theme, and one for building mobile app. We will take a look at a new code editor from Github here briefly, and a very cool font icon.

As usual, if nothing here strikes your fancy, feel free to look through earlier compilations of fresh resources for designers and developers we’ve published in the past year or so.

Runway Framework

Runway Framework is beyond just a framework that you can use as a starting point to develop a WordPress theme. With it, you can set plugin dependencies that are required for your theme, manage child themes, and create an Option/Setting page in drag-n-drop fashion.

StackIcons

This font-icon really caught my attention. We typically can only assign a single color to a font-icon, but StackIcons is sophisticated in the sense that each part within the icon is adjustable. Moreover, the icons also come in multiple shapes; circle, square, rounded, and icon-only. A really great collection of font icons that is worth bookmarking. Save it, in case you need it later.

TagTree

TagTree provides a collection of screencasts that could help take your JavaScript skills to the next level. To name a few, you can now learn to build an app using AngularJS and Yeoman, create data visualization with D3.js, and draw vector graphics with Paper.js. And there are likely more screencasts to come in the future.

Atom

Atom is a new code editor from Github. The idea behind it is to make a “fully customizable, hackable, and deeply extensible” code editor. Similar to Sublime Text, Atom can also be powered with packages. At the time of writing, Atom is still in Beta. It will be free (while in Beta) but only available by invitation. If you are interested you can request an invitation at Atom.io.

Read Also: A Look Into Atom, Github’s New Code Editor

SassConf

Couldn’t attend web development conference? No worries, you can watch the screencast. SassConf, for instance, uploaded their recorded keynotes on a Vimeo channel. There are currently 15 videos that you can watch, covering all about Sass, tips, and tricks on building a better website.

Read Also: Getting Started with Sass

Ratchet

Ratchet is the new mobile app framework on the block that allows you to build an app using HTML, CSS, and JavaScript. Since it is built by the same team behind Bootstrap, Ratchet also inherited similar code conventions. Ratchet also comes with a number of reusable components to build the app interface such as Title bar, Buttons, Forms, and Sliders.

WP Job Manager

Build a job board on your website? If it is built of WordPress you can install WP Job Manager. WP Job Manager adds a new menu on the Dashboard. You can add a new job listing with some of its required detail like job location, job expired data, and employer/company name as well as company logo.

Crowe Wireframe

Crowe Wireframe is a collection of common design patterns such as image, text block, navigation, and buttons that you can use for rapid prototyping. But unlike a conventional prototype that only visualize its components with a boring outline and boxes which makes it hard to differentiate an icon from a logo, Crowe Wireframe is more visual-rich and detailed.

Cerberus

Today, more and more people are checking emails through their mobile devices. So, it is important to make sure that your email displays nicely, and is readable in that situation. Cerberus is a good starting point to build your email. It is light, responsive, and compatible in most email clients including Gmail, Outlook, and Yahoo.

Typebase

Typebase.css is a collection of styles to reset web typography, very much like Normalize.css. It is available in CSS, LESS and Sass format, so that you can integrate it in your project easily regardless of what framework you are using.

If you’re a musician, you probably know how annoying it can be to be away from your instrument(s). At times when you can’t have your instrument with you but you feel like you need to belt out a tune or two, perhaps you can seek solace in browser-based virtual instruments. If you ever feel the need to scratch that musical itch, you could do worse than play around with any one of these 10 virtual instruments.

Bear in mind that these virtual instruments aren’t quite ready to replace a good hardware or software instrument. They’re definitely good indicators of what may eventually be possible in the future though, as far as browser-based music is concerned. As you might expect, most of these virtual instruments are synthesizers, but that doesn’t stop them from being really fun.

Besides, who knows, maybe we’ll see a worthy browser-based recreation of an electric guitar in the near future?

Recommended Reading: Record Music Collaboratively Over The Internet With Ohm Studio

1. WebSID

If you’re a child of the 80′s then the WebSID will definitely bring back some memories. The WebSID is a digital recreation of the iconic SID sound chip, as used in the Commodore 64. It’s very simple and easy to use, with a straightforward interface, and can be played using your computer keyboard. The on-screen keyboard also responds to touch if you’re accessing it on a smartphone or tablet.

WebSID also comes with a built-in delay effect for more sound design possibilities. WebSID is also available on the Chrome Web Store so that you can play the synth offline. Note that since it was built using the WebAudio API, it only works in browsers that support HTML5 audio.

2. Webotribe

The Webotribe is a digital recreation of Korg’s popular Monotribe analogue groovebox. Just like the hardware, the Webotribe is a monophonic synth, drum machine and sequencer, all rolled into one. The sound is relatively faithful to the original too. It’s not a very complex drum machine or sequencer, but it is intuitive and the simplicity makes it a lot of fun to play.

One interesting thing is that the designer of the Monotribe actually helped the developer improve his emulation of the Monotribe. The Webotribe is a Java applet, so you need to have Java installed. Aside from the Webotribe, the author also has a lot of other virtual synths on the website that you can play around with.

3. MZ-101

The MZ-101 is a monophonic synthesizer inspired by the monophonic analog synths of the 1970s and 1980s, such as the Roland SH-101. The MZ-101 won’t win any awards for complexity, but it’s worth remembering that a lot of hit records were made using synthesizers with similar features. The MZ-101 lets you load and save presets, and you can even share your presets on Twitter.

You can play the synth using your computer keyboard or by clicking on the on-screen keys. Like most browser-based synthesizers, MZ-101 relies on the Web Audio API and thus won’t work in browsers that don’t support the API.

4. Inudge

Inudge is an easy-to-use tone matrix. Think of it as a way to create looping musical patterns by simply clicking on a 16×16 grid and "drawing" the patterns you want. You don’t even need to know any musical theory; all the pitches are within the pentatonic scale so almost anything you come up with will still be in tune. Inudge has eight different sounds, including one drum machine.

Inudge also has a Get & Share feature that lets you email your creations to friends and family, as well as generate a link that you can post online. You can also embed the inudge widget using the HTML code provided. Inudge is a Flash application, so there shouldn’t be any issues with regards to web browser compatibility.

5. Sympathetic Synthesizer System Mk 1

The Sympathetic Synthesizer System Mk 1 is a simple-to-use synth with a sound that brings to mind the glory days of the 1980s and early 1990s videogaming. It doesn’t try and emulate any particular synth or chip, unlike the WebSID, but the sound it produces is definitely more reminiscent of videogaming than it is of the analogue synths of the same period.

You can play the Sympathetic Synthesizer System Mk 1 using either your computer keyboard or the on-screen keys. The Sympathetic Synthesizer System Mk 1 was built using the WebAudio API, so it only runs on browsers that support the API.

6. Patternsketch

Patternsketch is an audio sequencer and drum machine. You can create patterns or play the drumkit in real time using your computer keyboard. Patternsketch has a few different drumkits to choose from, ranging from realistic Jazz and Live drumkits to electronic drumkits as well as drumkits based on the Roland TR-808 and TR-909 drum machines. Patternsketch also comes with a few premade drum patterns.

You can save and share your patterns, opening up the possibility of collaboration. You can also export your patterns as WAV, MP3 or OGG files for offline listening, and you can even send your pattern directly to Soundcloud. Patternsketch works best in Google Chrome and Mozilla Firefox.

7. TrueGrid

TrueGrid is definitely for experimental musicians and anyone interested in modular synths. In a nutshell, a modular synth doesn’t have a predeterimined signal path, and has individual modules that can be linked together in many different ways. TrueGrid is a digital recreation of a modular synth, letting you patch modules together to create many different types of sounds. While it doesn’t have a keyboard, you can use your MIDI keyboard to play the synth if you’re using Chrome.

TrueGrid is still in beta and still has some limitations. There aren’t that many modules available yet, and you can’t select modules from within the tool just yet. Instead, you’ll have to register on ModularGrid and use the site’s modular planner to create a synth. TrueGrid works best in Google Chrome.

8. WebModular

WebModular is a much simpler modular synthesizer that harkens back to synths such as the ARP 2600. WebModular, like TrueGrid, lets you create your own signal flow, but is geared towards more conventional sounds. It also has an on-screen keyboard and supports modern Music Macro Language(MML), so you can just write out a melody or riff, or even an entire song, and have the synth play it back.

WebModular has a few presets that you can load to help you get started. WebModular is built using the Web Audio API, but the developer is also testing a Javascript and Flash combination for browsers that don’t support the Web Audio API.

9. Patchwork

Patchwork is an advanced modular sound synthesis tool. Like TrueGrid, Patchwork lets you link together various sound generators, effects, sequencers and utility modules to create anything from dubstep-worthy basslines to otherworldly electronic soundscapes. The flexible and modular nature of Patchwork means that the only thing limiting you is your creativity.

Patchwork lets you save and share patches. Pressing the Share Your Patch button at the bottom of the screen will save the current patch on the server and generate a link that will automatically open the patch. Patchwork was built using Flash, so it should work equally well in all browsers.

10. Audiotool

Audiotool is a remarkably feature-rich music making tool that’s more than just a virtual instrument. Audiotool has four synthesizers and three drum machines. Audiotool also comes with effects that can be used to modify the instruments’ sounds such as distortion, reverb and delay. Audiotool also has sequencing capabilities, so you can sequence and compose entire songs.

If you’re not interested in composing and just want to noodle around playing one of the virtual instruments, pressing Caps Lock on your keyboard will let you play Audiotool’s instruments using your computer keyboard. Audiotool was built using Flash and should play nicely regardless of browser.

These days, there are many web developers working remotely. We can now find a plenty of collaboration tools and file-sharing applications such as Dropbox. However, one of the problems faced when is that web documents that you save will not be accessible through a localhost address from the browser, as they are outside the Apache Server DocumentRoot.

To solve this issue, you can change the DocumentRoot path to point to the Dropbox folder. But even though this can be done easily in MAMP with the GUI, you may need to change the path – back and forth – to access other websites that are saved in the initial path, which is highly inefficient.

An alternative option you can use is by creating a Symbolic Link (Symlink) and Apache Alias. These allow us to keep the original file in the Dropbox while still being able to access it through the localhost address in the browser – as if the actual folder is in Apache DocumentRoot. This is what we are going to look at in this post.

Recommended Reading: Setup PHP, Apache, And MySQL In Mac Without MAMP – Part II

Symlink in OS X

In OS X as well as the other UNIX-based OS, like Ubuntu, a Symlink is created through Terminal with the following command.

 ln -s path/to/source path/destination/symlink 

For instance, you have your website files saved under the “Dropbox/Sites/project” directory. In Terminal type the following command to put a Symlink to that folder.

 ln -s Dropbox/Sites/project ~/Sites/project 

Certainly, you need to change the destination path. If you are using MAMP you can set the path to Applications/MAMP/htdocs/project, or /Library/WebServer/Documents if you are using the built-in Apache from OS X.

One thing that distinguishes Symlink from Shortcut or the Alias Folder is that a Symlink will be treated like the original file. Symlink can be accessed through Terminal and can also be added to any GUI application. In SublimeText, for instance, you can add the Symlink, instead of the original source as a Project. We would not be able for doing so with a Shortcut and an Alias folder.

Symlink in Windows

In Windows, a Symlink is denoted with the mklink command as follows:

 mklink /d "path\destination\symlink" "path\to\source" 

Launch Command Prompt, type this command below to create a Symlink in WAMPServer directory that points to the source in Dropbox.

 mklink /d "c:\wamp\www\project" "c:\Users\thoriq\project" 

Apache Alias in OS X

Aside from creating a Symlink folder, we can also use Apache Alias. Not to be confused with an Alias Folder, Apache Alias is a module in Apache for URL mapping that denotse one particular path with an Alias. That way you can also access folders through the localhost address – as if it is stored inside the Apache DocumentRoot.

Before we can create one, ensure that the mod_alias module is loaded. From Terminal, navigate to /etc/apache2, and open the httpd.conf file. Remove the hash sign at the beginning of the following line:

 LoadModule alias_module libexec/apache2/mod_alias.so 

At the same time, add this line at the very bottom of httpd.conf, as we will create a dedicated folder, named “alias” to save all Apache Aliases, so that the folder as well as the configuration files in it are picked up.

 Include /private/etc/apache2/alias/*.conf 

Type the following two lines in Terminal to create the “alias” folder and “app.conf”, where we will write the Alias configuration.

 sudo mkdir /etc/apache2/alias sudo touch /etc/apache/alias/app.conf 

Type this command below to open the app.conf in SublimeText.

 sudo subl /etc/apache/alias/app.conf 

Apache Alias is specified this way:

 Alias /alias-name "/source/of/original/folder" 

Below is one complete example. You can add these in app.conf which we have created above.

 Alias /app "/Users/thoriq/Dropbox/app" <Directory "/Users/thoriq/Dropbox/app"> Options Indexes FollowSymLinks MultiViews AllowOverride all Order allow,deny Allow from all </Directory> 

Save the file and restart Apache. And given the above specification, you should be able to access localhost/app address through the browser even though the actual folder is in the Dropbox folder.

Apache Alias in Windows

If you are running on Windows and using WmpServer, you can create Apache Alias with ease. First, click WampServer icon in the taskbar and navigate to “Apache/Alias directories/Add an alias” menu.

A new window similar to Windows Command Prompt will pop up. In it, set the name of the alias. If you name the alias as “app”, for instance, it will later be accessible within localhost/app address in the browser. Press Enter to confirm the alias name.

Then, specify the source of the alias. For instance, c:/Users/thoriq/Dropbox/Sites/app.

We are done.

Conclusion

In this post, we have shown you how to create Symbolic Link and Apache Alias, which would be useful to access and manage folders outside the Apache DocumentRoot.

Further Reference

• Mklink Command
• Apache mod_alias
• What Are Aliases, Symbolic Links, and Hard Links in Mac OS X?
• What is the difference between Symbolic Link and Shortcut?

We have covered CSS3 Box Sizing in a previous article. Box Sizing, with the value of border-box, allows us to retain the element width and height, regardless of the additional padding and border it has.

This makes measuring and defining element size easier. However, CSS3 Box Sizing would not function in Internet Explorer 7 (IE7) and earlier versions, as you can see below.

Both of the columns that you see in the above screenshot have width, height, padding, and box-sizing specified. But as IE8 does not recognize the box-sizing property, the second column is pushed down when their total width exceed their parent container’s width.

You will have to adjust the size for each column accordingly to make them fit in it, which could be a very tedious task depending on the number of elements that you need to handle. If your website has to support IE7 (for whatever reason) while also preserving CSS3 Box Sizing, you can use the following trick.

Recommended Reading: A Look Into: HTML5 Shiv And Polyfills

Box Sizing Polyfill

To make IE8 (and below) acknowledge Box Sizing, we can use a polyfill. This polyfill comes in the form of an HTC file and is developed by Christian Schaefer. Download the file from the Github repository and put it in, for example, your CSS folder.

Create a CSS stylesheet, dedicated for Internet Explorer. Add the link in the HTML document this way so it will only be served in IE7.

 <!--[if lte IE7]> <link rel="stylesheet" href="css/ie.css"> <![endif]--> 

Then put the following code in the ie.css. This CSS rule below will apply box-sizing for all elements.

 * { behavior: url(css/boxsizing.htc); } 

A few things to note when applying this trick:

The url path of boxsizing.htc must be relative to the HTML files location, otherwise it will fail to work.

Paul Irish also has a tip to apply box-sizing in pseudo-element with *:before, *:after. But, since IE7 as well as IE6 does not support pseudo-element, there is no reason to use pseudo-element selectors in this case. And as you can see above, we don’t include them in the code as well.

The Result

Here, we have two columns with the parent container’s width set to 500px. The column width are set to 50%, so each column should have 250px width, even though we also set padding for it. Let’s open Internet Explorer 7, and launch the Developer Tool (F12).

Go to the Layout tab of the Developer Tool to see the column size in detail. You should see that in IE7 the column now includes padding as well as borders as part of the total size. In our case, the box width remains at 250px.