Merge pull request #721 from naher94/development

Articles Setup + Article Added

_articles/product-principles-strategies.markdown

@@ -0,0 +1,97 @@
+---
+layout: post-article
+article: true
+title: 'Product Principles & Strategies'
+description: A series of principles and strategies that I have found to work well when building product. Whether in the discovery phase or implementation phase they can help teams built the best experiences.
+hero: "product-principles-strategies/hero.jpg"
+hero-alt: Illustration of Pepper the Product Panda excited to showcase product principles and strategies
+tags: [leadership,product development]
+content-type: my content
+date: 2024-05-04
+---
+
+A series of principles and strategies that I have found to work well when building product. Whether in the discovery phase or implementation phase they can help teams built the best experiences.
+
+<div class="product-principles-strategies grid-x">
+  <div class="cell grid-x align-middle grid-padding-x">
+    <div class="cell medium-6">
+      <img src="{{"/img/articles/product-principles-strategies/users-first.jpg" | prepend: site.url }}" alt="Illustration of Pepper, the purple panda, standing on 1st place of a podium">
+    </div>
+    <div class="cell medium-6">
+      <h2>Users First</h2>
+      <p>Your users are not your designers, the more popular your product the more thoughts and comments you’ll receive. The more the merrier unless they’re bug reports. Use all the feedback as an opportunity to understand your user’s need. Stay true to the vision. Solve the problem – don’t just build the feature.</p>
+    </div>
+  </div>
+  <div class="cell grid-x align-middle grid-padding-x">
+    <div class="cell medium-6">
+      <img src="{{"/img/articles/product-principles-strategies/problem.jpg" | prepend: site.url }}" alt="">
+    </div>
+    <div class="cell medium-6">
+      <h2>Start with the Problem</h2>
+      <p>Before jumping into a solution understand the user needs. Understand the pain they are experiencing and decide on the problem you want to solve.</p>
+    </div>
+  </div>
+  <div class="cell grid-x align-middle grid-padding-x">
+    <div class="cell medium-6">
+      <img src="{{"/img/articles/product-principles-strategies/direction-purpose.jpg" | prepend: site.url }}" alt="">
+    </div>
+    <div class="cell medium-6">
+      <h2>Direction with Purpose</h2>
+      <p>Daily work can be filled with seemly disparate tasks. Remind the team of the purpose and long term goals. Having a product vision can help make this easier and clearer.</p>
+    </div>
+  </div>
+  <div class="cell grid-x align-middle grid-padding-x">
+    <div class="cell medium-6">
+      <img src="{{"/img/articles/product-principles-strategies/cross-functional.jpg" | prepend: site.url }}" alt="">
+    </div>
+    <div class="cell medium-6">
+      <h2>Everyday is Cross-functional</h2>
+      <p>Teams should be made of up of folks of many different disciplines, design, product and engineering working hand in hand. Cross-functional teams create a natural push and pull creating the greatest results.</p>
+    </div>
+  </div>
+  <div class="cell grid-x align-middle grid-padding-x">
+    <div class="cell medium-6">
+      <img src="{{"/img/articles/product-principles-strategies/kind-candid.jpg" | prepend: site.url }}" alt="">
+    </div>
+    <div class="cell medium-6">
+      <h2>Be Candid and Kind</h2>
+      <p>Build with transparency and care. Offer feedback compassionately but with excellence in mind, and receive it openly and as an opportunity to grow.</p>
+    </div>
+  </div>
+  <div class="cell grid-x align-middle grid-padding-x">
+    <div class="cell medium-6">
+      <img src="{{"/img/articles/product-principles-strategies/simple.jpg" | prepend: site.url }}" alt="">
+    </div>
+    <div class="cell medium-6">
+      <h2>Keep it Simple</h2>
+      <p>Start simple, allowing you to solve and validate a core problem and value proposition. Complexity is a distraction and holds us back.</p>
+    </div>
+  </div>
+  <div class="cell grid-x align-middle grid-padding-x">
+    <div class="cell medium-6">
+      <img src="{{"/img/articles/product-principles-strategies/clarity.jpg" | prepend: site.url }}" alt="">
+    </div>
+    <div class="cell medium-6">
+      <h2>Clarity is Key</h2>
+      <p>Clarity is important both in the product and across the team. Create alignment by providing clarity and context, connecting plans and decisions back to business strategy.</p>
+    </div>
+  </div>
+  <div class="cell grid-x align-middle grid-padding-x">
+    <div class="cell medium-6">
+      <img src="{{"/img/articles/product-principles-strategies/prioritize.jpg" | prepend: site.url }}" alt="">
+    </div>
+    <div class="cell medium-6">
+      <h2>Prioritize Aggressively</h2>
+      <p>Stay focused, there will always be more to do then time in the day. Attention should be given to initiatives with high return on investment.</p>
+    </div>
+  </div>
+  <div class="cell grid-x align-middle grid-padding-x">
+    <div class="cell medium-6">
+      <img src="{{"/img/articles/product-principles-strategies/opinionated-software.jpg" | prepend: site.url }}" alt="">
+    </div>
+    <div class="cell medium-6">
+      <h2>Opinionated Software</h2>
+      <p>Software should be opinionated. Its the only way software can excel at the task at hand. Flexible software lets everyone invent their own workflows, which can create chaos as the user group scales. And distracts the team from the product vision.</p>
+    </div>
+  </div>
+</div>

