<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Trek Glowacki</title>
    <description>The latest articles on DEV Community by Trek Glowacki (@trek).</description>
    <link>https://dev.to/trek</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F106816%2F9ffe13a8-a51f-4078-993c-66e80cd6e005.jpeg</url>
      <title>DEV Community: Trek Glowacki</title>
      <link>https://dev.to/trek</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/trek"/>
    <language>en</language>
    <item>
      <title>Should a company do trial employment?</title>
      <dc:creator>Trek Glowacki</dc:creator>
      <pubDate>Wed, 10 Mar 2021 18:06:46 +0000</pubDate>
      <link>https://dev.to/latticefyi/should-a-company-do-trial-employment-3k7</link>
      <guid>https://dev.to/latticefyi/should-a-company-do-trial-employment-3k7</guid>
      <description>&lt;p&gt;by &lt;a href="https://dev.to/trek"&gt;Trek&lt;/a&gt; and &lt;a href="https://dev.to/endangeredmassa"&gt;Sean&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are many benefits to trial employment – hiring someone for less than a month to decide if you want to hire them full time.&lt;/p&gt;

&lt;p&gt;You get to see the candidate work in a real-world scenario. You get to spend a real amount of time with them. You get to verify claims made in the interview. You have a clear check-in point where you can back out.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;However, trial employment can exclude certain groups of candidates from your hiring pool.&lt;/strong&gt; Assuming you want a diverse hiring pool, this could be problematic.&lt;/p&gt;

&lt;p&gt;For example, candidates who are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;parents: won't relocate for only a potential job, disrupting their family life.&lt;/li&gt;
&lt;li&gt;new to your tech/tools: will spend time learning instead of performing, making the trial period not representative of their work.&lt;/li&gt;
&lt;li&gt;managing chronic health issues: need continuous health coverage, which would be broken by one or more trial periods&lt;/li&gt;
&lt;li&gt;without savings: need income stability.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In a country with strong social safety nets and worker protections, trial employment could be a really great way to form a longer-term working relationship. This is sadly not the case in many countries.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>UI Kits and Open Design</title>
      <dc:creator>Trek Glowacki</dc:creator>
      <pubDate>Wed, 31 Jul 2013 00:00:00 +0000</pubDate>
      <link>https://dev.to/trek/ui-kits-and-open-design-4o50</link>
      <guid>https://dev.to/trek/ui-kits-and-open-design-4o50</guid>
      <description>&lt;h2&gt;
  
  
  UI Kits and Open Design.
&lt;/h2&gt;

&lt;p&gt;The last few years has seen the &lt;a href="http://foundation.zurb.com/" rel="noopener noreferrer"&gt;wonderful&lt;/a&gt; &lt;a href="http://twbs.github.io/bootstrap/" rel="noopener noreferrer"&gt;proliferation&lt;/a&gt; of &lt;a href="http://topcoat.io/" rel="noopener noreferrer"&gt;UI kits&lt;/a&gt; for the web. These libraries offer non-designers a way to create designed interfaces without needing to involve a dedicated designer. They function much like the libraries that save every developer the time of mastering the diverse range of technologies (file IO, networking, application structure, etc) that go into making a technology product.&lt;/p&gt;

&lt;p&gt;Like open source software, these projects also have the goal of open sharing so anyone can take the project and augment it, use it without charge, change and redistribute it, or commit changes back for everyone to share.&lt;/p&gt;

&lt;p&gt;A UI kit means a trained professional has done the complicated and time consuming task of crafting a reusable set of elements that can be combined in many ways and still retain the cohesion and unity that come from good design. Some kits also ship with HTML and CSS, saving you the time of taking a design and converting it from pixels to the powerful but quirky DSL we have for web interfaces.&lt;/p&gt;

&lt;p&gt;On the surface this looks like an equivalent to open source software: "open design" if you will. But these projects aren't as open as I suspect the authors intend. That's a bold statement, so bear with me: releasing images and/or HTML and CSS, even accompanied by permissive licenses governing their free use, doesn't constitute "open". They're certainly free-as-in-beer, but I'd argue they fall short of the loftier free-as-in-speach.&lt;/p&gt;

&lt;p&gt;The problem with PSDs, dribble shots, even HTML and CSS is that no matter how much freedom we have for use, none of these things &lt;em&gt;are the design&lt;/em&gt;. They are &lt;em&gt;artifacts&lt;/em&gt; of the design. They're an encoding, visually and in a DSL (HTML/CSS), of the design but they are not, themselves, &lt;em&gt;the&lt;/em&gt; design.&lt;/p&gt;

