Rocket Pop Media

Scaling Text

Kevin Druff — Thu, 02 May 2013 13:53:06 +0000

I loved the concept of FitText.js when I first ran across it. I played with it and tried to incorporate it into a project last fall before design tweaks ruled it out. When Peyton brought me her first designs for RichTech, it immediately sprung to my mind. However, the more I played with it, the more I found it wasn't what I was looking for. With FitText, the size of your text was related to the width of the parent element. What if you want your text related to the height of the element or, in this case, the height of your screen? The first PSD that our Peyton passed over was designed for monitors with a resolution of 1024x768. The text was well-proportioned and balanced for that width. However, I build sites on a 27" iMac with a resolution of 2560x1440, more than twice the screen real-estate when compared to the initial design. What would it look like on my screen, especially in combination with a background image covering the entire screen? The simple answer? It looked tiny! The first way we thought about solving this problem was through media queries. What should we query on? Screen width? Screen height? Height and width in combination? As we started down the road of media queries, it became clear that it was a workable solution but not an ideal solution. It allowed us to scale the font size up as we got larger, but we would always stumble across a combination that forced unacceptable compromises. What we needed was a way to maintain a truly proportional ratio between screen size and font size while allowing us to identify edge-use cases and dynamically account for them ¹. We began where we started: 1024x768. What font size did we think looked ideal there and what was the ratio between the font size and the screen size? We liked 17.5 percent. Here are three screenshots showing what the title text looks like at various window sizes. [gallery ids="3286,3285,3284" link="file"] The next problem we ran across was accounting for tall screens that were also narrow. For example, I am a big user of BetterSnapTool so I frequently have browser windows of 1280x1380 (half-width, full-height). This took quite a bit of testing to find the ratios of window height to window width AND window width to font-size that we liked. In the gist below you can see our final code and the ratios we ended up with. [gist userid=kedruff gist_id=5286389] On our homepage, we added some additional javascript to help center our text vertically as well as horizontally (lines 34-38).

Lessons Learned

First and foremost: work closely with your designer. The more dynamic the web gets the more you need to consult with your designer. No longer can a developer get away with accepting a PSD and building it pixel-perfect. Yes, you still must do that. However, you must do more and challenge your visual designer as much as they challenge you. Second: venture away from those pre-built jQuery plugins on occasion. You'll learn something new and the end-result just might be better for your project. Third: I'm happier than ever that I paid attention in math class when I was younger!

1. Eventually we will be able to move this into CSS with the use of VW/VH units. See CSS-Tricks for more.

Scaling Text, originally posted here: Rocket Pop Media - Web Development, Internet marketing, Social Media, and Advertising Agency in Richmond VA

Getting Sassy With Preprocessors

Alyssa Paulette — Wed, 24 Apr 2013 18:16:23 +0000

As seen here: Getting Sassy With Preprocessors

Part 2

Back in January, I introduced the wonderful world of preprocessors. I covered the basics, but now let's get a little sassy with mixins and extends.

GETTING SASSY

So let's stir things up a little bit and see what else Sass, SCSS and LESS can do! Let's create a new menu for the sidebar. We want it to have the same properties as our first menu, but also have a pattern, rounded corners, different colored list items, and subsequently different colored hover states for those list items. CSS: [gist userid=alyssaster gist_id=1488c6c5457f17d22352] Sass: Whew! That border radius was a lot of work. Imagine if you had multiple elements on your site that had rounded corners. That's where extends and mixins come in! A mixin is similar to the !, @ and $ variable declarations, only instead of declaring just one, you can declare a set of rules and properties which can then be included in other classes. [gist userid=alyssaster gist_id=b1893682412517826a17] A mixin is introduced with the equals sign (=) followed by a set of rules. In this case, it's the border radii for multiple browsers. This mixin is then called under #menu-sidebar using a plus sign (+). In this example, @extend takes all the variables from #menu and applies it to #menu-sidebar, including the nested elements. SCSS: With SCSS, the structure is exactly the same, only instead of using math symbols, @mixin and @include are used respectively to reserve the plus and equals signs strictly for mathematical equations. [gist userid=alyssaster gist_id=2961b4fe6d20fbf44ad7] LESS: Again, LESS is similar to SCSS, but the mixins are written as classes and ids, which in turn can be included in other classes and ids. These rulesets can also behave like functions and take arguments, in case you want to change a variable in one instance. [gist userid=alyssaster gist_id=9c24ae4b130dfbbb3048] In #menu-footer, we want the rounded corners to be 10px, so we include the .rounded-corners ruleset but give it different parameters (the same can be done in SCSS with an @include)