_config.yml

@@ -13,7 +13,7 @@ description: > # this means to ignore newlines until "baseurl:"
 
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://rehanbutt.com" # the base hostname & protocol for your site
-version: 8.10.0
+version: 8.11.0
 version-naming: [Apricot, Blackcurrent, Coconut, Dragonfruit, Elderberry, Fig, Guava, Honeydew]
 
 # Build settings
@@ -45,4 +45,6 @@ collections:
     output: false
   easter-eggs:
     output: false
+  articles:
+    output: true
 

_includes/article-element.html

@@ -0,0 +1,25 @@
+<a href="{{include.item.url}}" class="cell {{include.css-class}} resource-link">
+  <div class="resource">
+    <p class="meta {{include.item.content-type | slugify}}">
+      {%- case include.item.content-type -%}
+        {%- when 'video' -%}
+          <i class="fas fa-video"></i>
+        {%- when 'reading' or 'article' or 'blog' or 'portfolio' or 'publication' -%}
+          <i class="fas fa-book"></i>
+        {%- when 'interactive' -%}
+          <i class="fas fa-mouse-pointer"></i>
+        {%- when 'tool' -%}
+          <i class="fas fa-hammer"></i>
+        {%- when 'my content' -%}
+          <i class="fas fa-at"></i>
+        {%- when 'reference' -%}
+          <i class="fas fa-binoculars"></i>
+        {%- else -%}
+          <i class="fas fa-shapes"></i>
+      {%- endcase -%}
+      {{include.item.content-type}}
+    </p>
+    <p class="title">{{include.item.title}}<i class="fas fa-link"></i></p>
+    <p class="description">{{include.item.description}}</p>
+  </div>
+</a>

_layouts/post-article.html

@@ -0,0 +1,44 @@
+---
+layout: default
+---
+<article class="post post-article" itemscope itemtype="http://schema.org/BlogPosting">
+
+  <header class="post-header">
+    <img class="article-hero" src="/img/articles/{{page.hero}}" alt="{{page.hero-alt}}">
+    <div class="grid-x align-justify align-middle">
+      <div class="cell shrink">
+        <p class="date-stamp">{{ page.date| date: "%B %e, %Y" }}</p>
+      </div>
+      <div class="cell shrink social-share">
+        <a href="https://twitter.com/intent/tweet?text=Check%20out%20this%20article%20by%20%40naher94!&url={{page.url | prepend: site.url}}" class="share-item twitter">
+          <i class="fab fa-twitter"></i>
+        </a>
+        <span onclick="copyToClipboard('{{page.url | prepend: site.url}}', this)" class="share-item link">
+          <i class="fas fa-link"></i>
+        </span>
+      </div>
+    </div>
+    <h1 itemprop="name headline">{{ page.title }}</h1>
+    <p class="post-meta">{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}</p>
+  </header>
+
+  <div class="post-content" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+  <div class="grid-x align-center share-bar-wrapper">
+    <div class="cell share-bar grid-x align-justify">
+      <div class="cell medium-shrink count-label">{{page.title}}</div>
+      <div class="cell medium-shrink">
+        Share
+        <a href="https://twitter.com/intent/tweet?text=Check%20out%20this%20article%20by%20%40naher94!&url={{page.url | prepend: site.url}}" class="share-item twitter">
+          <i class="fab fa-twitter"></i>
+        </a>
+        <span onclick="copyToClipboard('{{page.url | prepend: site.url}}', this)" class="share-item link">
+          <i class="fas fa-link"></i>
+        </span>
+      </div>
+    </div>
+  </div>
+
+</article>

_sass/articles.scss

