summaryrefslogtreecommitdiffstats
path: root/vendor/fguillot/picofeed/tests/fixtures/lincoln_loop.xml
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/fguillot/picofeed/tests/fixtures/lincoln_loop.xml')
-rw-r--r--vendor/fguillot/picofeed/tests/fixtures/lincoln_loop.xml1150
1 files changed, 0 insertions, 1150 deletions
diff --git a/vendor/fguillot/picofeed/tests/fixtures/lincoln_loop.xml b/vendor/fguillot/picofeed/tests/fixtures/lincoln_loop.xml
deleted file mode 100644
index 8e18601c2..000000000
--- a/vendor/fguillot/picofeed/tests/fixtures/lincoln_loop.xml
+++ /dev/null
@@ -1,1150 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title>Lincoln Loop Blog</title><link>http://lincolnloop.com/blog/</link><description>Lincoln Loop Blog</description><atom:link href="http://lincolnloop.com/blog/feeds/latest/" rel="self"></atom:link><language>en-us</language><lastBuildDate>Tue, 13 May 2014 11:51:13 -0500</lastBuildDate><item><title>High Performance Django Kickstarter Project</title><link>http://lincolnloop.com/blog/high-performance-django-kickstarter-project/</link><description>
-&lt;p&gt;&lt;strong&gt;Please update to our new feed url: &lt;a href="http://lincolnloop.com/blog/feed/"&gt;lincolnloop.com/blog/feed/&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
-&lt;hr/&gt;
-&lt;p&gt;&lt;a href="https://www.kickstarter.com/projects/1704706557/high-performance-django" style="float:left;display:inline-block; margin: 0 2em 1em 0"&gt;&lt;img src="http://lincolnloop.com/uploads/uploads/hpd_cover.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
-
-&lt;p&gt;I&amp;#39;m really excited to (finally) announce that we are writing a book! We&amp;#39;ve been working with Django professionally for a long time (over 7 years now). During that time, we&amp;#39;ve learned &lt;em&gt;a lot&lt;/em&gt; about how to use the framework to build fast and scalable websites. We&amp;#39;re bundling up all that knowledge into an e-book called &lt;strong&gt;&lt;em&gt;High Performance Django&lt;/em&gt;&lt;/strong&gt; and it is up on &lt;a href="https://www.kickstarter.com/projects/1704706557/high-performance-django"&gt;Kickstarter&lt;/a&gt; today.&lt;/p&gt;
-
-&lt;p&gt;We&amp;#39;re already well into the writing process, so we can tell you a little about what you&amp;#39;ll get. The book is heavy on Django tips, but also reaches far beyond Python, showing you how to architect and tune the rest of your stack. It gives you an opinionated battle-tested blueprint utilizing many of the same techniques as high-profile Django sites like Disqus, Instagram, and Pintrest.&lt;/p&gt;
-
-&lt;p&gt;We hope to get the first edition out in July, but we need your help to make that happen. Writing and editing the book is going to be a massive undertaking and you can help support our effort. &lt;a href="https://www.kickstarter.com/projects/1704706557/high-performance-django"&gt;Give us your vote of confidence by backing the project today&lt;/a&gt;!&lt;/p&gt;</description><pubDate>Tue, 13 May 2014 11:51:13 -0500</pubDate><guid>http://lincolnloop.com/blog/high-performance-django-kickstarter-project/</guid></item><item><title>A Look at CSS Rule Organization</title><link>http://lincolnloop.com/blog/look-css-rule-organization/</link><description>
-&lt;p&gt;&lt;strong&gt;Please update to our new feed url: &lt;a href="http://lincolnloop.com/blog/feed/"&gt;lincolnloop.com/blog/feed/&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
-&lt;hr/&gt;
-&lt;p&gt;CSS preprocessors have given us a handful of tools to re-architect our front-end code. We can keep things DRY with includes and extends or perhaps use nesting for code organization. All of these features allow a CSS rule to grow in complexity, but few people ever talk about managing that problem.&lt;/p&gt;
-
-&lt;p&gt;Let&amp;#39;s take a look at a modern CSS rule. We&amp;#39;ll talk about how they&amp;#39;re structured and why we do what we do. Perhaps this will help you organize your own CSS!&lt;/p&gt;
-
-&lt;p&gt;Here&amp;#39;s a very standard box. It is one of many box styles in our pretend design. It&amp;#39;s sole purpose is to feature and highlight content and it can live almost anywhere in our UI.&lt;/p&gt;
-
-&lt;p&gt;(Note, we use SCSS primarily so all our demo code will as well.)&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="scss"&gt;&lt;span class="nc"&gt;.featured-box&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="k"&gt;@extend&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;center-box&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt; &lt;span class="o"&gt;//&lt;/span&gt; &lt;span class="nt"&gt;Placeholder&lt;/span&gt; &lt;span class="nt"&gt;selectors&lt;/span&gt; &lt;span class="nt"&gt;first&lt;/span&gt;
- &lt;span class="o"&gt;@&lt;/span&gt;&lt;span class="nt"&gt;extend&lt;/span&gt; &lt;span class="nc"&gt;.info-box&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt; &lt;span class="o"&gt;//&lt;/span&gt; &lt;span class="nt"&gt;Modifier&lt;/span&gt; &lt;span class="nt"&gt;classes&lt;/span&gt; &lt;span class="nt"&gt;second&lt;/span&gt;
-
- &lt;span class="o"&gt;//&lt;/span&gt; &lt;span class="nt"&gt;All&lt;/span&gt; &lt;span class="nt"&gt;of&lt;/span&gt; &lt;span class="nt"&gt;the&lt;/span&gt; &lt;span class="nt"&gt;regular&lt;/span&gt; &lt;span class="nt"&gt;properties&lt;/span&gt;&lt;span class="nc"&gt;.&lt;/span&gt;
- &lt;span class="o"&gt;//&lt;/span&gt; &lt;span class="nt"&gt;Remember&lt;/span&gt; &lt;span class="nt"&gt;your&lt;/span&gt; &lt;span class="nt"&gt;grouping&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;
- &lt;span class="nt"&gt;width&lt;/span&gt;&lt;span class="nd"&gt;:&lt;/span&gt; &lt;span class="nt"&gt;90&lt;/span&gt;&lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
- &lt;span class="nt"&gt;height&lt;/span&gt;&lt;span class="nd"&gt;:&lt;/span&gt; &lt;span class="nt"&gt;100px&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
-
- &lt;span class="nt"&gt;background&lt;/span&gt;&lt;span class="nd"&gt;:&lt;/span&gt; &lt;span class="nt"&gt;blue&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
-
- &lt;span class="o"&gt;@&lt;/span&gt;&lt;span class="nt"&gt;include&lt;/span&gt; &lt;span class="nt"&gt;fadeIn&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nt"&gt;1&lt;/span&gt;&lt;span class="nc"&gt;.5s&lt;/span&gt;&lt;span class="o"&gt;);&lt;/span&gt;
-
- &lt;span class="o"&gt;//&lt;/span&gt; &lt;span class="nt"&gt;Sub-selectors&lt;/span&gt; &lt;span class="nt"&gt;specific&lt;/span&gt; &lt;span class="nt"&gt;to&lt;/span&gt; &lt;span class="nt"&gt;this&lt;/span&gt; &lt;span class="nt"&gt;selector&lt;/span&gt;
- &lt;span class="o"&gt;//&lt;/span&gt; &lt;span class="nt"&gt;Compiles&lt;/span&gt; &lt;span class="nt"&gt;to&lt;/span&gt; &lt;span class="nc"&gt;.featured-box&lt;/span&gt; &lt;span class="nc"&gt;.title&lt;/span&gt;
- &lt;span class="k"&gt;&amp;&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nc"&gt;.title&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="na"&gt;font-weight&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="no"&gt;bold&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="p"&gt;}&lt;/span&gt;
-
- &lt;span class="c1"&gt;// Handle state. e.g. active, inactive, selected, etc.&lt;/span&gt;
- &lt;span class="c1"&gt;// Compiles to .featured-box.is-active&lt;/span&gt;
- &lt;span class="k"&gt;&amp;&lt;/span&gt;&lt;span class="nc"&gt;.is-active&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="na"&gt;border&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="kt"&gt;px&lt;/span&gt; &lt;span class="no"&gt;solid&lt;/span&gt; &lt;span class="no"&gt;dotted&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="p"&gt;}&lt;/span&gt;
-
- &lt;span class="c1"&gt;// Any actions. Mostly standard interactivity&lt;/span&gt;
- &lt;span class="c1"&gt;// Compiles to .featured-box:hover&lt;/span&gt;
- &lt;span class="k"&gt;&amp;&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="na"&gt;background&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;green&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="p"&gt;}&lt;/span&gt;
-
- &lt;span class="c1"&gt;// Context specific styles&lt;/span&gt;
- &lt;span class="c1"&gt;// Compiles to .sidebar .featured-box&lt;/span&gt;
- &lt;span class="nc"&gt;.sidebar&lt;/span&gt; &lt;span class="k"&gt;&amp;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="kt"&gt;%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="na"&gt;height&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="no"&gt;auto&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="na"&gt;background&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="ni"&gt;whitesmoke&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="p"&gt;}&lt;/span&gt;
-
- &lt;span class="c1"&gt;// Lastly, media queries!&lt;/span&gt;
- &lt;span class="k"&gt;@media&lt;/span&gt; &lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nt"&gt;min-width&lt;/span&gt;&lt;span class="nd"&gt;:&lt;/span&gt; &lt;span class="nt"&gt;600px&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="kt"&gt;%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="na"&gt;margin&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="no"&gt;auto&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="p"&gt;}&lt;/span&gt;
-&lt;span class="p"&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;It helps to think that rules tell a story. Our rule has a name. It has &amp;quot;parents&amp;quot; via @extend. It has a few properties and when you interact with it, it will do something (change its background color to green). When put in different situations via media queries or in &lt;code data-syntax="text-only"&gt;.sidebar&lt;/code&gt;, it will change its appearance.&lt;/p&gt;
-
-&lt;p&gt;Let&amp;#39;s step through some of the best practices we use to build &lt;code data-syntax="text-only"&gt;.featured-box&lt;/code&gt;.&lt;/p&gt;
-
-&lt;h2&gt;Extends First&lt;/h2&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="scss"&gt;&lt;span class="nc"&gt;.featured-box&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="k"&gt;@extend&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;center-box&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt; &lt;span class="o"&gt;//&lt;/span&gt; &lt;span class="nt"&gt;Placeholder&lt;/span&gt; &lt;span class="nt"&gt;selectors&lt;/span&gt; &lt;span class="nt"&gt;first&lt;/span&gt;
- &lt;span class="o"&gt;@&lt;/span&gt;&lt;span class="nt"&gt;extend&lt;/span&gt; &lt;span class="nc"&gt;.info-box&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt; &lt;span class="o"&gt;//&lt;/span&gt; &lt;span class="nt"&gt;Modifier&lt;/span&gt; &lt;span class="nt"&gt;classes&lt;/span&gt; &lt;span class="nt"&gt;second&lt;/span&gt;
- &lt;span class="nc"&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;Similar to includes, imports, or inheritance in other languages, we handle dependencies &lt;em&gt;first&lt;/em&gt; by putting every @extend at the top. This cuts down on debug time later as we always know where to look for dependency problems.&lt;/p&gt;
-
-&lt;p&gt;&lt;code data-syntax="text-only"&gt;%center-box&lt;/code&gt; is a &lt;a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_"&gt;placeholder selector&lt;/a&gt;, which means its name does not get compiled in our output CSS. Instead, its properties appear wherever we call them.&lt;/p&gt;
-
-&lt;p&gt;If you want to learn more about placeholder selectors, there are several &lt;a href="http://www.sitepoint.com/sass-mixin-placeholder/"&gt;good articles&lt;/a&gt; &lt;a href="http://css-tricks.com/the-extend-concept/"&gt;on the topic&lt;/a&gt;.&lt;/p&gt;
-
-&lt;p&gt;@extend can be a tricky feature, as it can tinker with the ordering of our output CSS. All the more reason to put them early in our rule. Every bit of organization helps!&lt;/p&gt;
-
-&lt;p&gt;Utility or modifier classes like &lt;code data-syntax="text-only"&gt;.info-box&lt;/code&gt; come next for similar reasons. I&amp;#39;ll talk more about these in a moment.&lt;/p&gt;
-
-&lt;p&gt;Another advantage to putting external dependencies first is that it clarifies what the final output will be for a rule, as anything in a dependency would be overridden.&lt;/p&gt;
-
-&lt;h2&gt;Modifier Classes&lt;/h2&gt;
-
-&lt;p&gt;It&amp;#39;s not uncommon to have a base class with a few other classes that change the meaning of an element. You&amp;#39;ll see this a lot with buttons or boxes, especially in frameworks:&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="html"&gt;&lt;span class="nt"&gt;&amp;lt;section&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;box partner-content hidden-phone featured-box no-borders&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/section&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;In this example, &lt;code data-syntax="text-only"&gt;.box&lt;/code&gt; is a base class that gives us some starting structure. We then inherit other styles through a series of modifier classes in an effort to nudge our box into place. This gets messy over time as we end up using a growing number of modifier classes to define what is essentially an unique element. This is where extends help again:&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="scss"&gt;&lt;span class="nc"&gt;.featured-partner&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="k"&gt;@extend&lt;/span&gt; &lt;span class="nc"&gt;.partner-content&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
- &lt;span class="o"&gt;@&lt;/span&gt;&lt;span class="nt"&gt;extend&lt;/span&gt; &lt;span class="nc"&gt;.featured-box&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
- &lt;span class="o"&gt;@&lt;/span&gt;&lt;span class="nt"&gt;extend&lt;/span&gt; &lt;span class="nc"&gt;.no-borders&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
- &lt;span class="o"&gt;@&lt;/span&gt;&lt;span class="nt"&gt;extend&lt;/span&gt; &lt;span class="nc"&gt;.hidden-phone&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
-&lt;span class="p"&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;We can then use this to new rule to write a more semantic class attribute:&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="html"&gt;&lt;span class="nt"&gt;&amp;lt;section&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;**box featured-partner**&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/section&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;To get this effect without a CSS pre-processor we&amp;#39;d have to write really long rules. This quickly becomes difficult to manage:&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="css"&gt;&lt;span class="nc"&gt;.featured-box&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
-&lt;span class="nc"&gt;.info-box&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
-&lt;span class="nc"&gt;.help-box&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
-&lt;span class="nc"&gt;.notification-box&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
-&lt;span class="nc"&gt;.user-info-box&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="k"&gt;padding&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="m"&gt;10px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="k"&gt;font-size&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
-&lt;span class="p"&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;It&amp;#39;s important to note that using extends or includes creates a dependency, so be careful! Also, as a rule of thumb, you should try to stick to one base class, one modifier, and one state:&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="scss"&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;section&lt;/span&gt; &lt;span class="nt"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;**box featured-box is-selected**&amp;quot;&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;section&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;That&amp;#39;s much cleaner!&lt;/p&gt;
-
-&lt;h2&gt;Basic Properties&lt;/h2&gt;
-
-&lt;p&gt;Everyone seems to have a preferred order for properties. Some prefer alphabetical. Those who prefer grouping can almost never decide on the correct order. For example, I&amp;#39;m a huge fan of defining components starting with the outside first, then working inward: &lt;/p&gt;
-
-&lt;ol&gt;
-&lt;li&gt;Where is the box? (position, z-index, margins/padding)&lt;/li&gt;
-&lt;li&gt;What kind of a box is it? (display, box-sizing)&lt;/li&gt;
-&lt;li&gt;How big is the box? (width, height)&lt;/li&gt;
-&lt;li&gt;Box shadows, borders, etc&lt;/li&gt;
-&lt;li&gt;Backgrounds&lt;/li&gt;
-&lt;li&gt;Typography&lt;/li&gt;
-&lt;/ol&gt;
-
-&lt;p&gt;Intelligent grouping of properties will do a lot to ensure your CSS is accessible to other developers. Another common standard is &amp;quot;one rule per line.&amp;quot; As always, the most important guideline is &lt;strong&gt;be consistent&lt;/strong&gt;.&lt;/p&gt;
-
-&lt;h2&gt;Mixins&lt;/h2&gt;
-
-&lt;p&gt;Here&amp;#39;s where things get a little weird! You&amp;#39;ll notice that we include a mixin in our rule:&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="scss"&gt;&lt;span class="k"&gt;@include&lt;/span&gt;&lt;span class="nd"&gt; fadeIn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="mf"&gt;.5&lt;/span&gt;&lt;span class="kt"&gt;s&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;Technically, &lt;code data-syntax="text-only"&gt;fadeIn()&lt;/code&gt; is a dependency. So why isn&amp;#39;t it at the top? Mixins perform operations and inject the resulting CSS into the rule. This means that they are often dependent upon property ordering defined within the same rule. Grouping them near related properties helps make sense of output CSS. In simpler cases, I recommend putting mixins right after basic properties but before sub-selectors, which we&amp;#39;ll discuss next.&lt;/p&gt;
-
-&lt;h2&gt;Sub-Selectors (or &amp;quot;Think of the Children&amp;quot;)&lt;/h2&gt;
-
-&lt;p&gt;The next section of &lt;code data-syntax="text-only"&gt;.featured-box&lt;/code&gt; deals with specific styles for its children. In our example above we&amp;#39;re targeting the &lt;code data-syntax="text-only"&gt;.title&lt;/code&gt; class specifically:&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="scss"&gt;&lt;span class="c1"&gt;// Sub-selectors specific to this selector&lt;/span&gt;
-&lt;span class="c1"&gt;// Compiles to .featured-box .title&lt;/span&gt;
-&lt;span class="k"&gt;&amp;&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nc"&gt;.title&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="na"&gt;font-weight&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="no"&gt;bold&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
-&lt;span class="p"&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;Notice that I didn&amp;#39;t use a H3 or any other headline for that matter. Doing so restricts &lt;code data-syntax="text-only"&gt;.featured-box&lt;/code&gt; to a specific HTML structure, which may not always be best for accessibility or accurate with regard to the hierarchy of content. For example, &lt;code data-syntax="text-only"&gt;.featured-box&lt;/code&gt; could be used in a sidebar with a H4, or at the top of the page with a big H2.&lt;/p&gt;
-
-&lt;p&gt;Complex objects could call for dozens of sub-selectors. When this happens, consider putting common styles in a base rule, and meatier objects (that may exist on their own) into their own rules. Expanding on our original example, let&amp;#39;s pretend we have a stylized list within &lt;code data-syntax="text-only"&gt;.featured-box&lt;/code&gt;.&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="scss"&gt;&lt;span class="nc"&gt;.featured-box&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="c1"&gt;// Lots of styles for &lt;/span&gt;
- &lt;span class="nc"&gt;.tab-list&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="c1"&gt;// 50 lines of styles for tabs!&lt;/span&gt;
- &lt;span class="p"&gt;}&lt;/span&gt;
-&lt;span class="p"&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;This is less ideal than:&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="scss"&gt;&lt;span class="nc"&gt;.featured-box&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="c1"&gt;// Everything in our original example&lt;/span&gt;
-&lt;span class="p"&gt;}&lt;/span&gt;
-
-&lt;span class="nc"&gt;.featured-box&lt;/span&gt; &lt;span class="nc"&gt;.tab-list&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="c1"&gt;// 50 lines of styles for tabs!&lt;/span&gt;
-&lt;span class="p"&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;In this way we aren&amp;#39;t losing the &lt;em&gt;special case&lt;/em&gt; that is a &lt;code data-syntax="text-only"&gt;.tab-list&lt;/code&gt; inside of a &lt;code data-syntax="text-only"&gt;.featured-box&lt;/code&gt; amongst all the other styles.&lt;/p&gt;
-
-&lt;h2&gt;State and Actions&lt;/h2&gt;
-
-&lt;p&gt;CSS gives us a few actions to work with specific to our selected element. Most elements have :focus or :hover. Anchors have :visited and radio buttons have :checked. Often we shim these with classes or data attributes for use in richer interfaces:&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="html"&gt;&lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;submit&amp;quot;&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;&amp;quot;btn **is-sending**&amp;quot;&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Sending...&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;Actions and state are usually dependent upon basic properties, but are often overridden depending on context. For example, the animation we may associate with &lt;code data-syntax="text-only"&gt;.is-sending&lt;/code&gt; may be different on desktop than on mobile, or we may have to override a color on hover of an anchor&amp;#39;s default :link state.&lt;/p&gt;
-
-&lt;p&gt;As a side note, notice that I am using &lt;code data-syntax="text-only"&gt;.is-sending&lt;/code&gt; instead of &lt;code data-syntax="text-only"&gt;.sending&lt;/code&gt;. I always append &lt;code data-syntax="text-only"&gt;.is-&lt;/code&gt; to state classes to more clearly convey what they are.&lt;/p&gt;
-
-&lt;h2&gt;Context Specific Styles&lt;/h2&gt;
-
-&lt;p&gt;Context related styles always come last because they often have radical changes to appearance and layout. This fits well with a mobile first strategy, as you can clearly denote the &lt;em&gt;evolution&lt;/em&gt; of a rule as you gain screen space.&lt;/p&gt;
-
-&lt;p&gt;In our example above, we&amp;#39;re noting two different context changes:&lt;/p&gt;
-
-&lt;ol&gt;
-&lt;li&gt;When &lt;code data-syntax="text-only"&gt;.featured-box&lt;/code&gt; is in &lt;code data-syntax="text-only"&gt;.sidebar&lt;/code&gt;.&lt;/li&gt;
-&lt;li&gt;When &lt;code data-syntax="text-only"&gt;.featured-box&lt;/code&gt; is on a larger display.&lt;/li&gt;
-&lt;/ol&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="scss"&gt;&lt;span class="c1"&gt;// Context specific styles&lt;/span&gt;
-&lt;span class="c1"&gt;// Compiles to .sidebar .featured-box&lt;/span&gt;
-&lt;span class="nc"&gt;.sidebar&lt;/span&gt; &lt;span class="k"&gt;&amp;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="kt"&gt;%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="na"&gt;height&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="no"&gt;auto&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="na"&gt;background&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="ni"&gt;whitesmoke&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
-&lt;span class="p"&gt;}&lt;/span&gt;
-
-&lt;span class="c1"&gt;// Lastly, media queries!&lt;/span&gt;
-&lt;span class="k"&gt;@media&lt;/span&gt; &lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nt"&gt;min-width&lt;/span&gt;&lt;span class="nd"&gt;:&lt;/span&gt; &lt;span class="nt"&gt;600px&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
- &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="kt"&gt;%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
- &lt;span class="na"&gt;margin&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="no"&gt;auto&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
-&lt;span class="p"&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;In this scenario, we want &lt;code data-syntax="text-only"&gt;.featured-box&lt;/code&gt; to be full width and have a subtle appearance when in &lt;code data-syntax="text-only"&gt;.sidebar&lt;/code&gt;. On larger screens, we want it to be 50% of the available width and ensure that no matter what it is center aligned regardless of other styles. The ordering doesn&amp;#39;t matter here due to the specificity of the two changes. &lt;code data-syntax="text-only"&gt;.sidebar &amp;&lt;/code&gt; will trump the media query change.&lt;/p&gt;
-
-&lt;p&gt;However, we put media queries last in rules because they most often deal with layout related changes, and putting those sort of changes in a predictable place in the same way we handled extends helps with debugging.&lt;/p&gt;
-
-&lt;p&gt;&lt;a href="http://filamentgroup.com/lab/element_query_workarounds/"&gt;Per element media queries&lt;/a&gt; could alleviate some of the pain here, but at the time of this writing we do not have a clean CSS-only solution. Though &lt;a href="https://github.com/Snugug/eq.js"&gt;many people&lt;/a&gt; have put together &lt;a href="http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/"&gt;workable solutions&lt;/a&gt;. Things can get out of hand when you have to consider an element&amp;#39;s appearance not only across browsers and devices, but location in the UI and relation to other elements. &lt;/p&gt;
-
-&lt;h2&gt;That&amp;#39;s It!&lt;/h2&gt;
-
-&lt;p&gt;This just scratches the surface of what it takes to write clean, maintainable CSS architecture. In the wild, our &lt;code data-syntax="text-only"&gt;.featured-box&lt;/code&gt; rule would likely be more complicated, with more dependencies, basic properties, and context changes. What best practices does your team follow to help keep complexity at bay?&lt;/p&gt;
-</description><pubDate>Thu, 08 May 2014 12:11:41 -0500</pubDate><guid>http://lincolnloop.com/blog/look-css-rule-organization/</guid></item><item><title>Speedy Browserifying with Multiple Bundles</title><link>http://lincolnloop.com/blog/speedy-browserifying-multiple-bundles/</link><description>
-&lt;p&gt;&lt;strong&gt;Please update to our new feed url: &lt;a href="http://lincolnloop.com/blog/feed/"&gt;lincolnloop.com/blog/feed/&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
-&lt;hr/&gt;
-&lt;p&gt;Last month I talked about one of my favorite tools for JavaScript on the front end, &lt;a href="http://lincolnloop.com/blog/untangle-your-javascript-browserify/"&gt;Browserify&lt;/a&gt;, which allows you to create modular code for the browser using CommonJS modules and npm. It does this by combining the dependencies into an all-in-one bundle. In development, typically you will watch your JavaScript files for changes and then recompile the bundle.&lt;/p&gt;
-
-&lt;p&gt;If you&amp;#39;re including some large dependencies in your bundle, though, you may have noticed that it can take several seconds to regenerate that bundle each time you edit a module. This usually isn&amp;#39;t a big problem, but when you want to rapidly hack on a UI feature and frequently refresh to see your changes this several second display can end up seriously slowing you down.&lt;/p&gt;
-
-&lt;p&gt;One of the most effective things you can do to speed up this process is build multiple bundles - one for your application code and one for your dependencies. When your application code changes you only have to recompile that bundle, not all of your dependencies.&lt;/p&gt;
-
-&lt;h2&gt;On the command line&lt;/h2&gt;
-
-&lt;p&gt;If you&amp;#39;re using the command line interface, creating an additional bundle is as easy as invoking &lt;em&gt;browserify&lt;/em&gt; with the &lt;em&gt;--require&lt;/em&gt; option. You don&amp;#39;t have to point it at a source file, you can simply pass &lt;em&gt;-r my-module&lt;/em&gt; for each module you want to include in the bundle. This will pull the requirement into the bundle and make that requirement available from outside the bundle with &lt;code data-syntax="text-only"&gt;require(&amp;#39;my-module&amp;#39;)&lt;/code&gt;.&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;$ browserify -r react -r q -r loglevel &amp;gt; build/vendor.js&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;If you include &lt;em&gt;vendor.js&lt;/em&gt; from the example in your HTML, you can then &lt;code data-syntax="text-only"&gt;require(&amp;#39;react&amp;#39;)&lt;/code&gt; or &lt;code data-syntax="text-only"&gt;require(&amp;#39;q&amp;#39;)&lt;/code&gt; from anywhere. You may notice, however, that your application bundle is still pulling these requirements in, defeating the whole purpose. This brings us to the next command line option we need to use, &lt;em&gt;--external&lt;/em&gt;. &lt;/p&gt;
-
-&lt;p&gt;The &lt;em&gt;--external&lt;/em&gt; option tells browserify that the given module will be provided externally and doesn&amp;#39;t need to be included in this bundle. When used with your application bundle, it will filter out the dependencies that you will be compiling into your vendor bundle.&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;$ browserify -x react -x q -x loglevel src/index.js &amp;gt; build/app.js&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;Make sure to include the &lt;em&gt;vendor.js&lt;/em&gt; file &lt;strong&gt;before&lt;/strong&gt; &lt;em&gt;app.js&lt;/em&gt; in your HTML, so that the dependencies will be available when &lt;em&gt;app.js&lt;/em&gt; is loaded.&lt;/p&gt;
-
-&lt;h2&gt;With Gulp&lt;/h2&gt;
-
-&lt;p&gt;&lt;a href="https://github.com/gulpjs/gulp"&gt;Gulp&lt;/a&gt; has recently overtaken &lt;a href="http://gruntjs.com/"&gt;Grunt&lt;/a&gt; as our task manager of choice. We typically set Gulp up with our major tasks in a &lt;em&gt;gulp/&lt;/em&gt; subfolder, and then we require each of those modules in our &lt;em&gt;gulpfile.js&lt;/em&gt;:&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;&amp;#39;use strict&amp;#39;;
-var gulp = require(&amp;#39;gulp&amp;#39;);
-
-require(&amp;#39;./gulp/app&amp;#39;);
-require(&amp;#39;./gulp/serve&amp;#39;);
-require(&amp;#39;./gulp/vendor&amp;#39;);
-require(&amp;#39;./gulp/watch&amp;#39;);
-
-gulp.task(&amp;#39;build&amp;#39;, [
- &amp;#39;app&amp;#39;,
- &amp;#39;vendor&amp;#39;,
-]);
-
-gulp.task(&amp;#39;default&amp;#39;, [&amp;#39;build&amp;#39;], function() {
- return gulp.start(&amp;#39;serve&amp;#39;, &amp;#39;watch&amp;#39;);
-});&lt;/code&gt;&lt;/pre&gt;
-
-&lt;h3&gt;The vendor bundle&lt;/h3&gt;
-
-&lt;p&gt;I&amp;#39;ll start with our vendor bundle, and break it up to explain a few things.&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;&amp;#39;use strict&amp;#39;;
-var browserify = require(&amp;#39;gulp-browserify&amp;#39;);
-var gulp = require(&amp;#39;gulp&amp;#39;);
-var rename = require(&amp;#39;gulp-rename&amp;#39;);
-var uglify = require(&amp;#39;gulp-uglify&amp;#39;);
-
-var libs = [
- &amp;#39;react&amp;#39;,
- &amp;#39;react/lib/ReactCSSTransitionGroup&amp;#39;,
- &amp;#39;react/lib/cx&amp;#39;,
- &amp;#39;q&amp;#39;,
- &amp;#39;underscore&amp;#39;,
- &amp;#39;loglevel&amp;#39;
-];&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;I assign an array of dependency names to a variable, because we&amp;#39;ll be using this in a couple of places.&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;gulp.task(&amp;#39;vendor&amp;#39;, function() {
- var production = (process.env.NODE_ENV === &amp;#39;production&amp;#39;);&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;I&amp;#39;m using the NODE_ENV environment variable to determine whether this is a production build or not.&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;// A dummy entry point for browserify
- var stream = gulp.src(&amp;#39;./gulp/noop.js&amp;#39;, {read: false})&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;Since Gulp is a file-based build system, it needs a file to open the stream with. We don&amp;#39;t really need this on the vendor bundle, so my workaround is to point it to an empty file called &lt;em&gt;noop.js&lt;/em&gt;.&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;// Browserify it
- .pipe(browserify({
- debug: false, // Don&amp;#39;t provide source maps for vendor libs
- }))
-
- .on(&amp;#39;prebundle&amp;#39;, function(bundle) {
- // Require vendor libraries and make them available outside the bundle.
- libs.forEach(function(lib) {
- bundle.require(lib);
- });
- });&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;This is where the magic happens. The &lt;a href="https://github.com/deepak1556/gulp-browserify"&gt;gulp-browserify&lt;/a&gt; plugin doesn&amp;#39;t have an option to handle the &lt;em&gt;--require&lt;/em&gt; command, so I simply listen for the &amp;quot;prebundle&amp;quot; event that it sends, and interact with browserify&amp;#39;s API directly. The &lt;code data-syntax="text-only"&gt;bundle.require()&lt;/code&gt; method is documented &lt;a href="https://github.com/substack/node-browserify#brequirefile-opts"&gt;here&lt;/a&gt;. I iterate over the list of dependencies, and call &lt;code data-syntax="text-only"&gt;bundle.require()&lt;/code&gt; for each one.&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;if (production) {
- // If this is a production build, minify it
- stream.pipe(uglify());
- }
-
- // Give the destination file a name, adding &amp;#39;.min&amp;#39; if this is production
- stream.pipe(rename(&amp;#39;vendor&amp;#39; + (production ? &amp;#39;.min&amp;#39; : &amp;#39;&amp;#39;) + &amp;#39;.js&amp;#39;))
-
- // Save to the build directory
- .pipe(gulp.dest(&amp;#39;build/&amp;#39;));
-
- return stream;
-
-});
-
-exports.libs = libs;&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;The rest of the task is pretty basic. I minify it if this is a production build, give the bundle an appropriate name, and save it to the build directory. I assign the list of dependencies to &lt;code data-syntax="text-only"&gt;exports.libs&lt;/code&gt; so that it will be available to other modules, like our application bundle.&lt;/p&gt;
-
-&lt;h3&gt;The application bundle&lt;/h3&gt;
-
-&lt;p&gt;The application bundle follows a very similar pattern:&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;&amp;#39;use strict&amp;#39;;
-var browserify = require(&amp;#39;gulp-browserify&amp;#39;);
-var gulp = require(&amp;#39;gulp&amp;#39;);
-var libs = require(&amp;#39;./vendor&amp;#39;).libs;
-var pkg = require(&amp;#39;../package.json&amp;#39;);
-var rename = require(&amp;#39;gulp-rename&amp;#39;);
-var uglify = require(&amp;#39;gulp-uglify&amp;#39;);&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;I import the list of dependencies that I exported from the vendor bundle with &lt;code data-syntax="text-only"&gt;require(&amp;#39;./vendor&amp;#39;).libs&lt;/code&gt;.&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;gulp.task(&amp;#39;app&amp;#39;, function() {
- var production = (process.env.NODE_ENV === &amp;#39;production&amp;#39;);
-
- var stream = gulp.src(&amp;#39;src/index.js&amp;#39;, {read: false})
-
- // Browserify it
- .pipe(browserify({
- debug: !production, // If not production, add source maps
- transform: [&amp;#39;reactify&amp;#39;],
- extensions: [&amp;#39;.jsx&amp;#39;]
- }))&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;I include some settings for browserify, including a transform and additional extension definition for working with &amp;quot;.jsx&amp;quot; modules from React.&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;.on(&amp;#39;prebundle&amp;#39;, function(bundle) {
- // The following requirements are loaded from the vendor bundle
- libs.forEach(function(lib) {
- bundle.external(lib);
- });
- });&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;Just as I did with the vendor bundle, I iterate over the list of dependencies. This time, however, I use &lt;code data-syntax="text-only"&gt;bundle.external()&lt;/code&gt;. It&amp;#39;s documented (briefly) &lt;a href="https://github.com/substack/node-browserify#bexternalfile"&gt;here&lt;/a&gt;.&lt;/p&gt;
-
-&lt;pre class="highlight"&gt;&lt;code data-syntax="text-only"&gt;if (production) {
- // If this is a production build, minify it
- stream.pipe(uglify());
- }
-
- // Give the destination file a name, adding &amp;#39;.min&amp;#39; if this is production
- stream.pipe(rename(pkg.name + (production ? &amp;#39;.min&amp;#39; : &amp;#39;&amp;#39;) + &amp;#39;.js&amp;#39;))
-
- // Save to the build directory
- .pipe(gulp.dest(&amp;#39;build/&amp;#39;));
-
- return stream;
-});&lt;/code&gt;&lt;/pre&gt;<