&lt;p&gt;The actual design – the information I wish the authors of these frameworks opened – is the decision making process behind the &lt;em&gt;values&lt;/em&gt; they've selected for sizes, proportions, colors, line, textures, and all the other primitives that make a design.&lt;/p&gt;

&lt;p&gt;Let's use &lt;a href="http://topcoat.io/" rel="noopener noreferrer"&gt;Topcoat&lt;/a&gt; as an example. Here's a button from their kit:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdl.dropboxusercontent.com%2Fu%2F1931034%2FTopcoat.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdl.dropboxusercontent.com%2Fu%2F1931034%2FTopcoat.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I can know from the CSS that the button's color is a light gray (&lt;code&gt;#e5e9e8&lt;/code&gt;), the text inside is &lt;code&gt;1.167em&lt;/code&gt; in size, that it has &lt;code&gt;1.16em&lt;/code&gt; of padding accomplished with &lt;code&gt;padding&lt;/code&gt; for the right and left and with &lt;code&gt;line-height&lt;/code&gt; for the top and bottom. It has &lt;code&gt;1px&lt;/code&gt; border of &lt;code&gt;solid #a5a8a8&lt;/code&gt; with a &lt;code&gt;3px&lt;/code&gt; radius. The text is &lt;code&gt;Source Sans&lt;/code&gt; with a weight of &lt;code&gt;200&lt;/code&gt; in dark but not pure black (&lt;code&gt;#454545&lt;/code&gt;) with a slight &lt;code&gt;#fff&lt;/code&gt; shadow.&lt;/p&gt;

&lt;p&gt;Even if Topcoat was like other UI kits and only made images available, I could use tools like &lt;a href="http://iconfactory.com/software/xscope" rel="noopener noreferrer"&gt;xScope&lt;/a&gt; and &lt;a href="http://www.colorschemer.com/" rel="noopener noreferrer"&gt;ColorSchemer Studio&lt;/a&gt; to derive the values. Having the CSS is awesome because it saves this step and encapsulates best practice solutions for getting these values into a format parseable by a browser. Still, those specific values are the "what" of the design but they aren't the most important part, the part that makes a design truly open and reusable: the "why".&lt;/p&gt;

&lt;p&gt;Why a &lt;code&gt;3px&lt;/code&gt; radius and instead of &lt;code&gt;5px&lt;/code&gt; or &lt;code&gt;1px&lt;/code&gt;? How does &lt;code&gt;3px&lt;/code&gt; relate to the size of the button as a whole or the size and weight of the text? Why is the button &lt;code&gt;#e5e9e8&lt;/code&gt; and the border &lt;code&gt;#a5a8a8&lt;/code&gt;? How were these colors selected?&lt;/p&gt;

&lt;p&gt;Expanding outwards from the button we can continue our line of questioning. How do the values that create space between the button and other elements near it relate to each other? How were colors in Topcoat selected and how do they relate to each other? The colored buttons have various blues to indicate state. How were these blues picked from all the possible combinations of hue, saturation, and brightness? How do the blues and grays and near blacks compare to each other?&lt;/p&gt;

&lt;p&gt;The answers to those questions (and more) is the actual "source" of design. If you think the "why" isn't the single most important aspect of a design, open one of these UI kits (or even a favorite web app!) in a browser's inspector tool and start changing values. You won't need to change many values and you won't need need to change them by much before the design will look "off" or "broken" to you. Change them back with a reload and the design will appear to &lt;em&gt;snap&lt;/em&gt; into place, rich with its original cohesion.&lt;/p&gt;

&lt;p&gt;Go, give it a try. Isn't it amazing? What's more amazing is that you'll see it &lt;em&gt;even if you aren't a designer&lt;/em&gt;[1]. You live in a designed world. You've been trained by constant exposure to see design. And, while you probably haven't been trained to make new designs from scratch you're perfectly capable of distinguishing between good and poor design. If you don't believe me, &lt;a href="http://method.ac/" rel="noopener noreferrer"&gt;go play with the games at method.ac&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Every design is like a little language with its own correct grammar and syntax nearly as specific as a programming language. It contains primitives but instead of concepts like maps, arrays, integers, and functions the primitives include size, weight, color, proportion, and texture.&lt;/p&gt;

&lt;p&gt;Without first understanding that language it's impossible to correctly express anything new. And that's where the problems start for most people using these libraries. If they stay safely within the provided components they can make an application that looks designed (because it is) but no UI kit provides every possible component or even has guidance about all the ways existing components can be combined.&lt;/p&gt;

