HomeSalem Cobalt's personal site + blog2020-03-15T00:00:00+00:00https://salemcobalt.com/Salem Cobaltme@salemcobalt.comJosé's First Dev Huddle!2019-02-17T00:00:00+00:00https://salemcobalt.com/posts/joses-first-dev-huddle/<h2 id="what-we-covered!">What We Covered!<a class="c-direct-link" href="#what-we-covered!">#</a></h2>
<ul>
<li>Reviewed high level front-end development goals for the next couple months</li>
<li>Quick tour of José's current front-end dev workflow</li>
<li>Walked through some intro HTML anatomy of current website
<ul>
<li>Reviewed HTML tags in his personal site's <head></head></li>
<li>Also reviewed how <a> tags can link to other HTML tags on a page by using an <code>href="#blog-post"</code> on the anchor (with <code>blog-post</code> being the id on the element to jump to. ex. <code><div id="blog-post"></div></code>)</a></li>
</ul>
</li>
<li>Discussed how making site-wide changes (such as a change to the global site header), doesn't scale when you have to copy and paste the same change over and over</li>
<li>Installed SourceTree, NodeJS, and Git Bash on José's Windows 10 computer</li>
<li>Setup an SSH Key + added SSH creds to Github</li>
<li>Connected SourceTree to José's Github account</li>
<li>Used Git to clone down a copy of José's personal site so any code changes will be tracked moving forward</li>
<li>Began reorganizing José's personal site into a <code>src</code> and <code>dist</code> folder so we can begin to break apart the UI into smaller reusable pieces + introduce tools to help take these templates, content, and components and assemble them into the fully working website</li>
<li>Moved these WIP files to the <code>feature/refactor</code> branch + made José's first commit to Github (via SourceTree) + pushed up his first feature branch!</li>
<li>Discussed homework for next week: find some inspirational sites / blogs with designs to aspire towards</li>
</ul>
<h2 id="what's-up-next-up%3F">What's Up Next Up?<a class="c-direct-link" href="#what's-up-next-up%3F">#</a></h2>
<ul>
<li>Review any questions</li>
<li>Discuss any inspiration websites, blogs, etc to begin to identify a visual direction to move towards</li>
<li>Continue working on reorganizing blog codebase
<ul>
<li>Introduce Gulp + a package.json file as some simple front-end tools for managing the codebase</li>
</ul>
</li>
</ul>
Design System Breadth of Problems2020-03-15T00:00:00+00:00https://salemcobalt.com/posts/design-system-breadth-of-problems/<p>While this is far far from an exhaustive list of all of the different problems I’ve had to tackle as front-end architect over the past 4 years, here's this will shed some light into the breath and depth of knowledge required to keep a modern design system (and design system team!) operating as smoothly and as productively as possible.</p>
<h2 id="validation">Validation<a class="c-direct-link" href="#validation">#</a></h2>
<ul>
<li>How do you know if the options passed along to a component — either in Twig, JavaScript, or both — are valid?</li>
</ul>
<h2 id="compatibility-%2F-interoperability">Compatibility / Interoperability<a class="c-direct-link" href="#compatibility-%2F-interoperability">#</a></h2>
<ul>
<li>How do you make sure the design system’s Twig templates are as Drupal friendly as possible (ex. <code>attributes</code> support)</li>
<li>How do you make sure Drupal (or any Twig-compatible environment) supports any custom Twig extensions in use?</li>
</ul>
<h2 id="dependency-management">Dependency Management<a class="c-direct-link" href="#dependency-management">#</a></h2>
<ul>
<li>How do you make sure the design system's interrelated dependencies all stay in sync?</li>
</ul>
<h2 id="cross-browser-support">Cross-browser Support<a class="c-direct-link" href="#cross-browser-support">#</a></h2>
<ul>
<li>How do you use web component <slot>s if/when Shadow DOM isn't supported or can't be used?</slot></li>
</ul>
<h2 id="progressive-enhancement-%2F-server-side-rendering">Progressive Enhancement / Server-side Rendering<a class="c-direct-link" href="#progressive-enhancement-%2F-server-side-rendering">#</a></h2>
<ul>
<li>How do you server-side render (and subsequently hydrate) a web component without anyone flickering or layout thrashing?</li>
</ul>
<h2 id="documentation-%2F-communications">Documentation / Communications<a class="c-direct-link" href="#documentation-%2F-communications">#</a></h2>
<ul>
<li>How do you handle documenting the current + previous versions of the design system?</li>
<li>How do you make sure that the [design tokens|utility classes|component props| etc] documented <em>actually</em> match up with what currently exists?</li>
<li>How do you succinctly communicate all of the different updates in a release?</li>
</ul>
<h2 id="tooling-%26-build-process">Tooling & Build Process<a class="c-direct-link" href="#tooling-%26-build-process">#</a></h2>
<ul>
<li>As a developer, how do you compile the front-end code being shipped in the design system?</li>
</ul>
<h2 id="coding-standards">Coding Standards<a class="c-direct-link" href="#coding-standards">#</a></h2>
<ul>
<li>Promote and enforce consistent coding standards?</li>
</ul>
<h2 id="workflow">Workflow<a class="c-direct-link" href="#workflow">#</a></h2>
<ul>
<li>How do you <em>easily</em> review & test out the code from an incoming PR?</li>
</ul>
<h2 id="publishing">Publishing<a class="c-direct-link" href="#publishing">#</a></h2>
<ul>
<li>How do you cut a new release of the design system?</li>
</ul>
<h2 id="testing">Testing<a class="c-direct-link" href="#testing">#</a></h2>
<ul>
<li>How do you know if an incoming code change causes a visual regression?</li>
</ul>
<h2 id="performance">Performance<a class="c-direct-link" href="#performance">#</a></h2>
<ul>
<li>How do you ship an entire design system's worth of components without slowing down the browser... or build process...?</li>
</ul>