-
Big Relaunch of the GetHiFi.com Site
Joel Sutherland
Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.
For some time now we've been working on our new Web Marketing platform, HiFi. We first launched a marketing site for it back in September. At that point it was just a simple landing page with a cool rainbow header.
This time around, we worked with a local designer, Lenny Terenzi to get a really killer design. We just re-launched GetHiFi.com on the design last week. Today, we put up a 38-slide slideshow that documented the process of taking Lenny's complex design and turning it into a website. We thought it would be interesting to followers of this blog since it covers HTML5, CSS Sprites and a bit of jQuery. So if that is something you're interested in, head over to the post to read more about it:
Building a Complex, High-Performance Site with HTML5, CSS, and jQuery
-
Roundup of Recent Events at NMC
Joel Sutherland
Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.
This fall has certainly been busy at New Media Campaigns. We thought it would be worth giving our followers a quick update on some of the progress we have made and work we have done. Here is an overview of the goings on since this summer.
1. The NMC Team Grows To Seven
Eli Van Zoeren
Eli joined the team back in May as a developer and has been doing great work for us since, both for our clients and writing on our blog. Eli also has a strong background in HTML/CSS/JS and also likes to work with some occasional backend code. He is also a wonderful photographer. You can learn more about Eli on our team page or his personal site. For up-to-the-minute Eli, follow him on twitter.Patrick Clarke
We are all excited to have Patrick join our team. In addition to being a rabid hockey fan, Patrick is an excellent web developer. He comes to us with a strong background in HTML/CSS/JS as well as great talent in working with Content Management Systems. ;At NMC Patrick will be helping our clients get set up on our CMS, making sure their beautiful site designs are paired with beautiful code. You can ready more about Patrick on our team page or at his personal site.2. NMC Launches its 350th Site (Probably)
We say probably because we don't keep exact count. That said, one of the sites we recently launched below was probably our 350th since we started just 3.5 years ago:
Click a thumbnail to visit the site.
3. GetHifi.com is Up and Running
HiFi is the name of our next Content Management System. Its goal is to allow a design and marketing campaign to be realized in a website without having software standing in the way. You can read more about its mission and join hundreds of others who have already signed up by visiting its homepage.
4. New Tools are our Most Popular Yet
In 2009, we've made it a priority to release as many of our tools and as much of our knowledge as we're able through our blog. So far this has been a big success as we've had a multi-thousand percent increase in traffic and many of our projects and plugins are being used by developers all over the world. Here are some of the latest to make the rounds:
- HiFi Regular Expression Tester - This uses jQuery to allow you to quickly test and see the results of javascript regular expressions in real time. It has over 300 delicious bookmarks and has been tweeted over 100 times making it one of our most popular tools on Social Networks.
- nmcDropDown - This is straight from Eli's website toolkit. It makes building cross-browser dropdowns as easy as running a jQuery plugin. It uses hoverIntent if available for best performance.
- HiFi Sitemap Creator - This allows you to use a simple textile-like language to quickly build a website sitemap. Since it was introduced there have been over 300 sitemaps created in 5 different languages.
Be sure to check out those tools if you haven't already!
5. NMC East Opens
Luckily for us, a great coffee shop just opened next door called the Looking Glass Cafe. As you can see in the picture it has a great outdoor seating area which is perfect for enjoying North Carolina weather. As we've grown our office has gotten more cozy, so having NMC offer an open tab next door has been the perfect option. If you ever stop by, you'll probably find Alex or Eli attacking a project together while enjoying some coffee and tea respectively.
-
Free Regular Expression Tool for Writing and Testing RegExps
Kris Jordan
Kris Jordan leads web programming & development at New Media Campaigns; Kris previously worked for Microsoft's Developer Division, and studied Computer Science at Brown University and UNC Chapel Hill. You should follow Kris on Twitter.
You know the green-on-black code flying all over the computer screens in The Matrix? Regular Expressions don't look too different. They can be really gnarly and debugging them is a pain. This is why we created a free Regular Expression tool to help learn, author, and test RegExps.
Regular Expressions are a powerful way of programmatically searching for and replacing text. They're used in a wide variety of ways. Some examples include validating inputs to ensure a user has provided a valid phone number and email address, finding all links to external websites on a web page, extracting content from one website to another, etc.
I will be using the HiFi RegExp Tool in an upcoming blog post series on "Getting Comfortable with Regular Expressions". You should subscribe to our development blog to receive updates on this series as they come.
-
Engineering the HiFi CMS: On Templating
Kris Jordan
Kris Jordan leads web programming & development at New Media Campaigns; Kris previously worked for Microsoft's Developer Division, and studied Computer Science at Brown University and UNC Chapel Hill. You should follow Kris on Twitter.
It's no secret that we're working on a new service: HiFi, a content management system for designers who demand nothing less than a high-fidelity translation from a PSD design to live website. The space between PSD and HTML is filled by a templating language harmonizing a website's content with its beautiful, semantic markup.
If you've worked with a content management system before you've probably hated or tolerated its templating language. So have we.
Our internal CMS employs the use of Smarty, a popular and generic templating language for PHP. We tolerate it. The last major release of Smarty was nearly six years ago back in 2003. Since deciding to build HiFi our driving question has been "what should a great CMS look like for the 2010s", not the 2000s.
What's wrong with yesterday's templating languages?
A lot. We're in the process of surveying the good, the bad, and the ugly, and doing some prototyping of our own. Some of the most fundamental problems are already clear, though. Let's take a look.
It's Not a Language, It's Advanced Search/Replace
Many of today's templating "languages" simply search for template tags and replace them with instructions. This can take you a long ways, and the initial implementation is simple, but it leads to poor design decisions by constraining language possibilities to the tasks regular expressions solve.
Moving to a full-blown language processor (lexer/parser/compiler) removes most of the unnecessary constraints and code base scaling nightmares faced when everything is a regular expression search/replace. We're using techniques and best practices straight out of compiler textbooks to make sure HiFi's templating system is as simple and powerful as possible.
Most Errors Surface at Runtime
In most of today's templating languages the only way to find errors in your template is to run the template. So front-end developers get into a cycle of coding, running, hitting an error, coding, running, hitting an error, etc. Lots of these errors are simple ones, like the misspelling of a variable you're printing.
One of the benefits of moving to a full-blown language processor is the ability to do more analysis of a template's content. We can improve the experience for designers writing templates by issuing meaningful errors earlier. We can look at your template and, without running it, tell you "hey, this variable 'daate' you want to print in this if block that only runs on Mondays will never exist".
We believe improving the diagnostics of template coding will make writing template code much more enjoyable.
Weak use of Expressions
Arithmetic in view code should generally be avoided but scenarios exist where it or other expressions are the best way to carry out the task at hand. Assigning a new variable a calculated value, doing date arithmetic, using conditionals, etc, are possible throughout. We're aiming to make expressions natural and consistent.
What are your templating language loves & woes?
Is there a particular templating system you absolutely love or absolutely hate? Features you can't live without? Let us know in the comments as we're hoping to find great influences for HiFi. Also, be sure to the HiFi mailing list as we roll out announcements and a beta program in upcoming months.
-
Quickly Build and Share a Sitemap with a jQuery Sitemap Creator
Joel Sutherland
Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.
A while back we saw the SlickMap CSS that generated a sitemap from nested unordered lists and we were inspired. Since the DOM is so easy to manipulate using jQuery, why couldn't we build a nice and quick sitemap creator? With a little bit of free-time hacking, we came up with the HiFi Sitemap Creator.
With this tool it is easy to create and collaborate on a sitemap. Using the textbox on the left, you can build textile-like nested lists. This instantly updates the sitemap to the left. When you click the save button, a custom link is generated for your sitemap. Share this with a client and they can see and edit the very same sitemap! They can even make changes and send a link back.
Additionally, since this is based on CSS it prints beautifully:
This was largely based around the Slickmap CSS and jQuery. Some custom functions were written to translate the textile list to and from html. This will allow us to add cool features like edit-in-place and drag-and-drop in the future. For now though, we really like being able to quickly type plain text and see generate a good-looking sitemap.
We also used the Recess PHP Framework to build a RESTful key-value store for the saved sitemaps. This took no time at all becuase of the great scaffolding and tools it has out of the box. It was my first time integrating Recess and jQuery and it couldn't have gone better.
Check out the final product and be sure to leave comments and suggestions on how to improve it.
Subscribe to RSS
Subscribe to email updates
-
Go to our Development Blog to read about new technologies, techniques, and tutorials for developers and designers.
-
Go to our Internet Marketing Blog for strategies and discussions on how to fully leverage your web presence.
Network with Us