Jekyll2019-11-23T09:24:40+00:00https://www.elementalidad.com/atom.xmlJames WilsonThe personal blog of James Wilson; senior web developer at Bluespark and avid Open Source enthusiast.James Wilsonjrwilson3@gmail.comCodebase growth between Drupal 6, 7 and 82018-10-23T00:00:00+00:002018-10-23T00:00:00+00:00https://www.elementalidad.com/drupal-codebase-growth<p>In 2010 I made a post to <a href="/2010-12-25-calculate-size-of-drupal-codebase">Calculate the size of the Drupal codebase</a> by comparing lines of PHP, JavaScript, and CSS code between Drupal 6 and 7. This is a follow-up that adds Drupal 8 to the comparison matrix.</p>
<!--more-->
<h2 id="tdlr">td;lr</h2>
<p>The main takeaway is that the code grew almost exponentially between Drupal 6
and Drupal 8. Drupal 8 has introduced a wide array of new file types that
Drupal 6 and 7 did not have, including Twig templates. Please note that I did
not include Twig in the table below. Sadly, a pure 1-to-1 mapping from PHP
Template files to Twig cannot be done because the PHP row includes <code class="language-plaintext highlighter-rouge">tpl.php</code>
in Drupal 6 and 7. (Suggestions welcome as to how to break these apart.)</p>
<h2 id="codebase-growth-matrix">Codebase growth matrix</h2>
<p>The following table outlines the codebase growth between the three versions of Drupal.</p>
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Drupal 6.20</th>
<th>Drupal 7.0</th>
<th>Drupal 8.0.0</th>
</tr>
</thead>
<tbody>
<tr>
<td>PHP files</td>
<td>204</td>
<td>484</td>
<td>8,413</td>
</tr>
<tr>
<td>Javascript files</td>
<td>23</td>
<td>84</td>
<td>483</td>
</tr>
<tr>
<td>CSS files</td>
<td>59</td>
<td>116</td>
<td>268</td>
</tr>
<tr>
<td>YAML files</td>
<td>-</td>
<td>-</td>
<td>1,564</td>
</tr>
<tr>
<td>Markdown files</td>
<td>-</td>
<td>-</td>
<td>138</td>
</tr>
<tr>
<td>Ignored files</td>
<td>15</td>
<td>33</td>
<td>662</td>
</tr>
<tr>
<td><strong>Total files</strong></td>
<td><strong>345</strong></td>
<td><strong>852</strong></td>
<td><strong>12,141</strong></td>
</tr>
<tr>
<td>PHP comments</td>
<td>22,792</td>
<td>79,315</td>
<td>422,131</td>
</tr>
<tr>
<td>JS comments</td>
<td>936</td>
<td>2,808</td>
<td>15,760</td>
</tr>
<tr>
<td>CSS comments</td>
<td>409</td>
<td>1,098</td>
<td>2,151</td>
</tr>
<tr>
<td><strong>Total comments</strong></td>
<td><strong>24,182</strong></td>
<td><strong>83,224</strong></td>
<td><strong>449,797</strong></td>
</tr>
<tr>
<td>PHP lines of code</td>
<td>48,091</td>
<td>161,322</td>
<td>629,420</td>
</tr>
<tr>
<td>JS lines of code</td>
<td>2,347</td>
<td>5,085</td>
<td>25,646</td>
</tr>
<tr>
<td>CSS lines of code</td>
<td>4,305</td>
<td>8,909</td>
<td>14,911</td>
</tr>
<tr>
<td><strong>Total lines of code</strong></td>
<td><strong>55,410</strong></td>
<td><strong>178,290</strong></td>
<td><strong>769,248</strong></td>
</tr>
</tbody>
<tbody>
<tr>
<td><strong>3rd Gen Equivalent</strong></td>
<td><strong>178,130.60</strong></td>
<td><strong>589,530.79</strong></td>
<td><strong>2,381,531.67</strong></td>
</tr>
</tbody>
</table>
<p>Note: The cloc documentation page says that the 3rd gen. equiv. value should be “taken with a large grain of salt.”</p>
<h2 id="how-i-came-about-these-numbers">How I came about these numbers</h2>
<p>Thanks to <a href="http://journal.uggedal.com/django-vs-rails-code-size">this post comparing Django to Rails</a> for inspiration back in 2010, the basic procedure is to download and install <a href="https://github.com/AlDanial/cloc">cloc</a> a command line tool that calculate lines of code, comments, etc.</p>
<h3 id="1-install-cloc">1. Install <code class="language-plaintext highlighter-rouge">cloc</code></h3>
<p>If you’re on a mac, you can use Homebrew to install cloc.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>brew <span class="nb">install </span>cloc
<span class="nv">$ </span>cloc <span class="nt">--version</span>
1.80
</code></pre></div></div>
<h3 id="2-download-drupal-620-70-800">2. Download Drupal 6.20, 7.0, 8.0.0</h3>
<p>Use drush version 8 or lower to download drupal 6, 7 and 8. For Drupal 6 and 7 I’m using the same versions that I used back in <a href="/2010-12-25-calculate-size-of-drupal-codebase">the 2010 post</a>.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>drush dl drupal-6.20
<span class="nv">$ </span>drush dl drupal-7.0
<span class="nv">$ </span>drush dl drupal-8.0.0
</code></pre></div></div>
<h3 id="3-calculate-lines-of-code-of-drupal-6">3. Calculate lines of code of Drupal 6</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>cloc <span class="nt">--force-lang</span><span class="o">=</span>PHP,install <span class="nt">--force-lang</span><span class="o">=</span>PHP,module <span class="nt">--force-lang</span><span class="o">=</span>PHP,inc <span class="nt">--force-lang</span><span class="o">=</span>PHP,test <span class="nt">--force-lang</span><span class="o">=</span>PHP,profile <span class="nt">--force-lang</span><span class="o">=</span>Make,info <span class="nt">-3</span> drupal-6.20/
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> 345 text files.
345 unique files.
15 files ignored.
http://cloc.sourceforge.net v 1.53 T=1.0 s (330.0 files/s, 87353.0 lines/s)
-------------------------------------------------------------------------------
Language files blank comment code scale 3rd gen. equiv
-------------------------------------------------------------------------------
PHP 204 6819 22792 48091 x 3.50 = 168318.50
CSS 59 457 409 4305 x 1.00 = 4305.00
Javascript 23 356 936 2347 x 1.48 = 3473.56
make 39 78 0 406 x 2.50 = 1015.00
Bourne Shell 4 25 3 134 x 3.81 = 510.54
Perl 1 26 42 127 x 4.00 = 508.00
-------------------------------------------------------------------------------
SUM: 330 7761 24182 55410 x 3.21 = 178130.60
-------------------------------------------------------------------------------
</code></pre></div></div>
<h3 id="4-calculate-lines-of-code-of-drupal-7">4. Calculate lines of code of Drupal 7</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>cloc <span class="nt">--force-lang</span><span class="o">=</span>PHP,install <span class="nt">--force-lang</span><span class="o">=</span>PHP,module <span class="nt">--force-lang</span><span class="o">=</span>PHP,inc <span class="nt">--force-lang</span><span class="o">=</span>PHP,test <span class="nt">--force-lang</span><span class="o">=</span>PHP,profile <span class="nt">--force-lang</span><span class="o">=</span>Make,info <span class="nt">-3</span> drupal-7.0/
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> 852 text files.
847 unique files.
33 files ignored.
http://cloc.sourceforge.net v 1.53 T=9.0 s (90.8 files/s, 31723.2 lines/s)
-------------------------------------------------------------------------------
Language files blank comment code scale 3rd gen. equiv
-------------------------------------------------------------------------------
PHP 484 21962 79315 161322 x 3.50 = 564627.00
CSS 116 810 1098 8909 x 1.00 = 8909.00
Javascript 84 815 2808 5085 x 1.48 = 7525.80
make 108 226 0 1363 x 2.50 = 3407.50
Bourne Shell 8 172 3 1060 x 3.81 = 4038.60
XML 12 3 0 441 x 1.90 = 837.90
HTML 3 4 0 69 x 1.90 = 131.10
ASP.Net 1 3 0 40 x 1.29 = 51.60
SQL 1 0 0 1 x 2.29 = 2.29
-------------------------------------------------------------------------------
SUM: 817 23995 83224 178290 x 3.31 = 589530.79
-------------------------------------------------------------------------------
</code></pre></div></div>
<h3 id="4-calculate-lines-of-code-of-drupal-8">4. Calculate lines of code of Drupal 8</h3>
<p>For the Drupal 8 calculation, I used generally the same cloc configuration that was used form Drupal 7, deciding against spending more time to figure out which of the 662 files were ignored and why.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>cloc <span class="nt">--force-lang</span><span class="o">=</span>PHP,install <span class="nt">--force-lang</span><span class="o">=</span>PHP,module <span class="nt">--force-lang</span><span class="o">=</span>PHP,inc <span class="nt">--force-lang</span><span class="o">=</span>PHP,test <span class="nt">--force-lang</span><span class="o">=</span>PHP,profile <span class="nt">--force-lang</span><span class="o">=</span>Make,info <span class="nt">-3</span> drupal-8.0.0/
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> 12141 text files.
11897 unique files.
662 files ignored.
1 error:
Line count, exceeded timeout: drupal-8.0.0/core/modules/migrate_drupal/tests/fixtures/drupal6.php
github.com/AlDanial/cloc v 1.80 T=47.56 s (242.0 files/s, 28795.7 lines/s)
-------------------------------------------------------------------------------
Language files blank comment code scale 3rd gen. equiv
-------------------------------------------------------------------------------
PHP 8413 137594 422131 629420 x 3.50 = 2202970.00
YAML 1564 2149 1499 62912 x 0.90 = 56620.80
JavaScript 483 5189 15760 25646 x 1.48 = 37956.08
CSS 268 761 2151 14911 x 1.00 = 14911.00
Markdown 138 3722 0 11493 x 1.00 = 11493.00
JSON 113 27 0 9447 x 2.50 = 23617.50
Twig 444 312 8192 6429 x 2.00 = 12858.00
XSD 7 110 28 3129 x 1.90 = 5945.10
XML 36 19 9 2415 x 1.90 = 4588.50
Bourne Shell 14 290 0 2289 x 3.81 = 8721.09
Ant 12 102 0 663 x 1.90 = 1259.70
C 1 52 8 223 x 0.77 = 171.71
HTML 7 4 0 86 x 1.90 = 163.40
PO File 4 27 0 85 x 1.50 = 127.50
m4 1 11 11 41 x 1.00 = 41.00
C/C++ Header 1 12 8 40 x 1.00 = 40.00
make 2 8 0 18 x 2.50 = 45.00
SQL 1 0 0 1 x 2.29 = 2.29
-------------------------------------------------------------------------------
SUM: 11509 150389 449797 769248 x 3.10 = 2381531.67
-------------------------------------------------------------------------------
</code></pre></div></div>James Wilsonjrwilson3@gmail.comIn 2010 I made a post to Calculate the size of the Drupal codebase by comparing lines of PHP, JavaScript, and CSS code between Drupal 6 and 7. This is a follow-up that adds Drupal 8 to the comparison matrix.⚡️ Mac Keyboard Shortcuts for Web Developers2017-11-06T00:00:00+00:002017-11-06T00:00:00+00:00https://www.elementalidad.com/keyboard-shortcuts<p class="intro">Learning keyboard shortcuts are a quick-win with long-term advantages that reduce context switching between keypad input and mouse input navigation.</p>
<!--more-->
<p>As a Mac power user, I employ keyboard shortcuts extensively in my daily grind. As a developer I’m hardwired to look for opportunities to automate repetetive tasks.</p>
<p>This is why when this week’s team question came up in our Wednesday email from <a href="https://knowyourcompany.com">Know Your Company</a> I was excited to discuss my setup.</p>
<p>Team question from Know Your Company:</p>
<blockquote>
<p>What are some of your most-used keyboard shortcuts?</p>
</blockquote>
<p>Unfortunately these posts are internal only, so I’m sharing my notes here as well. These shortcuts will be most helpful for Web developers running OSX or macOS, however there is something for everybody here, if you’re not a developer you may want to skip down to the <a href="#word-processing-shortcuts">word processing shortcuts section</a></p>
<h2 id="mac-system-shortcuts">Mac system shortcuts</h2>
<p>These shortcuts come standard on all Apple Macintosh machines running OSX or macOS.</p>
<table>
<thead>
<tr>
<th>Shortcut</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌘⇧3</code></td>
<td>Take a fullscreen screenshot (I have screenshots setup to save to a custom folder in Bluespark Dropbox).</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌘⇧4</code></td>
<td>Cross-hairs to select a screen area for a non-fullscreen screenshot.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌘SPACE</code></td>
<td>Open Spotlight; used as an app launcher.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌥⌘SPACE</code></td>
<td>Open Finder search.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌥⌘→/←</code></td>
<td>Depends on application, but usually switches tabs within an application.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌘TAB</code></td>
<td>Switch applications (I hide my dock and use this to switch between apps).</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">^⇧↓</code></td>
<td>Show all windows of current app, then use right/left arrows to navigate through and select a window with space bar.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">^⇧↑</code></td>
<td>Shows all windows on current desktop.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌘Q</code></td>
<td>Quit current app.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌘W</code></td>
<td>Close current window (or tab) without quitting app.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌘N</code></td>
<td>Open new item (depends on app).</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌘T</code></td>
<td>Open new tab (depends on app; works on Finder, Chrome, Terminal).</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌘,</code></td>
<td>Open current app preferences.</td>
</tr>
</tbody>
</table>
<h2 id="customizing-mac-shortcuts">Customizing Mac shortcuts</h2>
<p>Custom global shortcuts can be added via › System Preferences › Keyboard › Shortcuts › App Shortcuts › All Applications. You need to save the title of the menu item. More information can be found in <a href="https://support.apple.com/kb/PH25372">this KB article on support.apple.com</a>.</p>
<table>
<thead>
<tr>
<th>Shortcut</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌥⌘,</code></td>
<td>Open System Preferences. Store the menu item as <code class="language-plaintext highlighter-rouge">System Preferences...</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">^⇧SPACE</code></td>
<td>Change keyboard language. 🇺🇸🇪🇸🇫🇷</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌥⌘V</code></td>
<td>Paste from <a href="https://itunes.apple.com/us/app/flycut-clipboard-manager/id442160987?mt=12">Flycut</a> clipboard manager. (Configured directly in app).</td>
</tr>
</tbody>
</table>
<h2 id="word-processing-shortcuts">Word processing shortcuts</h2>
<p>There are a number of standard system shortcuts to help with word processing tasks like moving the cursor around on the line and making text selections.</p>
<p>These work in any word processor application including TextEdit, Mail, Notes, Evernote, Chrome, Terminal, etc. Developers that use Emacs will already be familiar with some of these.</p>
<table>
<thead>
<tr>
<th>Shortcut</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">^A</code></td>
<td>Goto beginning of current line. (<code class="language-plaintext highlighter-rouge">⌥↑</code> sometimes also works).</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">^E</code></td>
<td>Goto end of current line. (<code class="language-plaintext highlighter-rouge">⌥↓</code> sometimes also works).</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">^⇧A</code></td>
<td>Select text from current position to beginning of line.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">^⇧E</code></td>
<td>Select text from current position to end of line.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⇧↑</code></td>
<td>Select the line above.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⇧↓</code></td>
<td>Select the line below.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌥→/←</code></td>
<td>Goto start/end of current word. (Doesn’t work consistently in all applications).</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌥⇧→/←</code></td>
<td>Select text from current position to start/end of current word. (Doesn’t work consistently in all applications).</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌫</code></td>
<td>Delete previous letter.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">fn⌫</code></td>
<td>Delete next letter.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌥⌫</code></td>
<td>Delete text from current position to beginning of line.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">^K</code></td>
<td>Delete text from current position to end of line.</td>
</tr>
</tbody>
</table>
<h2 id="google-chrome-shortcuts">Google Chrome shortcuts</h2>
<table>
<thead>
<tr>
<th>Shortcut</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌘⇧⌫</code></td>
<td>Delete browser cache.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌥⌘I</code></td>
<td>Open Chrome Developer Tools panel, then once launched, Fn+F1 opens settings panel to disable Javascript.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">⌘⇧N</code></td>
<td>Open Private Browsing window; useful for testing unauthenticated version of sites while logged in on normal browser session.</td>
</tr>
</tbody>
</table>
<h2 id="google-chrome-shortcodes">Google Chrome shortcodes</h2>
<p>Short codes let you create auto-expanding URLs, straight from Google Chrome’s URL bar. They can be created/edited in Settings › Manage search engines. The format is <code class="language-plaintext highlighter-rouge"><shortcode> <string></code> whereby the <code class="language-plaintext highlighter-rouge"><shortcode></code> is a brief (one or two character) code that will be expanded to a full URL. The <code class="language-plaintext highlighter-rouge"><string></code> value will be substituted into the URL in place of the <code class="language-plaintext highlighter-rouge">%s</code> placeholder.</p>
<table>
<thead>
<tr>
<th>Shortcode</th>
<th>Description / Query URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">j <ISSUE_ID></code></td>
<td>Goto JIRA Issue page. <br /> <code class="language-plaintext highlighter-rouge">https://<yourcompany>.atlassian.net/browse/%s</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">j <PROJECT_ID></code></td>
<td>Goto JIRA Issues listing for project. <br /> <code class="language-plaintext highlighter-rouge">https://<yourcompany>.atlassian.net/browse/%s</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">jpi <PROJECT_ID> <some string></code></td>
<td>Execute a JIRA contextual project text string search. <br /> <code class="language-plaintext highlighter-rouge">https://<yourcompany>.atlassian.net/secure/QuickSearch.jspa?searchString=%s</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">c <PROJECT_ID></code></td>
<td>Open Confluence space for specified project. <br /> <code class="language-plaintext highlighter-rouge">https://<yourorg>.atlassian.net/wiki/display/%s</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">dn <ISSUE_ID></code></td>
<td>Open the specified Issue on drupal.org. <br /> <code class="language-plaintext highlighter-rouge">https://www.drupal.org/node/%s</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">da <FUNCTION></code></td>
<td>Search for function name on api.drupal.org. <br /> <code class="language-plaintext highlighter-rouge">https://api.drupal.org/%s</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">dp <MODULE></code></td>
<td>Goto module page on Drupal.org. <br /> <code class="language-plaintext highlighter-rouge">https://www.drupal.org/project/%s</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">dpi <MODULE></code></td>
<td>Goto issue queue on Drupal.org. <br /> <code class="language-plaintext highlighter-rouge">https://www.drupal.org/project/issues/%s</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">ghb <REPO></code></td>
<td>Open Repo on your organization’s Github account. <br /> <code class="language-plaintext highlighter-rouge">https://github.com/<yourorg>/%s</code></td>
</tr>
</tbody>
</table>James Wilsonjrwilson3@gmail.comLearning keyboard shortcuts are a quick-win with long-term advantages that reduce context switching between keypad input and mouse input navigation.SVG Optimization Best Practices2016-10-31T00:00:00+00:002016-10-31T00:00:00+00:00https://www.elementalidad.com/svg-best-practices<p>This post is just a grab-bag of tips and tricks to improve and optimize SVGs for the web. It is divided into three sections based on the standard tooling available: Sketch, Adobe Illustrator, and SVGO.</p>
<!--more-->
<h2 id="1-optimizing-svgs-from-sketch">1. Optimizing SVGs from Sketch</h2>
<p>Sketch is an amazing application for Mac that is vector-based, and therefore is easy to export content to SVGs, however the default SVG export settings leaves a lot of bloat and is not entirely web friendly.</p>
<p>To remedy, this drawback there are a few tricks that can be done to files produced from Sketch, but first and foremost, <strong>you can avoid some of these problems by installing the <a href="https://www.sketchapp.com/extensions/plugins/svgo-compressor/">SVGO Compressor Sketch plugin by Ale Muñoz</a></strong>. The SVGO Compressor will do much of the hard work for you to remedy many of the issues mentioned further below automatically. If however your designer provides you with SVGs from Sketch that are not optimized, you’ll have to resort to the manual clean ups mentioned below, or <a href="#3-optimizing-with-svgo">skip to section 3</a> to learn about using <code class="language-plaintext highlighter-rouge">svgo</code> on the command line.</p>
<h3 id="1a-kill-the-transforms-in-sketch">1.a Kill the transforms in Sketch</h3>
<p>Exporting an icon or logo inside a larger design comp or art board in Sketch leaves all paths with the original <code class="language-plaintext highlighter-rouge">x</code> and <code class="language-plaintext highlighter-rouge">y</code> offsets based on the relative location of the element inside the art board then uses negative values inside a<code class="language-plaintext highlighter-rouge">transform()</code> to pull things back into view. These transforms very often use floating point math with <em>excessive significant digits</em>. In addition, Sketch also exports often seemingly random values for the the <code class="language-plaintext highlighter-rouge">viewBox</code> parameter based on that same offset logic. All of this amounts to extra digits and needless math to draw the elements.</p>
<p>Unfortunately the only way I know to remove the needless transform from an SVG file exported “in place” from a larger Sketch art board is to open the file in Adobe Illustrator and then re-save the image. This will simplify the positioning logic in the SVG file by removing the negative transform values and resetting the x and y offset points. This method however does not solve the problem of the viewBox.</p>
<h3 id="1b-use-symbols-in-sketch-to-reset-the-viewbox-to-origin">1.b Use Symbols in Sketch to reset the viewBox to origin</h3>
<p>SVGs elements inside a large Sketch art board for an entire site mockup will be exported with crazy viewBox values. The only way I’ve found to export icons and elements with a viewBox starting at the origin <code class="language-plaintext highlighter-rouge">0 0</code> is by using Symbols in Sketch. Designers can prevent this by converting all icons in a document to Symbols and then the developer or designer can export the Symbol to SVG.</p>
<p>If exporting a large set of similarly-sized icons ask the designers to create consistently sized art boards around each Symbol and center the elements appropriately. This will then translate to the viewBox starting at 0 0 and there will be no transforms.</p>
<h3 id="1c-remove-fillruleevenodd-when-possible">1.c Remove fillrule=evenodd when possible</h3>
<p>Most elements exported to SVG from Sketch will contain a <code class="language-plaintext highlighter-rouge">fillrule</code> attribute with a value of “<a href="https://www.sitepoint.com/understanding-svg-fill-rule-property/">evenodd</a>”. I’ve found however that the vast majority of elements do not need this attribute. If the element is simple enough then removing this rule may be possible and have no adverse effect. As with any manual SVG edits, be sure to test the results in a browser!</p>
<h2 id="2-optimizing-svgs-inside-adobe-illustrator">2. Optimizing SVGs inside Adobe Illustrator</h2>
<h3 id="2a-simplify-paths">2.a Simplify Paths</h3>
<p>Often times Illustrator likes to make a LOT of points, particularly in curved paths. If you remove points, you reduce the file size a lot. Select a shape in your artwork, then from the menu find: <strong>Path > Simplify</strong> to remove extraneous points. Adobe has a decent averaging engine which you can tweak by changing the <strong>angle</strong> and <strong>radius</strong> sliders. Enable “Preview” to see the before/after comparison.</p>
<h3 id="2b-to-stroke-or-not-to-stroke">2.b To stroke or not to stroke?</h3>
<p>Decide whether a thin shape would be smaller as a single path with stroke or alternatively Expand the stroke and Unite the pieces.</p>
<h3 id="2c-make-compound-paths-reduce-groups">2.c Make Compound Paths, reduce Groups</h3>
<p>Select all shapes with similar colors, <strong>Path > Compound Path > Make</strong> then specify the color and stroke on the compound path. Eeach <Compound path=""> layer will map to one single `<path>` tag in the resulting SVG, and will also rid of unnecessary Group (`<g>`) tags, and duplicate style attributes like fill and stroke.</g></path></Compound></p>
<h3 id="2d-manually-reset-viewbox-to-origin">2.d Manually reset viewBox to origin</h3>
<p>Ensure the viewBox on the <code class="language-plaintext highlighter-rouge"><svg></code> tag starts with the origin value of <code class="language-plaintext highlighter-rouge">0 0</code>. Please note however that x y values you set in the Illustrator Artboard is not always the same thing used to generate the SVG’s viewBox, so modifying the Artboard in Illustrator to start at 0 0 on a document will result in a strange viewBox value on the exported SVG.</p>
<p>Steps to <a href="http://graphicdesign.stackexchange.com/questions/15401/change-viewbox-attribute-in-svg-exported-by-illustrator">remedy this WTF are discussed here on Stack Exchange</a>. I generally just open the SVG file in a text editor and set the viewBox attribute to <code class="language-plaintext highlighter-rouge">0 0 X Y</code> where <code class="language-plaintext highlighter-rouge">X</code> is an arbitrary or ideal width, and <code class="language-plaintext highlighter-rouge">Y</code> is an arbitrary or ideal height, then reopen the SVG in Illustrator and resize/move the artwork into place above the Artboard, and re-save the file.</p>
<h3 id="2e-typography-should-be-converted-to-paths">2.e Typography should be converted to paths</h3>
<p>Depending on the type of SVG it is usually better to expand text into paths. The exception would be when you plan to inline the SVG inside HTML and the webfont you’re using in the SVG is already expected to be loaded on the page.</p>
<h2 id="3-optimizing-with-svgo">3. Optimizing with SVGO</h2>
<p>https://github.com/svg/svgo</p>
<p>The default options are usually good enough:</p>
<ul>
<li>Removes the needless <code class="language-plaintext highlighter-rouge"><?xml></code> tag.</li>
<li>Simplify the <code class="language-plaintext highlighter-rouge"><svg></code> tag to retain only <code class="language-plaintext highlighter-rouge">xmlns</code>, <code class="language-plaintext highlighter-rouge">width</code>, <code class="language-plaintext highlighter-rouge">height</code> and <code class="language-plaintext highlighter-rouge">viewBox</code> attributes. (Note: in some cases you can also manually later remove width and height for a truly scalable SVG.)</li>
<li>Removes whitespace, indentation tab characters, new lines, etc.</li>
<li>Removes / collapses useless groups (<code class="language-plaintext highlighter-rouge"><g></code>` tags).</li>
<li>Removes <code class="language-plaintext highlighter-rouge"><desc></code> and <code class="language-plaintext highlighter-rouge"><title></code> tags. Note, if you’re inlining your SVG it may be useful to retain the <code class="language-plaintext highlighter-rouge"><title></code> tag to explain the image (which has a similar effect to the alt attriute on a normal image tag).</li>
<li>Cleans up numerics: removes “px”, and fixes decimal precision consistently).</li>
<li>Converts path definitions to either relative or origin-based positioning, based on which one generates a smaller string.</li>
</ul>
<p>SVGO can be automated with “svgmin” for <a href="https://github.com/sindresorhus/grunt-svgmin">grunt</a> or <a href="https://www.npmjs.com/package/gulp-svgmin">gulp</a>.</p>
<h3 id="4-further-reading-tools-and-tips">4. Further reading, tools and tips</h3>
<p>Additional tools and tips for learning SVG can be read on <a href="http://www.webdesignerdepot.com/2015/01/the-ultimate-guide-to-svg/">Web Designer Depot</a>.</p>James Wilsonjrwilson3@gmail.comThis post is just a grab-bag of tips and tricks to improve and optimize SVGs for the web. It is divided into three sections based on the standard tooling available: Sketch, Adobe Illustrator, and SVGO.Crear un sitio multi-idioma con Drupal 82015-10-19T00:00:00+00:002015-10-19T00:00:00+00:00https://www.elementalidad.com/multilang-drupal-8<p>Esto es un guía que se puede utilizar para instalar Drupal en multiples
idiomas. Fue creado originalmente para un taller de 1 hora en DrupalCamp
Ecuador el 16 de Octubre de 2015 en Quito, Ecuador.</p>
<p>Para crear un sitio multi-idioma en Drupal 7 revisa mi post del año pasado: <a href="/2014-10-23-los-abc-de-multi-idioma-en-drupal-7.html">Los ABC de Multi-idioma en Drupal 7</a>.</p>
<!--more-->
<p>Puedes encontrar los diapositivos aquí: <a href="/slides/multilenguaje-drupal-8.html">/slides/multilenguaje-drupal-8.html</a>.</p>
<h2 id="1-crear-un-sitio">1. Crear un Sitio</h2>
<ul>
<li>Abrir una cuenta en <a href="https://pantheon.io">Pantheon.io</a>.</li>
<li>Crear un sitio en el Dashboard de Pantheon.</li>
<li>Instalar Drupal 8 RC-1.</li>
</ul>
<h2 id="2-instalar-drupal">2. Instalar Drupal</h2>
<ul>
<li>Selecciona español como lenguaje predeterminado.</li>
<li>Crear cuenta de Administrador.</li>
</ul>
<h2 id="3-agregar-idioma">3. Agregar idioma</h2>
<ul>
<li>Ingresar como Administrador.</li>
<li>Administrar > Configuración > Regional e idioma > Idiomas<br />
URL: <code class="language-plaintext highlighter-rouge">admin/config/regional/language</code></li>
<li>Click botón: <em>Agregar idioma</em> y selecciona el inglés.</li>
</ul>
<h2 id="4-detección-y-selección">4. Detección y selección</h2>
<p>Qué idioma utilizar y cuándo?</p>
<ul>
<li>Administrar > Configuración > Regional e idioma > Idiomas: Detección y selección</li>
<li>Habilitar “URL” como método principal de detección.</li>
</ul>
<h2 id="5-alternador-de-idiomas">5. Alternador de idiomas</h2>
<p>Colocar el bloque del alternador de idiomas en la primera barra lateral del sitio.</p>
<ul>
<li>Administrar > Estructura > Diseño de bloques<br />
URL: <code class="language-plaintext highlighter-rouge">admin/structure/block</code></li>
<li>En la region de la Primera barra lateral, aplasta el botón: <em>Colocar bloque</em>.</li>
<li>Buscar y colocar el bloque <em>Alternador de idioma</em>.</li>
<li>Deshabilitar la opción: <em>Mostrar título</em> y cliquear <em>Guardar el bloque</em>.</li>
<li><em>Regresar al sitio</em> para visualizar el Alternador.</li>
</ul>
<h2 id="6-configurar-fecha-y-hora">6. Configurar fecha y hora</h2>
<p>Por defecto Drupal usa mes/día/año (el format común del ingles) lo que hay que cambiar a día/mes/año.</p>
<p>URL: <code class="language-plaintext highlighter-rouge">/admin/config/regional/date-time</code></p>
<p>También se recomienda crear formatos más comunes en español como:</p>
<ul>
<li>Long: <code class="language-plaintext highlighter-rouge">admin/config/regional/date-time/formats/manage/long</code><br />
“Lunes el 19 de Octubre de 2015 a las 11:15 pm”<br />
<code class="language-plaintext highlighter-rouge">l \e\l j \d\e F \d\e\l Y \a \l\a\s h:g a</code></li>
<li>Medium: <code class="language-plaintext highlighter-rouge">admin/config/regional/date-time/formats/manage/medium</code><br />
“Lunes 19 de Octubre 2015 - 11:15 pm”<br />
<code class="language-plaintext highlighter-rouge">l j \d\e F Y - h:g a</code></li>
<li>Short: <code class="language-plaintext highlighter-rouge">admin/config/regional/date-time/formats/manage/short</code><br />
“19/10/2015 - 11:15 pm”<br />
<code class="language-plaintext highlighter-rouge">d/m/Y - h:i a</code></li>
</ul>
<h2 id="7-habilitar-módulos-para-traducción">7. Habilitar módulos para traducción</h2>
<ul>
<li>Administrar > Extender<br />
URL: <code class="language-plaintext highlighter-rouge">admin/modules</code>
<ul>
<li><em>Dejar deshabilitado Configuration Translation. <sup><a href="#fn">1</a></sup></em></li>
<li>Seleccionar los siguientes módulos:
<ul>
<li>Content Translation</li>
<li>Interface Translation (se habilita este modulo automáticamente cuando se instala Drupal en español).</li>
</ul>
</li>
</ul>
</li>
<li>Entender la diferencia entre traducción <em>de Contenido</em> y traducción <em>de la Interfaz de usuario</em>.
<ul>
<li>La interfaz del usuario
<ul>
<li>Son cadenas de texto traducible en el núcleo de Drupal y sus módulos.</li>
<li><a href="http://localize.drupal.org">localize.drupal.org</a>: Contribuir, descargar, y actualizar las traducciones.</li>
<li>Gestionar (buscar, traducir, exportar, importar, actualizar) a través de una sola interfaz: <code class="language-plaintext highlighter-rouge">admin/config/regional/translate</code></li>
</ul>
</li>
<li>El contenido (o sea entidades y campos)
<ul>
<li>Son datos y textos almacenados dentro del contenido creado para tu sitio a través del sistema de entidades y campos en Drupal.</li>
<li>No se puede compartir ni exportar las traducciones de contenido con Drupal core.</li>
<li>No hay un solo lugar para ver todas las traducciones de contenido. La gestión se encuentra como pestaña en la configuración de cada entidad creado en tu sitio.</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="8-habilitar-traducción-de-entidades">8. Habilitar traducción de Entidades</h2>
<ul>
<li>Administrar > Configuración > Regional e idioma > Content language and translation<br />
URL: <code class="language-plaintext highlighter-rouge">admin/config/regional/content-language</code></li>
<li>Seleccionar las siguientes entidades:
<ul>
<li>Contenido</li>
<li>Bloque personalizado</li>
<li>Enlace de menú personalizado</li>
<li>Término de taxonomía</li>
</ul>
</li>
<li>Habilitar las siguientes opciones para todas las entidades seleccionadas:
<ul>
<li><em>Traducible</em>. (Dejar seleccionados los campos predeterminados.)</li>
<li><em>Muestra el selector de idioma al crear y editar paginas</em>.</li>
<li>Idioma predeterminado: <em>Interface text language selected for page</em>.</li>
</ul>
</li>
<li>Click botón: Guardar configuración</li>
</ul>
<h2 id="9-crear-página-con-enlace-de-menú-y-traducirlo">9. Crear página con enlace de menú y traducirlo</h2>
<ul>
<li>Administrar > Contenido: Agregar contenido: Página básica<br />
URL: <code class="language-plaintext highlighter-rouge">node/add/page</code></li>
<li>Titulo: <code class="language-plaintext highlighter-rouge">Acerca de</code></li>
<li>Cuerpo: <code class="language-plaintext highlighter-rouge">Cuerpo de texto para la pagina de Acerca de.</code></li>
<li>Proporciona un enlace de menu en la barra lateral: <em>Opciones del Menú</em></li>
<li>Click botón: <em>Guardar y publicar</em></li>
<li>Click pestaña: Editar</li>
<li>Click pestaña: Translate</li>
<li>Agregar traducción para inglés.
<ul>
<li>Title: <code class="language-plaintext highlighter-rouge">About us</code></li>
<li>Body: <code class="language-plaintext highlighter-rouge">Body text for the About us page.</code></li>
<li>No tocar la traducción del menú.</li>
</ul>
</li>
<li>Administrar > Estructura > Menus > Main navigation > Edit menu<br />
URL: <code class="language-plaintext highlighter-rouge">admin/structure/menu/manage/main</code></li>
<li>Seleccionar operación: <em>Traducir</em> para el enlace de “Acerca de” y proporcionar una traducción al inglés: <code class="language-plaintext highlighter-rouge">About us</code></li>
</ul>
<h2 id="10-crear-artículo-con-categoría-e-imagen-y-traducirlo">10. Crear artículo con categoría e imagen y traducirlo</h2>
<ul>
<li>Administrar > Contenido: Agregar contenido: Página básica<br />
URL: <code class="language-plaintext highlighter-rouge">node/add/article</code>
<ul>
<li>Titulo: <code class="language-plaintext highlighter-rouge">Un artículo</code></li>
<li>Cuerpo: <code class="language-plaintext highlighter-rouge">Un artículo en español.</code></li>
<li>Etiquetas: <code class="language-plaintext highlighter-rouge">Noticias</code></li>
<li>Proporcionar una imagen con texto alternativo <code class="language-plaintext highlighter-rouge">Drupal Ocho</code> en español.</li>
<li>Click botón: <em>Guardar y publicar</em></li>
</ul>
</li>
<li>Click pestaña: Editar</li>
<li>Click pestaña: Translate</li>
<li>Agregar una traducción en inglés.
<ul>
<li>Titulo: <code class="language-plaintext highlighter-rouge">An article</code></li>
<li>Cuerpo: <code class="language-plaintext highlighter-rouge">An article in English.</code></li>
<li><em>Deja las Etiquetas tales como están.</em></li>
<li>Alternative Text: <code class="language-plaintext highlighter-rouge">Drupal Eight</code>.</li>
</ul>
</li>
</ul>
<h2 id="11-traducir-etiqueta-noticias-al-inglés">11. Traducir etiqueta ‘Noticias’ al inglés</h2>
<ul>
<li>Administrar > Estructura > Taxonomía<br />
Cliquear <em>Lista de términos</em> para el vocabulario <em>Etiquetas</em>.<br />
URL: <code class="language-plaintext highlighter-rouge">admin/structure/taxonomy/manage/tags/overview</code></li>
<li>Cliquear la operación <em>Traducir</em> para el termino ‘Noticias’.</li>
<li>Agregar una traducción en inglés: <code class="language-plaintext highlighter-rouge">News</code> y Guardar.</li>
<li><em>Regresar al sitio</em> y busca la version en inglés del artículo para verificar que esta traducido.</li>
</ul>
<h2 id="12-agregar-un-bloque-personalizado">12. Agregar un bloque personalizado</h2>
<ul>
<li>Administrar > Estructura > Diseño de bloques<br />
URL: <code class="language-plaintext highlighter-rouge">admin/structure/blocks</code></li>
<li>Colocar bloque > Añadir bloque personalizado
<ul>
<li>Descripción del bloque: <code class="language-plaintext highlighter-rouge">Un bloque lateral</code></li>
<li>Cuerpo: <code class="language-plaintext highlighter-rouge">Hola! Esto es un sitio de prueba para mostrar la funcionalidad de traducción de Drupal 8.</code></li>
<li>Click botón: <em>Guardar</em></li>
<li>Seleccionar region: <code class="language-plaintext highlighter-rouge">Primera barra lateral</code></li>
<li>Click botón: <em>Guardar el bloque</em></li>
</ul>
</li>
<li>Regresar al sitio, encuentra el bloque en la barra lateral y haz click en la opción de <em>Traducir</em>.</li>
<li>Agregar una traducción en inglés:
<ul>
<li>Block description<sup><a href="#fn">2</a></sup>: <code class="language-plaintext highlighter-rouge">A sidebar block</code></li>
<li>Body: <code class="language-plaintext highlighter-rouge">Hello! This is a test site to demonstrate the translation functionality in Drupal 8.</code></li>
<li>Click botón: <em>Save</em></li>
</ul>
</li>
</ul>
<h2 id="13-personalizar-y-traducir-el-nombre-del-sitio-y-slogan">13. Personalizar y traducir el nombre del sitio y slogan</h2>
<ul>
<li>Abrir: <code class="language-plaintext highlighter-rouge">admin/config/system/site-information</code>
<ul>
<li>Nombre de sitio: <code class="language-plaintext highlighter-rouge">D8 Multilenguaje</code></li>
<li>Lema: <code class="language-plaintext highlighter-rouge">Instalando Drupal 8 en varias idiomas</code></li>
<li><em>Guardar configuración</em>.</li>
</ul>
</li>
<li>Habilitar el modulo <em>Configuration Translation</em> <sup><a href="#fn">3</a></sup>.</li>
<li>Abrir: <code class="language-plaintext highlighter-rouge">admin/config/regional/config-translation</code></li>
<li>Buscar ‘System information’ y click <em>Traducir</em>.</li>
<li>Agregar traducción al inglés.
<ul>
<li>Site name: <code class="language-plaintext highlighter-rouge">D8 Multilanguage</code></li>
<li>Slogan: <code class="language-plaintext highlighter-rouge">Installing Drupal 8 in various languages</code></li>
<li><em>Guardar traducción</em>.</li>
</ul>
</li>
</ul>
<h2 id="14-extra-alternador-de-idiomas-como-menú-desplegable">14. Extra: Alternador de idiomas como menú desplegable</h2>
<p>OJO: parece que esta funcionalidad está fallando en Pantheon.</p>
<ul>
<li>Buscar en la página del proyecto <a href="https://www.drupal.org/project/lang_dropdown">Language Switcher Dropdown</a> un enlace para el archivo zip del modulo para Drupal 8.</li>
<li>Copiar el enlace al portapapeles.</li>
<li>Abrir Administrar > Extender > Instalar nuevo modulo.</li>
<li>Pegar el enlace y hacer click en <em>Instalar</em>.</li>
</ul>
<p>Subir el módulo descomprimido dentro de la carpeta <code class="language-plaintext highlighter-rouge">/modules</code> mediante SFTP o GIT (dependiendo de tu configuración en Pantheon). Ambas requiere una aplicación</p>
<hr />
<p><sub id="fn">Notas al pie:</sub></p>
<p><sub>1, 3. Actualmente hay un error del PHP Runtime en la gestión de tipos de contenido cuando instalas Drupal en español y habilitas el modulo de <em>Configuration Translation</em>. Ver <a href="https://www.drupal.org/node/2584603">Issue #2584603</a>.</sub></p>
<p><sub>2. El campo de la <em>Descripción del bloque</em> tiene un problema en la traducción y por lo tanto la versión traducido del cuerpo del bloque siempre saldrá con el título en el idioma original.</sub></p>James Wilsonjrwilson3@gmail.comEsto es un guía que se puede utilizar para instalar Drupal en multiples idiomas. Fue creado originalmente para un taller de 1 hora en DrupalCamp Ecuador el 16 de Octubre de 2015 en Quito, Ecuador. Para crear un sitio multi-idioma en Drupal 7 revisa mi post del año pasado: Los ABC de Multi-idioma en Drupal 7.That feeling you get when…2015-02-05T00:00:00+00:002015-02-05T00:00:00+00:00https://www.elementalidad.com/that-feeling-you-get<!--more-->
<p>…you check your <a href="https://www.drupal.org">Drupal.org</a> Posts list for the first time in three months:</p>
<p><img src="https://user-images.githubusercontent.com/243532/47865734-f9dde000-ddca-11e8-91f6-1b1acdfa84bf.png" alt="" /></p>James Wilsonjrwilson3@gmail.comInstalar Drupal 7 en multiples idiomas2014-10-23T00:00:00+00:002014-10-23T00:00:00+00:00https://www.elementalidad.com/los-abc-de-multi-idioma-en-drupal-7<p>Este post te guiará con 20 pasos en cómo crear un sitio web en multiples lenguajes utilizando la técnica de <em>Entity Translation</em> para Drupal 7, como alternativa más atractiva de traduccion que la que brinda el módulo de <em>Content Translation</em>. Estos apuntes se presentaron en un taller durante DrupalCamp Ecuador el 23 de Octubre de 2014 en Guayaquil, Ecuador.</p>
<!--more-->
<h2 id="1-instalar-drupal">1. Instalar Drupal</h2>
<ul>
<li>Poner el archivo .po en la ruta: <strong>profiles/standard/translations/</strong></li>
<li>Instalar el sitio con “Standard” profile.</li>
<li>Escoger instalación en ingles (por defecto) o mejor en
español.</li>
</ul>
<h2 id="2-modulos-adicionales">2. Modulos adicionales</h2>
<p>Descargar y habilitar los siguientes módulos que vamos a utilizar:</p>
<ul>
<li><strong>Locale</strong> (ya habilitado si instalaste en español)</li>
<li><strong>Fields</strong></li>
<li><strong>Multilingual</strong></li>
<li><strong>Multilingual - Entity Translation</strong></li>
<li><strong>Multilingual - Internationalization</strong></li>
<li><strong>Internationalization</strong> (<a href="https://www.drupal.org/project/i18n">i18n</a>) VERSION DEV (7.x-1.x-dev) para evitar
<a href="https://www.drupal.org/node/2227523">este error</a>.
<ul>
<li><strong>Field translation</strong> (i18n_field submodule)</li>
<li><strong>Menu translation</strong> (i18n_menu submodule)</li>
<li><strong>Variable translation</strong> (i18n_variable submodule)</li>
<li><strong>String translation</strong> (i18n_string submodule)</li>
</ul>
</li>
<li><strong>Variable</strong> (<a href="https://www.drupal.org/project/variable">variable</a>)
<ul>
<li><strong>Variable Realm</strong> (variable_realm submodule)</li>
<li><strong>Variable Store</strong> (variable_store submodule)</li>
</ul>
</li>
</ul>
<h2 id="3-configurar-actualizaciones-de-traducciones">3. Configurar actualizaciones de traducciones</h2>
<ul>
<li>Localization update permite descargar y actualizar traducciones del core
de Drupal y otros módulos instalados</li>
<li>Debes especificar donde almacenar las traducciones descargados:</li>
</ul>
<p><strong>Admin » Configuración » Regional e idioma » Idiomas » Actualizaciones de traducciones</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/config/regional/language/update</code></p>
<p><strong>Almacenar archivos descargados:</strong> sites/all/translations</p>
<p><img src="https://user-images.githubusercontent.com/243532/47866413-af5d6300-ddcc-11e8-8a1d-f5abf3e7c14c.png" alt="almacenar-traducciones" /></p>
<h2 id="4-configurar-la-detección-y-selección-de-idioma">4. Configurar la detección y selección de idioma.</h2>
<p><strong>Admin » Configuración » Regional e idioma » Idiomas » Detección y selección</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/config/regional/language/configure</code></p>
<ul>
<li>Método de detección de la <strong>INTERFAZ</strong>
<ul>
<li>URL (prefijo de URL)</li>
<li>Navegador.</li>
</ul>
</li>
<li>Método de detección del <strong>CONTENIDO</strong></li>
</ul>
<p><img src="https://user-images.githubusercontent.com/243532/47866422-b3898080-ddcc-11e8-8bab-93b5c8671125.png" alt="seleccion-de-idioma" /></p>
<h2 id="5-agregar-otra-idioma">5. Agregar otra idioma</h2>
<p>Por ejemplo, agrega la idioma de Frances, y configurar los prefijos de rutas:</p>
<p><strong>Admin » Configuración » Regional e idioma » Idiomas</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/config/regional/language</code></p>
<ul>
<li>En este caso usamos códigos de idioma (en, es, fr) como prefijo de ruta.</li>
<li>Se podría también configurar diferente dominios (example.com, example.es,
example.fr) o sub-dominios (en.example.com, es.example.com, fr.example.com).</li>
</ul>
<p><img src="https://user-images.githubusercontent.com/243532/47866427-b71d0780-ddcc-11e8-8813-983ba8ec4805.png" alt="agregar-idioma" /></p>
<h2 id="6-configurar-fecha-y-hora">6. Configurar fecha y hora</h2>
<p>Por defecto Drupal usa mes/día/año (el format común del ingles) lo que hay que
cambiar a día/mes/año.</p>
<p>URL: <code class="language-plaintext highlighter-rouge">/admin/config/regional/date-time</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866429-ba17f800-ddcc-11e8-8e0a-a454b11851f5.png" alt="fecha-y-hora" /></p>
<p>También se recomienda que creas formatos más comunes en español como “Lunes el
20 de Octubre de 2012 a las 11:16pm”</p>
<p>URL: <code class="language-plaintext highlighter-rouge">/admin/config/regional/date-time/formats</code>
Haz clic sobre: Añadir formato de fecha.</p>
<p>Long: <code class="language-plaintext highlighter-rouge">l el j de F del Y a las h:ga</code>
Medium: <code class="language-plaintext highlighter-rouge">l j de F Y - h:ga</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866432-bd12e880-ddcc-11e8-8f8d-f30decebd3ca.png" alt="regionalizar-fecha-y-hora" /></p>
<h2 id="7-alternador-de-idioma">7. Alternador de idioma</h2>
<p><strong>Admin » Estructura » Bloques</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">/admin/structure/block</code></p>
<p>Habilita el bloque que es para <em>Texto de la interfaz del usuario</em> en la region
del <em>Encabezado</em>.</p>
<p>Hay dos opciones:</p>
<p><img src="https://user-images.githubusercontent.com/243532/47866435-c00dd900-ddcc-11e8-9f8b-9f8ab3e3b397.png" alt="lang-selector" /></p>
<ul>
<li>Si tienes muchas idiomas, se recomienda utilizar el módulo <strong>lang_dropdown</strong>.</li>
<li>Siempre usar el bloque que es para <em>Texto de la interfaz del usuario.</em></li>
</ul>
<h2 id="8-habilitar-traducción-de-entidades">8. Habilitar traducción de entidades</h2>
<p>Necesitamos traducir el contenido del sitio, representado en los nodos y las taxonomías.</p>
<p><strong>Admin » Configuración » Regional e idioma » Entity translation</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/config/regional/entity_translation</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866444-c308c980-ddcc-11e8-9a03-29a8177ee86a.png" alt="entity_translation" /></p>
<p>Esconder campos que no son por traducir</p>
<p><img src="https://user-images.githubusercontent.com/243532/47866448-c56b2380-ddcc-11e8-8105-d9f1ac9d7563.png" alt="hide-shared-fields" /></p>
<h2 id="9-configurar-traducción-de-campos">9. Configurar traducción de campos</h2>
<p>Habilitar el soporte multi-lenguaje con field translation en todos los tipos de
contenido.</p>
<p><strong>Admin » Estructura » Tipos de contenido » Articulo » Editar</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/structure/types/manage/article</code></p>
<p><strong>Admin » Estructura » Tipos de contenido » Basic Page » Editar</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/structure/types/manage/page</code></p>
<p>Sección: Opciones de publicación</p>
<p><img src="https://user-images.githubusercontent.com/243532/47867249-fb110c00-ddce-11e8-9fcd-8aa29ef0eb6c.png" alt="soporte-multilenguaje" /></p>
<h2 id="10-configurar-modulo-title">10. Configurar modulo <em>Title</em></h2>
<p>Habilitar traducción de los Títulos de contenido.</p>
<p>El campo del Titulo es un caso especial en Drupal 7. <em>Se utiliza el modulo
<a href="https://www.drupal.org/project/title">Title</a> para convertir el campo en algo que se puede traducir con Entity
Translation como los otros campos.</em></p>
<p><strong>Admin » Configuración » Autoría del contenido » Opciones de título</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/config/content/title**</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866466-d451d600-ddcc-11e8-8a96-7d4ffbc04034.png" alt="Node Title automatic field replacement" /></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866558-1d098f00-ddcd-11e8-97fc-c6e960f13ae7.png" alt="Term Name automatic field replacement" /></p>
<p>Reemplazar todos los campos de <strong>titulo</strong> en todos los contenidos:</p>
<p><strong>Admin » Estructura » Tipos de contenido » Articulo » Gestionar Campos</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/structure/types/manage/article/fields</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866570-2266d980-ddcd-11e8-870a-e1b92114e73e.png" alt="remplazar campos article" /></p>
<p>Reemplazar los campos del <strong>Nombre</strong> y <strong>Descripción</strong> de Taxonomía:</p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/structure/taxonomy/tags/fields</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866579-25fa6080-ddcd-11e8-8d43-4f77a6761b5e.png" alt="Reemplazar campos taxonomia" /></p>
<p>Comprobar que la traducción del campo esta habilitada.</p>
<p>admin/structure/taxonomy/tags/fields/name_field
admin/structure/taxonomy/tags/fields/description_field</p>
<p><img src="https://user-images.githubusercontent.com/243532/47866583-2a267e00-ddcd-11e8-8153-1c62975b84e2.png" alt="tags translation" /></p>
<h2 id="11-traducir-campos">11. Traducir campos</h2>
<p>Habilitar traducción del campo de <strong>body</strong> en <strong>todos los tipos de
contenido</strong> (Article y Basic Page).</p>
<p><strong>Admin » Estructura » Tipos de contenido » Articulo » Gestionar Campos</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/structure/types/manage/article/fields</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866590-2eeb3200-ddcd-11e8-9bc7-f5d1093069e4.png" alt="habilitar traduccion de campos" /></p>
<p><strong>Admin » Estructura » Tipos de contenido » Page » Gestionar Campos</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/structure/types/manage/page/fields</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866596-33174f80-ddcd-11e8-8aa6-f047cd5ca83f.png" alt="body_field-translation" /></p>
<p><strong>No habilita</strong> traducción para los campos:
Tags e Imagen.</p>
<h2 id="12-crear-y-revisar-contenido">12. Crear y revisar contenido!</h2>
<p>URL: <code class="language-plaintext highlighter-rouge">/node/add/article</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866602-390d3080-ddcd-11e8-8caf-ccdcff0c3f7b.png" alt="crear-articulo" /></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866607-3d394e00-ddcd-11e8-9c43-a6bdd1585828.png" alt="articulo-espanol-untranslated-tag" /></p>
<h2 id="13-traducir-etiquetas-de-los-campos">13. Traducir etiquetas de los campos</h2>
<p>Si mostras las etiquetas de campos como “Tags:” en el Front-end, tienes que
traducirles con el modulo <em>Field Translation</em> (i18n_field)</p>
<p><strong>Admin » Estructura » Tipos de contenido » Article » Gestionar campos » Tags » Traducir</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/structure/types/manage/article/fields/field_tags/translate</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866611-41656b80-ddcd-11e8-81a4-f3812ef84a93.png" alt="translate-field-label" /></p>
<p>¡Ahora sí!</p>
<p><img src="https://user-images.githubusercontent.com/243532/47866617-45918900-ddcd-11e8-8d74-a7570e5ad42f.png" alt="articulo-espanol" /></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866625-49251000-ddcd-11e8-85d0-742263160cb2.png" alt="translate-english" /></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866627-4cb89700-ddcd-11e8-8b92-16415ebf6411.png" alt="english" /></p>
<h2 id="14-traducir-términos">14. Traducir términos</h2>
<p><strong>Admin » Estructura » Taxonomía » Lista</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/structure/taxonomy/tags</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866628-504c1e00-ddcd-11e8-940e-25ff238fb2f3.png" alt="tags-edit" /></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866633-53dfa500-ddcd-11e8-8529-6955be97abfa.png" alt="tags-traducir" /></p>
<h2 id="15-traducir-variables-site-name-slogan-etc">15. Traducir variables (Site Name, Slogan, etc):</h2>
<p><strong>Admin » Configuración » Regional e idioma » Multilingual settings » Variables</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/config/regional/i18n/variable</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866636-57732c00-ddcd-11e8-98e3-3436662138f6.png" alt="traducir-variables" /></p>
<p><strong>Admin » Configuración » Sistema » Información del sitio</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/config/system/site-information</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866643-5b9f4980-ddcd-11e8-9bce-29af1e7370fc.png" alt="variables-multi-idioma" /></p>
<h2 id="16-menus">16. Menus</h2>
<p>Escoger una metodologia para traducción de los menus.</p>
<p><strong>SI: Un solo menu, con links duplicados para todas las idiomas.</strong>
NO: Multiples menus, uno para cada lenguaje.
Habilita i18n_menu, i18n_translation.</p>
<p><strong>Admin » Estructura » Menús » Menú principal » Editar menú</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/structure/menu/manage/main-menu/edit</code></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866647-5e9a3a00-ddcd-11e8-9a66-33f550a4961d.png" alt="menu-translation" /></p>
<p>Cada enlace debe tener una idioma:</p>
<p><img src="https://user-images.githubusercontent.com/243532/47866656-62c65780-ddcd-11e8-8d67-4cfe8b2e7b30.png" alt="menu-idioma" /></p>
<p>Debes traducir y vincular cada enlace en cada idioma.</p>
<p><img src="https://user-images.githubusercontent.com/243532/47866660-66f27500-ddcd-11e8-8d08-1ee37dc1655f.png" alt="traducir-menu" /></p>
<h2 id="17-bloques">17. Bloques</h2>
<p>Escoger una metodologia para traducir bloques:</p>
<ul>
<li>Bloques con visibilidad según idioma.
<ul>
<li>Desventaja: duplicar bloques en cada lenguaje, poco manejable para
detectar, agrupar, y sincronizar traducciones.</li>
</ul>
</li>
<li>Beans con Entity Translation.
<ul>
<li>Ventaja: interfaz simple de traducción de cada campo, no hay bloques
duplicados.</li>
<li>Desventaja: No puedes armar workflows de estados de traducción.</li>
</ul>
</li>
<li>Nodos con Entity Translation.</li>
<li>Boxes con i18n_boxes + i18n_string.</li>
</ul>
<h2 id="18-views">18. Views</h2>
<p>Views no require modificación con Entity Translate, pero por defecto si un nodo
no tiene traducción, se mostrará el contenido en la idioma madre (source
language).</p>
<p>Para quitar el contenido que no ha sido traducido de tus vistas para no tener
contenido mezclado, puedes usar un filtro:</p>
<p><strong>Contenido: Idioma > El idioma del usuario actual</strong></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866666-6bb72900-ddcd-11e8-9340-fc85f8583311.png" alt="views-multilenguaje-config" /></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866679-6fe34680-ddcd-11e8-9fdf-d51fdf34f5ca.png" alt="views-multilenguaje" /></p>
<h2 id="19-actualizar-traducciones">19. Actualizar traducciones</h2>
<p><strong>Admin » Configuración » Regional e idioma » Traducir interfaz » Actualizar</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/config/regional/translate/update</code></p>
<p>A veces, al habilitar un modulo, no se descarga las traducciones
automáticamente. Debes actualizar las traducciones manualmente de tiempo a
tiempo, para estar al día con las traducciones del interfaz, contribuido por la
comunidad.</p>
<p><img src="https://user-images.githubusercontent.com/243532/47866684-740f6400-ddcd-11e8-9c5f-4e8438df0293.png" alt="translation-update-views1" /></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866690-783b8180-ddcd-11e8-9956-11f82404995a.png" alt="translation-update-views2" /></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866699-7b367200-ddcd-11e8-8122-85f3d07a1ba0.png" alt="translation-update-views3" /></p>
<p><img src="https://user-images.githubusercontent.com/243532/47866703-7d98cc00-ddcd-11e8-8102-060cd0984b13.png" alt="translation-update-views4" /></p>
<h2 id="20-buscar-y-traducir-interfaz">20. Buscar y traducir interfaz</h2>
<p><strong>Admin » Configuración » Regional e idioma » Traducir interfaz » Traducir</strong></p>
<p>URL: <code class="language-plaintext highlighter-rouge">admin/config/regional/translate/translate</code></p>
<h2 id="otros-módulos">Otros módulos</h2>
<ul>
<li><a href="https://www.drupal.org/project/l10n_client">Localization Client</a> (l10n_client) -
Facilita traducción de cadenas de texto del interfaz en tu sitio y
contribución de los mismos al localize.drupal.org</li>
<li><a href="https://www.drupal.org/project/transliteration">Transliteration</a> -
convierte caracteres UTF8 a ASCII á => a, é => e etc. Bueno para URLs y
para renombrar archivos que tengan caracteres extraños.</li>
<li><a href="https://www.drupal.org/project/admin_language">Administration Language</a> (admin_language) -
Cuando uno va a traducir el contenido de un nodo, el interfaz de
administración se cambia al lenguaje del destino. Usar este modulo para
dejar el backend en tu lenguaje preferida.</li>
</ul>James Wilsonjrwilson3@gmail.comEste post te guiará con 20 pasos en cómo crear un sitio web en multiples lenguajes utilizando la técnica de Entity Translation para Drupal 7, como alternativa más atractiva de traduccion que la que brinda el módulo de Content Translation. Estos apuntes se presentaron en un taller durante DrupalCamp Ecuador el 23 de Octubre de 2014 en Guayaquil, Ecuador.How to add Source Maps to Omega 4.x projects2014-08-22T00:00:00+00:002014-08-22T00:00:00+00:00https://www.elementalidad.com/sass-sourcemaps-omega-4<p>SASS 3.3 introduced support for Sourcemaps and just recently, Chris Eppstein
has created an initial Release Candidate as a lead up to a full 1.0.0 release
version of Compass — which now also supports Sourcemaps.</p>
<p>However, the Omega 4.x theme for Drupal 7 is running on older “stable” versions
of Sass, Compass, and their respective dependencies — none of which support
source maps.</p>
<!--more-->
<p class="pullquote">
UPDATE: fubhy (the Omega theme maintainer) has committed code to the Omega
7.x-4.x branch that adds Source Maps functionality. Just grab the latest dev
release, create a sub theme from the starter kit and test! Leave your feedback
on [Issue #2311593](https://www.drupal.org/node/2311593).
</p>
<p>While source maps are not “bleeding edge” like they were about a year ago, they
are relatively new technology only really being supported in the latest
versions of a few browsers like Chrome and Firefox. I consider sourcemaps to
be an important tool for distributed larger projects with many components and
partials, particularly for teams with multiple front-end developers.</p>
<p>The steps below are the ones I took to get Omega updated to work with
sourcemaps. I’ve provide a patch to the <a href="https://www.drupal.org/node/2311593#comment-9020173">Omega issue #2311593</a>.</p>
<p>The assumption here is that you’re already following Omega’s best practices and
using bundler and RVM to manage your ruby-version, and the gem set that the
Omega sub theme depends on. The way to confirm this is to just run <code class="language-plaintext highlighter-rouge">bundle
install</code> from inside your theme folder and follow that up with a
<code class="language-plaintext highlighter-rouge">bundle show sass</code>, which should give you a path that looks something
like <code class="language-plaintext highlighter-rouge">~/.rvm/gems/ruby-[version]@omega.themename/gems/</code>.</p>
<p>If you’re not using RVM, that’s o.k., but I highly recommend you start using it
to control which ruby version you’re using in any given project.</p>
<h2 id="1-update-to-sass-33-and-compass-100rc0">1. Update to SASS 3.3 and Compass 1.0.0.rc.0</h2>
<p>Go to your theme folder and change the sass gem to <code class="language-plaintext highlighter-rouge">~>3.3</code> and compass gem to
<code class="language-plaintext highlighter-rouge">~>1.0.0.rc.0</code> in the Gemfile file. The <em>spermy</em> operator <code class="language-plaintext highlighter-rouge">~></code> effectively
means <em>the last digit on the right may be equal to or greater than the value
specified</em> and is sometimes pronounced as “approximately greater than”.</p>
<p>In your theme’s Gemfile, replace: <code class="language-plaintext highlighter-rouge">gem 'sass'</code> with: <code class="language-plaintext highlighter-rouge">gem 'sass', '~>3.3'</code>,
and then replace <code class="language-plaintext highlighter-rouge">gem 'compass'</code> with: <code class="language-plaintext highlighter-rouge">gem 'compass', ‘~>1.0.0.rc.0'</code>.</p>
<h2 id="2-use-bundler-to-update-the-sass-and-compass-gems">2. Use bundler to update the SASS and Compass gems.</h2>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle update
</code></pre></div></div>
<p>This has the effect of downloading new Ruby gems and updating the Gemfile.lock
file. New versions of the SASS and Compass gems will be installed into the
theme’s gemset — typically found inside
<code class="language-plaintext highlighter-rouge">~/.rvm/gems/ruby-[version]@omega.themename/gems/</code> folder (if you’re using RVM).</p>
<h2 id="3-remove-add_import_path-from-configrb">3 Remove add_import_path from config.rb.</h2>
<p>The line <code class="language-plaintext highlighter-rouge">add_import_path 'sass'</code> in the config.rb file was causing problems
after upgrading compass because it was generating css files twice – so I had
to remove this line.</p>
<p>(via https://github.com/Compass/compass/issues/1737 and https://www.drupal.org/node/2177397)</p>
<h2 id="4-compile-your-css">4. Compile your CSS.</h2>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>compass compile
</code></pre></div></div>
<p>You’ll probably run into a handful of errors trying to compile the CSS due to
other outdated and deprecated functions. In my case I got a series of compile
errors that I was able to remedy one-by-one, by searching for the error message
in Google and following the instructions to remedy accordingly.</p>
<p><strong>Error 1:</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>WARNING: The compass/css3/shared module has been deprecated.
You can silence this warning by importing compass/css3/deprecated-support instead.
on line 1 of compass-core-1.0.0.rc.0/stylesheets/compass/css3/_shared.scss
from line 1 of singularitygs-1.1.2/stylesheets/singularitygs/helpers/_box-sizing.scss
from line 8 of singularitygs-1.1.2/stylesheets/singularitygs/_helpers.scss
from line 36 of singularitygs-1.1.2/stylesheets/_singularitygs.scss
from line 4 of sites/all/themes/themename/sass/themename.styles.scss
from line 5 of sites/all/themes/themename/sass/themename.no-query.scss
</code></pre></div></div>
<p>This happens because singularity.gs version 1.0.0 that comes with Omega is
incompatible with Sass 3.3.</p>
<h2 id="5-update-to-singularitygs-121">5. Update to Singularity.gs 1.2.1</h2>
<p>In the Gemfile, update singulartygs gem to <code class="language-plaintext highlighter-rouge">~>1.2.1</code> and also add <code class="language-plaintext highlighter-rouge">require
'singularitygs'</code>to the config.rb file. Then run <code class="language-plaintext highlighter-rouge">bundle update</code>, and <code class="language-plaintext highlighter-rouge">bundle
exec compass compile</code>. This results in another error.</p>
<p><strong>Error 2:</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Line 3 of sass/themename.styles.scss: File to import not found or unreadable: breakpoint.
</code></pre></div></div>
<h2 id="6-update-to-breakpoint-240">6. Update to breakpoint 2.4.0</h2>
<p>In the Gemfile, update breakpoint gem to <code class="language-plaintext highlighter-rouge">~>2.4.0</code> and also add <code class="language-plaintext highlighter-rouge">require
'breakpoint'</code> to config.rb (<a href="https://www.drupal.org/node/2232431">more info</a>).</p>
<h2 id="7-update-to-sass-globbing-110">7. Update to Sass Globbing 1.1.0</h2>
<p>In the Gemfile, update Sass Globbing gem to <code class="language-plaintext highlighter-rouge">~>1.1.0</code> in Gemfile. Re-run
<code class="language-plaintext highlighter-rouge">bundle update</code> and <code class="language-plaintext highlighter-rouge">bundle exec compass compile</code> (<a href="http://stackoverflow.com/questions/22213053">more info</a>).</p>
<p>This results in yet another error:</p>
<p><strong>Error 3:</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Line 8 of sass/themename.normalize.scss: File to import not found or unreadable: toolkit/border-box.
</code></pre></div></div>
<h2 id="8-update-to-toolkit-252-and-fix-import-statements-in-scss-files">8. Update to Toolkit 2.5.2 and fix import statements in SCSS files</h2>
<p>This requires three changes (<a href="https://www.drupal.org/node/2259101">more info</a>):</p>
<ol>
<li>In Gemfile update the toolkit gem to <code class="language-plaintext highlighter-rouge">~> 2.5.2</code>.</li>
<li>In sass/themename.styles.scss change from <code class="language-plaintext highlighter-rouge">@import "toolkit-no-css"</code>
to <code class="language-plaintext highlighter-rouge">@import "toolkit"</code>.</li>
<li>In sass/themename.normalize.scss change from <code class="language-plaintext highlighter-rouge">@import "toolkit/border-box"</code>
to <code class="language-plaintext highlighter-rouge">@import "toolkit/kickstart"</code>.</li>
</ol>
<h2 id="9-update-to-susy-212">9. Update to Susy 2.1.2</h2>
<p>Update the susy gem to <code class="language-plaintext highlighter-rouge">~>2.1.2</code> in the Gemfile.</p>
<p>I just did this because there was another error related to susy, and wanted to
be sure we were on the latest version. Unfortunately, I don’t remember the error
message now.</p>
<h2 id="10-run-and-re-run-bundle-exec-compass-compile-until-there-are-no-more-errors">10. Run and re-run <code class="language-plaintext highlighter-rouge">bundle exec compass compile</code> until there are no more errors.</h2>
<p>Following the methodology in the previous steps above to troubleshoot and
upgrade libraries as necessary, as you hit errors.</p>
<h2 id="11-enable-compass-sourcemap-configuration-in-configrb">11. Enable Compass Sourcemap configuration in config.rb.</h2>
<p>Once there are no more errors, you can finally enable the source map
configuration. On the line for <code class="language-plaintext highlighter-rouge">sass_options</code> in config.rb, add <code class="language-plaintext highlighter-rouge">:sourcemap =>
true</code> inside the curly braces.</p>
<p>My setup looks like this:</p>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">sass_options</span> <span class="o">=</span> <span class="p">{</span>
<span class="ss">:debug_info</span> <span class="o">=></span> <span class="kp">false</span><span class="p">,</span>
<span class="ss">:line_comments</span> <span class="o">=></span> <span class="kp">false</span><span class="p">,</span>
<span class="ss">:sourcemap</span> <span class="o">=></span> <span class="kp">true</span>
<span class="p">}</span>
</code></pre></div></div>
<p>I have <code class="language-plaintext highlighter-rouge">output_style = :expanded</code> and <code class="language-plaintext highlighter-rouge">debug_info</code> hardcoded to false for two
reasons:</p>
<p>We don’t use the <code class="language-plaintext highlighter-rouge">:development</code> or <code class="language-plaintext highlighter-rouge">:production</code> configurations provided by
ruby and available to Compass to distinguish between how compressed the css
output is. Drupal has built in functionality to aggregate and minify all the
CSS, which we turn on only on testing and production environments.</p>
<p>We commit the compiled CSS to our repository, because we don’t run compass or
bundler on our production servers. Thus it is far better to store compiled css
in an expanded format so that diffs and commit history from other front-end
developers can easily be read by a human.</p>
<h2 id="12-generate-source-maps">12. Generate source maps!</h2>
<p>Run <code class="language-plaintext highlighter-rouge">bundle exec compass compile</code> once more to compile the css again and
generate the source maps.</p>
<p>You will end up with new files in your theme’s css/ directory that look like
<code class="language-plaintext highlighter-rouge">css/themename.style.css.map</code> etc.</p>
<h2 id="13-commit-the-changes">13. Commit the changes.</h2>
<p>Commit all the changes in your theme, including in the Gemfile, the
Gemfile.lock, the config.rb, the changes to your SASS files, and the newly
generated your new CSS map files into your version control repository.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git commit <span class="nb">.</span> <span class="nt">-m</span> <span class="s2">"Added sourcemaps!”
</span></code></pre></div></div>James Wilsonjrwilson3@gmail.comSASS 3.3 introduced support for Sourcemaps and just recently, Chris Eppstein has created an initial Release Candidate as a lead up to a full 1.0.0 release version of Compass — which now also supports Sourcemaps. However, the Omega 4.x theme for Drupal 7 is running on older “stable” versions of Sass, Compass, and their respective dependencies — none of which support source maps.Right-To-Left Theming in Drupal with Directional SCSS2014-08-09T00:00:00+00:002014-08-09T00:00:00+00:00https://www.elementalidad.com/right-to-left-theming-in-drupal-with-directional-scss<p>Directional SCSS is a useful set of SASS functions and mixins created by Tyson
Matanich in 2013 that facilitates theming multi-language sites with both left-
to-right (LTR) languages such as English, French, German, and Spanish, as well
as right-to-left (RTL) languages such as Arabic, Hebrew, and Persian (Farsi).</p>
<!--more-->
<p>Before we get started with Directional, it’s important to understand a bit
about Drupal’s built-in RTL mechanism. The standard Drupal site-building
workflow assumes that when you want a site that supports both LTR and RTL,
the LTR styles will be the default [see footnote 1].</p>
<p>When you add an RTL language the entire design is expected to be essentially
flipped horizontally. If the menu was floated to the left, then in an RTL
language the menu should be floated to the right.</p>
<p>In terms of implementation, the site’s default stylesheets will contain the
left-to-right styles. Then, any styles that break the site’s RTL mirror-image
design must be copied into a similarly named stylesheet with the “-rtl.css”
suffix added to the filename.</p>
<p>On RTL pages, Drupal automatically scans the directory structure looking for a
RTL stylesheet counterpart for every normal LTR CSS file present on the site
and when one is found it is added to the page request.</p>
<p>The menu styles as found on an RTL language page might include code that looks
something like the following example, which has been stripped down to the bare
essentials, for brevity and clarity:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* styles.css - Default LTR styles */</span>
<span class="nc">.menu</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.menu</span> <span class="nt">li</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* styles-rtl.css - Override rules from styles.css */</span>
<span class="nc">.menu</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>There are a couple drawbacks to note with this implementation. The first and
most obvious is that any LTR styles that may bleed into the RTL must be
overridden and “nulled”. For example, the <code class="language-plaintext highlighter-rouge">margin-left: 0</code> inside
styles-rtl.css of the example above does exactly this — it removes the
<code class="language-plaintext highlighter-rouge">margin-left: 15px</code> required for LTR only.</p>
<p>The second less obvious drawback is that you have write duplicate code in two
separate files and then maintain these two files in sync by hand as your design
evolves.</p>
<p>Maintaining the LTR and RTL files in sync, to me is a deal breaker. When
design or layout changes require that margin to be adjusted, better not forget
to change it in both places! If the margin is removed altogether, you better
not forget to clean up that <code class="language-plaintext highlighter-rouge">margin-left: 0</code> too!</p>
<p>Ultimately, this methodology of inheriting LTR styles reinforces a development
strategy that makes it easier on the themer to think about RTL <em>after</em> the
design is finished. Drupallers have come up with a methodology to help them
remember which lines need to be kept in sync using a comment in the LTR
stylesheet:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt">float</span><span class="o">:</span> <span class="nt">left</span><span class="o">;</span> <span class="c">/* LTR */</span>
<span class="nt">margin-left</span><span class="o">:</span> <span class="nt">15px</span><span class="o">;</span> <span class="c">/* LTR */</span>
</code></pre></div></div>
<p>But this still leaves a lot to be desired. Fortunately, if you’re already
using SASS in your own theme, then you can do better and hopefully save
yourself some time while developing your theme.</p>
<p>With Directional SCSS, we can take Drupal’s RTL methodology one step further,
to let you write all your styles once and use SASS to compile the output to two
separate stylesheets.</p>
<p>After downloading the “directional.scss” file from Github into your theme’s
“sass” folder, and rename it to a partial: “_directional.scss”, placing an
underscore at the front of the file name so that SASS doesn’t generate an empty
stylesheet for it in the “css” output folder. Some themes like the Omega 4.x
framework organize custom mixins into subfolders, eg “sass/abstractions/”
folder. Next, just include the partial into your main stylesheet, and rewrite
your LTR-specific rules using the tools available rules that are compatible
with Directional SCSS.</p>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cm">/* styles.scss */</span>
<span class="k">@import</span> <span class="s2">"abstractions/directional"</span><span class="p">;</span>
<span class="nc">.menu</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nv">$left</span><span class="p">;</span>
<span class="nt">margin-</span><span class="si">#{</span><span class="nv">$left</span><span class="si">}</span><span class="nd">:</span> <span class="nt">15px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.menu</span> <span class="nt">li</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* styles-rtl.scss */</span>
<span class="nv">$dir</span><span class="p">:</span> <span class="n">rtl</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"styles"</span><span class="p">;</span>
</code></pre></div></div>
<p>The above code will generate the following CSS stylesheets:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* styles.css */</span>
<span class="nc">.menu</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.menu</span> <span class="nt">li</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* styles-rtl.css */</span>
<span class="nc">.menu</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.menu</span> <span class="nt">li</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Watch out for a major caveat here: All of the code from the LTR stylesheet is
added to the RTL stylesheet, including those that are not related to RTL. By
itself, this is not a big deal, but the problem is compounded by Drupal because
the RTL files are added but the LTR files are not removed — which has two big
effects:</p>
<p>RTL language pages will download both <code class="language-plaintext highlighter-rouge">styles.css</code> and <code class="language-plaintext highlighter-rouge">styles-rtl.css</code>,
effectively imposing a tax of twice the bandwidth! Styles from LTR are not
nulled out in RTL. This would produce the unwanted effect of having <code class="language-plaintext highlighter-rouge">padding-
left:15px</code> be present on the RTL version, when in reality, we only wanted and
expected the inverse: <code class="language-plaintext highlighter-rouge">padding-right: 15px</code>. Thanks Drupal! Well, fortunately,
this is super easy to mitigate by adding the code in the following gist to your
Drupal theme’s template.php file.</p>
<script src="https://gist.github.com/33c1f5d405119a508ceb.js"> </script>
<p>This snippet of code searches through the list of stylesheets and removes the
original LTR CSS files on pages whose language is RTL. It is careful to only
remove those provided by your theme, leaving the rest of the stylesheets from
other modules and Drupal core alone.</p>
<p>That is pretty much all there is to it. I recommend you dive into Directional
SCSS and read up about its helpful mixins and functions that help make your
Sass-based design right-to-left-friendly with [Tyson Matanich’s blog post
introduction to Directional](http://www.matanich.com/2013/09/06/rtl-css-with-sass/.</p>
<p>One nice feature I like to use is the <code class="language-plaintext highlighter-rouge">side-values</code> function:</p>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cm">/* styles.scss */</span>
<span class="nc">.sidebar-first</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nv">$left</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="nf">side-values</span><span class="p">(</span><span class="m">10px</span> <span class="m">5px</span> <span class="m">60px</span> <span class="m">20px</span><span class="p">);</span>
<span class="nt">border-</span><span class="si">#{</span><span class="nv">$left</span><span class="si">}</span><span class="nd">:</span> <span class="nt">1px</span> <span class="nt">solid</span> <span class="nn">#ccc</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>It swaps the 5px with 20px and vice-versa for the RTL layout producing:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* styles.css */</span>
<span class="nc">.sidebar-first</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span> <span class="m">5px</span> <span class="m">60px</span> <span class="m">20px</span><span class="p">;</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#ccc</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* styles-rtl.css */</span>
<span class="nc">.sidebar-first</span> <span class="p">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span> <span class="m">20px</span> <span class="m">60px</span> <span class="m">5px</span><span class="p">;</span>
<span class="nl">border-right</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#ccc</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<hr />
<p><small>footnote 1. It’s certainly debatable if Drupal’s assumption about RTL
inheriting LTR styles a good one or not, but that’s neither here nor there.
I’ve written this post from my own point of view, as a westerner implementing
a site designed for researchers of topics about the Middle East, who may speak
English, Arabic, Persian, or Hebrew. English in this case IS the default
language. I presume that for Middle Easterners who are implementing a site in
Arabic, having LTR as the default is probably a large inconvenience to them
when they want to go add English to their site.</small></p>James Wilsonjrwilson3@gmail.comDirectional SCSS is a useful set of SASS functions and mixins created by Tyson Matanich in 2013 that facilitates theming multi-language sites with both left- to-right (LTR) languages such as English, French, German, and Spanish, as well as right-to-left (RTL) languages such as Arabic, Hebrew, and Persian (Farsi).2014 Sticky Footer Solutions2014-06-23T00:00:00+00:002014-06-23T00:00:00+00:00https://www.elementalidad.com/2014-sticky-footer-solutions<p>While working on a Drupal distribution of sorts that offers a number of
different themes included, I needed to look for a clean, generic, reusable and
inheritable Sticky Footer to be packaged in a base theme. The feature needed
to be toggleable on or off in sub-themes as necessary.</p>
<p>Searching Google always turns up a number of competing solutions, so I’ve
consolidated the research here in a list of 4 basic options presenting the
pros and cons of each.</p>
<!--more-->
<h2 id="1-the-classic-css-sticky-footer--html5-version-here">1. The Classic CSS Sticky Footer (html5 version here):</h2>
<p>Pros:</p>
<ul>
<li>CSS/HTML only.</li>
<li>No javascript or extra HTTP requests needed.</li>
</ul>
<p>Cons:</p>
<ul>
<li>Requires the footer height be known, and set to a fixed value in CSS.</li>
<li>Requires non-semantic HTML code structure changes.</li>
<li>Doesn’t work well when using dynamic content such as from a CMS.</li>
<li>Doesn’t work well for responsive designs, where height may change
dynamically based on contents and width of screen.</li>
</ul>
<h2 id="2-a-responsive-sticky-footer-css-solution-using-displaytable-row">2. A Responsive Sticky Footer CSS solution using <code class="language-plaintext highlighter-rouge">display:table-row</code></h2>
<p>Pros:</p>
<ul>
<li>Don’t need to know the height of the footer.</li>
<li>Is a responsive solution.</li>
</ul>
<p>Cons:</p>
<ul>
<li>Could be considered a hack, due to CSS use of <code class="language-plaintext highlighter-rouge">display:table-row</code>.</li>
<li>Can cause layout/display issues or break the site design of some sites,
requiring more time and attention to fix.</li>
</ul>
<h2 id="3-the-css-flexbox-solution">3. The CSS Flexbox solution.</h2>
<p>Pros:</p>
<ul>
<li>Zero HTML code changes required.</li>
<li>Very little CSS code (5 or 6 lines).</li>
<li>Snappy response time and no display issues (requires no JS event
listeners or processing).</li>
<li>Could be the best choice as a <em>progressive enhancement</em> if stakeholders
are willing to accept limited browser support.</li>
</ul>
<p>Cons:</p>
<ul>
<li>Flexbox still has rather <a href="http://caniuse.com/flexbox">poor browser support</a>,, many current browsers
still require vendor prefixes.</li>
<li>Would require a fallback solution for supporting IE9 and below.</li>
</ul>
<h2 id="4-a-javascript-based-responsive-solution">4. A Javascript-based responsive solution.</h2>
<p>Pros:</p>
<ul>
<li>Encapsulated solution - contained in a single javascript file, may be
placed in the base Casa theme, and then automatically inherited (or
specifically disabled) by any sub-theme.</li>
</ul>
<p>Cons:</p>
<ul>
<li>Performance - extra HTTP requests.</li>
<li>Maintainability - Adds more jQuery/javascript bloat.</li>
<li>Hacky - Requires extra code to listen for screen resize, and to restrict
itself from overloading the browser.</li>
</ul>
<p>Here is the above information condensed into a table format:</p>
<table border="1" width="100%" cellspacing="0" cellpadding="2" style="width: 100%;">
<tbody>
<tr>
<td valign="top"><b>Solution</b></td>
<td valign="top"><b>Responsive</b></td>
<td valign="top"><b>Browser Support</b></td>
<td valign="top"><b>Pure CSS</b></td>
<td valign="top"><b>Clean (No hacks)</b></td>
</tr>
<tr>
<td valign="top">
<div><strong><a href="http://ryanfait.com/sticky-footer/" target="_blank">Classic CSS Sticky Footer</a></strong></div>
</td>
<td valign="top">No</td>
<td valign="top">Yes</td>
<td valign="top">Yes<br /></td>
<td valign="top">No; some non-semantic html is required.</td>
</tr>
<tr>
<td valign="top">
<div><strong><a href="http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/" target="_blank">Responsive Sticky Footer CSS solution using display:table-row</a></strong></div>
</td>
<td valign="top">Yes</td>
<td valign="top">
<div>Yes</div>
</td>
<td valign="top">Yes</td>
<td valign="top">Maybe; some consider using display:tables-row is not good use of CSS.</td>
</tr>
<tr>
<td valign="top">
<div><strong><a href="http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/" target="_blank">CSS Flexbox solution</a></strong></div>
</td>
<td valign="top">Yes</td>
<td valign="top">No</td>
<td valign="top">Yes</td>
<td valign="top">Yes</td>
</tr>
<tr>
<td valign="top">
<div><strong><a href="http://blog.mojotech.com/responsive-dynamic-height-sticky-footers/" target="_blank">A Javascript-based responsive solution</a></strong></div>
</td>
<td valign="top">Yes</td>
<td valign="top">Yes</td>
<td valign="top">No</td>
<td valign="top">Maybe; requires extra code to listen for screen resize and to restrict itself from overloading the browser.</td>
</tr>
</tbody>
</table>James Wilsonjrwilson3@gmail.comWhile working on a Drupal distribution of sorts that offers a number of different themes included, I needed to look for a clean, generic, reusable and inheritable Sticky Footer to be packaged in a base theme. The feature needed to be toggleable on or off in sub-themes as necessary. Searching Google always turns up a number of competing solutions, so I’ve consolidated the research here in a list of 4 basic options presenting the pros and cons of each.Custom Date Formats for Drupal 7 Multi-language sites2014-06-19T00:00:00+00:002014-06-19T00:00:00+00:00https://www.elementalidad.com/custom-date-formats-drupal-7-multi-language-sites<p>One of the neat features of Drupal 7 is the integration between the date and
time handling, and the multi-language configurations. With the <strong>locale</strong> module enabled, Date strings can be localize into the various languages enabled on your Drupal installation.</p>
<!--more-->
<p>Custom date formats like the ones listed below may be added directly into the
Administrative interface in Drupal, but this requires in-depth knowledge of how
the PHP date formatting codes work. Therefore, developers can save their
clients’ time and head scratching by providing the most common date formats
used around the world in code, and non-technical client administrators may
then simply select the date format for a given language through the UI.</p>
<p>Out of the box Drupal provides three date formats “Long”, “Medium”, and
“Short”, all of which include the date and time. So here, we’ll provide a new
custom date format called “Post date” that we can use to exclude the time, and
show only the date.</p>
<script src="https://gist.github.com/d5cf9c14b9d112017c65.js"> </script>James Wilsonjrwilson3@gmail.comOne of the neat features of Drupal 7 is the integration between the date and time handling, and the multi-language configurations. With the locale module enabled, Date strings can be localize into the various languages enabled on your Drupal installation.