Jekyll2019-03-22T03:47:09+00:00https://kfrankc.github.io/feed.xmlkfrankcFrank - PM, Data, & IllustrationsFrankBuilding a Responsive Portfolio using Jekyll and Masonry2019-03-07T00:00:00+00:002019-03-07T00:00:00+00:00https://kfrankc.github.io/posts/2019/03/07/jekyll-masonry<figure class="">
<img src="/assets/images/blog/responsive_website.png" alt="Responsive Website" />
<figcaption>Jekyll + Masonry + imagesloaded = Responsive Portfolio.
</figcaption>
</figure>
<h2 id="background">Background</h2>
<p>My first experience using Jekyll for building a personal website was with <a href="https://github.com/academicpages/academicpages.github.io">academicpages</a>, which is an excellent theme that is mostly catered to, as you guessed, people in academia: it included many built-in <a href="https://jekyllrb.com/docs/front-matter/">front matter</a> to list papers, publications, and talks.</p>
<p>I later switched to <a href="https://mmistakes.github.io/minimal-mistakes/">Minimal Mistakes</a>, which is theme academicpages forked from. MM offered more opportunities for customizations. It was around this time when I started to think about creating a custom home page to show some of my artwork and other engineering projects. I used to have this portfolio page done in pure HTML and CSS in my <a href="https://github.com/kfrankc/kfrankc.github.io/releases">personal website v1</a>, but with Jekyll, I figured the effort to refactor will be worth it.</p>
<p>The features I wanted to implement included:</p>
<ol>
<li>Easier project entry management using static Markdown (<code class="highlighter-rouge">.md</code>) files.</li>
<li>Load tiles seamlessly in masonry format for a clean viewing experience</li>
<li>Responsive tiles that can be customized and resized for any screen dimensions</li>
</ol>
<p>I ultimately ended up using a combination of <a href="https://masonry.desandro.com/">Masonry</a> and <a href="https://imagesloaded.desandro.com/">imagesloaded</a> to achieve this. Below are the steps I took:</p>
<h2 id="set-up-minimal-mistakes">Set up Minimal Mistakes</h2>
<p>In Jekyll lingo, a portfolio page is simply a form of <a href="https://jekyllrb.com/docs/collections/">collections</a>, which serves to group related contents together. In the MM theme, <code class="highlighter-rouge">.md</code> file entries in a folder with the syntax <code class="highlighter-rouge">_<folder_name></code> can be aggregated into a single view.</p>
<p>In my case, I have a <code class="highlighter-rouge">_portfolio</code> folder with all my project/artwork entries, and I have a <code class="highlighter-rouge">portfolio-archive.md</code> file where these entries are aggreated.</p>
<h3 id="configure-portfolio-archivemd">Configure <code class="highlighter-rouge">portfolio-archive.md</code></h3>
<p><a href="https://jekyllrb.com/docs/front-matter/">Front Matter</a> is a useful configuration within a file that Jekyll will process first. MM has several features instrumented in the front matter that makes building collection pages extremely easy.</p>
<p>For example, this is the front matter in my <code class="highlighter-rouge">portfolio-archive.md</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">"</span>
<span class="na">layout</span><span class="pi">:</span> <span class="s">collection</span>
<span class="na">permalink</span><span class="pi">:</span> <span class="s">/</span>
<span class="na">collection</span><span class="pi">:</span> <span class="s">portfolio</span>
<span class="na">entries_layout</span><span class="pi">:</span> <span class="s">grid</span>
<span class="na">classes</span><span class="pi">:</span> <span class="s">wide</span>
<span class="na">author_profile</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">sort_by</span><span class="pi">:</span> <span class="s">date</span>
<span class="na">sort_order</span><span class="pi">:</span> <span class="s">reverse</span>
<span class="na">home</span><span class="pi">:</span> <span class="no">true</span>
<span class="nn">---</span>
</code></pre></div></div>
<p>We can go through each one:</p>
<ul>
<li><code class="highlighter-rouge">title</code>: I left this empty, since my home page has a masthead, and doesn’t need a title</li>
<li><code class="highlighter-rouge">layout</code>: I specify collection here to let Jekyll know that this is an aggregation page</li>
<li><code class="highlighter-rouge">permalink</code>: This page will be my home page, so I use <code class="highlighter-rouge">/</code></li>
<li><code class="highlighter-rouge">collection</code>: This specifies which folder I pull content from. As mentioned before, I have a <code class="highlighter-rouge">_portfolio/</code> folder where I store my <code class="highlighter-rouge">.md</code> project/artwork files</li>
<li><code class="highlighter-rouge">entries_layout</code>: I use <code class="highlighter-rouge">grid</code> to lay out the entries in a portfolio-like format. More information on other layouts (here](https://mmistakes.github.io/minimal-mistakes/docs/layouts/).</li>
<li><code class="highlighter-rouge">classes</code>: I use <code class="highlighter-rouge">wide</code> to give myself more width for the grid</li>
<li><code class="highlighter-rouge">author_profile</code>: MM has a nice <a href="https://mmistakes.github.io/minimal-mistakes/docs/authors/">customized author profile</a> that you can optionally include on each page.</li>
<li><code class="highlighter-rouge">sort_by</code>: I specify <code class="highlighter-rouge">date</code> values in the front matter of each entry so I can sort the grid by the most recent entry.</li>
<li><code class="highlighter-rouge">home</code>: I will cover this in <a href="#load-javascript">Load Javascript</a> section.</li>
</ul>
<p>That’s it! In fact, I have no other content in my <code class="highlighter-rouge">portfolio-archive.md</code>. This front matter is all I need to populate my content. For each of my project/artwork <code class="highlighter-rouge">.md</code> files, I include a teaser tag with a local link to the asset. This teaser image (or gif) is what will be shown in the collection.</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">header</span><span class="pi">:</span>
<span class="na">teaser</span><span class="pi">:</span> <span class="s">assets/images/portfolio/bloodflow.gif</span>
</code></pre></div></div>
<p>I have completed my first feature to manage my entries using collections in Jekyll.</p>
<p>Next, I used Masonry and imagesLoaded to finish my second feature.</p>
<h2 id="configure-masonry-and-imagesloaded">Configure Masonry and imagesLoaded</h2>
<p>One fallback of using purely MM <code class="highlighter-rouge">grid</code> layout is that the resulting tiles are not responsive to changes in orientation/screen size. I needed an external library, and Masonry was the clear choice.</p>
<p><a href="https://masonry.desandro.com/">Masonry</a> is a Javascript library that enables cascading grid layout. It places <code class="highlighter-rouge"><div></code> elements in <em>optimal</em> positions based on the available vertical space on the screen. This allows tiles with unequal lengths and widths to stack optimally on the page, creating a layout very similar to that found in Pinterest.</p>
<p>Since my tiles will be images for each of my project/artwork, I wanted them to be loaded in the browser before Masonry kicks in and adjusts them. This will avoid the <a href="https://masonry.desandro.com/layout.html#imagesloaded">image overlapping issue</a>, and the library to use here is <a href="https://imagesloaded.desandro.com/">imagesLoaded</a>.</p>
<h3 id="load-javascript">Load Javascript</h3>
<p>First, we need to load the scripts. In MM, we do this in the <code class="highlighter-rouge">custom.html</code> file under <code class="highlighter-rouge">head</code> folder in <code class="highlighter-rouge">_includes/</code>.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"/assets/js/portfolio_masonry.js"</span><span class="nt">></script></span>
</code></pre></div></div>
<p class="notice--danger"><strong>Note</strong>: since I am only using these scripts for my portfolio page, I’ve added a front matter variable called <code class="highlighter-rouge">home</code> in my <code class="highlighter-rouge">portfolio-archive.md</code>, and I’ve nested the above script tags into a <code class="highlighter-rouge">if page.home</code> and <code class="highlighter-rouge">endif</code> Ruby tag.</p>
<h3 id="instrument-masonry-and-imagesloaded">Instrument Masonry and imagesLoaded</h3>
<p>The <code class="highlighter-rouge">portfolio_masonry.js</code> file contains the Javascript code to apply Masonry on the <code class="highlighter-rouge"><divs></code> for each tile. Masonry works on a nested <code class="highlighter-rouge"><div></code> object as follows:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid-item"</span><span class="nt">></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid-item"</span><span class="nt">></div></span>
...
<span class="nt"></div></span>
</code></pre></div></div>
<p>First, create the Masonry object using <code class="highlighter-rouge">grid</code>, then indicate <code class="highlighter-rouge">grid-item</code> as the <code class="highlighter-rouge">itemSelector</code> variable:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'load'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">grid</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.grid__item'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.archive'</span><span class="p">);</span>
<span class="nx">imagesLoaded</span><span class="p">(</span><span class="nx">container</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">grid</span><span class="p">.</span><span class="nx">fadeIn</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">msnry</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Masonry</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.archive'</span><span class="p">),</span> <span class="p">{</span>
<span class="na">columnWidth</span><span class="p">:</span> <span class="mi">100</span><span class="p">,</span>
<span class="na">itemSelector</span><span class="p">:</span> <span class="s1">'.grid__item'</span><span class="p">,</span>
<span class="na">percentPosition</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">horizontalOrder</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p>I trigger this code on page load, and utilizes the imagesLoaded function to ensure I only run Masonry when all the images are loaded. There appears to be some image shifting as a result of Masonry on the images, so I made the <code class="highlighter-rouge">grid__item</code> class initially invisible, and only run the <code class="highlighter-rouge">grid.fadIn()</code> function within imagesLoaded.</p>
<h2 id="implement-responsive-tiles">Implement responsive tiles</h2>
<p>Lastly, I will make my Masonry layout responsive to various screen sizes and orientation.</p>
<h3 id="using-breakpoint">Using Breakpoint</h3>
<p>MM utilizes a tool called <a href="http://breakpoint-sass.com/">Breakpoint</a> for organized media queries. At a high level, Breakpoint allows you to quickly define variables to hold the media query. This enables you to generate variables that account for different devices and orientations.</p>
<p>I made several Breakpoint variables to adjust the width of my <code class="highlighter-rouge">grid__items</code> class, which wraps each of my portfolio items.</p>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$small</span><span class="p">:</span> <span class="p">(</span><span class="m">600px</span><span class="p">)</span> <span class="p">(</span><span class="n">orientation</span> <span class="nb">portrait</span><span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
<span class="nv">$small-landscape</span><span class="p">:</span> <span class="p">(</span><span class="m">600px</span><span class="p">)</span> <span class="p">(</span><span class="n">orientation</span> <span class="nb">landscape</span><span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
<span class="nv">$medium</span><span class="p">:</span> <span class="p">(</span><span class="m">768px</span><span class="p">)</span> <span class="p">(</span><span class="n">orientation</span> <span class="nb">portrait</span><span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
<span class="nv">$medium-landscape</span><span class="p">:</span> <span class="p">(</span><span class="m">1024px</span><span class="p">)</span> <span class="p">(</span><span class="n">orientation</span> <span class="nb">landscape</span><span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
<span class="nv">$medium-wide</span><span class="p">:</span> <span class="m">900px</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
<span class="nv">$large</span><span class="p">:</span> <span class="p">(</span><span class="m">1024px</span><span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
<span class="nv">$large-landscape</span><span class="p">:</span> <span class="p">(</span><span class="m">1200px</span><span class="p">)</span> <span class="p">(</span><span class="n">orientation</span> <span class="nb">landscape</span><span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
</code></pre></div></div>
<p>I can use these variables in my <code class="highlighter-rouge">grid__items</code> class as follows:</p>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.grid__item</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="k">@include</span> <span class="nd">breakpoint</span><span class="p">(</span><span class="nv">$small</span><span class="p">)</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="p">}</span>
<span class="k">@include</span> <span class="nd">breakpoint</span><span class="p">(</span><span class="nv">$small-landscape</span><span class="p">)</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">width</span><span class="p">:</span> <span class="m">40%</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@include</span> <span class="nd">breakpoint</span><span class="p">(</span><span class="nv">$medium</span><span class="p">)</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">width</span><span class="p">:</span> <span class="m">38%</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@include</span> <span class="nd">breakpoint</span><span class="p">(</span><span class="nv">$medium-landscape</span><span class="p">)</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">width</span><span class="p">:</span> <span class="m">27%</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@include</span> <span class="nd">breakpoint</span><span class="p">(</span><span class="nv">$large</span><span class="p">)</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">width</span><span class="p">:</span> <span class="m">35%</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@include</span> <span class="nd">breakpoint</span><span class="p">(</span><span class="nv">$large-landscape</span><span class="p">)</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">width</span><span class="p">:</span> <span class="m">30%</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="result">Result</h2>
<p>The testing in Chrome DevTools looks good:</p>
<figure class="">
<img src="/assets/images/blog/responsive_website.gif" alt="Responsive Website" />
<figcaption>A responsive portfolio
</figcaption>
</figure>FrankRelational Algebra & SQL2019-02-09T00:00:00+00:002019-02-09T00:00:00+00:00https://kfrankc.github.io/posts/2019/02/09/relational-algebra<p><a href="https://github.com/AnanthaRajuCprojects/List-of-programming-language-lists/blob/master/Query%20language.md">Query languages</a> (computer languages used to make queries in databases) are abundant in style and usage today. In 2018, Microsoft released <a href="https://azure.microsoft.com/en-us/services/data-explorer/">Azure Data Explorer</a> to GA, introducing another query language that is specifically optimized for semi-structured, unstructured, and time-series data. Even though we have many querying language options, they are all grounded in a field of mathematics called <em>relational algebra</em>.</p>
<h1 id="what-is-relational-algebra">What is Relational Algebra?</h1>
<p>Relational Algebra is an algebra where operands are defined as relations, or variables that represent relations. This is why relational algebra provides the basis for a query language in relational databases.</p>
<h1 id="the-core-relational-algebra-concepts">The Core Relational Algebra Concepts</h1>
<h2 id="union-cup">Union $\cup$</h2>
<p>Given relations $R$ and $S$, $R \cup S = \{T | T \in R \vee T \in S\}$. In SQL, this is written as</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>SELECT column1 [, column2 ]
FROM table1 [, table2 ]
[WHERE condition]
UNION
SELECT column1 [, column2 ]
FROM table1 [, table2 ]
[WHERE condition]
</code></pre></div></div>
<h2 id="intersection-cap">Intersection $\cap$</h2>
<p>Given relations $R$ and $S$, $R \cap S = \{T | T \in R \wedge T \in S\}$. In SQL, this is written as</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>SELECT column1 [, column2 ]
FROM table1 [, table2 ]
[WHERE condition]
INTERSECT
SELECT column1 [, column2 ]
FROM table1 [, table2 ]
[WHERE condition]
</code></pre></div></div>
<h2 id="difference-setminus">Difference $\setminus$</h2>
<p>Given relations $R$ and $S$, $R \setminus S = \{T | T \in R \wedge T \notin S\}$. In SQL, this is commonly written as</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>SELECT column1 [, column2 ]
FROM table1 [, table2 ]
[WHERE condition]
EXCEPT
SELECT column1 [, column2 ]
FROM table1 [, table2 ]
[WHERE condition]
</code></pre></div></div>
<p>However, a <code class="highlighter-rouge">LEFT JOIN</code> operator can also perform the same functionality.</p>
<h2 id="selection-sigma">Selection $\sigma$</h2>
<p>Given relation $R$, $\sigma_{p}(R)$ is selecting typles that satisfy predicate $p = a \theta b$ or $p = a \theta v$ from a relation $R$. $a$ and $b$ are attribute names, $v$ is a value constant, and $\theta$ is a binary operation in $\{<. \le, =, \neq, \ge, >\}$. In SQL, this is simply the <code class="highlighter-rouge">WHERE</code> keyword. Given table <code class="highlighter-rouge">R</code>:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>SELECT *
FROM R
[WHERE predicate condition]
</code></pre></div></div>
<h2 id="projection-prod">Projection $\prod$</h2>
<p>Given relation $R$, $\prod_{a_1, …, a_n}(R)$ is projecting a set obtained when the components of relation $R$ are restricted to the set $\{a_1, …, a_n\}$. In SQL, the <code class="highlighter-rouge">SELECT</code> operator performs this functionality. Given table <code class="highlighter-rouge">R</code> with attributes <code class="highlighter-rouge">a</code>, <code class="highlighter-rouge">b</code>, <code class="highlighter-rouge">c</code></p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>SELECT a, b, c
FROM R;
</code></pre></div></div>
<p><em>Fun Fact</em>: the query language from Azure Data Explorer actually has a <code class="highlighter-rouge">project</code> keyword that behaves exactly like this. Given table <code class="highlighter-rouge">R</code> with attributes <code class="highlighter-rouge">a</code>, <code class="highlighter-rouge">b</code>, <code class="highlighter-rouge">c</code>:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>R
| project a, b, c
</code></pre></div></div>
<h2 id="products-times">Products $\times$</h2>
<p>Given relations $R$ and $S$, $R \times S = \{(r,s) | r \in R and s \in S\}$. In SQL, this is known as a <code class="highlighter-rouge">CROSS JOIN</code>:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>SELECT *
FROM table1
CROSS JOIN table2;
</code></pre></div></div>
<h2 id="joins">Joins</h2>
<p>There are several joins we are interested in:</p>
<h3 id="natural-join-join">Natural Join $\Join$</h3>
<p>Given relations $R$ and $S$, $R \Join S$ is the set of all combinations of tuples in $R$ and $S$ that are equal on their common attribute names. Formally:</p>
<p>$R \Join S = \{r \cup s | r \in R \wedge s \in S \wedge \text{Fun}(r \cup s)\}$</p>
<p>In SQL, this is known as the <code class="highlighter-rouge">NATURAL JOIN</code>:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>SELECT *
FROM table1
NATURAL JOIN table2;
</code></pre></div></div>
<h3 id="theta-join-join_c">Theta Join $\Join_{c}$</h3>
<p>Given relations $R$ and $S$, $R \Join_c S$ takes the product $R \times S$, then apply $\sigma_c$ to the result.</p>
<h2 id="renaming-rho">Renaming $\rho$</h2>
<p>Given relation $R$, $\rho_{R(a_1, …, a_n}(R)$ makes the resulting relation be one with attributes $a_1, …, a_n$ and the same tuples as $R$. In SQL, the <code class="highlighter-rouge">AS</code> operator allows for remaining of attributes:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>SELECT a AS apple, b AS banana
FROM R
</code></pre></div></div>FrankLessons from 1 Year at Microsoft2018-12-28T00:00:00+00:002018-12-28T00:00:00+00:00https://kfrankc.github.io/posts/2018/12/28/lessons-microsoft<p><em>This was originally published on <a href="https://www.linkedin.com/pulse/lessons-from-1-year-microsoft-frank-chen/">LinkedIn </a>.</em></p>
<p>As 2018 comes to a close, I thought I’d share some of the lessons I learned this past year as a Program Manager at <a href="https://www.linkedin.com/company/microsoft/">Microsoft</a>. These opinions and observations are my own, and should be taken with the understanding that everyone’s professional journey is different. Some of these apply directly to the Program Management discipline, while others apply to anyone starting their first full-time job.</p>
<ol>
<li><strong>Have empathy at work.</strong> There’s more to your coworkers than their office personality and appearance. You may have just started your career, but many people have worked for a while, and even had multiple jobs in different companies. Meet them. See from their perspective. Learn from their experience. Office atmosphere is an important area of investment in every company’s HR department; in fact, there are companies whose purpose is to help build relationships with your coworkers in your own company (an example is Donut). Take the first step to get to know someone via a quick 30-minute 1:1 meeting. You can take the lead on this.</li>
<li><strong>Know what your team/organization is building, and be on that critical path.</strong> Whether you are a Dev, PM, Designer, or another discipline, you should always ensure that your work is aligned to the current or future focus of your organization. This applies to graduate students as well: you should always strive to be on the critical path of your PI/advisor.</li>
<li><strong>Assume good intentions and do your own job well.</strong> In the PM role, I’ve interacted with various individuals of different personalities: some are welcoming, some are indifferent, some are rude. Stand your ground, but also approach situations by assuming positive intentions. If you lead by example, others will too; ensure that you do your own job very well, and people will take notice.</li>
<li><strong>Give back and help others.</strong> Microsoft’s mission statement is “to empower every person and every organization on the planet to achieve more”. Satya summed up the employee culture at Microsoft very well when he said “You join here, not to be cool, but to make others cool.” A truly great person is someone who makes every person great.</li>
<li><strong>Ask questions and be humble.</strong> As a new employee, you have the added benefit of putting on your learning hat, and asking as many questions as you can. People are generally glad to talk and share their work with you, so give them the opportunity.</li>
<li><strong>Listen more, talk efficiently.</strong> Especially in a role as a PM, your job is often to listen and correctly identify concerns that customers are raising. My manager <a href="https://www.linkedin.com/in/corydelamarter/">Cory</a> puts it best: “Talking is not as much about saying something as it is about hearing something”. It is unfortunate that many people default to speaking in fast, continuous stream of words for fear of running out of time during a meeting. Many listeners appreciate more pauses when someone is talking. Listen to your listeners.</li>
<li><strong>Let your body be tired, but never your mind.</strong> You can always sleep and rejuvenate your physical strength, but mental tiredness can last for days or months. Which also means…</li>
<li><strong>Take care of your body, and take care of yourself.</strong> Gone are the college days of staying up until 2 AM and eating junk food to get by. Even if your company caters food, be selective about what you put in your body, and learn some basic life skills, such as cooking for yourself.</li>
<li><strong>Know that you will have some bad days at work and some good.</strong> Your career is a marathon, not a 100 meter sprint. Regroup & recuperate when you need to; measure yourself not in how well every single day went, but how well each month is going. Looking at your progress from a monthly perspective will also give you a clearer idea of how far you have come since day 1.</li>
<li><strong>Sleep early! (especially for those transitioning from college - I still need to do a better job at this).</strong> Sleeping earlier means you can start your day earlier, and that can be very beneficial to your productivity; as a PM, for example, you’ll have more time to dedicate on individual work before the flock of meetings take over the rest of your day.</li>
</ol>
<p>Looking forward to sleeping more & learning more in 2019!</p>FrankWhy is Kurtosis of Standard Normal Distribution 3?2018-10-29T00:00:00+00:002018-10-29T00:00:00+00:00https://kfrankc.github.io/posts/2018/10/29/normal-kurtosis-derivation<p>The Kurtosis of a random variable $X$ is the fourth moment of $X$. For a normal distribution, we often see it in the textbook as:</p>
<script type="math/tex; mode=display">\begin{align}\label{kurt}
Kurt(X) = E\left[\left(\frac{X-\mu}{\sigma}\right)^4\right] - 3
\end{align}</script>
<p>Here is my textbook’s explanation of why we subtract by 3:</p>
<blockquote>
<p>We subtract $3$ to make any Normal distribution have kurtosis $0$.</p>
</blockquote>
<p>I’ve always wondered how $E\left[\left(\frac{X-\mu}{\sigma}\right)^4\right]$ is calculated to be 3. I will attempt to derive this solution.</p>
<h2 id="assumptions">Assumptions</h2>
<p>The Normal Distribution has Probability Density Function (PDF):</p>
<script type="math/tex; mode=display">\begin{align}\label{eq1}
f(x | \mu, \sigma^2) = \frac{1}{\sqrt{2\pi \sigma^2}}e^{-\frac{(x-\mu)^2}{2\sigma^2}}
\end{align}</script>
<p>We are dealing with standard normal, so mean $\mu = 0$, and variance $\sigma^2 = 1$. We can now write Eq $\ref{eq1}$ as</p>
<script type="math/tex; mode=display">\begin{align}\label{eq2}
f(x) = \frac{1}{\sqrt{2\pi}}e^{-\frac{(x)^2}{2}}
\end{align}</script>
<p>We need to find $E\left[\left(\frac{X-\mu}{\sigma}\right)^4\right]$, which can now be written as $E[X^4]$.</p>
<h2 id="derivation">Derivation</h2>
<div>
$$
\begin{align*}
E[X^4] &= \int^{\infty}_{-\infty}x^4 f(x)dx \\
&= \frac{1}{\sqrt{2\pi}}\int^{\infty}_{-\infty}x^4 e^{-\frac{x^2}{2}}dx \\
\end{align*}
$$
</div>
<p>We will evaluate this integral via <a href="https://www.wikiwand.com/en/Integration_by_parts">integration by parts</a>. Recall that</p>
<div>
$$
\begin{align*}
\int udv = uv - \int vdu
\end{align*}
$$
</div>
<p>Let $u = x^3$, $du = 3x^2dx$, $dv = xe^{-\frac{x^2}{2}}dx$, $v = -e^{-\frac{x^2}{2}}$:</p>
<div>
$$
\begin{align*}
E[X^4] &= \frac{1}{\sqrt{2\pi}}\left(x^3 \left(-e^{-\frac{x^2}{2}}\right) - \int^{\infty}_{-\infty}\left(-e^{-\frac{x^2}{2}}\right)3x^2dx\right) \\
&= \frac{1}{\sqrt{2\pi}}\left(-x^3e^{-\frac{x^2}{2}} + 3\int_{-\infty}^{\infty}x^2e^{-\frac{x^2}{2}}dx\right)
\end{align*}
$$
</div>
<p>We can begin some evaluations of the terms here. We’ll use <a href="https://www.wikiwand.com/en/L%27H%C3%B4pital%27s_rule">L’Hôpital’s rule</a> to evaluate the first term in the parentheses, $-x^3e^{-\frac{x^2}{2}}$. We know that $e^{-\frac{x^2}{2}}$ goes to zero faster than $x^3$ goes to infinity.</p>
<div>
$$
\begin{align*}
\lim_{x\to\infty} \frac{-x^3}{e^{\frac{x^2}{2}}} &= \lim_{x\to\infty} \frac{-3x^2}{xe^{\frac{x^2}{2}}} \\
&= \lim_{x\to\infty} \frac{-6x}{x^2e^{\frac{x^2}{2}}} \\
&= \lim_{x\to\infty} \frac{-6}{x^3e^{\frac{x^2}{2}}} \\
&= 0
\end{align*}
$$
</div>
<p>Therefore, this term is $0$. We are now left with:</p>
<div>
$$
\begin{align*}
E[X^4] &= \frac{1}{\sqrt{2\pi}}\left(3\int_{-\infty}^{\infty}x^2e^{-\frac{x^2}{2}}dx\right) \\
&= 3\left(\frac{1}{\sqrt{2\pi}}\int_{-\infty}^{\infty}x^2e^{-\frac{x^2}{2}}dx\right)
\end{align*}
$$
</div>
<p>Notice that $\left(\frac{1}{\sqrt{2\pi}}\int_{-\infty}^{\infty}x^2e^{-\frac{x^2}{2}}dx\right)$ is actually the second moment $E[X^2]$, or as we know it, the <em>variance</em> of the standard normal distribution. You may recognize $Var(X) = E[X^2] - [EX]^2$, with the second term being the mean ($\mu$) squared. For a standard normal distribution, with $\mu = 0$, $Var(x) = E[X^2]$. Additionally, we know that for a standard normal, the variance $\sigma^2 = 1$. Therefore:</p>
<div>
$$
\begin{align*}
E[X^4] &= 3\left(\frac{1}{\sqrt{2\pi}}\int_{-\infty}^{\infty}x^2e^{-\frac{x^2}{2}}dx\right) \\
&= 3 \cdot E[X^2] \\
&= 3 \cdot Var(X) \\
&= 3 \cdot (1) \\
&= 3
\end{align*}
$$
</div>
<p>$E[X^4]$ is shown to be 3, and we are now done. As a sanity check, we can use R to do a Monte Carlo simulation of a standard normal distribution and calculate the kurtosis:</p>
<div class="language-R highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Standard Normal Distribution</span><span class="w">
</span><span class="n">set.seed</span><span class="p">(</span><span class="m">123</span><span class="p">)</span><span class="w">
</span><span class="n">n.sample</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">rnorm</span><span class="p">(</span><span class="n">n</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">100000</span><span class="p">,</span><span class="w"> </span><span class="n">mean</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">0</span><span class="p">,</span><span class="w"> </span><span class="n">sd</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">1</span><span class="p">)</span><span class="w">
</span><span class="c1"># Kurtosis</span><span class="w">
</span><span class="n">library</span><span class="p">(</span><span class="n">moments</span><span class="p">)</span><span class="w">
</span><span class="n">kurtosis</span><span class="p">(</span><span class="n">n.sample</span><span class="p">)</span><span class="w"> </span><span class="c1"># we get 2.990068</span><span class="w">
</span></code></pre></div></div>
<p>Close enough! $\blacksquare$</p>FrankDeriving the Normal Distribution2018-10-19T00:00:00+00:002018-10-19T00:00:00+00:00https://kfrankc.github.io/posts/2018/10/19/normal-dist-derivation<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Normal_Distribution_PDF.svg/525px-Normal_Distribution_PDF.svg.png" alt="Normal Distribution" /></p>
<p>In every introductory statistics class, we learned about the normal distribution, which has Probability Density Function (PDF):</p>
<script type="math/tex; mode=display">\begin{align}\label{eq1}
f(x | \mu, \sigma^2) = \frac{1}{\sqrt{2\pi \sigma^2}}e^{-\frac{(x-\mu)^2}{2\sigma^2}}
\end{align}</script>
<p>This looks like a fairly complicated equation, but the resulting graph (shown above) has some very cool properties (integrates to 1, represents real-valued random variables whose distributions are not known etc…). I’ve always wondered how this is derived, and I finally found some answers via great <a href="https://www.youtube.com/watch?v=cTyPuZ9-JZ0">YouTube videos</a> and <a href="https://math.stackexchange.com/questions/384893/how-was-the-normal-distribution-derived">online forums</a>. I will give an overview of the derivation here, based on YouTuber Mathoma’s amazing video (linked above).</p>
<h2 id="part-1-the-theory">Part 1: The Theory</h2>
<p>Mathoma gave a great analogy about how to understand this distribution: imagine you are throwing darts on a polar coordinate system, with the goal of hitting the center \((0,0)\). Now, given an arbitrary dart landing on coordinate \((r, \theta)\), we can also say that the coordinate is \((x, y)\) if we convert from polar to cartesian.</p>
<p>We have to make a couple assumptions here before moving forward. First, we assume that \(x\) and \(y\) are statistically independent. Second, we assume that the PDF is rotationally invariant, which means the distribution of where my dart lands only depends on the distance \(r\), of the dart to the center.</p>
<p>With those assumptions, I can define PDF \(\varphi(r) = f(x)f(y)\). This can be rewritten as</p>
<script type="math/tex; mode=display">\begin{align}\label{eq2}
\varphi(\sqrt{x^2 + y^2}) = f(x)f(y)
\end{align}</script>
<p>Next, suppose \(y=0\). We will then have</p>
<div>
$$
\begin{align*}
\varphi(\sqrt{x^2 + 0^2}) &= f(x)f(0)\\
\varphi(x) &= f(x)\lambda, \text{ where $\lambda$ is a constant}
\end{align*}
$$
</div>
<p>Plugging this back into Eq \ref{eq2}, we have</p>
<script type="math/tex; mode=display">\begin{align}\label{eq3}
\lambda f(\sqrt{x^2 + y^2}) = f(x)f(y)
\end{align}</script>
<p>Next, we will determine the expression for $f(x)$. First, we rewrite Eq \ref{eq3} as</p>
<script type="math/tex; mode=display">\begin{align*}
\frac{\lambda f(\sqrt{x^2 + y^2})}{\lambda^2} = \frac{f(x)}{\lambda} \frac{f(y)}{\lambda}
\end{align*}</script>
<p>For simplicity in analyzing the equation, define $g(x) = \frac{f(x)}{\lambda}$. We now have</p>
<script type="math/tex; mode=display">\begin{align}\label{eq4}
g(x)g(y) = g(\sqrt{x^2 + y^2})
\end{align}</script>
<p>What kind of function should $g$ be so that Eq \ref{eq4} is valid? Upon some inspection, we can see that $g$ should be an <strong>exponential function</strong>. Example: suppose we have $h(x) = e^x$, then $h(x)h(y) = e^xe^y = e^{x+y} = h(x+y)$. Similarly, let $g(x) = e^{Ax^2}$, where $A$ is a constant.</p>
<div>
$$
\begin{align*}
g(x)g(y) &= e^{Ax^2}e^{Ay^2}\\
&= e^{A(x^2 + y^2)}\\
&= e^{A(\sqrt{x^2 + y^2})^2}\\
&= g(\sqrt{x^2 + y^2})
\end{align*}
$$
</div>
<p>In turn, our PDF $f$ should be</p>
<script type="math/tex; mode=display">\begin{align}\label{eq5}
f(x) = \lambda e^{Ax^2}
\end{align}</script>
<p><a href="https://www.desmos.com/calculator/hhsa3qpffi">Plotting this equation out</a> with $A=-1$ (more on why $A$ is negative later) and $\lambda=1$, we see that it takes a gaussian form!</p>
<h2 id="part-2-massaging-the-equation">Part 2: Massaging the Equation</h2>
<p>The remainder of this derivation serves to massage Eq \ref{eq5} into the class of gaussians we are interested in, the normal gaussian.</p>
<p>First, we introduce a constraint on the function: since we are modeling probability, it makes sense for $f(x)$ to integrate to $1$.</p>
<script type="math/tex; mode=display">\begin{align*}
\int_{-\infty}^{\infty}f(x)dx = 1
\end{align*}</script>
<p>Instead of using constant $A$, we will set $A = -h^2$, where $h$ is a constant variable. There are several reasons for this: First, it makes sense for $A$ to be negative, because we want this function (which models the probability) to decrease as we move to $+\infty$. Second, the $-h^2$ form will help when we do the integration.</p>
<p>We determine the value of $h^2$:</p>
<div>
$$
\begin{align*}
\int_{-\infty}^{\infty}\lambda e^{-h^2x^2}dx &= 1\\
\lambda\int_{-\infty}^{\infty}e^{-h^2x^2}dx &= 1\\
\end{align*}
$$
</div>
<p>Perform <a href="https://www.wikiwand.com/en/Integration_by_substitution">u-substitution</a>, with $u = hx$, $du = hdx$, and $dx = \frac{1}{h}du$. We now get</p>
<script type="math/tex; mode=display">\begin{align}\label{eq6}
\frac{\lambda}{h}\int_{-\infty}^{\infty}e^{-u^2}du = 1
\end{align}</script>
<p>Interestingly, the integral in Eq \ref{eq6} is actually famous (it has a name!). The <a href="https://en.wikipedia.org/wiki/Gaussian_integral">Gaussian integral</a>, also known as the Euler-Poisson integral, is equal to $\sqrt{\pi}$ (refer to link for the integral computation).</p>
<p>We can now compute $h^2$:</p>
<div>
$$
\begin{align*}
\frac{\lambda}{h}\sqrt{\pi} &= 1\\
h &= \lambda \sqrt{\pi}\\
h^2 &= \lambda^2\pi
\end{align*}
$$
</div>
<p>Eq \ref{eq5} becomes</p>
<script type="math/tex; mode=display">\begin{align}\label{eq7}
f(x) = \lambda e^{-\pi \lambda^2x^2}
\end{align}</script>
<p>If we plot $f(x)$ using different $\lambda$ values, we see that as $\lambda$ increases, the variance $\sigma^2$ decreases, since more of the area is accumulated at $x=0$. See plots for <a href="https://www.desmos.com/calculator/lszecvqlgt">$\lambda=1$</a>, <a href="https://www.desmos.com/calculator/jpwcwodqef">$\lambda=2$</a>, <a href="https://www.desmos.com/calculator/uzdhdukutz">$\lambda=3$</a> as examples.</p>
<p>Next, we need to find the relationship between $\lambda$ and variance $\sigma^2$. From definition of <a href="https://www.wikiwand.com/en/Variance">variance</a>, we see that $Var(X) = E[(X - \mu)^2]$. In our case, $\mu$ is 0, so we have:</p>
<div>
$$
\begin{align*}
Var(x) = \sigma^2 &= \int_{-\infty}^{\infty}x^2 \lambda e^{-\pi \lambda^2x^2}dx \\
&= \lambda \int_{-\infty}^{\infty} x \cdot x \cdot e^{-\pi \lambda^2x^2}dx
\end{align*}
$$
</div>
<p>We will evaluate this integral via <a href="https://www.wikiwand.com/en/Integration_by_parts">integration by parts</a>. Recall that</p>
<script type="math/tex; mode=display">\begin{align*}
\int udv = uv - \int vdu
\end{align*}</script>
<p>Let $u = x$, $du = dx$, $dv = xe^{-\pi \lambda^2x^2}dx$, $v = -\frac{1}{2\pi\lambda^2}e^{-\pi \lambda^2x^2}$:</p>
<div>
$$
\begin{align*}
Var(x) = \sigma^2 &= \lambda \left(x\left(-\frac{1}{2\pi\lambda^2}e^{-\pi \lambda^2x^2}\Biggr|_{-\infty}^{\infty}\right) - \int_{-\infty}^{\infty}\left(-\frac{1}{2\pi\lambda^2}e^{-\pi \lambda^2x^2}\right)dx\right)\\
&= \lambda \left((0) + \int_{-\infty}^{\infty}\frac{1}{2\pi\lambda^2}e^{-\pi \lambda^2x^2}dx\right)\\
&= \frac{1}{2\pi\lambda^2}\int_{-\infty}^{\infty}\lambda e^{-\pi \lambda^2x^2}dx
\end{align*}
$$
</div>
<p>The reason we switched the position of $\lambda$ and $\frac{1}{2\pi\lambda^2}$ is so we can massage the integral to be the form of the gaussian PDF, which we know integrates to 1. Now, with the equation simplified, we can solve for $\lambda$ in terms of $\sigma^2$.</p>
<div>
$$
\begin{align*}
\sigma^2 &= \frac{1}{2\pi\lambda^2}\\
\lambda^2 &= \frac{1}{\sigma^2 2\pi}\\
\lambda &= \frac{1}{\sqrt{2\pi\sigma^2}}
\end{align*}
$$
</div>
<p>$\lambda$ and $\sigma$ are inversely proportional, as expected. We can plug in our result here back into Eq \ref{eq7}:</p>
<div>
$$
\begin{align}\label{eq8}
f(x) &= \frac{1}{\sqrt{2\pi\sigma^2}}e^{-\pi \left(\frac{1}{(\sqrt{2\pi\sigma^2})^2}\right)x^2}\nonumber\\
&= \frac{1}{\sqrt{2\pi\sigma^2}}e^{-\frac{x^2}{2\sigma^2}}
\end{align}
$$
</div>
<p>We are almost done. The above equation has mean $\mu = 0$, but if we want to represent $f(x|\mu, \sigma^2)$, we need to add in $f(x-\mu)$. Therefore, our general PDF equation for the normal distribution is:</p>
<script type="math/tex; mode=display">\begin{align}\label{eq9}
f(x | \mu, \sigma^2) = \frac{1}{\sqrt{2\pi \sigma^2}}e^{-\frac{(x-\mu)^2}{2\sigma^2}}
\end{align}</script>
<p>Eq \ref{eq9} matches Eq \ref{eq1}, and we are now done. $\blacksquare$</p>FrankEnabling MathJax2018-10-09T00:00:00+00:002018-10-09T00:00:00+00:00https://kfrankc.github.io/posts/2018/10/09/mathjax<p>It’s cool to enable LaTeX rendering on blog posts. I found this script and added to <code class="highlighter-rouge">_includes/head/custom.html</code>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/x-mathjax-config"</span><span class="nt">></span>
<span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Config</span><span class="p">({</span>
<span class="na">TeX</span><span class="p">:</span> <span class="p">{</span>
<span class="na">equationNumbers</span><span class="p">:</span> <span class="p">{</span>
<span class="na">autoNumber</span><span class="p">:</span> <span class="s2">"AMS"</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="na">tex2jax</span><span class="p">:</span> <span class="p">{</span>
<span class="na">inlineMath</span><span class="p">:</span> <span class="p">[</span> <span class="p">[</span><span class="s1">'$'</span><span class="p">,</span><span class="s1">'$'</span><span class="p">],</span> <span class="p">[</span><span class="s2">"</span><span class="err">\\</span><span class="s2">("</span><span class="p">,</span><span class="s2">"</span><span class="err">\\</span><span class="s2">)"</span><span class="p">]</span> <span class="p">],</span>
<span class="na">displayMath</span><span class="p">:</span> <span class="p">[</span> <span class="p">[</span><span class="s1">'$$'</span><span class="p">,</span><span class="s1">'$$'</span><span class="p">]</span> <span class="p">],</span>
<span class="na">processEscapes</span><span class="p">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nt"></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="err"> </span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML'</span> <span class="na">async</span><span class="nt">></script></span>
</code></pre></div></div>
<p>Now I can write LaTeX!</p>
<script type="math/tex; mode=display">x = {-b \pm \sqrt{b^2-4ac} \over 2a}</script>FrankUCLA Engineering Commencement Speech2017-07-18T00:00:00+00:002017-07-18T00:00:00+00:00https://kfrankc.github.io/posts/2017/07/18/ucla-engr-commencement-speech<p><em>This was originally published on <a href="https://medium.com/@kfrankc/2017-ucla-engineering-commencement-speech-eac302bca942">Medium</a>.</em></p>
<p>On June 17, 2017, I had the honor to speak about what being an Engineer means to me in front of 10,000+ people in <a href="https://www.wikiwand.com/en/Pauley_Pavilion">Pauley Pavilion</a>, at the 2017 UCLA Engineering Commencement for PhDs, Masters, and Bachelors degree recipients. As the Commencement Student Speaker, I wanted to find a voice that resonates with all Engineers, and so I focused on the qualities that applies to all of us moving forward: Mentorship. Learning. Community.</p>
<blockquote>
<p>“Power comes not from knowledge kept, but from knowledge shared.”” — Bill Gates</p>
</blockquote>
<p>Likewise, I believe that shared knowledge is very powerful, so I have provided my full commencement speech below! The full video of my speech is on YouTube <a href="https://www.youtube.com/watch?v=wr6u5Q-SZRo&feature=youtu.be&t=1h59m20s">here</a> (starts at 1:59:20).</p>
<hr />
<p>Good afternoon, friends, family, UCLA engineering faculty, and of course, the UCLA Engineering Class of 2017!</p>
<p>Tomorrow is Father’s Day, so I wanted to thank my dad, and all the fathers out there in this stadium. Thank you!</p>
<p>And now, to the graduates: Congratulations on this phenomenal achievement. It is absolutely amazing that we have the opportunity to celebrate our commencement in the legendary Pauley Pavilion. I had a lot of great memories in this space: cheering in the student section during Basketball games and Gymnastics meets, watching my friends perform at UCLA’s annual Spring Sing Talent Show, dancing for 26 hours non-stop at Dance Marathon, and lastly, organizing an event here that is very special to me: LA Hacks.</p>
<p>LA Hacks is a hackathon, a competition where the goal is to build innovative products within the span of 36 hours. The LA Hacks team has always believed that hackathons inspire the next generation of students to pursue STEM related fields; I was inspired to major in Computer Science after attending my first hackathon; While choosing my major was straightforward for me, I found myself constantly trying to answer the question: “What does being an engineer mean to me?”</p>
<p><strong>Engineer</strong>.</p>
<p>When you hear the word ‘Engineer’, what is the first image, or word, or description you think of? Now I know we are all proud to be graduating engineers, and I am sure some of us will move on to make a breakthrough in the STEM cell research, develop new synthetic materials, create the next unicorn startup, send a team of astronauts to new planets and beyond, or construct a brand-new transportation system that can finally solve LA’s traffic. In fact, that might be what you all thought about: the technical problems your engineering major can solve.</p>
<p>When I hear the word Engineer, these are the three universal things I see:</p>
<p><strong>First, I see MENTORSHIP</strong>. There continues to be a large barrier of entry for STEM related fields, especially engineering. As we move on to industry, graduate school, or other fields of work, we have the power to be advocates for the next generation of engineers. Bill Gates once said “Power comes not from knowledge kept but from knowledge shared”, and this resonated with me every week in my CS 88S class, an undergraduate seminar I taught on cybersecurity. The class was open to any student, no programming or CS background required, just an interest for a more cybersecurity-aware society. The first step to breaking down the barrier to STEM is to spark passion, and that cannot happen without mentorship. Being an engineer is about helping others, spreading knowledge, and using your experience to guide people in doing their best.</p>
<p><strong>Next, I see LEARNING</strong>. We received two forms of education here at UCLA. In the classrooms and lectures, we learned about engineering methodologies — all the core math, physics, and chemistry that we have grown to love. However, in the college environment and student body, we became aware about our field’s gender, intersectionality, and diversity issues. Only when we are open to learning new ideas will we understand the problems that lie ahead, and in turn, what we need to do to solve them. Learning does not stop once we leave college; in fact, learning is a lifelong endeavor, an intellectual growth way beyond university. It is up to us to grow as individuals, learn with each other, and live those moments well.</p>
<p>This leads me to my last observation: <strong>I see a COMMUNITY</strong>. There are more than 40 UCLA engineering student organizations. Some cater to specific majors, some welcome any type of engineering, but they all have one theme in common: they build community, a supportive group of individuals who treat each other equally and with respect. We did not make it to this day by ourselves alone. At some point or another, we all had our community to fall back on, to support us, and to carry us to this day! While engineers around the world have made significant technological advancements, such as self-driving cars, bionic limbs, and reusable rockets, we have yet to resolve key issues in our very own community: gender discrimination and racial inequality in the workplace. We were able to build such a great engineering community here at UCLA, now it is our time to help make that happen outside of the college campus.</p>
<p><strong>Engineer</strong>.</p>
<p>A single word, now with a deeper meaning than before: Mentorship. Learning. Community. That is what being an engineer means for me. Let us all not only keep these three qualities in mind, but also bring them to reality in our own respective fields! Today, we graduate; but tomorrow, while we all have our own path to follow, we have a collective responsibility to uphold our understanding of what being an Engineer means to us, to our society, and to the future we will help create! Thank you!</p>Frank