THE CSS OUTPUT

When all is said and done, the final output of the above preprocessing languages become: [gist userid=alyssaster gist_id=c09f3eab43e0d6b93d91] With the @extend, the three sidebars share the same style elements, and all other elements that are exclusive to #menu-sidebar and #menu-footer are declared individually.

VISUAL OUTPUT

#menu #menu-sidebar #menu-footer Which preprocessing language do you use? Which one would you think about trying if you've never used a preprocessor before?

Getting Sassy With Preprocessors, originally posted here: Rocket Pop Media - Web Development, Internet marketing, Social Media, and Advertising Agency in Richmond VA

Tools of the Trade: SEO Setup

David East — Fri, 12 Apr 2013 18:29:21 +0000

As seen here: Tools of the Trade: SEO Setup

Ah, SEO. Search Engine Optimization. You know you need it, you know it's important...you're just not a hundred percent sure what it is. Don't worry, you're not alone. SEO is a nebulous term for a nebulous concept. But at its core is goal: for a website to rank as high as possible in search engine results. Therefore the answer to "what is SEO" is "any action that positively impacts searchability of a website." And never you mind that "searchability" isn't actually a word. Thus when someone offers to sell you their "SEO services," you need to know what exactly they are offering. Which is tricky, since it's quite logical for someone to seek "SEO services" are doing so because they have a loose grasp on the concept themselves. At Rocket Pop, we never guarantee a client they will be on the top of search results. For one thing, "search results" is about as vague a term as you can find. For another, there is no silver bullet when it comes to SEO. What there is, and what we promise, is to do things the right way. I call this our SEO Best Practices, and my humble contribution to it is ensuring the SEO setup is done right. When we launch (or take over the management of ) a website, I always check for a few things that are important to the basic communication of a website with a search engine. My perspective is that of the non-developer; I take the well-crafted websites my Rocket Pop compatriots whip up and make a few finishing touches.

Allow Indexing - this is, effectively, your On/Off switch for search engines. On a WordPress site, this used to be in a settings section called "Privacy" but has now been changed. Its replacement is found in the Settings section "Reading" - "Discourage search engines from indexing this site." Outside WordPress, you'll want to check your robots.txt and make sure you're not blocking your URL(s).
Titles and Metas - Our developers, being the consummate professionals they are, set proper Titles as they create our websites. I follow up and make sure the meta title (setting the main Title makes this second step a bit redundant, but we do it anyway) and meta description are set for each page. This ensures that search engines will see the proper titles, as well as the user looking either at the site itself or at SERP's (Search Engine Results Pages).
Sitemap - a sitemap, in a perfect world, is not a necessary step in setting up a website. If your website is coded and constructed properly, then search engines don't need the extra guidance of a sitemap to find and index all the pieces of a site. So, again, my work is essentially done for me by our devs. But we're all about being comprehensive, so I take the additional step of creating a sitemap and submitting it to search engines like Google.
Check the content - to put this "step" here is a bit misleading. Your content is the most important aspect of SEO - at the end of the day, the more relevant and interesting your content is, the better your site will perform in results. So in truth the biggest step in SEO is when our copywriters and devs craft the content with the client. So in truth, ensuring the site content reflects the important and relevant keywords while remaining appealing visually for the user happens well before this stage - I just give it one more look to make sure we did things right.