&lt;p&gt;Inevitably these kits will fail to help. You'll need something new – it might be as large as a new component or as small as a new highlight color – and it will look &lt;em&gt;wrong&lt;/em&gt; somehow. This is the #1 complaint you'll here from developers trying their hand at design. Not that they don't know what makes good design, but that when they try it comes out all wrong.&lt;/p&gt;

&lt;p&gt;It's tempting to think the HTML and CSS are design source and that reading through it will explain everything you need. Let's examine this idea a bit by returning to the button example from above and adding another button into the mix:&lt;/p&gt;

&lt;p&gt;Large button&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdl.dropboxusercontent.com%2Fu%2F1931034%2FTopcoat.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdl.dropboxusercontent.com%2Fu%2F1931034%2FTopcoat.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Small button&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdl.dropboxusercontent.com%2Fu%2F1931034%2FTopcoat2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdl.dropboxusercontent.com%2Fu%2F1931034%2FTopcoat2.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let's say our applications needs three hierarchies of button to properly draw attention. The large button for actions on data they are currently interaction with, the small button for actions elsewhere, and small_er_ buttons for global but infrequently used actions.&lt;/p&gt;

&lt;p&gt;How much vertical space should the smaller button should use?&lt;/p&gt;

&lt;p&gt;Implicit in the design artifacts that &lt;a href="http://designmodo.github.io/Flat-UI/" rel="noopener noreferrer"&gt;FlatUI&lt;/a&gt;, &lt;a href="http://twbs.github.io/bootstrap/" rel="noopener noreferrer"&gt;Bootstrap&lt;/a&gt;, &lt;a href="http://foundation.zurb.com/" rel="noopener noreferrer"&gt;Foundation&lt;/a&gt;, and &lt;a href="http://topcoat.io/" rel="noopener noreferrer"&gt;Topcoat&lt;/a&gt; expose is the actual design. A skilled designer can extract it in the same way that a skilled programmer can look at an application and reverse engineer with surprising accuracy. &lt;/p&gt;

&lt;p&gt;Once a designer has uncovered the underlying primitives, it's trivial to create new elements that fit into the overall design.&lt;/p&gt;

&lt;p&gt;Most programmers lack this skill. So do many novice designers. For an expert designer, and especially for the ones who make UI kits, the design is so obvious from the artifact that they can't understand why we throw up hands up and say "These are beautiful examples, but how do I actually &lt;em&gt;make&lt;/em&gt; a damn thing."&lt;/p&gt;

&lt;p&gt;The good news is programmers are highly trained at working within a set of constraints and rules. You just need to tell them what those rules are and how to use them. A design isn't random. A design is the accumulation of intentional choices about size, proportions, colors, textures, line, etc. Values are selected for specific reasons and the relationships between these values is what becomes the language of the design.&lt;/p&gt;

&lt;p&gt;For all the popular UI kits &lt;em&gt;someone&lt;/em&gt; knows the reasons behind the values, but that knowledge isn't open. With enough skill you can derive a good guess at the answers, but that's no more open than any exercise in reverse engineering.&lt;/p&gt;

&lt;p&gt;I'm extremely grateful for work people put into making these frameworks. I just wish they'd share the right parts. &lt;/p&gt;

&lt;h4&gt;
  
  
  Footnotes
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;I've tried this exercise with some design friends, too. They're often able to notice the breaking when a single value is changed by a small amount. It's impressive.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;em&gt;This post originally appeared as a &lt;a href="https://gist.github.com/trek/fff970bf2eb1192d852a" rel="noopener noreferrer"&gt;gist&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Some resources that informed my thinking
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://developer.android.com/design/style/index.html" rel="noopener noreferrer"&gt;Android's style guide&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://channel9.msdn.com/events/MIX/MIX10/CL14" rel="noopener noreferrer"&gt;Windows Phone UI design language&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html" rel="noopener noreferrer"&gt;BBCs style guide&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html" rel="noopener noreferrer"&gt;Apple's Human Interface Guidelines (HIG)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="http://vimeo.com/17079380" rel="noopener noreferrer"&gt;Tim Brown - More Perfect Typography&lt;/a&gt; and the great &lt;a href="http://modularscale.com/" rel="noopener noreferrer"&gt;Modular Scale&lt;/a&gt; tool for selecting cohesive size values&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.markboulton.co.uk/journal/a-richer-canvas" rel="noopener noreferrer"&gt;Content out design&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://alistapart.com/article/the-infinite-grid" rel="noopener noreferrer"&gt;Infinite Grid&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
  </channel>
</rss>