@@ -0,0 +1,88 @@
+.post-article{
+  .post-header{
+    .article-hero{
+      border-radius: $tile-radius-big;
+    }
+    .social-share{
+      font-size: 1.25em;
+      .share-item{
+        color: semantic-color(text);
+        padding: 0.25em;
+        i{
+          transition: $sprint;
+        }
+        &.twitter{
+          &:hover{
+            i{
+              transition: $sprint;
+              transform: rotate(-15deg) scale(1.5); 
+            }
+          }
+        }
+        &.link{
+          cursor: pointer;
+          position: relative;
+          &:hover{
+            i{
+              transition: $sprint;
+              transform: rotate(360deg) scale(1.5); 
+            }
+          }
+        }
+      }
+    }
+  }
+  .share-bar-wrapper{
+    padding-right: 0.625rem;
+    padding-left: 0.625rem;
+    margin-top: 1em;
+  }
+  .share-bar{
+    position: relative;
+    background-color: semantic-color(article-share-bar-bg);
+    color: semantic-color(text);
+    border-radius: $tile-radius-medium;
+    padding: 1em;
+    font-weight: $lato-bold;
+    @include breakpoint(small only) {
+      font-size: 1.2em;
+    }
+    .share-item{
+      color: semantic-color(text);
+      padding: 0.25em;
+      i{
+        transition: $sprint;
+      }
+      &.twitter{
+        &:hover{
+          i{
+            transition: $sprint;
+            transform: rotate(-15deg) scale(1.5); 
+          }
+        }
+      }
+      &.link{
+        cursor: pointer;
+        position: relative;
+        &:hover{
+          i{
+            transition: $sprint;
+            transform: rotate(360deg) scale(1.5); 
+          }
+        }
+      }
+    }
+  }
+}
+
+.product-principles-strategies{
+  h2{
+    line-height: 1.2;
+  }
+  p{
+    margin: 0;
+    @include breakpoint(medium up) {
+      padding: 0;
+    }
+  }
+}

_sass/variables.scss

@@ -110,6 +110,7 @@ $semantic-colors:(
     easter-egg-card-outline: rgba(#D2D4D7, 0.28),
     easter-egg-card-description: $navy-black-l3,
     easter-egg-card-icon-bg: $navy-black-l8,
+    article-share-bar-bg: $navy-black-l9,
   ),
   dark:(
     text: $pure-white,
@@ -146,6 +147,7 @@ $semantic-colors:(
     easter-egg-card-outline: $navy-black,
     easter-egg-card-description: $navy-black-l5,
     easter-egg-card-icon-bg: $navy-black-l2,
+    article-share-bar-bg: $navy-black-d2,
   ),
 );
 

css/rehan.scss

@@ -14,6 +14,7 @@
 @import '404';
 @import 'changelog';
 @import 'easter-egg';
+@import 'articles';
 
 .no-select{
   -webkit-touch-callout: none;

index.html

@@ -76,10 +76,16 @@ <h2 class="">{{ project.tile-name }}</h2>
       <h2>Resources</h2>
       <p class="section-description">A bunch references you may find useful. Here are a few of my most recent finds.</p>
     </div>
-    {% assign resources_sorted = site.resources | sort: 'date' | reverse %}
+    {% assign allresources = site.resources | concat: site.articles %}
+    {% assign resources_sorted = allresources | sort: 'date' | reverse %}
     <!-- TODO if no tags then skip -->
+    <!-- TODO add articles to this page as well.. CONFIRM THIS WORKS -->
     {%- for resource in resources_sorted limit:3 -%}
-      {%- include resource-element.html item=resource -%}
+      {%- if resource.article == true -%}
+      {% include article-element.html item=resource %}
+      {%- else -%}
+      {% include resource-element.html item=resource %}
+      {%- endif -%}
     {%- endfor -%}
     <a class="more-button cell align-self-bottom" href="/resources">More resources</a>
     <div class="black-cat">

resources.html

@@ -10,8 +10,9 @@ <h1>Resources</h1>
   <p>A bunch of resources and references curated by me, with the goal to help others learn something new. For more frequent bursts of resources and other related content join me over on {% include external-link.html link="https://www.twitter.com/naher94/" content="Twitter" %}.</p>
 </header>
 
-<!-- collect all the unique tags from the resources -->
-{% assign alltags = site.resources | map: "tags" | uniq | sort %}
+{%- comment -%}collect all the unique tags from the resources and articles{%- endcomment -%}
+{% assign allresources = site.resources | concat: site.articles %}
+{% assign alltags = allresources | map: "tags" | uniq | sort %}
 
 <section class="cell tag-section">
   <h2 class="visually-hidden">Categories</h2>
@@ -28,7 +29,7 @@ <h2 class="visually-hidden">Categories</h2>
 
 <section class="recently-added grid-x grid-padding-x grid-padding-y cell medium-12">
   <h2 class="cell small-12">Recently Added</h2>
-  {% assign resources_sorted = site.resources | sort: 'date' | reverse %}
+  {% assign resources_sorted = allresources | sort: 'date' | reverse %}
     <!-- TODO if tags array is empty then skip as that is current logic for not showing in the list -->
     <!-- hard to test since local and deployed is not acting the same -->
     {%- for resource in resources_sorted limit:3 -%}
@@ -64,9 +65,13 @@ <h2 class="cell small-12 medium-shrink"><span class="hashtag">#</span>{{tag}}</h
       </a>
       <div class="cell small-12 medium-auto divider"></div>
     </div>
-  {% for resource in site.resources %}
+  {% for resource in allresources %}
     {% if resource.tags contains tag %}
+      {%- if resource.article == true -%}
+      {% include article-element.html item=resource css-class="medium-6 large-4" %}
+      {%- else -%}
       {% include resource-element.html item=resource css-class="medium-6 large-4" %}
+      {%- endif -%}
     {% endif %}
   {% endfor %}
   </section>