When I've made sure all these bits are in place, we clear a site to be officially launched. So what was the SEO work? All of it. The SEO work started before the first line of code was written. And it continues long after the site's launch. SEO is the ongoing relationship of a website to a search engine. Next time on my little Tricks of the Trade series I'm starting here, we'll dig into Google Webmaster Tools. Stay tuned!

Tools of the Trade: SEO Setup, originally posted here: Rocket Pop Media - Web Development, Internet marketing, Social Media, and Advertising Agency in Richmond VA

How do you media query?

Kevin Druff — Mon, 11 Mar 2013 19:14:51 +0000

As seen here: How do you media query?

How do you media query? Here at Rocket Pop, it's a question that gets its fair share of debate. When I first started building responsive CSS using media queries, Apple's iPhone was the device that initially came to mind. Accordingly, I targeted my media queries and stylesheets to those devices: [gist userid=kedruff gist_id=5f5309f3e27b46f97fd3] You see three examples here of grouping styles together based on device targeting either through size alone or size and orientation. There is a sizable benefit to be gained by this type of organization. If a user reports an issue related to styling on a certain device, it's pretty easy to figure out where the culprit lies. However, there's a definite performance hit here. Each of these stylesheets requires a separate HTTP request to download it. And, more importantly, browsers will download these stylesheets whether they're needed or not. In short, while this might be a good practice to employ in development, it's a terrible practice to employ in a production site, especially if you're working on a site that expects to receive a significant amount of traffic. As the web became more cognizant of the performance penalty with extra HTTP headers, many developers began including their media queries in main stylesheet at the bottom: [gist userid=kedruff gist_id=ce2c8b707049478a55e6] Many still include their media queries this way and there's no performance hit to doing it this way. However, recently I began intermingling media queries with my base styles. Here's a pretty detailed example from a recent build we did for RichTech. [gist userid=kedruff gist_id=510315d89fb69202ca4d] I've removed much of the decorative SASS so we can focus our media queries and some pitfalls I ran across and how to work around them. Lines 1 through 8 establish our base size within our larger grid. Our menu is fixed to the bottom of the screen, spans the full width of our grid, and is a height of 54 pixels. Lines 7 through 38 handle the structure of our unordered list. You will notice the first thing we build is a mixin (if you're not familiar with SASS, mixins serve similar to PHP functions). Because RichTech's audience includes a sizable portion of IE8 users, and IE8 does not understand media queries, we build the base structure of our menu as a mixin so we can target IE8 users directly via Modernizr's .lt-ie9 class. We then target everyone else using a standard min-width media query. If you are writing CSS and all your styles are included in a media query, IE8 will not render your page as you intended. On line 22 you will see we add additional padding to our menu items for viewers with screens wider than 1095 pixels. The last two items control the menu structure for user's with narrow browser viewports. Rather than continuing to shrink font-sizes and reduce space, we switch from a horizontal menu to a vertical menu and introduce a show/hide trigger, which you can see below. The more I develop this way, the more I like it. Why? Because I know EXACTLY where to find the code for a container if something is broken or changes need to be made. Moreover, I can more quickly determine the most efficient way to make a change. If I need to change all viewport sizes, that code is likely a few lines above. If I need a new viewport query, I can insert it a few lines below where I am. For me, I have found that I can wrap my brain around what code needs to be changed and make the changes in a quicker manner if my code is grouped by the container it affects rather than the screen size it affects.

How do you media query?, originally posted here: Rocket Pop Media - Web Development, Internet marketing, Social Media, and Advertising Agency in Richmond VA

How To Build A WordPress Slider

Jereme Yoho — Thu, 28 Feb 2013 20:57:40 +0000

As seen here: How To Build A WordPress Slider

As a late adopter of Wordpress, I find that WP Developers pack their themes full of plugins that are just too bloated for my needs. Maybe it's a need for control in a development environment, but I still have a desire to keep my code simplified and neat. We all have our own preferences and brands of development around Rocket Pop, but at the end of the day it all works together cohesively. This is likely because, in general, we do not like to use very many WP plugins. Sliders are a fairly common fixture in modern web design, and while I don't believe them to be necessary or timeless, they do have their place. When it comes time to develop a new site with a featured content slider and using Wordpress there are a great deal of options to choose from. Yes, you could take the plugin route and hack apart someone else's code to make it suit what you want to do. Frankly, though, I don't have time for that and I doubt you do either. The best part about Wordpress in its simplified form, is that you really don't have to use plugins as a whole thanks to the wonderful documentation that they provide. Check out the finished result of this tutorial Live Demo

Setting Up The Slider

We're going to walk through how to build a very flexible content manageable slider that integrates with Wordpress and should give you all that you need. First and foremost - go grab my favorite jQuery slider script which will be used as the basis of this demo, bxSlider. You can find installation instructions on the bxSlider homepage or their Github page. In my process I deviate a little bit from their instructions so as to integrate the slider with my Wordpress theme. Make sure to include your javascript calls in your theme's footer.php file after the wp_footer(); call. (Note: Be sure to deregister the Wordpress jQuery from the Functions.php file.) As the installation instructions state leave the CSS reference in the header with your other stylesheets, but make sure to put the jquery.bxslider.css file in your theme's folder. Putting your JS in the footer and CSS in the header will allow all of your referenced files to load in the proper order, reducing the sometimes jerky visual effect you can get before jQuery has a chance to initialize and grab all of its referenced elements. [gist userid=yohoGDES gist_id=4ebd4065827b12847baa] I always serve my jQuery library from Google… because well… it's Google. I love them and you should too. You'll also notice that when I am calling the minified jQuery bxSlider script, I have stored the files within my stylesheet directory. You can reference this script with the command bloginfo('stylesheet_directory'). Within my parent theme folder or child-theme folder, I've created a /js/mylibs/ folder so that I can keep my theme's JS files organized and easily accessible. (This path, for those new to building your own themes, would end up being www.mydomain.com/wp-content/themes/themename/js/mylibs/ with "themename" being the 'stylesheet_directory'.) The HTML markup for bxslider is very, very simple, which is why I've always sworn by it. It is an Unordered List (

$('.bxslider').bxSlider({

View a demo of the basic slider

TimThumb

here

add_image_size()

here

Wordpress Integration

here

If the category has posts, while it has posts show them within an unordered list.

If there are no posts (else) show this.

TL;DR:

id="post-">

How To Build A WordPress Slider, originally posted here: Rocket Pop Media - Web Development, Internet marketing, Social Media, and Advertising Agency in Richmond VA

Which Camera Should I Choose?

Scott Dickens — Wed, 27 Feb 2013 18:35:17 +0000

As seen here: Which Camera Should I Choose?

When shooting video, choosing the right camera is an essential decision. But seeing them in action isn't easy. The best way to see this for yourself, aside from testing each camera on your own time, is to watch Zacuto’s “Great Camera Shootout 2011 & 2012”. They gathered up the top cameras used for short and feature motion pictures and put them through a fairly extensive series of real world tests on an interior set. Here’s a link to the shootout on Vimeo. Spoiler alert! The most common conclusion was that cameras matter less than the artist behind it. With tools in hand, the better results will come from the cinematographers with the most tricks in the bag, so to speak. That said, choosing a camera is the job of the cinematographer. The bigger the budget, the better the cinematographer, and in general, big boys play with bigger toys. Yet, as we will see, an experienced artist will be able to produce high quality content with a lesser camera, and that can be YOU! I want to show you how to become an experienced cinematographer, and how to do it without spending a fortune. It's going to a be a rather long journey, spanned across a series of blog posts. This is no simple procedure. Making videos is a lot more complicated than turning on your camera. In the end, you will have the knowledge of what it takes to produce high quality content with a DSLR or another prosumer level video camera. Now, don't get me wrong: just reading this is not going to make you a better shooter. You need to practice. This series will get you ready to explore the world through your own lens. What is Cinematography? The art of motion pictures is more than point and shoot. Cameras can be expensive. The best digital video cameras are used now for major motion pictures by independent producers and studios alike. For example, the latest Will Smith flick was shot on the Sony F65. Capturing moving images with a tiny computer at the end of a camera lens is no small feat. Price points vary and like any other tangible electronic technology, you get what you pay for. [caption id="" align="alignnone" width="450"] Director M. Night Shyamalan and Cinematographer Peter Suschitzky on the set of After Earth, the first major motion picture to be shot with the new Sony F65 4K camera.[/caption] The best digital cameras are incredibly intricate machines designed with very specific functions needed to smoothly and routinely capture the scenes we expect to blow us away in the movie theatre. In the basic sense, cameras capture reflected light. The art of cinematography is not simply the use of a camera, but more significantly it is the placement of light, or painting with light. With this in mind, consider that a great camera will make lighting a more simplified procedure, where less light is required because of the camera’s sensor and compression codec. This also means that in locations with low ambient light readings, the camera will produce a less noisy image. Cameras with high signal to noise ratios look cleaner and allow for less time spent in post production. Professional cameras also have professional hardware components and features like timecode sync, optical viewfinder, professional lens mounts and of course, a professional quality sensor. I hope I'm not scaring you. But let's be clear: there is certainly a difference in consumer and professional camera equipment. The picture above is from a very high budget production. I mean, it's friggin Will Smith. Most of us aren't going to be directing photography for M. Night Shyamalan in the near future. But we can go out and produce some really awesome content for a no-budget production. The DSLR Revolution The impact of cinematic production is depth of field. That's what really sets apart the emotional cinematic shots from "video". Depth of field, or DoF is the separation of two planes in "z-space", or front to back on a graph. Shallow D0F is when the background is blurred and the foreground is out of focus. You might also notice the opposite, or even a transition from an in-focus background to an in-focus foreground, where the background is now out of focus. Before we get into DSLR cameras and how they provide this shallow DoF on a budget, it is critically important to note that depth of the field is not everything. There are always exceptions and this one is a whopper. Citizen Kane is often called the best film ever made, and guess what? It was the first major film to throw away the shallow depth of field and put everything in the scene in focus! What! But I thought...it was...the depth of field. Yeah, it is, and it isn't. You see, cinematography is about expression of an emotional statement. That's why it really doesn't matter what tools you use. It's about the implementation of those tools you have and how to effectively tell your story. DSLR cameras are the digital version of 35mm still cameras that use 35mm film. The digital versions have sensors instead of film but can use the same lenses. More expensive cameras, like the Canon 5D mk II and III, utilize larger sensors that are the same size as a single frame of 35mm film.This means the sensor captures every millimeter the lens is capable of showing it. Cameras like the Canon 7D feature a smaller sensor, which crops the image seen by the lens. The main reason for using these cameras, even the cheapest DSLR cameras, rather than low cost video cameras, is the larger sensor size. We are going to get into large/small frame DSLRs in the section about sensors. For now, it's important to note that using a DSLR, and in fact, any camera with the ability to change lenses, is going to provide you with the option of the more cinematic shallow depth of field. So in short, get a DSLR if you want to learn how to become a cinematographer. I have the Canon T3i. For more production tips, stay tuned as I explore the ins and outs of digital video production. I'm just getting started.

Which Camera Should I Choose?, originally posted here: Rocket Pop Media - Web Development, Internet marketing, Social Media, and Advertising Agency in Richmond VA

Listen to the Data

Kevin Druff — Thu, 07 Feb 2013 16:46:36 +0000

As seen here: Listen to the Data

Quick, what screen resolution should we target when we design for you? You don't know? Are you using an analytics tool like Google Analytics? I hear you, you're not into tracking drop-off rates, conversion rates, or traffic sources. You should be, by the way (we can help with that, too).

Beyond all that helpful data about the content of your page, Google Analytics provides powerful information about how your customers access your site. Are they on mobile devices? Macs? Windows? What is their screen resolution? What browser are they using?

Wait, wait, wait, I hear you saying. You don't care about any of that. You want a nice-looking site that tells the world what you offer. Well, we work with you to provide just that. However, as a developer, the more I know about your audience the better experience I can create for them.

Are your site's visitors big users of Internet Explorer? Are they still using version 8? That version of Internet Explorer was released in 2009. (By contrast, Firefox's most recent version was released in January of 2013.) Because of its age, IE 8 is missing many features we would typically use in building your site.

When a large segment of your audience is using IE8, why design and develop a site making extensive use of advanced features like CSS3 animations? Your visitors will appreciate an experience that is built for their browser's capabilities rather than a last-minute attempt to strip away features or awkward attempts to force a square into a circle.

Do you have a lot of customers on an iPad or other tablet? Are you a retail outlet? We'll make use of features like GPS to offer customized directions from their location to yours. We will design and build an interface more conducive to touch than cursors (larger buttons, for example).

Now, the bigger your budget the more specific we can get. Are visitors using an iPhone dropping off after the home page? We can find out, redesign the front page experience for those on smaller devices and see if the drop off rate improves. Are IE users skipping that call to action in larger numbers than other browsers? Let us take a look, perhaps their experience can be better optimized and boost that conversion rate.

It can be tough to get a good handle on your data. We work hand-in-hand with you to improve your return on investment by optimizing your site to your audience.

Listen to the Data, originally posted here: Rocket Pop Media - Web Development, Internet marketing, Social Media, and Advertising Agency in Richmond VA

Battle of the Preprocessors

Alyssa Paulette — Tue, 15 Jan 2013 22:18:05 +0000

As seen here: Battle of the Preprocessors

Part 1

A couple days ago, I was mindlessly scrolling through my Facebook Newsfeed when, out of the banality of the usual status updates, one arose that caught my attention. It said, "Sass, SCSS, LESS or CSS. Which is better?" This spawned a lengthy detailed comparison of Sass vs. SCSS vs. LESS, which I later deleted and truncated into something more readable (because no one wants to read a Facebook comment that's more than three paragraphs long). But afterwards, I realized I really wanted to take a deeper look into the world of CSS preprocessors, and share them properly with the world.¹

WHAT'S A CSS PREPROCESSOR?

CSS has always been a solid foundation of styling our websites. But in recent times with new web design trends, browser capabilities, and screen sizes, a demand grew for a way to streamline, organize and maintain our massive stylesheets. In swoops Sass. Five years ago, a couple of developers named Hampton Catlin and Nathan Weizenbaum developed a new way to write CSS. They called it Sass, which stands for "syntactically awesome stylesheets." These new stylesheets had a new syntax, which then used a preprocessor to translate into regular CSS for all browsers to read. It's like taking the abbreviated text messages of a pre-teen girl and translating it into proper English.²

JUST SOME BASICS

Let's take a look at an example of how you would style a menu using Sass, SCSS and LESS. To begin, let's write out the HTML and the CSS of this menu, something we should all be familiar with. We'll be focusing on the syntax of these languages, so I apologize for the lack of pretty pictures. They'd all look the same anyway! HTML: [gist userid=alyssaster gist_id=2656bb40309dc535e6a1] CSS: [gist userid=alyssaster gist_id=6216e26149406fa4b468] Sass: When Sass first came out, it was a culture shock for developers and designers; there were no curly brackets, you had to indent a certain way, and you had to learn new symbols. Many designers ran away from it with their tails between their legs, but some of the braver developers took on this new challenge and are still using this initial version of Sass. [gist userid=alyssaster gist_id=ccd72ea85330f9ca85cb] In Sass, your CSS is stripped down, plain and simple. Child selectors are nested within the parent, and indented accordingly. The ampersand (&) is then introduced as a shortcut to refer to the parent selector at the nested level. You can establish constants to be used throughout your stylesheet (declared with the ! operator). That way, if you—or your client—suddenly decide that !menu-bg should be a different color, you only need to change it once at !menu-bg rather than searching your entire stylesheet for every instance of the old color and changing it. Sass also allows you to write math. In this example, the hover color is a darker shade of !menu-bg, so we subtract #111 from it which gives us #b3011f. If the color of !menu-bg is ever changed, Sass does some slick math and automatically makes the hover state darker (or lighter, or whatever your equation dictates) accordingly. Sass uses strict indentation hierarchy, saving you time and repetition. For the obsessive-compulsive coder (like myself), Sass' rules about indentation forces you to write your code the same way each time, making it easier to read especially if you're working with a team.³ SCSS: Because of Sass' strange new syntax, developers started complaining. Why spend time learning something so foreign only to have it translated to the language we already know? Thus, SCSS (Sassy CSS) was introduced. It became an extension of Sass, so it's not too different from its predecessor, but the advantage is that it uses the existing syntax of CSS. Basically, it takes the best of both worlds; you have the indentation structure of Sass while retaining the rules of CSS that you already know. [gist userid=alyssaster gist_id=612fccb9672f78f3a259] The dollar sign ($) is used to declare variables because the exclamation point is already used in CSS (for !important directives) and it just seemed silly to use the same symbol in different contexts. For most people (myself included), SCSS is preferred over Sass because of its similarities to CSS. If you know CSS, then SCSS is a piece of cake. Sass has a slight learning curve to it. Also, being the obsessive-compulsive coder, I appreciate the use of curly brackets and semicolons. The indentation doesn't matter all too much at this point, but I do it anyway. And the best part is, any CSS is also valid SCSS. LESS: In 2009, a developer named Alexis Sellier created LESS, based on the syntax of Sass, which later inspired SCSS. Since these three languages inspired each other, they're pretty similar in structure. Once we get into conditional logic, we'll see more of a difference. For now, the only difference is while SCSS uses $ to handle variables, LESS uses @. [gist userid=alyssaster gist_id=67eb9ab86f817b3cfed6] For some, the LESS @ sign creates a personal annoyance since it is also used for declaring @keyframes and @media queries, but ultimately is not problematic. Unlike Sass, LESS can be compiled client-side via JavaScript⁴, which means Ruby n00bs like me don't have to do dexterous warm-ups before installing LESS, then crawl into hiding afterwards and hope the internets wasn't destroyed in the process. On the downside, if a user has JavaScript turned off, the results would be quite interesting.⁵

IS THAT IT?

Not at all! This is just brushing the basics to get your feet wet with the syntax. Later, we'll dive into mixins and extends, and explore how SCSS/LESS handles expressions, functions, and conditional logic! In the meantime, if you'd like to check out the world of CSS preprocessors for yourself, head on over to some of these resources: http://sass-lang.com/ http://lesscss.org/ http://thesassway.com/articles/sass-vs-scss-which-syntax-is-better http://css-tricks.com/sass-vs-less/ http://awardwinningfjords.com/2010/03/31/sass-3-syntax.html

1. This post contains highly geeky content. If you're not familiar with HTML or CSS, the following content might make your brain explode. You have been warned. ↑ back to top 2. omg srsly? totes cool lol. ur my bff 4lyfe. ↑ back to top 3. Kevin has yelled/groaned/laughed at me many times for changing the structure of his CSS. Likewise, I have also yelled/groaned/laughed at him for changing mine (or because I felt like it). Kevin also yells at Jereme and Andre (and vice versa), because at some time, I had forced them to conform to my style of writing CSS (they may deny this). ↑ back to top 4. There are many attempts at Sass/SCSS JavaScript compilers, but none are official releases from the developers of Sass, nor are they recommended. ↑ back to top 5. Or disastrous. ↑ back to top

Battle of the Preprocessors, originally posted here: Rocket Pop Media - Web Development, Internet marketing, Social Media, and Advertising Agency in Richmond VA

Movember: Burly Bearded Awesomeness

Jereme Yoho — Thu, 29 Nov 2012 22:21:04 +0000

As seen here: Movember: Burly Bearded Awesomeness

Throughout the reaches of the world, men and women alike nurture the need to groom. As human beings we strive to create a unique sense of individualism, often this is achieved through fashion. I ask you all, what is more fashionable than swaths of beards? Historically facial hair has been a silent symbol of prowess and a means of communicating with your brethren. Men pride themselves on having the most flourishing of beards. In modern times, men grow their beards in a phenomenon known as Movember as a way of flexing their testosterone levels, a jovial time, or frankly warmth (winter IS coming). This year the lot of us decided to participate in this glorious event. All November long we have grown and groomed our beards with bated breath so that we might show the world. Ladies and gentlemen alike patiently grew out our facial locks (we promise we probably didn't take growth hormones). You may be asking yourself, "What in the world is Movember?" This movement started with a bet amongst some mates in an Australian pub. Who could grow the baddest ‘stache? They later decided to throw their upper lips into the awareness of men’s health issues like prostate and testicular cancer. Today, almost 1 million men and women are doing their part, and movments have sprouted hair in over a dozen countries. Last year they raised over $126 million in the United States alone. We rise to a challenge, and love a good bet, so feast your eyes upon our bristles.

But this deal was a no-brainer for us. We’ve each donned a dandy bit of facial hair for Movember. We’re either the hairiest boutique creative agency in Richmond or we’re just another gang of hipsters heading to a My Morning Jacket show. We’ve channeled our inner Jim James, unleashed our Dan Haggerty, and tossed our razors and combs to reveal the Grizzly Adams that lurks in each of us.

Don’t worry, though; December is nigh, and we’ll be digging out our razors for some much-needed grooming. Have a beard that rivals ours? Although we doubt it, we'd love to see it! Post a link in the comments section below or let us know what you think of our sweet facial scraggles. Co-Authored by Chris Crews, Illustrations by Jereme Yoho & Alyssa Paulette

Movember: Burly Bearded Awesomeness, originally posted here: Rocket Pop Media - Web Development, Internet marketing, Social Media, and Advertising Agency in Richmond VA

Life in the Seriously Big Universe

David East — Wed, 21 Nov 2012 16:13:52 +0000

As seen here: Life in the Seriously Big Universe

News sites are reporting that the Mars Rover has some data that scientists are excited about, but are not quite not ready to share with us. Typical scientists, letting science get in the way of sensational headlines. So lets do some hypothetical talking. The big questions is this: is the data indicative of potential life on Mars at some time? Let's get ahead of ourselves, shall we? Let's say it IS some exciting data indicating Mars could have, or dare we hope DID, harbor life. What would that mean. My thought is short and simple. It's about probability. If we find evidence that the planet CLOSEST to our Earth could have harbored life, what are the odds there is more life out there. I don't know, you don't know, and scientists don't know. Yet. But let me offer this simple set of facts. The distance from Earth to Mars is, on average, 48,678,972 miles (orbits change that distance, so its an average). One light year is 5,878,499,810,000 miles. Take a moment to compare how much BIGGER that number is than the distance of Earth - Mars. Earth to Mars is about %0.0008 of a light year. NOW. How big is our galaxy? The Milky Way, according to NASA, 100,000 light years across. Earth to Mars is .000008 light years. The Milky Way is 100,000 light years. This is a large amount of space. And the Universe? Well we really have no idea, but the rough guess is the observable universe is about 92 billion light years across. 92,000,000,000 light years. We have far passed what our tiny human brains can properly grasp. Now consider this. If we have found evidence of life .000008 light years away from us, what do you think are the odds there is more life within the rest of the 92,000,000,000 light years?

Life in the Seriously Big Universe, originally posted here: Rocket Pop Media - Web Development, Internet marketing, Social Media, and Advertising Agency in Richmond VA