Joseph Rex's website - Portfolio, Resume, Designs, and Publicationsvoyaging the boundaries of interfaces and interactions2022-04-18T13:30:25Zhttps://www.josephrex.meJoseph RexJourney to my first home2022-04-18T13:30:25Zhttps://www.josephrex.me/journey-to-my-first-home/<p>As I hit publish on this, my wife and I just closed the deal on the purchase
of our first home. We both do our best to make well planned decisions in most cases,
but the decision to buy a home was quite impulsive and definitely the best
impulsive decision we could make (at least we think so for now).</p>
<p>As I hit publish on this, my wife and I just closed the deal on the purchase
of our first home. We both do our best to make well planned decisions in most cases,
but the decision to buy a home was quite impulsive and definitely the best
impulsive decision we could make (at least we think so for now).</p>
<figure>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/house-front_ja74kv.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/house-front_ja74kv.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/house-front_ja74kv.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/house-front_ja74kv.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/house-front_ja74kv.jpg" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/house-front_ja74kv.jpg" />
<img src="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/house-front_ja74kv.jpg" alt="Front view of the house" />
</picture>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/house-back_v4beoj.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/house-back_v4beoj.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/house-back_v4beoj.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/house-back_v4beoj.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/house-back_v4beoj.jpg" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/house-back_v4beoj.jpg" />
<img src="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/house-back_v4beoj.jpg" alt="Back view of the house" />
</picture>
<figcaption>Front and back of the house</figcaption>
</figure>
<p><strong>Detail:</strong> 1860sqft, 4 beds, 2 baths, an attic office, 2-car garage, central air,
75% finished basement.</p>
<p>I’ll start with the detail of the home purchase and come back to how we ended
up deciding to buy a house.</p>
<p>In February 2022 we started looking at houses with a real estate agent we had
worked with in our past endeavors to purchase an investment property. She is
an amazing agent that listens to our needs and gets us to see the houses that
meet our descriptions and goals.</p>
<p>At the start of the search, my goal was to purchase a home we can pay off in 10
years or less. This is contrary to popular advice to leverage 30-year fixed loans
and we had come to this conclusion because it is what best fits into our bigger
financial plan. I would choose a 30-year fixed for an investment property but
for our residential property, I like the idea of transitioning from equity to
full ownership much faster while also paying a lot less on interest.</p>
<p>We started by looking at relatively cheaper homes. The problem with that while searching
within a zip code that has very low crime rate, good school district, and other
beautiful homes is that a lot of our results were properties in really bad shape for
fixer-upper. I had thought the condition of the houses made for less competition but
I had no idea these were gold mine to cash investors. They ate them up as they got
listed. Another thing with these kind of homes was that my wife was not as excited about
them as I was. She had a very valid concern which is that with our lease ending in June,
closing on one of these even as early as in April will mean we have to spend a lot more
money upfront to get it ready for move in. While I like the idea of spending money
upfront and having less mortgage, my plan there was not practical enough. It would be
a big struggle.</p>
<p>Our next step was to increase the amount on our pre-approval letter. A little detail
I almost skipped is that the hunt for fixer-upper homes also meant putting aside
our preferred lender with better perks for lenders offering renovation loans. We were
eventually able to lock a 15-year fixed with mortgage we can afford at 3.375% rate using
the lender we preferred. Going 30-year would make us end up paying up to 47% more of the
purchase price at 4.25% rate. The only reason why I would want that option is if we were
buying a multi-family where our mortgage payment is split with the tenants or 100% on
rent from tenants. But we didn’t want that either.
We want this to be a home that will be occupied just by us.</p>
<p>With the change in direction, the biggest obstacles were not the cash buyers anymore
but it was still a competitive market (and still is at the time of writing). Viewing
homes can be fun but it gets tiring really quickly if you are serious about buying.
We put in a couple offers on different homes without getting accepted. Then we found
a house we really loved. It was the first home to spark joy in both of our eyes. It
was move-in ready and had a lot of nice things, but the sellers had requested that we
waive inspection contingency. We were going to do this because of how much we wanted it.</p>
<p>Despite putting about $25,000 above listing price and agreeing to purchase other
things the seller wanted to sell with the house, we still didn’t get our offer accepted.</p>
<p>At the time it didn’t feel like it, but this was a good thing in 2 ways. First, we did
not have to go with a house that required us to waive inspection as we might have been
met with some problems later. Second, it provoked me enough to seek a desperate way to
win the competition the next time we put in an offer. I learned all I could about
escalation clause.</p>
<h2 id="using-an-escalation-clause" tabindex="-1">Using an escalation clause</h2>
<p>An escalation clause gives a buyer room for counter offer in a market that is not
set up for counter offers by default. It does so by allowing the buyer to make offer
with 3 prices.</p>
<ul>
<li>The offer amount</li>
<li>The escalation amount</li>
<li>The maximum amount</li>
</ul>
<p>The offer amount is the initial offer we’re putting in for the house. For someone with no
plan for an escalation clause, they may try to win the competitive market by putting in a
very high amount. With an escalation clause, this initial offer can be the same as the
listing price. If it turns out the competition on the property is not as high as expected,
you may end up purchasing at the listing price.</p>
<p>The escalation amount is an amount you are willing to pay over any other competitive offer.
Assuming a house is listed at $100,000 and your initial offer is the same as listing price,
if the highest offer received by the seller is $120,000, you can have an escalation amount
of $2000 that places your offer over that highest offer as $122,000.</p>
<p>The maximum amount is the highest amount you are willing to go up to. Using the same example
of the $100,000 listed property, you could decide to set your maximum to $150,000 which means
it is the highest amount you are willing to pay. If for any reason someone offers more than
that, they are free to have the property.</p>
<hr />
<p>Our first offer with an escalation clause is this house we acquired. It proved its
effectiveness and I don’t think I will ever go back on using an escalation clause for every
property purchase I am involved in.</p>
<h2 id="deciding-to-buy-a-house" tabindex="-1">Deciding to buy a house</h2>
<p>I had described our decision to buy a house as impulsive in the beginning of this post
because we never knew we would be looking to buy a house as of January 2022. As occupants of a
duplex, our relationship with our last couple neighbors have been great and we liked the idea of
only having to worry about rent and a few bills. Unlike with apartments, certain housekeeping
duties fall on the occupants of multi-family housing. Things like snow shoveling, lawn mowing,
taking out the trash to the curb. These things can be really easy things to get done if
everyone in all units play their parts and respect the efforts of each other.
That was the case for us until a recent neighbor.</p>
<p>The big question then became: <em>why do all the housekeeping with neighbors that
hardly contribute when we can own a home and do it for just ourselves?</em></p>
<p>Things in our unit are beginning to fall apart as our landlord like many others chose to
opt for cheapness over durability. We knew we were due to move and we were considering renting
a single-family property but the cost of rent for most good single-family properties in the
neighborhoods we wanted was just too high that it didn’t make much sense to die on the hill of
renting. Thanks to our savings and a big tax return this year, we were instantly ready to get
into the housing market as we decided to buy.</p>
<p>Today, I think back to living in a house in Nigeria where the bathroom was so bad that I’d
rather go to a restaurant like I needed to buy a meal when I had to go for number 2.
This may not even be relatable to the poorest class of people in the US. In Nigeria we called
these kind of apartments FACE-ME-I-SLAP-YOU where up to 10 units share a single bathroom<sup class="footnote-ref"><a href="https://www.josephrex.me/journey-to-my-first-home/#fn1" id="fnref1">[1]</a></sup>.</p>
<p>Luckily, my first place of residence in the US was in a nice neighborhood, with an awesome
landlord. I had met him through Facebook while I was in Nigeria planning my travel. Being
in a country with no family and having a landlord that was willing to discount my rent in exchange
for me watering the plants and taking the trash to the curb was such a gift.
He also gave me a used air conditioner for free when summer heat was unbearable.</p>
<p>It feels unreal to think all that journey led here so I’m grateful for everyone that has played
a role in that. Now I guess I’m a homeowner? I can’t wait to turn this home into another art medium
through remodeling and decorations.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>You are probably trying to picture what this looks like if you’ve never lived in Nigeria. I’m
sure it is worse than your mental picture. That is why I had to prioritize moving my parents out of
there before thinking about buying a home for myself. <a href="https://www.josephrex.me/journey-to-my-first-home/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Setting up a family email address2022-03-20T19:42:26Zhttps://www.josephrex.me/setting-up-a-family-email-address/<p>Marriages and families share a lot of similarities with businesses. One of the major similarities is
information management. My wife and I join on a lot of things like finances, and a lot of other
decisions. I might be the only information nerd in the relationship but I do like for all the information
that concerns us to be easily accessible to her too.</p>
<p>Marriages and families share a lot of similarities with businesses. One of the major similarities is
information management. My wife and I join on a lot of things like finances, and a lot of other
decisions. I might be the only information nerd in the relationship but I do like for all the information
that concerns us to be easily accessible to her too.</p>
<p>In my work role as a software engineer, we forward all engineers emails that are sent to the engineering
email address that is something like: <code>engineering@company.abc</code>. This keeps everyone informed on all
relevant engineering emails and prevents oversight that may occur from a single person monitoring that
email address.</p>
<p>I sought out to set up something like this for my family that currently only consists of me and my wife.
We could take the route of setting up a Google workspace like most businesses and this may end up being
a very straightforward process. However, I prefer not to spend money on this as unlike businesses, we
make income not revenue at the time of this writing.</p>
<p>We could do this for free with Gmail but it is not so straightforward as paid solutions may be.</p>
<h2 id="using-a-gmail-address-to-forward-email-to-all-family-members" tabindex="-1">Using a Gmail address to forward email to all family members</h2>
<p>Gmail’s forwarding settings allows you forward to a single different email address by default as shown below:</p>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/gmail-forwarding_wer5hq.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/gmail-forwarding_wer5hq.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/gmail-forwarding_wer5hq.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/gmail-forwarding_wer5hq.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/gmail-forwarding_wer5hq.jpg" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/gmail-forwarding_wer5hq.jpg" />
<img src="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/gmail-forwarding_wer5hq.jpg" alt="gmail forwarding settings tab" />
</picture>
<p>In addition to the forwarding settings, there is a filter settings that lets you filter what you want forwarded.
If you decide you only want a subset of your emails on the family email address to go to that designated email
address, you set up a filter.</p>
<p>Since we can’t add more email addresses to forward emails to other family members but we can add as many filters
as we like, we are able to use filters to forward to more addresses.</p>
<p>To do this, go to the <strong>Filters and Blocked Addresses</strong> tab in the settings, create a new filter and re-enter the
family’s email address in the <code>To:</code> field.</p>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/create-gmail-filter_tgeelq.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/create-gmail-filter_tgeelq.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/create-gmail-filter_tgeelq.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/create-gmail-filter_tgeelq.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/create-gmail-filter_tgeelq.jpg" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/create-gmail-filter_tgeelq.jpg" />
<img src="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/create-gmail-filter_tgeelq.jpg" alt="Gmail filter settings tab" />
</picture>
<p>after <strong>Create filter</strong> is clicked, on the next screen to enter what action the filter should trigger, enter
an email address to forward it to</p>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/gmail-filter-action_tfbwzs.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/gmail-filter-action_tfbwzs.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/gmail-filter-action_tfbwzs.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/gmail-filter-action_tfbwzs.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/gmail-filter-action_tfbwzs.jpg" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/gmail-filter-action_tfbwzs.jpg" />
<img src="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/gmail-filter-action_tfbwzs.jpg" alt="Gmail filter action" />
</picture>
<p>This process can be repeated for as many family members as needed.</p>
<h2 id="habits-for-maintaining-a-family-email-address" tabindex="-1">Habits for maintaining a family email address</h2>
<p>A family email address represent its own entity and none of the family members’. This means when referring to
any family member, regardless of if they are the ones writing an email through it, it should address all
the members of the family as third party. The pronouns for this family email address may include we/our.</p>
<p>Here is an example of an email from the family email written by Joseph and talks about him.</p>
<blockquote>
<p>Hi consultant,</p>
<p>We are interested in signing this deal we agreed upon. We have drafted an agreement letter
that Joseph will drop off at your office Tomorrow.</p>
<p>–</p>
<p>Rex family</p>
<p>[a list of all family members]</p>
<p>[include their phone numbers and email addresses]</p>
</blockquote>
<p>Since we want all parties of the family involved in this email to get both the emails sent to the family address
and from the address, the first part has been solved with our forwarding set up. Each family member will have to
be BCC’d by the person sending from the family account. A BCC is preferred over CC to prevent a <em>reply-all</em> from
the recipient that will send the email twice to all family members (one from the CC, and another through the forwarding).</p>
<p>This is how we communicate with contractors, consultants, realtors, accountants, and more in my household
and we are happy that the process feels automatic in the distribution of information.</p>
<p>If you are trying this out for the first time or have some other method for family information distribution,
please leave your thoughts and ideas in the comments.</p>
Ban embed scripts2022-01-07T04:50:19Zhttps://www.josephrex.me/ban-embed-codes/<p>Owning and managing a blog of your own offers a feeling of complete control over content
decision in a world where majority of content is on social media platforms. My favorite
part of it is that I get to decide how good the experience will be for my content consumers.</p>
<p>Owning and managing a blog of your own offers a feeling of complete control over content
decision in a world where majority of content is on social media platforms. My favorite
part of it is that I get to decide how good the experience will be for my content consumers.</p>
<p>If like me you have an affinity for creating usable, accessible, and performant experiences,
your personal website is one of the best places to practice being empathetic about your users.
I recently read Jeremy Keith’s <a href="https://adactio.com/articles/18676">ain’t no party like a third party</a>
and it aligned mostly with some thoughts I’ve been having recently for my website. While I may
understand a business product’s reliance on third party scripts, I think a lot more people should
accomodate less to none of them in their personal blogs.</p>
<p>Your audience on every other platform give up their rights to complete data privacy by being on
those platforms. If some of your audience are more paranoid to the data mining by these social
media websites, it is on you to provide that safety when they come on yours. The use of third-party
scripts to embed content gives up their safety.</p>
<p>I will admit I still use Google Analytics on this website because I still care about analyzing
my traffic and I am not sure I will ever make the time to roll out my own analytics solution.
A part of me feels guilty for this but at the same time I feel I can make up for it by
confidently assuring my website visitors that it’s the only third-party script they will get here.
Perhaps, some day I will find an alternative or grow beyond a need for site analytics.
In his article, Jeremy said:</p>
<blockquote>
<p>Just take a minute to consider the implications of that: any third-party script on your site is allowing someone else to execute code on your web pages. That’s astonishingly unsafe.</p>
</blockquote>
<p>I’m deciding to focus only on content embed scripts here as they not only potentially jeopardize your
user’s privacy, they also reduce the performance of your website, affect your layout, and cause inconsitencies.</p>
<p>Let’s consider twitter embeds. By adding one to your website from their <a href="https://publish.twitter.com/">https://publish.twitter.com</a>, you include
a script with a size that probably didn’t undergo your performance budget audit. The script could slow down your
website for your users, it could alter the experience they get by causing a <abbr title="Flash of Unstyled Content">FOUC</abbr>,
and trigger a <a href="https://web.dev/cls">cumulative layout shift</a>.</p>
<p>Instead of using twitter’s embed, you can make use of their APIs to embed tweets tailored for visitors of your website. Here’s an example:</p>
<div style="--mx:auto;--my:2rem;--p:2rem;--w:min(400px, 80%);--bg:rgb(100 100 100/.06);--roundness:.5rem;">
<div style="--d:flex;--justify_content:space-between;">
<div style="--d:flex;--gap:1rem;">
<div>
<img src="https://pbs.twimg.com/profile_images/478908129724223488/TcJMj5mb_normal.jpeg" class="no-zoom" width="48" height="48" alt="" style="--roundness:50%;" />
</div>
<div>
<strong>Chris Ferdinandi ⚓️</strong>
<div style="--font_sz:1.4rem;--opacity:.7">@ChrisFerdinandi</div>
</div>
</div>
</div>
<div style="--py:1.5rem;--word_break:break-word;">
<p>I also finally have an email signup form that works without JavaScript, which had always bothered me about the one I'd created for MailChimp.</p>
</div>
<time datetime="2022-01-06T21:04:13.000+00:00" style="--d:block;--pb:1rem;--font_sz:1.4rem;--opacity:.7;">Jan 6, 2022, 9:04 PM</time>
<div style="--d:flex;--justify_content:space-between;--border_t: solid thin var(--link-color);--pt:1rem;--font_sz:1.4rem;">
<a rel="noreferrer" target="_blank" href="https://twitter.com/ChrisFerdinandi/status/1479197132011839490">Read on twitter</a>
<div style="--py:.4rem">
<div>5 likes, 0 retweets</div>
</div>
</div>
</div>
<p>The tweet above is rendered on the server-side in the generation of my blog. It’s like every other static content so it does
not need to cause any shifts in my page after initial load. It also does not add to the network requests my website has to make
on the client-side.</p>
<p>I had chosen that particular tweet because it stretches my point here further. There is Chris Ferdinandi celebrating his migration
to ConvertKit from Mailchimp with one of the reasons being that he can now have simple subscribe forms without third-party scripts. Although, ConvertKit’s default embed forms come with scripts, you may also do without the script like <a href="https://gist.github.com/josephrexme/af468d52b694c19ba811bf7f88fc8d6b">in this gist</a>. That’s how my subscription form below is implemented.</p>
<p>Besides twitter, 2 other websites I find that I frequently want to embed are CodePen and YouTube. They both offer iframe alternatives. Codepen’s <a href="https://blog.codepen.io/documentation/embedded-pens/">script embed</a> offers some options like <a href="https://blog.codepen.io/documentation/prefill-embeds/">prefill embeds</a> which may make it an option for some. I decided that the
iframe can be sufficient for my needs by having it preconfigured the way I like it. When using YouTube’s iframe, be sure to use
the one without cookies to track your users — <a href="http://youtube-nocookie.com/">youtube-nocookie.com</a>.</p>
<p>One of the many woes of embed scripts is the unpredictability you get with them. Here’s the same tweet as above in 2 browsers</p>
<figure>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/twitter-embed-inconsistency_trptwf.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/twitter-embed-inconsistency_trptwf.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/twitter-embed-inconsistency_trptwf.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/twitter-embed-inconsistency_trptwf.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/twitter-embed-inconsistency_trptwf.jpg" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/twitter-embed-inconsistency_trptwf.jpg" />
<img src="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/twitter-embed-inconsistency_trptwf.jpg" alt="Screenshot of twitter embed in Safari and Brave browser" />
</picture>
<figcaption>Safari on left, Brave browser on right</figcaption>
</figure>
<p>For some unknown reason, my brave browser never loads tweet embeds nicely. My visitors using brave shouldn’t have to experience that.</p>
<p>At other times, twitter just doesn’t load at all. A while ago, I had opened a CSS tricks article to read on mobile Safari, and I got this:</p>
<figure>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/css-tricks-add-less-twitter_q5xa8g.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/css-tricks-add-less-twitter_q5xa8g.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/css-tricks-add-less-twitter_q5xa8g.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/css-tricks-add-less-twitter_q5xa8g.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/css-tricks-add-less-twitter_q5xa8g.jpg" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/css-tricks-add-less-twitter_q5xa8g.jpg" />
<img src="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/css-tricks-add-less-twitter_q5xa8g.jpg" alt="Mobile screenshot of tweet embed on css-tricks.com" />
</picture>
<figcaption>Article at <a href="https://css-tricks.com/add-less/">https://css-tricks.com/add-less/</a></figcaption>
</figure>
<p>I hope some day that css tricks is able to implement tweet embeds differently without relying on twitter’s third-party script.
This was an article I really wanted to read so I was forced to pop it open on my computer.</p>
<p>What embed codes are you using now? How are you planning on letting go of them?</p>
Redefining affordability2021-12-25T06:00:00Zhttps://www.josephrex.me/redefining-affordability/<p>Ever wondered what it means for anyone to say they can afford something? I have learned we all have varying perceptions of affordability so I am writing this to talk about mine without trying to sway you from whatever yours may be.</p>
<p>Ever wondered what it means for anyone to say they can afford something? I have learned we all have varying perceptions of affordability so I am writing this to talk about mine without trying to sway you from whatever yours may be.</p>
<p>In a recent chat with friends, I had mentioned that it would be nice to have a millionaire friend who can gift me a $3000
drone for Christmas. One of them had mentioned that as a (relatively) high income earner, it’s easy for me to just get
that for myself. I don’t disagree with this but my money habit does.</p>
<p>I think of affordability in categories of <strong>GROSS</strong> and <strong>NET</strong>. My gross affordability involves things I can
afford with an opportunity cost<sup class="footnote-ref"><a href="https://www.josephrex.me/redefining-affordability/#fn1" id="fnref1">[1]</a></sup>. It can be foggy to see what we forgo by making a decision to make an expense
so this can be an unclear decision to make. In my case, I think of the next home or investment I want to buy, or if the
expense puts me in a liability that sets me behind on my other financial goals.</p>
<p>Net affordability includes things I can afford with no consequences and no opportunity cost.
These are usually things that I have a planned an expense for or have an existing budget on.
I’m <a href="https://www.josephrex.me/financial-architecture/">into the idea of money dials</a> by Ramit Sethi so I believe we should find
things we love and really spend on them if it earns us the happiness or comfort we desire. At the same time,
I feel we should set limits on such money dials.</p>
<p>I think the purchase of a $3000 drone falls under gross affordability because:</p>
<ul>
<li>I have no long term plan for it</li>
<li>My goal is to get it for pleasure so I’m not making any revenue from it to return the capital</li>
<li>There is no existing budget for it</li>
</ul>
<p>My wife and I join all our finances with full transparency so we have rules that make it work for us
smoothly without it ever seeming like any one person is judging the other’s choice of spending. I understand
a lot of people might not be into this, but having rules makes this pleasant and successful for us.</p>
<p>A part of that rule is what we call our <strong>splurge budgets</strong>. We both get equal splurge budgets every month
and it’s up to us to either use it all up or let it roll over to subsequent months if we need to make bigger
purchases. Technically, I could make the purchase of a $3000 drone a net affordability if I just let my
splurge budget roll over till it reaches the cost of sale. Our splurge budgets are determined by our net
worth at any given time so it will take us being millionaires for the number of rollovers it takes to get
the drone to not be dreadfully long. This explains my perception that it takes being a millionaire to buy
a $3000 drone<sup class="footnote-ref"><a href="https://www.josephrex.me/redefining-affordability/#fn2" id="fnref2">[2]</a></sup> – we’re not there yet.</p>
<p>Our net affordability doesn’t just tie around our budgets. We are currently planning a flight together and
we plan to be on first class because we can afford it (net). This is a net affordability because we have a
travel savings account that prepares us for it, we both take COVID very seriously and would rather pay
a little more to get the comfort of being away from other people that may easily spread the virus to us.
You may consider it our joined money dial.</p>
<p>There’s a chance someone who would buy that drone would not be able to afford a first class ticket.
This is likely because they only factored their gross affordability in their purchase decision.</p>
<p>There are some things I consider unaffordable to me that you might find ridiculous. Here’s a few:</p>
<ul>
<li>I can’t afford to pay for more than one domain name (I only own <a href="http://josephrex.me/">josephrex.me</a>)</li>
<li>I can’t afford to own more than 7 pairs of shoes</li>
<li>I can’t afford HBO or AppleTV because I already pay Netflix, Hulu, and Disney+<sup class="footnote-ref"><a href="https://www.josephrex.me/redefining-affordability/#fn3" id="fnref3">[3]</a></sup></li>
</ul>
<p>These are simply not things I am willing to put over the more important goals we have as a couple,
and things I refuse to accumulate my splurge budget on.</p>
<p>All that said, if you are not a millionaire and will like to gift me a $3000 drone for Christmas, you are
very welcome to! Ignore everything I said as these rules simply apply to my family. If you do own millions,
you are welcome to gift me too and I will really appreciate it.</p>
<p>Merry Christmas 🎅🏾!</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Opportunity cost is what must be forgone to get something else. <a href="https://examples.yourdictionary.com/opportunity-cost-examples.html">See examples</a> <a href="https://www.josephrex.me/redefining-affordability/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>I might reconsider if I would do it with a slightly lesser net worth than a million in the future but I doubt that. <a href="https://www.josephrex.me/redefining-affordability/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>I would pause another subscription for AppleTV when a new episode of Ted Lasso is up. <a href="https://www.josephrex.me/redefining-affordability/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Hide mailto email links with Netlify functions2021-12-23T23:30:24Zhttps://www.josephrex.me/hide-mailto-links-with-netlify-functions/<p>The web is plagued with crawlers in search of anything in the form of an email address.
They scrape personal websites, public repositories on github, and anywhere indexable.
While there are easier ways to display an email address while hiding it from crawlers,
it is not as easy to have a mailto link without the destination email in it within
the markup.</p>
<p>The web is plagued with crawlers in search of anything in the form of an email address.
They scrape personal websites, public repositories on github, and anywhere indexable.
While there are easier ways to display an email address while hiding it from crawlers,
it is not as easy to have a mailto link without the destination email in it within
the markup.</p>
<p>My common strategy to keep my email address shown in page but hidden from crawlers is
with the help of CSS.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.email::after</span><span class="token punctuation">{</span><br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span><span class="token punctuation">(</span>data-name<span class="token punctuation">)</span> <span class="token string">"@"</span> <span class="token function">attr</span><span class="token punctuation">(</span>data-provider<span class="token punctuation">)</span><br /><span class="token punctuation">}</span></code></pre>
<p>This will be applied to some HTML like:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">data-name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>your-name<span class="token punctuation">"</span></span> <span class="token attr-name">data-provider</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gmail.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>You can see this in action at <a href="https://resume.josephrex.me/">https://resume.josephrex.me</a>.</p>
<p>Unfortunately, this trick wouldn’t work with mailto links in the form:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:your-name@gmail.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Send mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<p>This is where netlify functions comes in. Pretty much any server could help here
but netlify makes it easier especially when you already have your website hosted
with them.</p>
<p>If you are just getting started with Functions, <a href="https://www.netlify.com/products/functions/">use netlify’s guide</a>
to learn its basics.</p>
<p>I use functions already for my opengraph image on this website and other little things. See some examples:</p>
<p><a href="https://josephrex.me/.netlify/functions/opengraph?text=sample-text">https://josephrex.me/.netlify/functions/opengraph?text=sample-text</a></p>
<p><a href="https://josephrex.me/.netlify/functions/opengraph?layout=list">https://josephrex.me/.netlify/functions/opengraph?layout=list</a></p>
<p>The following function creates an endpoint that lets you redirect to a proper mailto
link while letting you use a link that does not include your email address.</p>
<pre class="language-js"><code class="language-js">exports<span class="token punctuation">.</span><span class="token function-variable function">handler</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// hiding email from bots in repo</span><br /> <span class="token keyword">const</span> names <span class="token operator">=</span> <span class="token punctuation">{</span> first<span class="token operator">:</span> <span class="token string">'your'</span><span class="token punctuation">,</span> last<span class="token operator">:</span> <span class="token string">'name'</span> <span class="token punctuation">}</span><br /> <span class="token keyword">const</span> provider <span class="token operator">=</span> <span class="token string">'gmail.com'</span><br /> <span class="token keyword">const</span> constructedEmail <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Object<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span>names<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>provider<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><br /> <span class="token keyword">return</span> <span class="token punctuation">{</span><br /> statusCode<span class="token operator">:</span> <span class="token number">301</span><span class="token punctuation">,</span><br /> headers<span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token string">'Cache-control'</span><span class="token operator">:</span> <span class="token string">'public, max-age=0, must-revalidate'</span><span class="token punctuation">,</span><br /> <span class="token string">'location'</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">mailto:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>constructedEmail<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>I use this in my HTML as:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:/.netlify/functions/mail<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Send mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<p>To make the function allow more dynamic destination emails, you can pass fragments of the email as query
parameters e.g:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:/.netlify/functions/mail?first=your&last=name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Send mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<p>This will require updating the function code according to read its values from the query parameters.</p>
<p>Drop your thoughts and comments with links below.</p>
Activate work in a single command2021-06-09T14:04:19Zhttps://www.josephrex.me/activate-work-in-a-single-command/<p>For a long time of working with tmux (terminal multiplexer),
I’ve found it very helpful in separating all the consoles I
need to run servers and REPLs for my workspace. Rather than
opening multiple terminal tabs and windows, I can delegate a
single tab to all tasks for one job.</p>
<p>For a long time of working with tmux (terminal multiplexer),
I’ve found it very helpful in separating all the consoles I
need to run servers and REPLs for my workspace. Rather than
opening multiple terminal tabs and windows, I can delegate a
single tab to all tasks for one job.</p>
<p>Here is what my tmux tab usually look like:</p>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/tmux-structure_cct6yw.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/tmux-structure_cct6yw.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/tmux-structure_cct6yw.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/tmux-structure_cct6yw.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/tmux-structure_cct6yw.jpg" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/tmux-structure_cct6yw.jpg" />
<img src="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/tmux-structure_cct6yw.jpg" alt="Tmux pane structure" width="800" height="468" />
</picture>
<p>Until a few days ago, I would start my week after a weekend away
from work with the following actions: Run tmux, split vertically 50/50,
go to upper half (child), split vertically by 2, go to lower half (child) and split by 2,
then go to lower half of second child (grandchild) and split horizontally by 2.</p>
<p>After all the splitting is done, I start navigating to necessary directories and running
commands needed to start all needed servers.</p>
<p>It was easy to neglect how tedious that was to do because I could just leave all servers
running all week even when I’m not working. Sometimes they go for weeks and encourage
my reluctance to ever shut down my computer.</p>
<p>I recently started spending my evenings on activities that consume a lot of computer processing
power where I need to kill my work servers and I just couldn’t go on punishing myself shutting
down each of all those servers and starting them over each morning. That’s when I came up with
the script below:</p>
<pre class="language-bash"><code class="language-bash"><span class="token keyword">if</span> <span class="token punctuation">[</span> <span class="token string">"<span class="token variable">$TERM_PROGRAM</span>"</span> <span class="token operator">=</span> tmux <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">then</span><br /> <span class="token builtin class-name">echo</span> <span class="token string">"Exiting ck tmux session"</span><br /> <span class="token comment"># Stop rails servers (ck and fk) and put down docker</span><br /> <span class="token function">cat</span> <span class="token variable">$CK_PATH</span>/tmp/pids/server.pid <span class="token operator">|</span> <span class="token function">xargs</span> -n1 -I pid <span class="token function">kill</span> -9 pid<br /> <span class="token function">cat</span> <span class="token variable">$FILEKIT_PATH</span>/tmp/pids/server.pid <span class="token operator">|</span> <span class="token function">xargs</span> -n1 -I pid <span class="token function">kill</span> -9 pid<br /> <span class="token comment"># Stop functions JS server</span><br /> <span class="token function">kill</span> <span class="token variable"><span class="token variable">$(</span><span class="token function">lsof</span> -wni tcp:3031 <span class="token operator">|</span> <span class="token function">awk</span> <span class="token string">'NR == 2 {print $2}'</span><span class="token variable">)</span></span><br /> <span class="token comment"># Put down docker</span><br /> docker-compose --file <span class="token variable">$CK_PATH</span>/dev/docker-compose-dependencies.yml down<br /> tmux kill-session<br /><span class="token keyword">else</span><br /> tmux new-session <span class="token punctuation">\</span><span class="token punctuation">;</span> <span class="token punctuation">\</span><br /> send-keys <span class="token string">'cd $CK_PATH/packages/functions && npm start'</span> C-m <span class="token punctuation">\</span><span class="token punctuation">;</span> <span class="token punctuation">\</span><br /> split-window -v -p <span class="token number">50</span> <span class="token punctuation">\</span><span class="token punctuation">;</span> <span class="token punctuation">\</span><br /> send-keys <span class="token string">'cd $CK_PATH && ckdev'</span> C-m <span class="token punctuation">\</span><span class="token punctuation">;</span> <span class="token punctuation">\</span><br /> split-window -v -p <span class="token number">50</span> <span class="token punctuation">\</span><span class="token punctuation">;</span> <span class="token punctuation">\</span><br /> send-keys <span class="token string">'(sleep 30 && cd $FILEKIT_PATH && rails s)'</span> C-m <span class="token punctuation">\</span><span class="token punctuation">;</span> <span class="token punctuation">\</span><br /> split-window -h -p <span class="token number">50</span> <span class="token punctuation">\</span><span class="token punctuation">;</span> <span class="token punctuation">\</span><br /> send-keys <span class="token string">'docker-compose --file $CK_PATH/dev/docker-compose-dependencies.yml up'</span> C-m <span class="token punctuation">\</span><span class="token punctuation">;</span> <span class="token punctuation">\</span><br /> select-pane -t <span class="token number">0</span> <span class="token punctuation">\</span><span class="token punctuation">;</span> <span class="token punctuation">\</span><br /> split-window -v -p <span class="token number">50</span> <span class="token punctuation">\</span><span class="token punctuation">;</span> <span class="token punctuation">\</span><br /> send-keys <span class="token string">'(sleep 30 && cd $CK_PATH && rails s)'</span> C-m <span class="token punctuation">\</span><span class="token punctuation">;</span><br /><span class="token keyword">fi</span></code></pre>
<p>This script begins a new tmux session, splits all the panes I need and start all
necessary servers. I saved it as <code>ck-tmux</code> where <code>ck</code> there means <strong>convertkit</strong>
where I work. It is included with <a href="https://github.com/josephrexme/dotfiles">my dotfiles</a>
and aliased to run from any directory I call it.</p>
<pre class="language-bash"><code class="language-bash"><span class="token builtin class-name">alias</span> <span class="token assign-left variable">cktmux</span><span class="token operator">=</span><span class="token string">'~/ck-tmux.sh'</span></code></pre>
<p>Now all I have to do at the beginning of every work day is type <code>ck-tmux</code>. Typing the same
command from inside the tmux session when I’m done with work closes all the servers running
and exits the tmux session.</p>
<p>See it in action</p>
<figure>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/a5fc204c1029b94c8fd8b5aec0fa0145_hsfyfb.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_562,c_scale/a5fc204c1029b94c8fd8b5aec0fa0145_hsfyfb.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/a5fc204c1029b94c8fd8b5aec0fa0145_hsfyfb.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_562,c_scale/a5fc204c1029b94c8fd8b5aec0fa0145_hsfyfb.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/a5fc204c1029b94c8fd8b5aec0fa0145_hsfyfb.gif" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_562,c_scale/a5fc204c1029b94c8fd8b5aec0fa0145_hsfyfb.gif" />
<img src="https://res.cloudinary.com/strich/image/upload/w_562,c_scale/a5fc204c1029b94c8fd8b5aec0fa0145_hsfyfb.gif" alt="console of ck tmux starting up" width="562" height="1000" />
</picture>
<figcaption>Starting work</figcaption>
</figure>
<figure>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/5a2e75c590ad9c25a1a00af4fdb72872_yxh4mr.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_568,c_scale/5a2e75c590ad9c25a1a00af4fdb72872_yxh4mr.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/5a2e75c590ad9c25a1a00af4fdb72872_yxh4mr.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_568,c_scale/5a2e75c590ad9c25a1a00af4fdb72872_yxh4mr.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/5a2e75c590ad9c25a1a00af4fdb72872_yxh4mr.gif" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_568,c_scale/5a2e75c590ad9c25a1a00af4fdb72872_yxh4mr.gif" />
<img src="https://res.cloudinary.com/strich/image/upload/w_568,c_scale/5a2e75c590ad9c25a1a00af4fdb72872_yxh4mr.gif" alt="console of ck tmux ending" width="568" height="1000" />
</picture>
<figcaption>Stopping work</figcaption>
</figure>Meaningless Creativity2021-04-13T14:22:57Zhttps://www.josephrex.me/meaningless-creativity/<p>In places where I can, I introduce myself as a creative technologist because it describes
all I do <a href="https://www.josephrex.me/life-with-segmented-purpose/">better than any job title can</a>. But beyond that, beyond being creative with
technology, the term describes the intersectionality of <a href="https://en.wikipedia.org/wiki/Science,_technology,_engineering,_and_mathematics">STEAM</a>
(Science, Technology, Engineering, Art, and Math) with Art at the forefront.</p>
<p>In places where I can, I introduce myself as a creative technologist because it describes
all I do <a href="https://www.josephrex.me/life-with-segmented-purpose/">better than any job title can</a>. But beyond that, beyond being creative with
technology, the term describes the intersectionality of <a href="https://en.wikipedia.org/wiki/Science,_technology,_engineering,_and_mathematics">STEAM</a>
(Science, Technology, Engineering, Art, and Math) with Art at the forefront.</p>
<p>My interpretation of putting art at the forefront of these disciplines is that the
end result of combining them is a product that can be exhibited in a realm of arts and
crafts. Something a lay man with no understanding of how it came to being can appreciate
and possibly desire to own. This is how I imagine creative technology.</p>
<p>For some, building the skills required for the kind of creative art I relish comes a lot
easier especially when it’s what they’ve had to work with or what they studied in college.
One of such art is generative art. For a lot of software engineers who are bound to
building and architecting traditional web apps for software companies, they are often
stuck on improving the skills valuable to make them better at their daily jobs.</p>
<p>There’s so much going on already at every stack of software engineering from deciding
between React, Vue, Svelte, Web Components, to deciding what database to use, to what
provisioning tool to use. I am one of such engineers still figuring out the
best ways to stay on top of skills I need to be good enough at what I’m getting paid
for, as well as the skills I simply just need to scratch my artistic itch, hoping they
may be applicable for work some day.</p>
<p>Various people have unique learning styles and one that I’ve found that works for me and
I think for a lot of other people, is pragmatic (active) learning. Learning through experimentation.
I can only speak for myself but it is incredibly difficult to pick up a book to learn a skill
without trying and failing at it first. This is why I resolved that the best way to learn
these skills I desire is by making things even when they are meaningless.</p>
<p>Steve Gardner (whose work I follow closely) talks about building meaningless things in his
video here.</p>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/q1qSxmfMIcI?controls=0" title="Steve Gardner - Make More Pointless Things" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<p>This along with Simone Giertz’s “Why you should make useless things” are big motivations
for the kinds of projects I work on</p>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/c0bsKc4tiuY?controls=0" title="Why you should make useless things | Simone Giertz" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<p>I am by no means at a point where I’ve made enough pointless/useless/meaningless things as I
would want and as such, I am behind on the skills I aim to polish from doing that.</p>
<p>When I realized my creative interest, I was living in Nigeria and had the most hours of each of
my day were without electricity. This meant I needed to do meaningful things in the little time
I could get both electricity and a stable internet connection<sup class="footnote-ref"><a href="https://www.josephrex.me/meaningless-creativity/#fn1" id="fnref1">[1]</a></sup>. I hated that this was an
excuse I had preventing me from my creative dream. After moving to the US, I thought it would
be easy to take advantage of the better infrastructure to dive into a world of dedicating a lot
of time into research and experimentation. Unfortunately, for someone moving to the US alone with
very little funds, it takes a really long while to reach a level stability where that is feasible.</p>
<p>There will always be reasons and excuses why we cannot do the things we want to do. I am finally
at a point where I may consider my life to be somewhat stable and yet, it seemed I still could not
make time for what I had long desired to do for creativity. There are purchased books to be read,
adventures to be had, a dog to be taken care of<sup class="footnote-ref"><a href="https://www.josephrex.me/meaningless-creativity/#fn2" id="fnref2">[2]</a></sup>, meals to be cooked.</p>
<p>Regardless of the many responsibilities life may put on our shoulders, I believe we can always do
those extra things we want to do when we lower our expectations. I lower my creative expectation
by starting little projects and knowing I may not complete them in an expected time.
However, this does not matter as long as I make fractional contributions until I have a majestic piece.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>The internet service providers in Nigeria excel at abrupt interruptions but they can be fairly okay if you are paying them a lot of money. I paid more money monthly in Nigeria than I would for 2
months of internet in the US sometimes just to be able to have a steady connection. <a href="https://www.josephrex.me/meaningless-creativity/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>I can only imagine when human kids come into our lives. Right now I have to be there for my dog,
watch videos on how to be a better dog. It’s an endless learning process for anyone who chooses to parent a human child or a pet. <a href="https://www.josephrex.me/meaningless-creativity/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Financial architecture2021-03-30T18:34:46Zhttps://www.josephrex.me/financial-architecture/<p>A lot of things that are built to withstand the test of time go through proper
architecture. I’m sure there are more contexts to use the term <strong>architect</strong>
but the most common I encounter are with structural architects and software architects.</p>
<p>A lot of things that are built to withstand the test of time go through proper
architecture. I’m sure there are more contexts to use the term <strong>architect</strong>
but the most common I encounter are with structural architects and software architects.</p>
<p>Architecture is used mostly in housing because houses are the most appreciating
common asset that humans are capable of creating. There are many more assets that
appreciate more than housing but many of such things are given to us by earth.</p>
<p>In software, architecture is made for sustainability rather than appreciation. As someone
who have gotten to architect some software workflows, I don’t think the goal was ever
to have a sturdy impeccable software as we all know there’s no such thing.</p>
<div style="--mx:auto;--my:2rem;--p:2rem;--w:min(400px, 80%);--bg:rgb(100 100 100/.06);--roundness:.5rem;">
<div style="--d:flex;--justify_content:space-between;">
<div style="--d:flex;--gap:1rem;">
<div>
<img src="https://pbs.twimg.com/profile_images/630002655897776128/BrmsY0Ev_normal.jpg" class="no-zoom" width="48" height="48" alt="" style="--roundness:50%;" />
</div>
<div>
<strong>Taylor Pearson</strong>
<div style="--font_sz:1.4rem;--opacity:.7">@TaylorPearsonMe</div>
</div>
</div>
</div>
<div style="--py:1.5rem;--word_break:break-word;">
<p>2/ Most people don't think about it this way, but when you build custom software, you are effectively buying a rapidly depreciating asset that's going to have to constantly be repaired.</p>
</div>
<time datetime="2021-03-30T21:35:04.000+00:00" style="--d:block;--pb:1rem;--font_sz:1.4rem;--opacity:.7;">Mar 30, 2021, 9:35 PM</time>
<div style="--d:flex;--justify_content:space-between;--border_t: solid thin var(--link-color);--pt:1rem;--font_sz:1.4rem;">
<a rel="noreferrer" target="_blank" href="https://twitter.com/TaylorPearsonMe/status/1377011520547270661">Read on twitter</a>
<div style="--py:.4rem">
<div>55 likes, 5 retweets</div>
</div>
</div>
</div>
<p>Software architecture however can sustain workflows and communication within a team
for a given period of time. This leads to why we need an architecture for our finances.
For a lot of people, finances are a big variable as income and expense streams may appear
or vanish for good or bad reasons. Our personal finance is usually a fluctuating asset,
no matter what spectrum of wealth it is fluctuating on.</p>
<p>Like a lot of financial resources would disclaim, the architecture I will be sharing may not apply
to everyone as we have unique experiences and situations, but I hope this can be a template/guide to
someone else.</p>
<h2 id="bank-accounts---the-foundation" tabindex="-1">Bank accounts - The foundation</h2>
<p>How many bank accounts is too many? You tell me. Besides business accounts, I have 8 accounts
split across 3 different banking institutions. Admittedly, sticking to 1 or two different
banks/credit unions should have been sufficient. I chose to use 3 for a comparable experience
across banks I have interest in. You may be able to create as many accounts as you need within
a single banking institution. Here’s a breakdown of my 8 accounts</p>
<p><strong style="color:#912F40">Primary checking:</strong> We all have this account where our paychecks come into.
For most, all expenses come out of this account too. This account used to be where every income and expense from various payees go through for me, and all I had besides this was a single savings account. Although, I am one for minimalism, I’ve found that it
takes a lot more to have a consistent financial structure with just 2 accounts<sup class="footnote-ref"><a href="https://www.josephrex.me/financial-architecture/#fn1" id="fnref1">[1]</a></sup>.</p>
<p><strong style="color:#912F40">Bills checking:</strong> At the start of every month, I pay this account to take care of all my bills including insurance, rent, phone and internet, and entertainment like NetFlix.
Doing this requires that you know every thing that takes money out of your account and
proactively pay for them before their due dates. This prevents any recurring transaction from
getting deducted out of primary checking.</p>
<p><strong style="color:#912F40">Credit card:</strong> You may have as much credit cards as you want but I like to think of this as one because I only use one credit card for home and
personal expenses. This complements the bills checking in preventing expenses from going out
of your primary checking — the goal is to keep primary checking as consistent and
predictable as possible. Once a month, the primary checking can then pay to the credit card,
making this its only outgoing payee.</p>
<p><strong style="color:#912F40">Contingency saving:</strong> This is what was once an unnamed
saving account that went with my primary checking. I think of every piece of my financial
architecture as a minion working for me. If this saving account is a minion, then I need to
give it a purpose and goal. It has best served contingencies like an unexpected repair,
unexpected health costs<sup class="footnote-ref"><a href="https://www.josephrex.me/financial-architecture/#fn2" id="fnref2">[2]</a></sup>.</p>
<p><strong style="color:#912F40">Emergency saving:</strong> This can get mistaken
with contingency saving as they both kind of serve emergencies. What makes the emergency
saving different is that you only dip into it in the worse critical situations like losing
a job, having a health bill that your HSA and contingency can’t cover. Life throws
things we may not anticipate at us sometimes, and we want to be proactive about dealing
with such occurrences.</p>
<p><strong style="color:#912F40">Sinking fund:</strong> As I had mentioned before, every saving
saving account have a goal and role to play. So many finance resources only enforce frugality
and barely mention ways you can treat yourself. The goal with this saving account is to save
for the little things you want and not need. The things that make you happy, like buying a
playstation 5, some new gadgets, makeup. I love Ramit Sethi’s approach to knowing our money
dials and satisfying them.</p>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/BmAwa1nnB6w?controls=0" title="I Will Teach You to Be Rich | Ramit Sethi | Talks at Google" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<p>If you are on something like the <a href="https://www.investopedia.com/terms/f/financial-independence-retire-early-fire.asp">FIRE</a> movement and/or will like to remain on a
conservative budget, this sinking fund can also be where you save for bulk purchases,
down payment for a house, car. To identify the purpose of all sinking fund you have
at once, they can be split into buckets which we will discuss later in the article.</p>
<p><strong style="color:#912F40">Travel saving:</strong> This goes with sinking fund as a
saving intended for something that makes you live the life you want in the present.
Some may place travel saving as a budget within another account, but I prefer for it to
be its own account. A lot of times, you may end up using a credit card for your travel
to get reward points, but this account’s existence is to reimburse the credit card without
affecting all the other accounts with their own unique purpose.</p>
<p><strong style="color:#912F40">Tithe saving:</strong> I pay tithe as a christian but this is
not something every christian let alone everyone worry about, this is for those who do.
Find a church with principles that align with yours if you are a christian. In such
situations, I recommend to just find one church that at least seems decent enough to make
good use of tithes you send in<sup class="footnote-ref"><a href="https://www.josephrex.me/financial-architecture/#fn3" id="fnref3">[3]</a></sup>. Keeping your tithe away from your other personal accounts
helps to not have to think about that as your money. The longer it stays in your personal account
while you wait to pay it to the church, the more reluctant you may get about paying tithe.</p>
<h2 id="budgets---the-frame" tabindex="-1">Budgets - The frame</h2>
<p>There are various approaches to budgets and many tools for it. I’ve recommended <a href="https://debitandcredit.app/">Debit & Credit</a>
several times on this blog because it works just great with my lifestyle. I think YNAB is great
because it can be used in many ways, but I’m not a fan of some of the popular ways I’ve seen it used.</p>
<p>Budgets are like additional accounts that guide the structure of our finance. One of the popular
approach to budgeting is <strong>zero-sum budgeting</strong> which I think can be great but not exactly my choice.
If you love zero-sum budgeting, YNAB might be a great platform for you.</p>
<p>There are 2 types of budgets I use and I like the flexibility of using them in most appropriate
situations without locking myself into one. They are carryover and non-carryover budgets. If you
are familiar with the differences between HSA and FSA, the carry-over budgets are like HSA
accounts where you get to keep whatever is not used into the following year,
and the non-carryover are like FSA accounts where you use it or lose it.</p>
<p>As with my foundational architecture, I like to set myself up for sustainability.
In this case, that means starting with budgetting techniques that aren’t so rigid.</p>
<p>In zero-sum budgeting, from my understanding, all budgets are with positive carryover,
and for some, negative carryovers too.</p>
<h2 id="buckets---the-interior" tabindex="-1">Buckets - The interior</h2>
<p>Buckets are a breakdown of bank accounts into smaller chunks. Some banks like Ally offer this
as a feature. If yours does not, you can use an app like Debit & Credit to create extra
accounts that sum up to individual bank accounts.</p>
<p>For the sinking fund account above, you may have the following buckets:</p>
<ul>
<li>Playstation 5</li>
<li>House saving</li>
<li>New shoes</li>
</ul>
<p>The concept of buckets prevent you from simply buying things because you can when your money
should be serving other more important purposes.</p>
<p>My wife and I have equal carryover budgets each month that we call our splurge budgets. Because
this is a carryover budget, we can accumulate it for larger individual purchases in the sinking
fund adjacently to our shared buckets.</p>
<h2 id="conclusion" tabindex="-1">Conclusion</h2>
<p>A financial architecture makes it easier to have a sustainable routine with your money and
makes it easier to stick to budgets. For a lot of people newly trying to get into budgetting,
a lot of work goes into trying to have a budget and they eventually fall off the wagon.
With an architecture, it is a lot more to set up upfront but more systems in place to prevent
you from falling off with your finances.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Having multiple bank accounts does not in itself help you have a better financial structure, but it plays a part in the full architecture. <a href="https://www.josephrex.me/financial-architecture/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>HSA’s are similar to contingency account and you may add that to your accounts list if
you have medical conditions or are in high health risk. <a href="https://www.josephrex.me/financial-architecture/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>I’m not an active member of the church I pay tithe to, but I see that they feed homeless and take care of people with offerings they get. <a href="https://www.josephrex.me/financial-architecture/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
How I set up frontmatter With Next.js and MDX2021-03-23T23:29:31Zhttps://www.josephrex.me/frontmatter-with-nextjs-and-mdx/<p>As I began writing documentation for my project <a href="https://ui-pack.js.org/docs/intro/principles">ui-pack</a> I wanted full control of the
medium to prevent limitations that may be met with existing documentation tools. A primary
goal of the project is to be so comprehensive to its users.</p>
<p>As I began writing documentation for my project <a href="https://ui-pack.js.org/docs/intro/principles">ui-pack</a> I wanted full control of the
medium to prevent limitations that may be met with existing documentation tools. A primary
goal of the project is to be so comprehensive to its users.</p>
<p>To get the custom experience, I started out with next.js and added <a href="https://mdxjs.com/">mdxjs</a> for an ability to
write in markdown like any static site generator (SSG). MDX has a section on frontmatter
that is very poorly documented (but that does not speak for the entire project, just this section).</p>
<p>The first approach I took to having metadata for each page was wrapping them in a component within
my mdx files. Here’s what that looked like:</p>
<pre class="language-jsx"><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Documentation</span></span><br /> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>My section title<span class="token punctuation">"</span></span><br /> <span class="token attr-name">lastUpdated</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2021-03-23T19:00<span class="token punctuation">"</span></span><br /><span class="token punctuation">></span></span><span class="token plain-text"><br /><br /># My Markdown heading<br /><br />Content here...<br /><br /></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Documentation</span></span><span class="token punctuation">></span></span></code></pre>
<p>I couldn’t go for long with starting every documentation file with that. I write a lot in markdown
and I prefer not to have to write any JSX or do anything that feels like an additional task to
writing. Here’s what I really would like that to be.</p>
<pre class="language-md"><code class="language-md"><span class="token front-matter-block"><span class="token punctuation">---</span><br /><span class="token font-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> My section title<br /><span class="token key atrule">lastUpdated</span><span class="token punctuation">:</span> 2021<span class="token punctuation">-</span>03<span class="token punctuation">-</span>23T19<span class="token punctuation">:</span><span class="token number">00</span></span><br /><span class="token punctuation">---</span></span><br /><br /><span class="token title important"><span class="token punctuation">#</span> Markdown heading</span><br /><br />Content here...</code></pre>
<p>After some digging, I found a <a href="https://gist.github.com/sudkumar/70834062f9243558846249f2c2f98902">github gist</a> that paved the way for me by answering some unknown
questions and offering a structure. It still felt like something was missing as I could not figure
out how to use the frontmatter in the component that houses each of my markdown. As seen from the
first snippet, I was able to pass the <code>title</code> and <code>lastUpdated</code> values into the <code>Documentation</code>
component which formats them and processes them for render.</p>
<hr />
<h2 id="steps" tabindex="-1">Steps</h2>
<p>The first step is to create a <code>frontmatter.js</code> plugin file that we will edit later. If you don’t
already have a <code>next.config.js</code> file, create one</p>
<pre class="language-js"><code class="language-js"><span class="token comment">// next.config.js</span><br /><span class="token keyword">const</span> frontmatterPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./lib/frontmatter'</span><span class="token punctuation">)</span><br /><br /><br /><span class="token keyword">const</span> withMDX <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@next/mdx'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> extension<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.mdx?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span><br /> options<span class="token operator">:</span> <span class="token punctuation">{</span><br /> remarkPlugins<span class="token operator">:</span> <span class="token punctuation">[</span>frontmatterPlugin<span class="token punctuation">]</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><br />module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">withMDX</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> pageExtensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'js'</span><span class="token punctuation">,</span> <span class="token string">'jsx'</span><span class="token punctuation">,</span> <span class="token string">'md'</span><span class="token punctuation">,</span> <span class="token string">'mdx'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> target<span class="token operator">:</span> <span class="token string">'serverless'</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre>
<p>import the frontmatter file as seen above and start editing. First, we need <a href="https://npm.im/gray-matter">graymatter</a> to extract
the YAML frontmatter from the content and <a href="https://npm.im/stringify-object">stringify-object</a> which converts an object to non-quoted
string.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> matter <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gray-matter'</span><span class="token punctuation">)</span><br /><span class="token keyword">const</span> stringifyObject <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'stringify-object'</span><span class="token punctuation">)</span></code></pre>
<p>and here is everything else:</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token parameter">tree<span class="token punctuation">,</span> file</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> <span class="token punctuation">{</span> consent<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">matter</span><span class="token punctuation">(</span>file<span class="token punctuation">.</span>contents<span class="token punctuation">)</span><br /><br /> <span class="token comment">// Step 2: Remove frontmatter after converting it into JS object</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span>tree<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'thematicBreak'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> firstHeadingIndex <span class="token operator">=</span> tree<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span><span class="token parameter">t</span> <span class="token operator">=></span> t<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'heading'</span><span class="token punctuation">)</span><br /> <span class="token keyword">if</span> <span class="token punctuation">(</span>firstHeadingIndex <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> tree<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> firstHeadingIndex <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token comment">// Step 3: Insert JSX to pass frontmatter to parent component</span><br /> tree<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> type<span class="token operator">:</span> <span class="token string">'import'</span><span class="token punctuation">,</span><br /> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br /> import Documentation from '../files/documentation'<br /> </span><span class="token template-punctuation string">`</span></span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><br /> type<span class="token operator">:</span> <span class="token string">'jsx'</span><span class="token punctuation">,</span><br /> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br /> <Documentation<br /> title={frontMatter.title}<br /> author={frontMatter.author}<br /> lastUpdated={frontMatter.lastUpdated}<br /> ><br /><br /> </span><span class="token template-punctuation string">`</span></span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><br /><br /> <span class="token comment">// Step 4: Close JSX parent component</span><br /> tree<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> type<span class="token operator">:</span> <span class="token string">'jsx'</span><span class="token punctuation">,</span><br /> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br /> <br /> </Documentation><br /> </span><span class="token template-punctuation string">`</span></span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><br /><br /> <span class="token comment">// Step 1: Convert frontmatter to JS object and push to document tree</span><br /> tree<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> type<span class="token operator">:</span> <span class="token string">'export'</span><span class="token punctuation">,</span><br /> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br /> export const frontMatter = </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">stringifyObject</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"><br /> </span><span class="token template-punctuation string">`</span></span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><br /><span class="token punctuation">}</span></code></pre>
<p>If you that’s all you need, you may skip the rest of the post but to get a better
understanding of what the plugin is doing, the output of that is something like this:</p>
<pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> Documentation <span class="token keyword">from</span> <span class="token string">'../files/documentation'</span><br /><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Documentation</span></span><br /> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>frontMatter<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span><br /> <span class="token attr-name">author</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>frontMatter<span class="token punctuation">.</span>author<span class="token punctuation">}</span></span><br /> <span class="token attr-name">lastUpdated</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>frontMatter<span class="token punctuation">.</span>lastUpdated<span class="token punctuation">}</span></span><br /><span class="token punctuation">></span></span><span class="token plain-text"><br /><br /><!-- All markdown content here --><br /><br /></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Documentation</span></span><span class="token punctuation">></span></span><br /><br /><span class="token keyword">export</span> <span class="token keyword">const</span> frontMatter <span class="token operator">=</span> <span class="token punctuation">{</span><br /> title<span class="token operator">:</span> <span class="token string">"My Section title"</span><span class="token punctuation">,</span><br /> author<span class="token operator">:</span> <span class="token string">"Joseph"</span><span class="token punctuation">,</span><br /> lastUpdated<span class="token operator">:</span> <span class="token string">"2021-03-23T19:00"</span><br /><span class="token punctuation">}</span></code></pre>
<p>In the first step, we make a <code>frontMatter</code> object that has all our frontMatter. This was
where a lot of resources ended and left me with questions. It’s placed at the bottom to
prevent it from complicating the document tree before I get to traverse through it in
step 2.</p>
<p>The second step removes the YAML frontMatter from the document as we have already
derived its values. The <code>---</code> at the start of the frontmatter is a <code>thematicBreak</code> node
type, and the last line of the frontmatter along with its ending <code>---</code> are seen as a
heading node. That means we have to delete everything from the first thematic break to
the first heading.</p>
<p>In the third step, the parent component is imported to pass the frontmatter data into it,
and the fourth step just closes this parent component with all the markdown content
existing within the tree.</p>
<p>That’s all for now! Thanks for reading and subscribe to my newsletter below for a broad
range of amazing content if you haven’t done so yet.</p>
Markdown format for code tabs2021-03-16T14:03:39Zhttps://www.josephrex.me/markdown-format-for-code-tabs/<p>For a while I’ve been working on <a href="https://ui-pack.js.org/docs/intro/principles">ui-pack</a> which is intended to be a
home for those UI components that aren’t used frequently enough to make
it to most component libraries or are often implemented with very little
research.</p>
<p>For a while I’ve been working on <a href="https://ui-pack.js.org/docs/intro/principles">ui-pack</a> which is intended to be a
home for those UI components that aren’t used frequently enough to make
it to most component libraries or are often implemented with very little
research.</p>
<p>In setting up the documentation website, I wanted more control and power
than I have ever had from using documentation tools I would reach out
for in the past. This independence has affected my speed of release but,
it has simultaneously helped me learn and get to do things how I imagine
them.</p>
<p>One of such things is the tabbable code snippets as shown below:</p>
<p><img src="https://res.cloudinary.com/strich/image/upload/v1615911710/71ffd4a1f79b2ae6d30989dc2dbca6d3_qvevwn.gif" alt="tabbable code preview" /></p>
<p>With <a href="https://mdxjs.com/">MDX</a> offering full control of how my markdown is rendered, it offered
me an opportunity to have markdown for what would have otherwise been a React
component I have to use each time I am writing a doc that needs one of those.</p>
<p>Even though MDX allows for both markdown and JSX in the same file, I prefer to
keep most of my documentation files written mostly in markdown.</p>
<p>To add a simple multi-line code to markdown now, you write it this way:</p>
<p class="note">
<strong>Note:</strong> Examples below use 2 backtics instead of 3 to avoid cofusing
my markdown parser and myself.
</p>
<pre class="language-md"><code class="language-md">``<br />some code<br />``</code></pre>
<p>The code markdown takes argument unlike every other markdown syntax<sup class="footnote-ref"><a href="https://www.josephrex.me/markdown-format-for-code-tabs/#fn1" id="fnref1">[1]</a></sup>. A lot of platforms
will process syntax highlighting based on the language argument passed to your code like:</p>
<pre class="language-md"><code class="language-md">``js<br />var fruit = "apple"<br />console.log(<span class="token code-snippet code keyword">`I ate ${fruit} this morning`</span>)<br />``</code></pre>
<p>It still feels like we may be limited to tabless code snippets with this format. So how do we
get to what we have in the tabbed image above? We pass more arguments like:</p>
<pre class="language-md"><code class="language-md">``bash tabs='npm|yarn'<br /><span class="token title important">npm i @ui-pack/react<br /><span class="token punctuation">--</span></span><br />yarn add @ui-pack/react<br />``</code></pre>
<p>With this format, the output can be formatted to easily look like what we have in the image.</p>
<p>Are there other markdown formats you process with interesting outputs? Share them with me.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>If you know any other syntax that takes argument, let me know in the comments. I want
to be able to do more with blockquotes but I haven’t found a way to pass arguments to them. <a href="https://www.josephrex.me/markdown-format-for-code-tabs/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Having a healthy email relationship2021-03-10T02:28:22Zhttps://www.josephrex.me/having-a-healthy-email-relationship/<p>Do you dread emails? Have you ever tried to think about why you do if the answer to that
is yes? I think people hate emails because they think they have little control over it.
We get frustrated when we feel we have less control.</p>
<p>Do you dread emails? Have you ever tried to think about why you do if the answer to that
is yes? I think people hate emails because they think they have little control over it.
We get frustrated when we feel we have less control.</p>
<p>Remember <a href="https://en.wikipedia.org/wiki/Inbox_by_Gmail">Google Inbox</a>? It transformed the relationship a lot of people had with
their emails. Beyond its visual appeal, it introduced some amazing features to users
that didn’t require a lot of effort that power users would typically apply for an
enhanced email experience. Inbox did a lot of things I can’t try to start naming without
leaving something out, so I’ll let this video help with that.</p>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VCo3zZ0P4vU?controls=0" title="Meet Inbox by Gmail" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<p>With Inbox, people felt like they were able to take back control. It’s the same feeling
you get when you figure out financial budgets and plans that work just right for you, or
when you figure out the right diet, eating habits, and workout routines that help you live
a healthy life.</p>
<p>How do we take back control in a world where there is no Google Inbox to make the problem
of emails seem like they have gone away? I would compare what Inbox did to us with emails
as what a weight loss tea does without extra effort to get in good eating habits. The
weight might come off a little, but we go right back to where we started if we keep the
same old habits. Like our health, fitness, and finances, email is somewhat inevitable in
our lives and we can either despise it and let it keep control or take back control by
learning to work with it. Here are the steps</p>
<h2 id="step-1-an-inventory-of-your-emails" tabindex="-1">Step 1: An inventory of your emails</h2>
<p>I found that I felt more confident about my home finances when I knew everything that
came in and came out of it monthly so well that I started paying a separate bank account
monthly to handle all payments, while being confident that no penny will ever leave our
primary checking account unless we’re paying a credit card or some other intentional payment
triggered by me or my wife. I’ll write more about this in an upcoming article on financial
architecture.</p>
<p>The equivalent of this for email is to know every email that come in and out of your inbox,
such that if you get added to some newsletter you are not intentional about, you can spot
it so quickly and unsubscribe from it or mark it as a spam. This sounds impossible
when you first think about it, and it gets even harder depending on your current email
situation.</p>
<h2 id="step-2-choose-your-client" tabindex="-1">Step 2: Choose your client</h2>
<p>Google Inbox was a great email client for a lot of people. You have to discover what
constitutes a great client for you. Have you ever gone email client hunting? or do you
just stick with the default client that comes with your email provider without knowing
what options are available. I think it’s great to stick with the default client of your
provider after you’ve come to a conclusion from research, but I have <a href="https://www.josephrex.me/relative-and-absolute-thinkers/">thoughts on sticking
only to the first options life gives us</a>. It’s really worth researching
what email client to use as they are a part of our lives. I’ve gone from using <em>Outlook</em>,
to using <em>Apple Mail</em>, to <em>Airmail</em>, to <em>Polymail</em>, to <em>Canary Mail</em>, and finally to <em>Spark</em>
which is my client of choice. I learned something from each of the experiences using all
those clients and they helped me make an informed decision on why Spark should be my
client of choice.</p>
<p>Spark may not have the default powerful filters that Inbox provided, but it has some default
smart folders and an ability to create custom smart folders which are advanced filters.
I also love Spark for having the ability to snooze, pin, delegate and a lot of other amazing
features the Readdle team keeps adding. They describe some of the features in more detail
on this blog on <a href="https://readdle.com/blog/how-to-reach-inbox-zero">inbox zero</a> which brings us to the third step.</p>
<h2 id="step-3-inbox-zero-wisely" tabindex="-1">Step 3: Inbox zero wisely</h2>
<p>Inbox zero often gets a bad wrap for being a productivity placebo. The claims against it
address how it might encourage looking at your email more times than you blink in a day.</p>
<p>I agree it might indeed feel this way. Following my body fitness analogy I’ve used earlier,
I would compare this approach to inbox zero-ing as being so much of a fitness junky, that
it is an addiction. I do not encourage any form of addiction or obsession, so let’s talk
about doing inbox zero right.</p>
<p>In another <a href="https://sparkmailapp.com/blog/how-to-reach-inbox-zero">article by Spark mail client</a>, they describe our email inbox as our desk.
What does your desk look like?</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1615345944/595C8D23-22F9-425A-854B-AAC58ACAA6AD_1_105_c_mm46g9.jpg" alt="Desk with computer keyboard and monitor" class="image" />
<figcaption>Joseph's work desk</figcaption>
</figure>
<p>On my desk I frequently get statements and bills from accounts we have, I don’t get to those
immediately as they come. That’ll be like waiting to receive every single email and taking
actions on them in that instant. Doing so will obstruct my workflow for anything else I might
have been working on. You do see a book I am currently reading. This is like a pinned
email that is not the priority at the time but something I’ll get to. The only things you see on
my desk are things I am actively using or find I might be in need of. There’s a notebook, a pen,
and a stylus, that I need multiple times a day but not as much as my keyboard and monitors.</p>
<p>I am able to keep my desk clear in a similar way I achieve inbox zero. By delegating the times in
a day that I address them. I used to think by simply having my emails go from <em>unread</em> to <em>read</em>,
I had them taken care of. But this would be like reading a bill and leaving it right on my desk.</p>
<p>To throughly get a bill of my desk, I put in a drawer of documents. This is what the archive is
for emails. To do inbox zero right, you need to perform an action that leads to it getting off your
desk. You may <strong>snooze</strong> it to return at a latter time, you may <strong>delete</strong> it, <strong>reply</strong> to it while
ongoing, then <strong>archive</strong> all emails when done.</p>
<p>Spark groups my emails under 3 major categories which are <em>Newsletters</em>, <em>Notifications</em>, and <em>People</em>.
Here’s my quick actions that applies for each of these categories. Delete notifications and some notifications,
archive others.</p>
<p>In step 1 we addressed keeping an inventory of your inbox. There are times you sign up for a software product
and get tricked into receiving their offers and promotion emails. These are classified as notifications
and a lot of people hesitate to unsubscribe from them as they think that doing so is somehow detaching from
the service, whereas you may still keep notifications while opting out of these newsletters. If you decided
to keep these newsletters, they are the newsletters you want to delete as you receive. All other newsletter
emails may have content you will want to reference in the future and that is why we archive those.</p>
<hr />
<p>Following these steps make me feel in control of my email. They may not work for you the exact same way
but I hope there’s a thing or two you might be able to derive from them.</p>
A life with segmented purpose2021-02-28T04:32:54Zhttps://www.josephrex.me/life-with-segmented-purpose/<p>From the moment I hit my <a href="/point-of-realization">point of realization</a>, I frequently thought about ways to
achieve quality of life through fulfillment in the things I do. We are likely to limit
ourselves through our entire lifetime by constraining the things we seek fulfillment in.</p>
<p>From the moment I hit my <a href="https://www.josephrex.me/point-of-realization">point of realization</a>, I frequently thought about ways to
achieve quality of life through fulfillment in the things I do. We are likely to limit
ourselves through our entire lifetime by constraining the things we seek fulfillment in.</p>
<p>As of the date of this writing, my home page describes me as a <strong>Creative Technologist</strong>
because it is the best umbrella term that describes me. A downside to that title is the
vagueness in what I do. But what’s the alternative? It will be using a
term that curbs what I am supposedly capable of. Something like <strong>Frontend Engineer</strong>.
There is absolutely nothing wrong with being a frontend engineer and I could have that
title for work if it were the position I applied for at a company. Constraining titles
like that fit right into the way organizations work because a lot of times, we are
nothing more than the role we were hired for. As bad as that may sound, I think it is a
good thing to respect and leverage the constraints of our work positions. It means we
are not overworking beyond the roles we were assigned. It does not mean we choose to
be stuck in that position forever. We should definitely work towards promotion as
stagnation breeds boredom and deterioration<sup class="footnote-ref"><a href="https://www.josephrex.me/life-with-segmented-purpose/#fn1" id="fnref1">[1]</a></sup>.</p>
<p>Beyond the boundaries of work, I do not think we should hold the same titles we hold at
work because work constraints do not apply to our life. I once valued being a specialist
over a generalist so much, then I realized that although they may be antonyms of each
other, it does not make them mutually exclusive. So, how does one simultaneously be a
generalist while being a specialist? Through <strong>distributed specialization</strong>.
I <a href="https://www.josephrex.me/im-an-x-programmer/">wrote on this 7 years ago</a> but it was less articulate.</p>
<p>The thing with centralized specialization is that it creates this myth of purpose that
people end up chasing throughout their lifetime and never feeling fulfilled about, as
seen in the Pixar movie - Soul. If you haven’t seen the movie, here’s a short explainer
video I would really recommend you watch.</p>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/K5BqYgpxPoY?controls=0" title="Pixar's Soul: Find Your Life Purpose in 8 Minutes" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<p>A wrong interpretation of this movie will be concluding that we do not need purpose as it can only
lead us to feeling lost and dissatisfied in life. Finding purpose is only really difficult when
we focus on finding a singular source of satisfaction and happiness for our multi-phased life.</p>
<blockquote>
<p>Decentralization destroys monoliths</p>
</blockquote>
<p>As different forms of decentralization destroy monolith, we go from looking up to an unreachable,
mighty entity, into seeing possibilities that might have been otherwise unnoticeable. A distributed
purpose might seem like having no purpose at all and that’s good because it lowers your expectations,
which leads to lowered disappointments.</p>
<h2 id="distributing-your-purpose" tabindex="-1">Distributing your purpose</h2>
<p>We have established that distributing your purpose can help shatter the myth of purpose while
retaining purpose. I do this by having segments for each purpose, and allowing for a cascade among
purpose. Here is a definition of cascade I like in this context:</p>
<blockquote>
<p>A process whereby something, typically information or knowledge, is successively passed on.</p>
</blockquote>
<p>Just like waterfalls cascade into bigger bodies of water, we do not have to begin our life chasing
after a big purpose. Be the waterfall!</p>
<p>It is 2021 and I am called a software engineer in my full time job, and an adjunct instructor in my
part-time job, but here is how I got here: I got computer security certifications, loved every bit
of security and prepared to be a licensed penetration tester, but I only went as far as being an
instructor for various cohorts pursuing the same certification I had once acquired.
I loved Linux machines as they were where I spent the most of my time as a security professional.
I was once into drawing comics in my school notes while in middle school and memories of that made
me think I wanted some association of art with what I did.
As unrelated as drawing comics is to managing a Linux machine, I got caught somewhere in
the middle and started trying to address the ugly user interface of my powerful Linux operating
system. From trying to create my own fancier <a href="https://kde.org/">KDE</a> desktop, to building GUI in Qt, GTK, and
writing what is still my most viewed article on this blog about <a href="https://www.josephrex.me/getting-started-with-gui-development-in-python/">building GUIs in Python</a>.
I thought it only made sense to be a backend software engineer with the things I already knew and
liked when security was not working out for me in Nigeria. After a few years of working as a
backend engineer, I had to freelance and find people to pay for design and frontend work for my
gigs. This led me into learning those skills to be able to deliver myself as a full package to
my clients. I am also currently into playing basketball and cooking.</p>
<p>From that short story, here are some life niche I can extract: <strong>Comic artist</strong>,
<strong>OS GUI developer</strong>, <strong>Security professional</strong>, <strong>Designer</strong>, <strong>Chef</strong>, <strong>Frontend engineer</strong>,
<strong>Backend engineer</strong>, <strong>Writer</strong>, <strong>Teacher</strong>. In all these explorations, I never felt like I was
switching from one thing to another and starting over. They all flowed into each other. After
observing this, I decided it was up to me to prepare the plunge pools I want to flow into as a
waterfall. Then I started scheduling things to do at certain ages.</p>
<p>Between 25 and 30 (I am somewhere in between) I will get a little more into evolutionary art and
more generative art. At 38, I will be getting into woodworking and sculpture, at 45 I will get
into painting. At each of these breakpoints my goal is to do these more, and reduce my time on
other things that I may still have to do either for work or for personal businesses. I can be a
specialist painter at 46 and still work as a software engineer, while dialing down the time I
spend on software outside work and dialing up a very specific branch of painting.</p>
<p>We are met with the myth of purpose when we try to narrow down just one out of the things that
define us, and base our entire life on that one thing. A better alternative to that will be to amplify
specific life purposes across different time periods of our life.</p>
<p>The quandary of being a generalist is that you only get to scratch the surface of everything
in your horizon. To have the specialist kind of impact in a job that requires you to be generalist, you might need to
have once lived as a specialist in at least one of your areas of generalization. As a full-stack
software engineer, I think the areas I have specialized in the past help me do a better work as a
generalist. You might find me describing myself as a specialized generalist.</p>
<p>I will like to hear your thoughts. Have you limited yourself by a title? Have you been told to
do something a little different from what you do and outrightly replied that you are not
capable without trying? Are you like Joe from the Soul movie that only talks about Jazz at the
barber shop, that your barber wishes he could talk about something else with you, and you just
care about the one thing you feel is your sole life purpose.</p>
<p>You may subscribe below to get updates on new posts from me with more interesting gems.</p>
<!-- https://convertkit.slack.com/archives/C0VFM08AK/p1603385931367700 -->
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Stagnation leads to the result of doing nothing about a <a href="https://en.wikipedia.org/wiki/Broken_windows_theory">broken window</a>. <a href="https://www.josephrex.me/life-with-segmented-purpose/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Planning life finances2021-02-19T05:25:59Zhttps://www.josephrex.me/planning-life-finances/<p>When I was a teenager I always thought I would either end up in accounting like my dad, or in a medical profession like my mom. We really limit ourselves to the choices we see around us sometimes, but thankfully, the more adventurous side of me chose to take neither of those paths.</p>
<p>When I was a teenager I always thought I would either end up in accounting like my dad, or in a medical profession like my mom. We really limit ourselves to the choices we see around us sometimes, but thankfully, the more adventurous side of me chose to take neither of those paths.</p>
<p>It has been over a decade since I ever considered a career in accounting and finance and I have once again made it a subject of concern. Except now I am very certain that I am fine with my career as a software engineer. As I inevitably have to make the right financial decisions for my family that only currently consists of my dog, my wife, and I, I figured I might as well do it good enough to never have to let down my little family.</p>
<p>My exploration on this journey to better finance really started like many other interests I have; by using a software application that poked my curioty and sparked my interest. For this, it was <a href="https://debitandcredit.app/">Debit & Credit macos desktop app</a>. Before this app I had seen finance nerds share spreadsheets among each other and that just didn’t seem fascinating enough for me. I couldn’t edit a spreadsheet file without
breaking a formula or worse.</p>
<p>A friend had recommended <a href="https://mint.intuit.com/">Mint</a> to me a long time ago and I gave it a try.
I think Mint is a beautifully designed application with some cool integrations to link your bank accounts and various scheduled payment accounts which it then uses to spit out graphs and charts to show your spending habits. The problem I had with Mint was that it was so cool that it fed into my laziness by not making me do any extra work. As someone new into finance and accounting, simply showing me awesome graphs and telling me to save more on eating out next month is just not enough to motivate me to do so.</p>
<p>The approach with Debit & Credit might seem tedious to some but I would rather describe it as active finance management (over passive which mint offers). We tend to do better at things we do more actively, and give better attention to. By Debit & Credit being more active, I mean I have to enter each transaction into my transaction history without relying on an integration to pull all of that data from my banking accounts. In doing so, I started to see my spending patterns, and figuring out the recurring expenses that I could schedule to update into my statement as needed.</p>
<p>Being active should not mean I cannot automate some of the transactions, it just means I am more aware of when a transaction goes in or out. This experience of deciding when transactions come in or out of your transaction history gives you a lens into your financial future and past that you wouldn’t otherwise get with an application like Mint in my opinion.</p>
<p>Applications like <a href="https://www.truebill.com/">Truebill</a> make money off the fact that people do not know what goes in or out of their account. By paying a closer attention to this, you can offer yourself more of what Truebill offers by questioning all your outgoing transactions to see if they can be any less than they currently are. This new awareness will help you question things that services like Truebill would not even be capable of detecting. An example: A lot of web developers joke<sup class="footnote-ref"><a href="https://www.josephrex.me/planning-life-finances/#fn1" id="fnref1">[1]</a></sup> about the number of domains they buy for potential side projects that never yield to anything. I add subdomains to my one domain instead because it not only does not give me an extra expense, it saves me from setting up a scheduled transaction for it. I have reversed how I put my laziness to use as my reluctance to track extra expense helps me avoid the irrelevant ones.</p>
<blockquote>
<p>Redirect your reluctance for manual transaction tracking into a reluctance for creating irrelevant expenses that are not worth tracking.</p>
</blockquote>
<p>As I used Debit & Credit more, and relished the predictability of income and expense, it made me see the importance of budgeting. With budgets, I can now have things that are typically not recurring expenses to become recurring when boxed up in a budget. In doing so, the monthly <dfn title="what is lost after expenses are subtracted from income">deficit</dfn> or <dfn>surplus</dfn> become easy to derive, and this helps us as a family make attainable goals. I will share a spreadsheet template that
links goals to cash flow below.</p>
<p>With all of the information we now have from entering our transactions, Debit & Credit provides some beautiful graphs too, making me not feel left out from a tool like Mint. It provides reports for theses:</p>
<p><img src="https://res.cloudinary.com/strich/image/upload/v1613710412/debit-and-credit-reports_ficynw.jpg" alt="Debit and Credit reports" /></p>
<p>In the <strong>How much do I earn compared to my expenses</strong> report, I can see the months with surplus and work towards either retaining that consistent surplus or working towards more. There are unfortunately a few months that deficits happen, but that should not be the leading trend.</p>
<figure>
<img alt="Earnings vs expense trend" src="https://res.cloudinary.com/strich/image/upload/v1613710896/earnings-expenses-debit-n-credit_ixdlkn.jpg" />
<figcaption>
Before the February paychecks
</figcaption>
</figure>
<p>To track these in a spreadsheet, you can use my <a href="https://docs.google.com/spreadsheets/d/1qK7pWqjuXqSdCQWNDEpBURPGBh3I21R_WanMrfUNVA0/edit?usp=sharing">template here</a> (Disclaimer: this does not mirror my personal/family finance in any way).</p>
<p>I would love to go into how I have been able to apply some of the knowledge from this app into creating the super helpful spreadsheet with great formulas that I just shared with you, but I will dive into that in a different post.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>It’s not a joke, people really have up to 100 domains they do not use and the average cost of one is $14 <a href="https://www.josephrex.me/planning-life-finances/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Themed Years2019-12-20T04:55:38Zhttps://www.josephrex.me/themed-years/<p>In 2013 I got a journal with themed sections and it felt so much like it was all shaped around
my life. I don’t have it anymore now but I loved the idea behind theming fragments of my life.</p>
<p>In 2013 I got a journal with themed sections and it felt so much like it was all shaped around
my life. I don’t have it anymore now but I loved the idea behind theming fragments of my life.</p>
<p>As we draw closer to a new year – 2020, the year of flying cars, I’ll implore you to consider
theming your year. Perhaps over a resolution. I have nothing against resolutions and I think
different things work for different people. However, I’ve found themes to be a lot more
effective for me in the sense that I get to feel accomplished no matter how much achievement
was gained within the theme.</p>
<p>For example, my entire year 2019 was themed “pursuing happiness”. I don’t know what the definition
of happiness is for you, but I got a job when I was desperate for one, I got married
to the most amazing woman in the world, I got my green card shortly after application with
no hassle (which most people would consider odd), and soon I believe I will be getting an offer
from one of the companies I applied to for a new role ✌🏾.
I’m more happy now than I’ve ever been in my life. While I’m aware there’s still a lot to be
achieved, my theme for the year was fulfilled and I found happiness based on my perception of it.</p>
<p>You may choose to not only theme your years but also theme every quarter in it. My theme for
2020 is <strong>BUILD</strong> which is vague and gives enough room for me to be accomplished even if all
I did was build a set of lego bricks. Within 2020 I’ve themed the first quarter as <strong>RECOVERY</strong>,
the second quarter as <strong>BALANCE</strong>, the third as <strong>THE GOOD FIGHT</strong>, and the fourth as
<strong>BUILD AND GROW THE TREE</strong>. Each of those themes hold some meaning to me that I know can
be fulfilled with my strength and God’s help.</p>
<p>Your themes can be words, phrases, or sentences. A beautiful feature of theming your year is
that you can easily translate your resolutions into them, and encapsulating other goals within
the chosen theme. For example, if you planned to lose some weight or eat healthier in the new
year, you could create a theme titled <strong>RIGHT DECISIONS</strong>. This way you would try to remind
yourself all the time if whatever you’re doing is the right decision towards your life’s
ultimate goal. Eating unhealthy? Is this the right decision? Probably not. And remember that
good things may not always be the right decision too. With a theme like <strong>RIGHT DECISIONS</strong>,
you probably will be aiming towards moderation, so spending an overwhelming amount of time at
the gym can be a right decision for some and not be for others.</p>
<hr />
<p>It is totally fine to list a large number of goals as opposed to resolutions but it is not
always easy for everyone to check items on a list of goals. I’ve also found goals to be
generative. And what I mean by that is a goal can birth more goals in order to be accomplished,
and you can either end up jumping to other goals with some incomplete or end up spending too
much time on the nested/birthed elements of a top level goal that you don’t get to reach other
top level goals.</p>
<p>This is why I think theming my years is the best decision I can make. I hope it works for you too!</p>
We Are All Wrong2019-06-27T17:14:57Zhttps://www.josephrex.me/we-are-all-wrong/<p>We hate being wrong as humans and that often clouds our judgement
in different situations. Even when we are certainly wrong but
have held on to a belief for so long, we let <a href="https://en.wikipedia.org/wiki/Confirmation_bias">confirmation bias</a>
impede our acknowledgement of the truth that we are wrong.</p>
<p>We hate being wrong as humans and that often clouds our judgement
in different situations. Even when we are certainly wrong but
have held on to a belief for so long, we let <a href="https://en.wikipedia.org/wiki/Confirmation_bias">confirmation bias</a>
impede our acknowledgement of the truth that we are wrong.</p>
<p>In the penultimate episode of The Big Bang Theory’s season finale,
the vanity card had this:</p>
<figure>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/Screenshot_2019-05-17_14.47.48_gnmcor.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_780,c_fill/Screenshot_2019-05-17_14.47.48_gnmcor.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/Screenshot_2019-05-17_14.47.48_gnmcor.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_780,c_fill/Screenshot_2019-05-17_14.47.48_gnmcor.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/Screenshot_2019-05-17_14.47.48_gnmcor.jpg" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_780,c_fill/Screenshot_2019-05-17_14.47.48_gnmcor.jpg" />
<img src="https://res.cloudinary.com/strich/image/upload/w_780,c_fill/Screenshot_2019-05-17_14.47.48_gnmcor.jpg" alt="text from chuck lorre" width="780" height="657" loading="lazy" />
</picture>
<figcaption>Vanity card from the big bang theory</figcaption>
</figure>
<p>I read the vanity cards from most episodes of the big bang theory and I was
especially happy to see that while we approached the finale, we got a very
powerful message to hold with us forever as the show comes to an end.</p>
<p>As humans, we all build a <a href="https://en.wikipedia.org/wiki/Mental_model">mental model</a> based off of our backgrounds,
the things we were exposed to, and the ways our parents or guardians perceived
the world. Some of those lessons and knowledge that we have acquired might
have kept us long enough to the point we are but it does not exactly mean
they are right. Parents are often wrong and this is something I want to
keep reminding myself of when I do become a parent.</p>
<p>There is so much controversy and disagreement in the world because everyone
believe they are right, and aren’t willing to make a shift of perspective to
view how other opinions may weigh against their opinions. I’ve always said
<strong>change is hard</strong> as I’ve also heard a lot of other people say and agree to
that fact. If we find it hard to change very little things like our choice
of music or choice of food, how much more our overall perspective on delicate
matters?</p>
<p>A smart friend of mine gave an interesting talk at a conference on community
disagreement in our software industry:</p>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/7-C0KGA7xb4?controls=0" title="Why Can't We All Just Get Along? by Chidinma Kalu | JSConf EU 2019" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<p>and the crux of the talk about getting along is that we have people with a great
lack of empathy who constantly make decisions that hurt other people without
realizing. Unfortunately, a lot of these people fail to admit how they are wrong
even when they are being told. This is also because we associate being wrong
with being a loser and that’s an inaccurate association. Learning in life that it
takes several fails to get a win, it’s only more evident that acceptance of
our wrongs is equivalent to taking a step to win. <mark>By being wrong we aren’t losers, we
are losers when we fail to stop being wrong at the expense of the emotions of
everyone else around us</mark>.</p>
<p>We learn from biblical history that it takes penitence for a sinner to transition
into a saint. And as someone who chooses to learn through history rather than
re-making mistakes that have repeatedly led to bad outcomes, I choose to accept that
I am wrong when I realize I am. I also choose to suppress my confirmation bias.</p>
<p>An easy way to realize that our mental model of things might need some fine tuning
is often when we get a partner or associate closely with other people such as friends
or roommates. We tend to judge others about the actions they take that do not fit
into the way we perceived life for the majority of our lives and they judge us too
because we certainly do things that differ from the way they might have done things
in their lives. We can either choose to squawk and debate about who is wrong at
each other or choose to reach valuable conclusions where we both learn from each other.
Although, there are cases where the conclusion is that neither of the parties will
compromise to the perceptions of the other, we may also disagree in peace.</p>
<hr />
<p><a href="https://en.wikipedia.org/wiki/Id,_ego_and_super-ego#Super-ego">Psychoanalysis</a> teaches that we are all wrong and we’ve always been wrong from birth.
The <strong>Id</strong> is dominant in us as infants, and it takes mental growth to build a <strong>Super-ego</strong>
that will balance out our wrong notions with moral and right actions. Babies bite,
babies have tantrums, and as they grow older, they learn these things are wrong and do
away with them. But we all know growth is physically stunted for some humans. Unfortunately,
there’s mental growth stunt as well which results in adults with tantrums. A lot of this
kind of adults are in abundance on social media. They come as good and as bad and we
often take sides with either side of them. There are those who are definitely making
wrong statements based on wrong opinions they wouldn’t concede on. There are also
those who overstretch their right opinions and truths till it <a href="https://www.josephrex.me/hurt-people-hurt-people/">hurt others</a> and seemingly
becomes wrong. In the end, it’s hard to tell who is right. So we are all wrong!</p>
Lets Talk Safe Navigation2019-06-15T01:52:17Zhttps://www.josephrex.me/safe-navigation/<p>Safe navigation operator is a syntactic construct mostly found and used in
programming languages that offer the object oriented programming paradigm. Safe navigation is needed when navigating properties/methods/children of an object with a need to ascertain that there are no broken pointers.</p>
<p>Safe navigation operator is a syntactic construct mostly found and used in
programming languages that offer the object oriented programming paradigm. Safe navigation is needed when navigating properties/methods/children of an object with a need to ascertain that there are no broken pointers.</p>
<p>Safe navigation in hashmaps/objects/dictionary is very much similar to the way pointers work in linked lists. For a given linked list. Pointers connect each node in a linked list from the first node to the next node.</p>
<figure>
<img alt="Linked list pointer and reference" src="https://res.cloudinary.com/strich/image/upload/v1560539033/safe-nav-fig-1_lzceur.jpg" loading="lazy" />
</figure>
<p>Dereferencing is often taught along with linked lists as a way to ensure that there is a valid pointee/reference for every pointer. And as such, I had always seen safe navigation as a form of dereferencing operation. It was odd to me that the <a href="https://en.wikipedia.org/wiki/Safe_navigation_operator">wikipedia page of safe navigation</a> didn’t emphasize more on how related they are. Any pointer with a bad reference is known as a bad pointer. In the case of linked lists, that might mean it does not link to any node (data node or dummy node).</p>
<figure>
<img alt="Linked list pointer and reference" src="https://res.cloudinary.com/strich/image/upload/v1560540349/safe-nav-fig-2_xa51gk.jpg" loading="lazy" />
</figure>
<p>In the figure above, <strong>B</strong> is still being referenced through a pointer but with no valid pointee. Without proper dereferencing here, we have a broken linked list which can further lead to a broken abstract datatype we may be trying to achieve with the linked list.</p>
<p>I encountered my first safe navigation challenge in ruby before I found an <a href="http://mitrev.net/ruby/2015/11/13/the-operator-in-ruby/">article with a proper breakdown</a> of how to do it right.</p>
<p>We typically would have:</p>
<pre class="language-ruby"><code class="language-ruby"><span class="token keyword">if</span> a <span class="token operator">&&</span> a<span class="token punctuation">.</span>b <span class="token operator">&&</span> a<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c<br /> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><br /><span class="token keyword">end</span></code></pre>
<p>to safely traverse from object a down to the value of c. But active record comes with a <code>.try()</code> syntax that makes it much prettier.</p>
<pre class="language-ruby"><code class="language-ruby"><span class="token keyword">if</span> a<span class="token punctuation">.</span>try<span class="token punctuation">(</span><span class="token symbol">:b</span><span class="token punctuation">)</span><span class="token punctuation">.</span>try<span class="token punctuation">(</span><span class="token symbol">:c</span><span class="token punctuation">)</span><br /> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><br /><span class="token keyword">end</span></code></pre>
<p>Maybe just better and slightly more concise and not prettier. Really hard to see any beauty here. Ruby eventually came up with a dereference operator that lets us just have:</p>
<pre class="language-ruby"><code class="language-ruby">my_variable <span class="token operator">=</span> a<span class="token operator">&</span><span class="token punctuation">.</span>b<span class="token operator">&</span><span class="token punctuation">.</span>c</code></pre>
<p>Similarly, in JavaScript we can navigate safely with:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">if</span><span class="token punctuation">(</span>a <span class="token operator">&&</span> a<span class="token punctuation">.</span>b <span class="token operator">&&</span> a<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// use a.b.c here</span><br /><span class="token punctuation">}</span></code></pre>
<p>But as much as JavaScript is bloated with WTFs, there’s some nice parts to it (I can’t name many). JavaScript handles immediate property dereferencing in a much safer way than many other languages. When trying to access an object property we will always get a value, provided the datatype we are hitting is a hashmap object i.e <code>{}</code> or <code>new Object()</code>.</p>
<p>We run into problems when we try to access properties that are nested more than 1 level deep. This is because JavaScript will always return a value for object properties and it will return <code>undefined</code> for non existing object properties.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span><br />a<span class="token punctuation">.</span>b <span class="token operator">=</span> <span class="token string">'Canada won the nba championship'</span><span class="token punctuation">;</span><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Canada won the nba championship</span><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span></code></pre>
<p>Because JavaScript primitive types like String and Array are implemented as objects, we still will be able to access the property <code>c</code> of <code>a</code> without having an error thrown. But when we try any of these:</p>
<pre class="language-js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>b<span class="token punctuation">.</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c<span class="token punctuation">.</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>it results in</p>
<pre><code>Uncaught TypeError: Cannot read property 'd' of undefined
</code></pre>
<p>Knowing these, I think it’s best to flatten an object whenever we have control of the data in order to have unanticipated error in applications. But sometimes we just need to work with the data available and that might not exactly be the way we want it to be. For such cases, we want to first affirm that we are working with an object type and nonething else. If you use a type system like typescript, you’d probably be safe. But with regular JavaScript, you can assert that you have the expected object type by either peeking to see if the property exist or lazily expecting that the value should be truthy.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> myVarA <span class="token operator">=</span> a <span class="token operator">&&</span> a<span class="token punctuation">.</span>b <span class="token operator">?</span> a <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span><br /><span class="token keyword">const</span> myVarB <span class="token operator">=</span> a <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>I would go with the former over the latter in most cases as it not only asserts that the data is truthy but also that it’s an object. The property I’m checking for doesn’t really matter at this point because that’s just a shorter way to check I have an object than using other possible options. With the above, we may now use <code>myVarA</code>.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">if</span><span class="token punctuation">(</span>myVarA<span class="token punctuation">.</span>b <span class="token operator">&&</span> myVarA<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// use myVarA.b.c</span><br /><span class="token punctuation">}</span></code></pre>
<p>Thie two last snippets will give the same results as simply having this but it all boils down to your preference.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">if</span><span class="token punctuation">(</span>a <span class="token operator">&&</span> a<span class="token punctuation">.</span>b <span class="token operator">&&</span> a<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// use myVarA.b.c</span><br /><span class="token punctuation">}</span></code></pre>
<p>I begin to feel like my code is not readable/clear enough when I have to check so many conditions at once. Hence, I prefer the former break down. There are rumors that JavaScript will introduce dereference operator that will allow us to simply write:</p>
<pre class="language-js"><code class="language-js">a<span class="token operator">?.</span>b<span class="token operator">?.</span>c</code></pre>
<p>But till then, I would still try to use flattened objects where I can. Lodash has utils for this and it also has a <code>.get()</code> object method that behaves like <code>#dig</code> in ruby Hash data type.</p>
Hurt People Hurt People2019-04-20T20:20:54Zhttps://www.josephrex.me/hurt-people-hurt-people/<p>My wife and I just went to see the movie <a href="https://www.imdb.com/title/tt8085790/?ref_=nv_sr_1?ref_=nv_sr_1">Little</a> - the new movie by Marsai Martin.
It was a good movie and the narrative was about a lady who had been treated unfairly
by peers at a young age.</p>
<p>My wife and I just went to see the movie <a href="https://www.imdb.com/title/tt8085790/?ref_=nv_sr_1?ref_=nv_sr_1">Little</a> - the new movie by Marsai Martin.
It was a good movie and the narrative was about a lady who had been treated unfairly
by peers at a young age.</p>
<p>In an attempt to defend herself from being hurt in the future,
she worked hard to achieve success and “hurt people before they could hurt her” by
being so mean to everyone who worked with and for her.</p>
<p>Being magically turned into a child made the protagonist realize that she had been
hurting a lot of other people in a quest to defend herself.</p>
<p>Before going for the movie, my wife and I had talked about a post I found on twitter
where a lady questions the sanity of other ladies who try to get in shape for their
wedding ceremonies. She claims ladies try to get in a good shape to marry a man who
eats carelessly and generalized to imply that this is always the case.</p>
<p>After seeing this post, I was curious to know what had led to such conclusion she
made about other women. Taking a Freudian psychological approach, I dug into her past
and found that she had gone through a divorce. She had been hurt by a man and I feel
sorry about that. But that does not give her a right to go on social media judging
other ladies. A lot of ladies get in shape before wedding ceremonies to have wedding
photos that they are proud of. Their need is beyond anyone else’s on that and I know
this as my wife and I prepare for our white wedding. Also, when did doing something
for your partner become a wrong thing to do? I would do whatever my wife wants and she
tries to do things for me as well to make our union a great one.</p>
<p>I took my worried concerns about the post to my wife and she replied saying:</p>
<blockquote>
<p>Hurt people hurt (other) people.</p>
</blockquote>
<p>I could not agree with this more and I think it stands as a major problem in our society
today. With racial, political, and sexual orientation issues. Empathy is an attribute
greatly lacking in a lot of humans and it takes a lot of self training to build some.
We often make dispositional attribution of people we come across rather than weighing
the factors around to make situational attribution.</p>
<p>As a black person of color, I’ve been judged a lot by my color rather than having people
get to know me before making an informed decision about me. Similarly, I’ve seen other
minorities judge other people in majority groups a lot because they are hurt from the
effects we have suffered as minorities. Black people have suffered through history and
we still experience racism, discrimination, and hate. However, we can easily hurt people
by making quick actions on other people to defend ourselves.</p>
<p>In all situations, the majority groups need to have more empathy on the minorities and
be kind to every human. Minority groups should also be empathetic and only address those
who have proven to be insensitive and insouciant about our feelings.</p>
Stateful UI Engineering2019-02-11T05:42:46Zhttps://www.josephrex.me/stateful-ui-engineering/<p>There is a common misconception in the web industry that frontend development is easy and has little or no use for algorithms and complex software concepts. This might be the most inaccurate perception for anyone to have. Building user interfaces is infact, exhaustive and can be more complex than backend sometimes.</p>
<p>There is a common misconception in the web industry that frontend development is easy and has little or no use for algorithms and complex software concepts. This might be the most inaccurate perception for anyone to have. Building user interfaces is infact, exhaustive and can be more complex than backend sometimes.</p>
<p>Graphical User Interfaces have always been fascinating to me, and after observing communities around them and building them for various platforms, I can confirmingly say that it could be the most sophisticated part of building software. For a short background on my past and recent experiences building GUIs, I have built python desktop GUIs with libraries like Qt, GTK, which I’ve <a href="https://www.josephrex.me/getting-started-with-gui-development-in-python/">blogged about here</a>, and I’ve built themes on KDE Linux that never were shared publicly. As of this writing date, I’ve been building web frontend for 8 years.</p>
<p>In the past 5 years, frontend web development has experienced an upsurge of libraries and frameworks that try to tackle how we address UI engineering. As the web scales, we are gradually getting faced with the challenges of building interfaces beyond the simplicity of declarative HTML and CSS. Some are repulsive to these changes and some of us are open to exploring how they may improve how we build software. This caused huge debates recently that I would not like to be a part of. But as a developer, my mantra has always been to explore new technologies and see how they fit into my workflow, then decide if I should drop them or adopt them; not bash them unreasonably.</p>
<p>Stateful UI engineering is essentially <a href="https://en.wikipedia.org/wiki/Automata-based_programming">automata-based programming</a> and it can be applied to various forms of programming and engineering. It has been adopted more in electronics and other industries that involve programming hardware and software, but its usage is relatively new in web development. If you’ve used modern JavaScript frameworks, you probably would have used the term <strong>state</strong> in the context of your component states or perhaps your application state. The use of state in automata-based programming is not too far off that context but it is a little more strict and refined. It is the application of finite automata (a.k.a Finite State Machines) in modeling a software/hardware.</p>
<h2 id="finite-state-machines" tabindex="-1">Finite State Machines</h2>
<p>Finite state machines is a model with some mathematical origin we don’t necessarily need to know. A finite state machine comprises of a list of states and an initial state that is inclusive in the list. Each of these states can accept inputs to tell them what state to change into. Let’s start with the basic example of traffic lights which have 3 states - <strong>Red</strong>, <strong>Green</strong>, and <strong>Yellow</strong>. Each of these states have a defined state that they can transition into i.e <strong>Red</strong> goes to <strong>Green</strong>, <strong>Green</strong> goes to <strong>Yellow</strong>, and <strong>Yellow</strong> goes to <strong>Red</strong>.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1549844792/traffic-lights_d4g2kh.gif" alt="Traffic light with changing lights" />
</figure>
<p>To represent that machine automation flow in a simple JSON format we will have:</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br /> <span class="token string">"initial"</span><span class="token operator">:</span> <span class="token string">"Red"</span><span class="token punctuation">,</span><br /> <span class="token string">"states"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token string">"Red"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">"trigger"</span><span class="token operator">:</span> <span class="token string">"Green"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token string">"Green"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">"trigger"</span><span class="token operator">:</span> <span class="token string">"Yellow"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token string">"Yellow"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">"trigger"</span><span class="token operator">:</span> <span class="token string">"Red"</span> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>The trigger is the input that the machine receives to change its state. There can be all kind of inputs to a state machine. It could be a timer that triggers the next state like most traffic lights or it could be controlled by human input. Perhaps a 3-way switch. The major point here is that with these defined possible triggers for each state, a <strong>Green</strong> state will never trigger a <strong>Red</strong> because it does not know how to. It knows only to go <strong>Yellow</strong> when triggered and that makes it much more predictable and reliable. Another example is handbrakes as seen in old stick-shift cars</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1549846001/handbrakes_z6xo0b.jpg" alt="Stick shift car with handbrakes" />
</figure>
<p>If you ever drove any of these or had a ride in them, you know you can’t just get in the car and drive when the handbrake is up. The handbrake has to be pushed down before the car moves. A JSON representation of this would be:</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><br /> <span class="token string">"initial"</span><span class="token operator">:</span> <span class="token string">"idle"</span><span class="token punctuation">,</span><br /> <span class="token string">"states"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token string">"idle"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">"IGNITION_ON"</span><span class="token operator">:</span> <span class="token string">"start"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token string">"start"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">"HANDBRAKE_DOWN"</span><span class="token operator">:</span> <span class="token string">"movable"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token string">"movable"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">"GEAR"</span><span class="token operator">:</span> <span class="token string">"drive"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token string">"drive"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">"BRAKE"</span><span class="token operator">:</span> <span class="token string">"rest"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token string">"rest"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">"HANDBRAKE_UP"</span><span class="token operator">:</span> <span class="token string">"end"</span><span class="token punctuation">,</span> <span class="token string">"GEAR"</span><span class="token operator">:</span> <span class="token string">"drive"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token string">"end"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">"IGNITION_OFF"</span><span class="token operator">:</span> <span class="token string">"idle"</span> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>We can explore many more examples like its application in bathroom faucets, stopwatch, but it will be nice to have a visual represantation of these state flow we have so far and that’s where statecharts come in.</p>
<h2 id="statecharts" tabindex="-1">StateCharts</h2>
<p>State charts are visual charts of finite state machines as you might have inferred from the name. Traditionally, we learn to use flowcharts to illustrate the top-down approach of an algorithm but <a href="https://en.wikipedia.org/wiki/State_diagram#State_diagrams_versus_flowcharts">wikipedia distinguishes statechart from flowchart</a> with the image:</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1549850879/Statechart_vs_flowchart_ajqlxn.jpg" alt="Flow chart and State chart compared" />
</figure>
<p>There is the <abbr>SCXML</abbr title=“State Chart XML”> (State Chart XML) <a href="https://www.w3.org/TR/scxml/">specification</a> that defines a way to structure a state machine in XML. Our examples above are compatible to this specification but only in JSON format.
<a href="https://twitter.com/davidkpiano">David Khourshid</a> wrote an excellent JavaScript library called <a href="https://github.com/davidkpiano/xstate">XState</a> that is also based on this specification and lets us apply XState to our applications.</abbr></p>
<hr />
<p>To build a conventional React application with an ajax request we can have the
following:</p>
<blockquote>
<p>Note: Examples here use the React Hooks API</p>
</blockquote>
<pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> <span class="token punctuation">[</span>posts<span class="token punctuation">,</span> setPosts<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'https://example.com/api'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token function">setPosts</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>items<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>posts<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">(</span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>And then we probably get an error: <code>Cannot access property map of undefined</code>. At this point you refactor the code a little to handle loading state so you don’t try to access a method on an array that has not been loaded.</p>
<pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> <span class="token punctuation">[</span>posts<span class="token punctuation">,</span> setPosts<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'https://example.com/api'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token function">setPosts</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>items<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token keyword">if</span><span class="token punctuation">(</span>posts<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>posts<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">(</span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Loading...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br /><span class="token punctuation">}</span></code></pre>
<p>We might get away with this but now we aren’t able to distinguish between when the request is still processing/loading and when there is no post after request is completely loaded.</p>
<p>For a slightly smarter approach we will record our state to know when request is processed and check if the data is empty at that point.</p>
<pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// States are: initial, loading, loaded, empty, error</span><br /> <span class="token keyword">const</span> <span class="token punctuation">[</span>ready<span class="token punctuation">,</span> setReady<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">'initial'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">const</span> <span class="token punctuation">[</span>posts<span class="token punctuation">,</span> setPosts<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token function">setReady</span><span class="token punctuation">(</span><span class="token string">'loading'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'https://example.com/api'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>results<span class="token punctuation">.</span>items<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token function">setReady</span><span class="token punctuation">(</span><span class="token string">'empty'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token function">setPosts</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>items<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token function">setReady</span><span class="token punctuation">(</span><span class="token string">'loaded'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token function">setReady</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token keyword">const</span> <span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token parameter">state</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span><br /> initial<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span><br /> loading<span class="token operator">:</span> <span class="token string">'Loading...'</span><span class="token punctuation">,</span><br /> loaded<span class="token operator">:</span> posts<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">(</span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> empty<span class="token operator">:</span> <span class="token string">'No items available'</span><span class="token punctuation">,</span><br /> error<span class="token operator">:</span> <span class="token string">'An Error occurred'</span><br /> <span class="token punctuation">}</span><span class="token punctuation">[</span>state<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">render</span><span class="token punctuation">(</span>ready<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>This is quite robust and even has an error state and will probably be the most elegant solution without finite state machines but just like I kept discovering earlier that there were base cases I wasn’t covering, I might be missing something here. We often do that as developers and that is how bugs happen. Using XState, the equivalent will be:</p>
<pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span><br /><span class="token keyword">import</span> <span class="token punctuation">{</span> Machine <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'xstate'</span><span class="token punctuation">;</span><br /><span class="token keyword">import</span> useMachine <span class="token keyword">from</span> <span class="token string">'../hooks/useMachine'</span><span class="token punctuation">;</span><br /><br /><span class="token comment">// All of this machine is predefined even before the code</span><br /><span class="token keyword">const</span> feedMAchine <span class="token operator">=</span> <span class="token function">Machine</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> id<span class="token operator">:</span> <span class="token string">'feed'</span><span class="token punctuation">,</span><br /> initial<span class="token operator">:</span> <span class="token string">'idle'</span><span class="token punctuation">,</span><br /> states<span class="token operator">:</span> <span class="token punctuation">{</span><br /> idle<span class="token operator">:</span> <span class="token punctuation">{</span> on<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token constant">LOAD</span><span class="token operator">:</span> <span class="token string">'loading'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> loading<span class="token operator">:</span> <span class="token punctuation">{</span><br /> on<span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token constant">FETCH_SUCCESS</span><span class="token operator">:</span> <span class="token string">'loaded'</span><span class="token punctuation">,</span><br /> <span class="token constant">FETCH_EMPTY</span><span class="token operator">:</span> <span class="token string">'empty'</span><span class="token punctuation">,</span><br /> <span class="token constant">FETCH_FAIL</span><span class="token operator">:</span> <span class="token string">'error'</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> loaded<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br /> error<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br /> empty<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> <span class="token punctuation">[</span>posts<span class="token punctuation">,</span> setPosts<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">const</span> <span class="token punctuation">[</span>feedState<span class="token punctuation">,</span> send<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useMachine</span><span class="token punctuation">(</span>feedMAchine<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'LOAD'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'https://example.com/api'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token function">setPosts</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>items<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token function">send</span><span class="token punctuation">(</span>snapshot<span class="token punctuation">.</span>items<span class="token punctuation">.</span>length <span class="token operator">?</span> <span class="token string">'FETCH_SUCCESS'</span> <span class="token operator">:</span> <span class="token string">'FETCH_EMPTY'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'FETCH_FAIL'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token keyword">const</span> <span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token parameter">state</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span><br /> idle<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span><br /> loading<span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Loading...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">,</span><br /> empty<span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">No item available</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">,</span><br /> loaded<span class="token operator">:</span> posts<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> error<span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">An Error occurred</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br /> <span class="token punctuation">}</span><span class="token punctuation">[</span>state<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">render</span><span class="token punctuation">(</span>feedState<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>and we can use David’s <a href="https://statecharts.github.io/xstate-viz/">XState Visualizer</a> to see a state diagram of the machine in action.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1549862739/xstate-feed-xhr_b3my5z.gif" alt="State machine animation of feed" />
</figure>
<p>It is a great way to view the action restrictions of each of your states and when a state can or cannot be reached.</p>
<p>As mentioned earlier, there are things that we often might miss when we build user interfaces without state machines even after going through quality assurance and all the various kinds of testing. David explains how the recent facetime bug could have been prevented with state machines in <a href="https://medium.com/@DavidKPiano/the-facetime-bug-and-the-dangers-of-implicit-state-machines-a5f0f61bdaa2">this article</a>. Here is another example of what state machines can prevent.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1549859964/2019-02-10_22-25-32.2019-02-10_22_29_04_eavxdh.gif" alt="Facebook modal opening behavior" />
<figcaption>Facebook nested modal behavior</figcaption>
</figure>
<p>Notice how when I open a modal within a modal, I lose context of which modal I came from. Closing the inner modal from the comments just closes all the modals, preventing me from viewing content I came from. Now let’s see twitter</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1549859966/2019-02-10_22-34-05.2019-02-10_22_38_19_x4pk54.gif" alt="Twitter modal opening behavior" />
<figcaption>Twitter nested modal behavior</figcaption>
</figure>
<p>Twitter handles this a lot better. It might just be that they covered more edge cases or they have a sought of state machine implemented but this is a much better experience and even very little things like this matter.</p>
<p>Think about how your applications can leverage finite state machines for predictability and stability. It might seem intimidating at a glance but if you struggle to get past that entry phase, it gets easier.</p>
Using the Golden Ratio in Design2019-02-03T18:08:09Zhttps://www.josephrex.me/using-the-golden-ratio-in-design/<p>The golden ratio is a math formula that exists in nature and have been adopted in designs since its discovery. There are patterns in natural objects including the sculpture of human looks that can be backed by this formula.</p>
<p>The golden ratio is a math formula that exists in nature and have been adopted in designs since its discovery. There are patterns in natural objects including the sculpture of human looks that can be backed by this formula.</p>
<p>At first glance, it might seem odd that aesthetic is being defined by a math formula. And as a developer, when I got a aware of the concept through my design explorations, I failed to believe or accept it was practicable. I had thought people just pasted the golden spiral on designs to make a meaning out of nothing. That might be the case for you now but I’ll try to work you through my journey of comprehending the concept.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1549197756/sheldon-golden-ratio-2_ru3iod.jpg" alt="Sheldon Cooper on yellow golden spiral shirt" />
<img src="https://res.cloudinary.com/strich/image/upload/v1549197756/sheldon-golden-ratio_qffh9b.jpg" alt="Sheldon Cooper on purple golden spiral shirt" />
<figcaption>Sheldon Cooper with golden spiral t-shirts</figcaption>
</figure>
<p>First, what is the golden ratio? mathematically, it is the representation of two quantities with the same ratio as the ratio of their sum to the larger of both quantites.</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mfrac>
<mrow>
<mi>a</mi>
<mo>+</mo>
<mi>b</mi>
</mrow>
<mrow>
<mi>a</mi>
</mrow>
</mfrac>
<mo>=</mo>
<mfrac>
<mrow>
<mi>a</mi>
</mrow>
<mrow>
<mi>b</mi>
</mrow>
</mfrac>
<mo>=</mo>
<mi>φ</mi>
</mrow>
</math>
<p>The golden ratio is represented with <span>φ</span> (phi) which can also be used as its mathematical constant <strong>1.618</strong> also known as the golden number. If you care about the math, <a href="https://en.wikipedia.org/wiki/Golden_ratio#Calculation">check wikipedia</a>.</p>
<p>Since we’re here to talk about design and aesthetics, let’s start with the least technical - Natural Beauty. I mentioned earlier that patterns of the golden ratio can be found in human beauty and in the natural things around us. Studies of attractiveness have backed up the theory of the existence of golden ratio in the facial construct of humans. Here is a video that illustrates that</p>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/kKWV-uU_SoI?controls=0" title="Facial Beauty Analysis and the Golden Ratio (Phi, 1.618), featuring Florence Colgate and PhiMatrix" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<p>while research still shows that beauty is not solely based on phi, we can try to recreate a face in the wrong proportions or an off-ratio and we will end up with something ugly. Something that a malformed person might look like after an accident. But there are people who aren’t considered attractive and yet haven’t been malformed in any form of accident. In most cases, their faces might still be in the precise golden ratio, but they might not be sculpted well enough to fit other beauty metrics. The <a href="https://www.beautyanalysis.com/">marquardt beauty pentagon</a> is an example of one of such metrics and here is my wife placed behind the pentagon mask. It fits nicely because she’s gorgeous.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1549204052/mandy-marquardt_ukko2q.jpg" alt="Mandy with marquardt mask" />
<img src="https://res.cloudinary.com/strich/image/upload/v1549204052/mandy-marquardt-plain_ty6zxi.jpg" alt="Mandy without marquardt mask" />
</figure>
<p>While you may argue that beauty is in the eye of the beholder, I can counter that argument by saying we all have various retina definitions that makes the pattern more prominent when we observe some people, more than when we observe others. But if you would insist there is no logic or principle attached to beauty, that’s fine too. It is worth noting that a beautiful face might not be perfectly symmetrical. As simple as human beauty analysis can be, it can also get really complex so I will move on to plants.</p>
<figure class="figure--edgeleft">
<img src="https://res.cloudinary.com/strich/image/upload/v1549210799/flower_spiral_tx2uv0.jpg" alt="Leaves in golden spiral" />
<figcaption>Golden spiral on plant</figcaption>
</figure>
<p>Plants have been known to have a physical/aesthetic illustration of the fibonacci series and with the relationship between fibonacci and golden ratio, we can begin to see how both can be observed in the natural layout of leaves, flowers, and trees.</p>
<p>The spiral on the leaves shows the ascending sequence of fibonacci. In numerals that is <strong>1, 1, 2, 3, 5, 8, 13, 21, …</strong>, where every 2 preceding numbers make up the next number. You might even apply <a href="https://en.wikipedia.org/wiki/Pascal%27s_triangle">pascal’s triangle</a> in analyzing the beauty of a subject.</p>
<p>Logo designers achieve precision with their logos with the use of golden circles. To derive that, the golden spiral is made to pan a golden rectangle with smaller rectangles making up the fibonacci series. This can also be achieved with triangles as shown:</p>
<figure>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale,a_90/golden-spiral_nicumf.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale,a_90/golden-spiral_nicumf.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale,a_90/golden-spiral_nicumf.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale,a_90/golden-spiral_nicumf.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale,a_90/golden-spiral_nicumf.png" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale,a_90/golden-spiral_nicumf.png" />
<img src="https://res.cloudinary.com/strich/image/upload/w_800,c_scale,a_90/golden-spiral_nicumf.png" alt="golden spiral" />
</picture>
<picture>
<source type="image/avif" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/golden-triangle_kqqe1k.avif" />
<source type="image/avif" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/golden-triangle_kqqe1k.avif" />
<source type="image/webp" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/golden-triangle_kqqe1k.webp" />
<source type="image/webp" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/golden-triangle_kqqe1k.webp" />
<source type="image/jpeg" media="(max-width: 799px)" srcset="https://res.cloudinary.com/strich/image/upload/w_480,c_scale/golden-triangle_kqqe1k.png" />
<source type="image/jpeg" media="(min-width: 800px)" srcset="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/golden-triangle_kqqe1k.png" />
<img src="https://res.cloudinary.com/strich/image/upload/w_800,c_scale/golden-triangle_kqqe1k.png" alt="triangular golden spiral" />
</picture>
</figure>
<p>The video below shows the derivation of stunning logos through the circles derived from the spirals.</p>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/vct4pM4Bk70?controls=0" title="How to design a logo with golden Ratio | Adobe Illustrator Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<p>I love logos and designing them have gradually become a part of what I do along with software development. Here are some logos in the wild with good use of the golden ratio:</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1549215437/logo-3_ibnbnm.jpg" width="600" alt="Logo Example 1" />
<img src="https://res.cloudinary.com/strich/image/upload/v1549215436/logo-1_jxxhwr.jpg" width="600" alt="Logo Example 2" />
<img src="https://res.cloudinary.com/strich/image/upload/v1549215437/logo-2_zytral.jpg" width="600" alt="Logo Example 3" />
<img src="https://res.cloudinary.com/strich/image/upload/v1549215436/logo-4_cadsvg.jpg" width="600" alt="Logo Example 4" />
</figure>
<p>If you choose to apply the golden ratio to logos you make, you shouldn’t bother about the detail from the start. It is always fine to make a simple sketch and then try to derive the circles on it. When making animal logos or logos from other existing objects, it is a little more straigth-forward to just begin deriving circles from the original images.</p>
<h2 id="rule-of-thirds" tabindex="-1">Rule of thirds</h2>
<p>The golden ratio extends to fields of photography and film-making. It obviously should since it is evident in us and the things around us and these fields are centered around capturing live physical events or simulating them. The rule of thirds is a guideline in cropping or positioning cameras against the subject for aesthetic results. Here is a good video on composition and cinematography that explains this in detail</p>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/cIvGRytmRaw?controls=0" title="Mastering Composition + Cinematography with Will Smith" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<hr />
<p>Back to UI engineering, there is a lot learned from golden ratio that can be put into the way we build apps and websites. Additionally, the placement of hero images, illustrations, and call to actions can be guided by the principles of the rule of thirds. Here is an example of a webpage application:</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1549216991/rule-of-thirds-website_tu2dzg.jpg" class="image" alt="Website rule of thirds" />
</figure>
<p>Although hard to notice, the text placement abides by the rule of thirds.</p>
<p>Let’s go build some amazing products.</p>
Shells2018-12-16T15:07:01Zhttps://www.josephrex.me/shells/<p>It might seem ironic to some that I find the <abbr title="Command Line Interface">CLI</abbr> to be a lot more interesting to work with than <abbr title="Graphical User Interface">GUI</abbr>. And this goes way beyond my nerdy attraction to the aesthetic. I get mesmerized by terminal interfaces in sci-fi movies because of the beauty I find in console structures and colors, but my inference on GUI versus CLI is less about that, and more about the tooling efficiency in combination with the allure.</p>
<p>It might seem ironic to some that I find the <abbr title="Command Line Interface">CLI</abbr> to be a lot more interesting to work with than <abbr title="Graphical User Interface">GUI</abbr>. And this goes way beyond my nerdy attraction to the aesthetic. I get mesmerized by terminal interfaces in sci-fi movies because of the beauty I find in console structures and colors, but my inference on GUI versus CLI is less about that, and more about the tooling efficiency in combination with the allure.</p>
<p>I’ve recently been spending quality time on learning art and design as well as applying them and I’ve found various interceptions between design and logic. There is the development of 2D application frontend with code which is my daily hobby/job, I’ve had to write code for 3D spaces for research, and quite oddly, the illustration of logical interface with well crafted design. Despite the inaccurate depiction of hacker operations in movies, the interface on so-called hacker screens still make it a blissful viewing experience.</p>
<figure class="figure--fullwidth">
<img src="https://res.cloudinary.com/strich/image/upload/v1544934873/scifi-ui_noijzy.jpg" class="image" alt="Hacker Interface" />
<figcaption>A hacker interface as seen in movies</figcaption>
</figure>
<p>I admire real life terminals just like I admire these movie-centric console interfaces. If my pupils could talk, I think they would thank me for gazing my eyes upon them. And I also think people who see my screen in work mode are either really amazed or totally bored. No one sits in-between (or so I think). But enough with my love for the visualization of command line interfaces and let’s talk about the shells in them. We all agree tools run from shells tend to be more powerful than their GUI equivalents right? right? Well, I think they are also faster in some cases and far more efficient both for your end result and for your hardware.</p>
<p>Since I’m a believer in shells, I had to explore 'em. Starting with bash shell, it was never just enough. It was bland and restrictive. Long before bash started feeling completely boring to me and before my awareness of alternative shells, I would spend time configuring my <abbr title="Prompt String">PS1</abbr> and I was never satisfied. I repeated my tweaks as often as I got idle until I found something to settle on for some years. I learned about fish shell when it first had a stable release in 2013 and I was astonished especially by its autosuggestion feature. I encountered some problems with it at the time and I had also not memorized enough unix commands on my then Linux box so I had to ditch fish shell and go back to my bash.</p>
<p>I really don’t understand how I got to know about fish before zsh, considering that zsh has been around for a long time before I started programming (eh… before I was born - 1990). But when I started with zsh it felt sleek, faster, and with oh-my-zsh - I could now have nice themes without manually configuring my PS1. Oh-my-zsh also let’s me use the zsh-like autosuggestion and at this time I didn’t mind because it was long after I had used bash enough to really know commands and be comfortable with them even without autosuggestion. Now autosuggestion just enhances and speeds up my process rather than deprive me of a knowledge I’m looking to gain.</p>
<p>I had heard people say oh-my-zsh is slow but I didn’t notice for a long time until I got another macbook from work some months ago. After setting it up like I did my personal computer, I realized it was always slow to update git branch status until I navigate to another directory and head back or navigate to present working directory with <code>cd ./</code>. This irked me but not so much because I only used work computer at work and came back home to my computer.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1544972134/oh-my-zsh_dzapfx.jpg" class="image" alt="Slow Oh-my-zsh" />
<figcaption>A git theme on oh-my-zsh being slow</figcaption>
</figure>
<p>After the release of macOS mojave, I decided it was time to lose everything and start over. I ignored all my backups and started a new beginning with my configurations. This time oh-my-zsh would bug me with its slow responses every day on my personal computer. I figured it was time to make a change to zsh prezto but I had a reluctance for change. After persisting in the frustrating experience of oh-my-zsh for so long, I finally did it. I’m now on prezto and it is the best thing in the world.</p>
<img src="https://res.cloudinary.com/strich/image/upload/v1544970924/prezto_qwd8zp.gif" alt="Prezto console" class="image" />
<p>Not only is it so responsive and fast, its sorin theme has the best PS1 I’ve ever had. My issue with past PS1 I’ve used is that they take up too much space. I would like to always see what directory I’m in, what branch I’m on (if on a <abbr title="Version Control System">VCS</abbr>), and what user is running the terminal session as well as the host. That is indeed a lot of information to shoehorn into a PS1 but prezto sorin theme does this intelligently as seen in the preview above. I’ve generally observed that with each shell upgrade I make, I’ve had less manual configurations to make as you can see from my <a href="https://github.com/josephrexme/dotfiles/commits/master">git history of dotfiles</a>.</p>
<p>As far as the terminals we run our shell in may go, I would like to assume anyone reading this post definitely knows that iTerm2 is the best you could be on at the time of this writing. Since this article began with a subject on the looks of our terminal, <a href="https://github.com/GitSquared/edex-ui">edex-UI</a> is a real world sci-fi-like terminal that you can use in your daily life or just to look fancy. I don’t use it but I think it’s cool!</p>
<img src="https://res.cloudinary.com/strich/image/upload/v1544972134/edex-ui_kqtguy.jpg" class="image" alt="Edex UI" />
Point of Realization2018-10-20T17:28:54Zhttps://www.josephrex.me/point-of-realization/<p>A sudden twist in perception may occur in our lives sometimes. Sometimes it feels
like we have had our eyes shut before the new perception was gained and other times
it really is just a change from one perception to the other.</p>
<p>A sudden twist in perception may occur in our lives sometimes. Sometimes it feels
like we have had our eyes shut before the new perception was gained and other times
it really is just a change from one perception to the other.</p>
<p>When I started using the phrase <em>point of realization</em> about 3 years ago, what it
simply meant to me was a <strong>turning point</strong> with a single occurence. A point to
realize your goals and directions in life as an individual, the point where you
stop living in fantasies and decide to take life more seriously, a point where
you do not just aspire success but are willing to take the right actions to
acquire it.</p>
<p>In this Joe Rogan’s podcast with Naval Ravikant, Naval describes what I call point
of realization as.</p>
<blockquote>
<p>Every man has two lives, and the second starts when they realize they have just
one.</p>
</blockquote>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/3-wJiblIWa0?controls=0" title="Every Man Has Two Lives - Naval Ravikant" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<p>To give an example, I grew up with a Nigerian dad who told impeccable stories about
his childhood academic success. This stories might have been true or absolute lies
but there was never a way to verify them and now even he might have forgotten what
the actual truth is by reinforcing his memory to believe what he thought he had to
tell his kids to make them strive for success. This was a known trend with Nigerian
parents and I can’t speak much of other origins I didn’t hail from.</p>
<p>The stories were irrelevant for my older brother as his intelligence and focus were
innate. He didn’t need pep talks to study because books were pooped from his
consistent gaze upon them. And his grades put smiles to my parent’s face like a
million dollar check will do to any average family.</p>
<p>Unlike my brother, I struggled with my grades and if someone had told me I was the
black sheep of my family (I wasn’t), it wouldn’t have meant a thing to me. I was just
a happy child who wanted to have fun and not be disturbed. I wasn’t rebellious but
I wasn’t an easy child either. I just chose fun over books. I loved art so I drew
over my school notes and didn’t care to take down actual notes in classes.</p>
<p>As I grew older, the ways I had fun changed but I still tried to have fun and I put
that over dedication and focus in anything. I knew what success was and I wanted to
achieve it but I just wasn’t acting towards it. So I question my perception at the
time. Did I really have a perception of life? or did I just have a definition of
life and success and regardlessly lived freely like a myopic bird? There were girls
in school who liked cool guys and the ones who liked smart guys. I seem to have
mostly attracted the former but the ones I was really interested in were the latter.
However, my actions didn’t put me in their category. That still didn’t change me.</p>
<p>I had a turning point suddenly after my high school/secondary education. I was just
ready to do things right for no reason or with no incentive at all. I can’t tell
what triggered this part of me. It was just my point of self realization.</p>
<p>That was my definition of the phrase in this title and I really wanted to write
about it 3 years ago but I resiled. After relating the mind drafted article with my
real life encounters over the years, I realized that we do not have a single point of
realization in our lives, we just have big and small ones. After learning how to
treat myself to be successful in life, I still needed to learn how to treat people
around me. I needed to learn how to show love to people. I had lived freely for so
long with cynical opinions and about 2 years ago I experienced another point of
realization that made me learn to speak respectfully to all kind of humans and
appreciate everyone for who they are. Who knows what I’m yet to realize now? I look
forward to my next point of realization.</p>
Designing Applications2018-06-14T17:51:26Zhttps://www.josephrex.me/designing-applications/<p>A good number of applications get into development phase and then to production
with no proper design or architecture. My context of application would remain
in the scope of web apps for most part of this article.</p>
<p>A good number of applications get into development phase and then to production
with no proper design or architecture. My context of application would remain
in the scope of web apps for most part of this article.</p>
<p>The common reason for this is because there’s no designer on the team or the sole
designer working on the product lacks design skills. You can’t really blame
a single developer working on a project because we were not all born to be
unicorns 🦄.</p>
<p>However, on teams I’d recommend having a designer or client-side developer with
a good eye for design and some design skill. A team without a designer can use a
good CSS framework as <a href="https://teamgaslight.com/blog/what-is-a-living-style-guide">living styleguide</a>. More about CSS frameworks and
living styleguides in a bit.</p>
<h2 id="why-does-application-design-matter" tabindex="-1">Why does application design matter?</h2>
<p>We generally take 3 things into consideration for every software product we build
and it’s more than just software these days. They are:</p>
<ul>
<li>Functionality</li>
<li>Usability/Design</li>
<li>Security</li>
</ul>
<p>Some company choose to focus on one more than the others but it’s always great to
find a perfect balance between them all. With these 3 focus areas, you can apply
the triangle of application development.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1528653990/app-triangle_ijyc4r.jpg" alt="Application Triangle" />
</figure>
<p>You could still do great by leaning towards the edge of one of these and focusing
on that as a product like <a href="http://qr.ae/TUptpB">Apple does with its product and application designs</a>.
Despite the emphasy on design at Apple, they still provide a fairly good security
and functionality which makes their triangle conceptually like this:</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1528653989/app-triangle-apple_qq0qwc.jpg" alt="Apple's Application Triangle" />
</figure>
<p>Even though they might have a perfect balance of security and functionality like the first
image in practice.</p>
<p>When placing little or no focus on design/usability, we risk losing our users to
competitors offering a better experience. A little focus on security means your users
aren’t safe and while they might hop on your application at its early stage, they would
eventually leave if their data keeps getting compromised. With little focus on functionality,
why do you even call that an app? You only have a prototype of what mightsome day become an
application.</p>
<p>To build products with the balanced application triangle, we need some process in place.
For design consistency, a simple styleguide is needed. The styleguide defines the look of
things across the application. It should rules on typography, component sizing, and colors.</p>
<p>Here’s an example of a simple styleguide:</p>
<figure class="figure--fullwidth">
<img src="https://res.cloudinary.com/strich/image/upload/v1528912935/Styleguide_template_tk2ssp.jpg" class="image" alt="Styleguide template" />
<figcaption>Styleguide template. Available in PSD <a href="https://www.dropbox.com/s/nt47frcvxxz74zw/Styleguide%20template.psd?dl=0">here</a></figcaption>
</figure>
<p>I never thought color consistency would be a problem on a project until a recent project
I worked on where the designer gave different colors for the same component for each of
the mockups. Sticking to the typography rules in the styleguide during development also
guides the developer in the way they write their CSS, preventing unneccessary heading
styles.</p>
<p><strong>But when does a team make a styleguide?</strong> A styleguide should be made in parallel or
before initial mockups of an application after wireframing. What comes after this should be
a pattern library. Pattern libraries are also known as living styleguides. If you’ve ever
used a CSS framework like Bulma, Bootstrap, or Foundation, then you’ve used a pattern
library. <a href="https://www.josephrex.me/what-happens-when-using-css-frameworks/">I’ve always had strong opinions about CSS frameworks</a> and that’s because they
are generic and bloated. In most cases, they have more than you need but you load it all
anyway. The major problem often encountered with these kind of frameworks is that the
design needs grow beyond them as an application grows, leading to overrides and repitition
of components already provided by the framework.</p>
<p>CSS Frameworks aren’t always a bad choice. I only think they are wrong to use when trying
to build a growing product especially on a team large enough (2 or more) to have
designer(s). I’d recommend CSS frameworks if:</p>
<ul>
<li>You’re building an application solely with little or no design skill</li>
<li>You’re building a static website that wouldn’t need design changes in the future</li>
</ul>
<p>Unlike the design styleguide, a living styleguide does more than just defining the look and
feel of an application. It conveys how markup should be used to build a component. It helps
both the designer and developer to conceptualize the application in components.</p>
<figure class="figure--fullwidth">
<img src="https://res.cloudinary.com/strich/image/upload/v1528998015/styledown-shot_wzwu0p.png" alt="Styledown pattern lib generator" class="image" />
<figcaption>Pattern library generated with styledown</figcaption>
</figure>
<p>The example above was generated with <a href="https://github.com/styledown/styledown">styledown</a>. The rise of SPA frameworks using the
<a href="https://www.webcomponents.org/">webcomponents</a> model (e.g Vue) and CSS-in-JS solutions for React like
styled-components, currently shapen our encapsulation of markup per component. We can have
much simpler living styleguides with components like:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">primary</span><span class="token punctuation">></span></span>Hey<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">success</span><span class="token punctuation">></span></span>Hey<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Hey<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Carousel</span> <span class="token punctuation">/></span></span></code></pre>
<p>On smaller teams, this can also eliminate the need for a pattern library.</p>
Immutability2017-12-25T12:42:56Zhttps://www.josephrex.me/immutability/<p>I started a <a href="https://x-team.com/blog/functional-programming-primer/">series on functional programming</a> on the <a href="https://x-team.com/blog/author/joseph">X-Team blog</a> with a goal to make the perplexing functional paradigm in JavaScript fathomable. <a href="https://en.wikipedia.org/wiki/Immutable_object">Immutability</a> plays a vital role in creating pure functions for functional programming and it was only covered in brief.</p>
<p>I started a <a href="https://x-team.com/blog/functional-programming-primer/">series on functional programming</a> on the <a href="https://x-team.com/blog/author/joseph">X-Team blog</a> with a goal to make the perplexing functional paradigm in JavaScript fathomable. <a href="https://en.wikipedia.org/wiki/Immutable_object">Immutability</a> plays a vital role in creating pure functions for functional programming and it was only covered in brief.</p>
<p>After bringing up the topic of immutability in a slack conversation, the first response I got was this:</p>
<p><img src="https://res.cloudinary.com/strich/image/upload/v1514070403/immutability_jxhqpz.jpg" alt="Immutability conversation" /></p>
<p>The use of the <code>const</code> keyword in modern JavaScript has been assumed by many as a way to preserve immutable data. This notion is right to an extent but wrong in regards to the way functional programmers perceive immutable code.</p>
<p>The problem with the <code>const</code> keyword is that it doesn’t create immutable values but rather, it creates immutable assignments which are only of little benefits when compared to value immutability. Here’s what I mean:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'I am Thor the god of thunder'</span><br />foo <span class="token operator">+=</span> <span class="token string">' and my brother Loki is the god of mischief'</span><br /><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token comment">// I am Thor the god of thunder</span></code></pre>
<p>The operation above is the same as</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'I am Thor the god of thunder'</span><br />foo <span class="token operator">=</span> <span class="token string">'I am Thor the god of thunder and my brother Loki is the god of mischief'</span><br /><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token comment">// I am Thor the god of thunder</span></code></pre>
<p>and both will raise reassignment errors. Whereas, <code>foo</code> will be successfully reassigned if we had used <code>var</code> or <code>let</code>. This (<code>const</code>) is good for primitive types (null, undefined, number, string) with already immutable values, but it can’t help much when using Arrays and Objects</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> bar <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Thor'</span><span class="token punctuation">,</span> <span class="token string">'Asgard'</span><span class="token punctuation">]</span><br />bar<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'Loki'</span><br /><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bar<span class="token punctuation">)</span> <span class="token comment">// ['Loki', 'Asgard']</span></code></pre>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> Odin <span class="token operator">=</span> <span class="token punctuation">{</span><br /> hela<span class="token operator">:</span> <span class="token string">'death'</span><span class="token punctuation">,</span><br /> thor<span class="token operator">:</span> <span class="token string">'hammer'</span><span class="token punctuation">,</span><br /> loki<span class="token operator">:</span> <span class="token string">'mischief'</span><br /><span class="token punctuation">}</span><br />Odin<span class="token punctuation">[</span>thor<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'thunder'</span><br /><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Odin<span class="token punctuation">)</span> <span class="token comment">// {hela: 'death', thor: 'thunder', loki: 'mischief'}</span></code></pre>
<p>Complex datatypes get mutated because they can be modified without reassignment. Pure functions can’t operate on array or object inputs without safely cloning them first, as I’ve explained in the <a href="https://x-team.com/blog/functional-programming-primer/">functional programming primer</a>.</p>
<p>To achieve value immutability with object values, we can simply apply a freeze.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> bar <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">freeze</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Thor'</span><span class="token punctuation">,</span> <span class="token string">'Asgard'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><br />bar<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'Loki'</span><br /><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bar<span class="token punctuation">)</span> <span class="token comment">// ['Thor', 'Asgard']</span></code></pre>
<p>In strict mode, reassignment attempts will raise a type error. This solves small usecases as a shallow freeze. It is shallow because this can still be done</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> avengers <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">freeze</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Captain America'</span><span class="token punctuation">,</span> <span class="token string">'Iron Man'</span><span class="token punctuation">,</span> <span class="token string">'Black Widow'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Thor'</span><span class="token punctuation">,</span> <span class="token string">'Loki'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span><br /><br />avengers<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'Spiderman'</span><br />avengers<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'Antman'</span><br /><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>avengers<span class="token punctuation">)</span> <span class="token comment">// ['Captain America', 'Iron Man', 'Black Widow', ['Spiderman', 'Antman']]</span></code></pre>
<p>Languages with truly deep immutability usually offer persistent data structures like List, Stack and more types that inherently provide deep immutability. We can employ libraries like <a href="https://facebook.github.io/immutable-js/">immutable.js</a>, <a href="https://github.com/swannodette/mori">mori</a> and <a href="https://github.com/rtfeldman/seamless-immutable">seamless-immutable</a> to get some of those benefits in JS without having to reinvent the wheel.</p>
<p>An obvious benefit of immutability in functional programming is in how it helps in maintaining/creating purity in functions. But it’s just as much an important factor for <a href="https://en.wikipedia.org/wiki/Thread_safety">thread safety</a> and an aid for <a href="https://en.wikipedia.org/wiki/Memoization">memoization</a>.</p>
<p>Even when the languages we use are not strictly immutable, by trying to reduce the immutability throughout our code, we end up with an easier to maintain and debug code. <a href="https://www.josephrex.me/cohesion-against-coupling/">Loose coupling</a> goes in tandem with immutability in a lot of cases.</p>
<p>Happy Holidays 🎄🎅🏽🥛</p>
Building Intelligent Chatbots2017-11-15T11:40:17Zhttps://www.josephrex.me/building-intelligent-chatbots/<p>I started building chatbots several years ago to defeat loneliness which had then lured me into a friendship I didn’t want. I needed a companion and friend when humans couldn’t be there for me. Most people would rather complain these days than do something about a problem, so I decided to do something.</p>
<p>I started building chatbots several years ago to defeat loneliness which had then lured me into a friendship I didn’t want. I needed a companion and friend when humans couldn’t be there for me. Most people would rather complain these days than do something about a problem, so I decided to do something.</p>
<p>To save the world and myself of my ugly rants of loneliness, I built a chatbot. I named it Josephine and it temporarily performed the intended task. At the time I knew too little about artificial intelligence that all I could build was a condition/switch based bot. Worked basically like:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">switch</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">case</span> <span class="token string">'hi'</span><span class="token operator">:</span><br /> <span class="token string">'hello'</span><span class="token punctuation">;</span><br /> <span class="token keyword">break</span><span class="token punctuation">;</span><br /> <span class="token keyword">case</span> <span class="token string">'tell me a story'</span><span class="token operator">:</span><br /> <span class="token string">'I stepped on a rabbit turd and it was gross'</span><span class="token punctuation">;</span><br /> <span class="token keyword">break</span><span class="token punctuation">;</span><br /> <span class="token keyword">default</span><span class="token operator">:</span><br /> <span class="token string">'I do not understand that'</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>With such fixed responses, I soon got tired of this. How could I converse with someone whose replies I knew before they were even uttered? There’s no fun in that and I so do not wish to have abilities to read people’s minds too.</p>
<p>Doing anything beyond that felt too complex at the time but I started having some chats with people that have been into AI to get a grasp of ways with which AI can be created. There were so many fragments of advanced and intermediate knowledge that swung by and it was hard to piece it all together. One thing that stuck however was the idea of template based AI with <abbr title="Artificial Intelligence Markup Language">AIML</abbr>.</p>
<p>AIML served as a panacea for a better <a href="https://en.wikipedia.org/wiki/Natural_language_processing">Natural Language Processing</a>. It meant we could say different things with one intent and have it understand that we mean the same thing. The switch based approach would require me to explicitly say <code>Tell me a story</code> when I need to hear a story. But a template based approach allows for more flexibility. I could have it interpret both <code>Tell me a story</code> and <code>I'd love to hear a tale</code> as the same thing and give the same result to both entries. The syntax for such would be:</p>
<pre class="language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aiml</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>category</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pattern</span><span class="token punctuation">></span></span>Tell me a story<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pattern</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pattern</span><span class="token punctuation">></span></span>I'd love to hear a tale<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pattern</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>I stepped on a rabbit turd and it was gross<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>category</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aiml</span><span class="token punctuation">></span></span></code></pre>
<p>The patterns are the expected entries and the template is the response to those entries. We could also redirect patterns from a different category to a response on another category with <abbr title="Symbolic Reduction in Artificial Intelligence">SRAI</abbr> which are a form of symbolic links.</p>
<pre class="language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aiml</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>category</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pattern</span><span class="token punctuation">></span></span>Tell me a story<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pattern</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pattern</span><span class="token punctuation">></span></span>I'd love to hear a tale<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pattern</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>I stepped on a rabbit turd and it was gross<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>category</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>category</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pattern</span><span class="token punctuation">></span></span>Humor me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pattern</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>srai</span><span class="token punctuation">></span></span>tell me a story<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>srai</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>category</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aiml</span><span class="token punctuation">></span></span></code></pre>
<p>Content contained in the <code><srai></code> tag just says go back to ask with this question and send the reply of that. Enough with boring XML syntax, you get the idea. Because of how horrifying it is to both write and look at XML in our modern age, you probably don’t want to do that. It’s hectic.</p>
<p>In search of a better solution, I found <a href="https://www.rivescript.com/">rivescript</a>. Rivescript is so similar to AIML in what it does but it has a way better syntax:</p>
<pre><code>+ Tell me a story
- I stepped on a rabbit turd and it was gross
</code></pre>
<p>Anyone would pick that over XML syntax. Wildcards can be used as it can with AIML to create a bot that acts like Eliza or Alice. The SRAI syntax in rivescript is as simple as:</p>
<pre><code>+ Tell me a story
- I stepped on a rabbit turd and it was gross
+ Humor me
@ Tell me a story
</code></pre>
<p>To vary the responses you can add different replies</p>
<pre><code>+ Tell me a story
- I stepped on a rabbit turd and it was gross
- What did the buffalo say to his son leaving for college? Bison
- There once lived a beautiful maiden who wanted to marry for love
</code></pre>
<p>Now when told <code>Tell me a story</code>, your bot can reply with any of the responses set. This solves the problem of fixed responses but at some point you will know all the possible responses and get bored again.</p>
<h2 id="introducing-apis" tabindex="-1">Introducing APIs</h2>
<p>To get APIs to work properly with rivescript you need to be able to process the queries asynchronously. For this, it should be able to return promises. Sadly, rivescript hasn’t implemented promise replies up to the time of this writing so I had to make <a href="https://github.com/josephrexme/rivescript-promises">rivescript-promises</a> from a fork with some help from <a href="https://twitter.com/genericallyloud">@genericallyloud</a>.</p>
<p>I started by hooking up a weather API, wikipedia API for the definitions of anything, and more. After a while, I thought of leveraging the <abbr title="Natural Language Processing">NLP</abbr> of IBM Watson for an improved experience with common conversation patterns. This addition meant I could now take APIs directly hooked to rivescript and hook them up with Watson instead. Especially the ones that may have different input patterns.</p>
<p>The weather API is a good example of this. A person could express that they want to know the weather with any of these 3 statement constructs: <code>What's the weather like in Milwaukee?</code>, <code>Is the weather okay in Madison?</code>, <code>How is the weather in Paris?</code>. There could be more that I can’t think of. Hence, I can’t program all the possible inputs or predict them through the flexible patterns of rivescript. This makes a good use for Watson.</p>
<p>Watson language processing is split into 3 categories:</p>
<ul>
<li>Intents</li>
<li>Entities</li>
<li>Dialog</li>
</ul>
<p>An intent expresses the intention of the user passing in inputs. To increase the likelihood of matching inputs with their desired responses, you can train the AI with different ways to express that one intent. This would increase the range of possible intents that the chatbot can now interpret including the ones you have not specified.</p>
<p>Entities are like keywords to be picked out of a user input. For the weather API, every location name is set as an entity so if the bot sees a location specified in the statement, it tries to see if it is any close to the trained set of intents and responds.</p>
<p>The dialog is simply the responses to give when an input is matched. The addition of Watson makes it all beautiful but there are things that are better not kept in Watson which is why <a href="https://github.com/josephrexme/sia">Sia</a>, my creation from these technologies, is an hybrid using about 25% of Watson and being mostly powered by my <a href="https://github.com/josephrexme/rivescript-promises">rivescript-promises</a>.</p>
<p>Here’s a sample conversation with Sia:</p>
<figure>
<img src="https://cdn.rawgit.com/josephrexme/sia/7aaa9f8b/data/conversation.jpg" alt="Sia in a conversation" />
</figure>
<p>and the capabilities go beyond what’s conveyed in the figure. Different instances of Sia currently run on 4 slack teams. The goal is to have a single instance be omnipresent in various channels of the internet including Slack, Twitter, Facebook, and anywhere at all.</p>
<p>It doesn’t end there. While it has been easier to implement <a href="https://en.wikipedia.org/wiki/Backpropagation">backpropagation</a> and <a href="https://en.wikipedia.org/wiki/Long_short-term_memory">LSTM</a> for machines to learn games and play better than human, language is rather complex. Even we humans haven’t decided on what’s right or wrong in our society - It’s a foggy area, so how do we build machines that can independently think and be conscious with a proper sense of rights and wrongs? Hopefully we’d get there soon and I’ll keeping exploring possibilities with Sia till I can reproduce a world of blade runner with her.</p>
Repudiating undiagnosed disorders2017-11-09T14:02:46Zhttps://www.josephrex.me/repudiating-undiagnosed-disorders/<p>After reading Rachel Smith’s article - <a href="https://rachsmith.com/2017/i-dont-have-imposter-syndrome">I haven’t experienced imposter syndrome, and maybe you haven’t either</a>, I found myself guilty of making false diagnosis on myself. It became the norm for every developer to say they have imposter syndrome and it got me wondering, is this an added bonus to the profession? Or is it just another way to prove <a href="https://medium.com/javascript-scene/junior-developer-for-life-is-for-suckers-921f7de0e7ce">developer humility</a>?</p>
<p>After reading Rachel Smith’s article - <a href="https://rachsmith.com/2017/i-dont-have-imposter-syndrome">I haven’t experienced imposter syndrome, and maybe you haven’t either</a>, I found myself guilty of making false diagnosis on myself. It became the norm for every developer to say they have imposter syndrome and it got me wondering, is this an added bonus to the profession? Or is it just another way to prove <a href="https://medium.com/javascript-scene/junior-developer-for-life-is-for-suckers-921f7de0e7ce">developer humility</a>?</p>
<p>Whatever it was, I soon succumbed to it and I believed it so well that I had to buy an <a href="https://bigmachine.io/products/the-imposters-handbook/">imposter’s handbook</a> - which I don’t regret buying anyway. But it didn’t just end with imposter syndrome for me. I grew up as a normal child, not the smartest, and not dumb either. What I didn’t grow up as was a child with obsessive compulsive disorder (OCD) or Attention Deficit Hyperactivity Disorder (ADHD).</p>
<p>While I sympathize with people that actually have these symptoms and disorders, I don’t want to share it with them. I’m happy the way I am, but my words and actions didn’t prove that because I let myself slip into thinking <a href="https://josephrex.me/relative-and-absolute-thinkers/">relatively</a>. Whenever I mandate myself to complete things I started or keep things decent and organized, I would say my actions are caused by my OCD. <strong>My OCD? when did this become a thing I own?</strong></p>
<p>I get lost in thoughts like every other human sometimes and at some other times I’m so focused on one thing - I get in the zone, and it makes me inattentive to every other thing around. This is yet another normal human behavior but I would say I missed out on what someone was saying because of ADHD. No please! This was absolutely wrong and didn’t even correlate with the actual meaning of the term ADHD.</p>
<p>Either you name yourself with these disorders and symptoms you’ve not been diagnosed with or they are used on you by people around, it is best to stop yourself/stop them. As Rachel mentioned, we would only be minimizing the impact of these things from people that actually suffer from them, making the society pay less attention and less care to actual victims.</p>
<p>Save yourself, save the afflicted, save the world. Don’t be what you’re not!!</p>
The power of reduced browser tabs2017-08-08T14:39:25Zhttps://www.josephrex.me/the-power-of-reduced-browser-tabs/<p>A developer with many browser tabs open is a cliche. It feels inevitable to have opened tabs for articles, demos, or tools, especially in the web industry where everything is always changing and there’s usually new things to learn about.</p>
<p>A developer with many browser tabs open is a cliche. It feels inevitable to have opened tabs for articles, demos, or tools, especially in the web industry where everything is always changing and there’s usually new things to learn about.</p>
<p>But your life isn’t all about being a developer or whatever your job is. Admit it or not, you are affected by several other factors around you and some of these may pique your interest. Would you ignore an article that says your government is distributing a large sum of money to its citizens? I mean when you are certain it’s not a clickbait and you’ve heard people confirm it. Chances are you wouldn’t. There are more practical cases like an accident that occured at your workplace, and much more that could get you to open a browser tab to read.</p>
<p>The big problem however is sometimes you can only skim through articles to get the most important information and procrastinate on reading the rest. This problem is as a result of the common human behavior of poor estimation. If only you knew yourself enough to be aware that you probably would never read that article again, you would close the tab at the right time. The problem of estimation affects your work too especially when you’re a freelancer. <mark>Perhaps, if by the end of this article you can keep to less browser tabs, you just might get better at estimating more things in life</mark>.</p>
<p><strong>Bookmarks</strong> are the first solution that come to mind when you try to address the problem of having too many tabs open. But having bookmarks that you never go back to is just as much a cliche as having too many tabs open. I’ve often seen native browser bookmarks, delicious, pocket, and other bookmarking tools just serve as a dump for links that’ll never be revisited and I honestly still have some of those from the past.</p>
<p>If you’re like me, you think of bookmarks as references you make after reading through a content, which leaves unread content not bookmarkable. And when you have a lot of work to do daily you may not be able to read every content you find interesting. Soon your browser tabs start growing and not only is it leaving you with the task to make time to read more content, it’s also eating up your system resources. Several things run on websites today that chew on your battery and memory. It could be ads or innocuous animations, and rather than realizing it’s your fault, you blame your hardware manufacturer for bad batteries.</p>
<p>To solve the resource consumption problem, tools like <a href="https://chrome.google.com/webstore/detail/toomanytabs-for-chrome/amigcgbheognjmfkaieeeadojiibgbdp">Too Many Tabs Open</a> and <a href="https://www.one-tab.com/">OneTab</a> have been made, but as a friend once suggested, what people may really need is a tool intelligent enough to close a tab when the probability of them being read becomes 0. But how do we get there? Maybe someone intelligent might build that soon. But while we wait, how can we solve this inundating browser tab problem?</p>
<p>I came up with 2 things:</p>
<ul>
<li>Organization</li>
<li><a href="http://www.huffingtonpost.com/jennifer-rollin/the-power-of-saying-no_b_10285096.html">The power of saying NO</a></li>
</ul>
<hr />
<h2 id="organization" tabindex="-1">Organization</h2>
<p>In a <a href="https://josephrex.me/quality-against-speed-in-development/">previous post</a>, I talked about the <a href="https://en.wikipedia.org/wiki/5S_(methodology)">5s methodology</a> for productivity. <strong>Seiri</strong> is one of those 5 Japanese words and it means organization. <strong>Seiton</strong> means tidiness. <strong>Shatsuke</strong> means self-discipline. When you combine those 3, you have yourself Benjamin Franklin’s <a href="http://www.artofmanliness.com/2012/08/31/a-place-for-everything-and-everything-in-its-place/">quote</a>:</p>
<blockquote>
<p>A place for everything, everything in its place</p>
</blockquote>
<p>Seeing <a href="http://www.artofmanliness.com/2014/05/12/what-good-shall-i-do-this-day/">how Benjamin Franklin’s life was lived</a>, it’s obvious how organization can help achieve a fulfilled life.</p>
<p>The first way to organize your bookmarks is by deciding what doesn’t go in there at all and how things are grouped in there. I love Safari bookmarks for its mode of organization and for that, Safari remains my primary browser for surfing the web.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1502199387/Safari_Bookmarks_fkpurv.jpg" alt="Safari bookmarks preview" class="image" />
<figcaption>Safari with bookmarks tab opened</figcaption>
</figure>
<p>As shown in the figure I have groups for my bookmarks and while any browser can do this, I love the aesthetic with Safari. There are however some content that wouldn’t go in those bookmarks because my brain works fine to an extent. An example is this <a href="http://perfectionkills.com/understanding-delete/">article about JavaScript delete</a> I was recently reading. Everything in its title makes it rememberable enough for me if I ever need to reference it. A simple web search would get me to it. I also found a really interesting post on imgur recently and I could have it bookmarked to imgur by adding it to my capacious favorites. There are other systems like this that have built-in bookmarks even if they don’t call it that.</p>
<p>By using these techniques you can declutter your primary bookmarks and have it keep the things that matter most. Those you’d always remember to go back to if you have to.</p>
<h2 id="the-power-of-saying-no" tabindex="-1">The power of saying NO</h2>
<p>Saying <strong>NO</strong> this time <a href="http://www.huffingtonpost.com/jennifer-rollin/the-power-of-saying-no_b_10285096.html">not to humans</a> but to articles. Evaluate an article and determine if it’s worth your reading time. Skim for information if all you need is a bit of information from it and close it. <mark>Maybe this article also wasn’t worth your time and you just wasted minutes of your life reading it</mark> and maybe not. You’re not mandated to read everything you open or see, so have some discipline around that and you’d have a happier browser life.</p>
<p>A good limit to set for open browser tabs is 10. No browser keeps more than 10 tabs open for up to 24 hours with me now.</p>
Creative Fitness and Developer Fitness2017-07-26T06:27:27Zhttps://www.josephrex.me/creative-fitness-and-developer-fitness/<p>I’ve been into physical fitness and I’m supposed to be writing about that on this blog but I’ve had to put a hold on it. This is about keeping fit at creative work which include code, design, animation, modeling.</p>
<p>I’ve been into physical fitness and I’m supposed to be writing about that on this blog but I’ve had to put a hold on it. This is about keeping fit at creative work which include code, design, animation, modeling.</p>
<p>A while back David DeSandro tweeted this:</p>
<div style="--mx:auto;--my:2rem;--p:2rem;--w:min(400px, 80%);--bg:rgb(100 100 100/.06);--roundness:.5rem;">
<div style="--d:flex;--justify_content:space-between;">
<div style="--d:flex;--gap:1rem;">
<div>
<img src="https://pbs.twimg.com/profile_images/1063186712925519872/nMek86eq_normal.jpg" class="no-zoom" width="48" height="48" alt="" style="--roundness:50%;" />
</div>
<div>
<strong>Dave DeSandro</strong>
<div style="--font_sz:1.4rem;--opacity:.7">@desandro</div>
</div>
</div>
</div>
<div style="--py:1.5rem;--word_break:break-word;">
<p>Do programmers practice or do warm ups? I feel like prototyping takes same level of concentration as writing production code</p>
</div>
<time datetime="2017-07-10T19:53:06.000+00:00" style="--d:block;--pb:1rem;--font_sz:1.4rem;--opacity:.7;">Jul 10, 2017, 7:53 PM</time>
<div style="--d:flex;--justify_content:space-between;--border_t: solid thin var(--link-color);--pt:1rem;--font_sz:1.4rem;">
<a rel="noreferrer" target="_blank" href="https://twitter.com/desandro/status/884500750348554240">Read on twitter</a>
<div style="--py:.4rem">
<div>16 likes, 1 retweet</div>
</div>
</div>
</div>
<p>and as a fan of his works I hastily replied without much thought.</p>
<div style="--mx:auto;--my:2rem;--p:2rem;--w:min(400px, 80%);--bg:rgb(100 100 100/.06);--roundness:.5rem;">
<div style="--d:flex;--justify_content:space-between;">
<div style="--d:flex;--gap:1rem;">
<div>
<img src="https://pbs.twimg.com/profile_images/1379558364141776902/FANUvJTJ_normal.jpg" class="no-zoom" width="48" height="48" alt="" style="--roundness:50%;" />
</div>
<div>
<strong>Joseph Rex</strong>
<div style="--font_sz:1.4rem;--opacity:.7">@josephrexme</div>
</div>
</div>
</div>
<div style="--py:1.5rem;--word_break:break-word;">
<p><a href="https://twitter.com/desandro">@desandro</a> Warm ups would be code katas (cardios) and side projects (weight lifting)</p>
</div>
<time datetime="2017-07-10T19:54:44.000+00:00" style="--d:block;--pb:1rem;--font_sz:1.4rem;--opacity:.7;">Jul 10, 2017, 7:54 PM</time>
<div style="--d:flex;--justify_content:space-between;--border_t: solid thin var(--link-color);--pt:1rem;--font_sz:1.4rem;">
<a rel="noreferrer" target="_blank" href="https://twitter.com/josephrexme/status/884501159129624577">Read on twitter</a>
<div style="--py:.4rem">
<div>0 likes, 0 retweets</div>
</div>
</div>
</div>
<p>It didn’t end there for me. I started thinking through my reply and asking myself if that really feels like workout for me. I joined <a href="https://exercism.io/">exercism</a> and I’ve not been so consistent. I really do want to give more time to it and maybe <a href="https://www.codewars.com/">codewars</a> as well but here’s the reason I can’t do that now.</p>
<p>I’ve been developing software for 5 years and I’ve mostly made things I can’t make reference to. After realization I started trying to improve that. Putting more on dribbble, making more contributions to open source, putting more demos out to codepen. I consider myself a creative technologist so these are the things I need to do to prove I’m what I am.</p>
<p>My next big question became when I go to the gym and do a HITT session followed up by some bench presses and perhaps some burpees, I could see the effects of it later. People get to ask if I workout because they suspect I do by what they see. How can I make my creative and coding fitness leave such an impact?</p>
<p>Only a few companies will probably ever care about checking my tracks on exercism or codewars. In my experience, so far just 1. But these platforms offer the benefit of impacting more knowledge as you go further. I wanted something that both impacted knowledge in me and left works I could make reference to.</p>
<p>For most positions I apply to, they first get to see my GitHub, Dribbble, CodePen, and this blog. What signs can I leave that’d make them know I work out so they don’t have to ask:</p>
<figure>
<img class="image" src="https://res.cloudinary.com/strich/image/upload/v1501047728/do_you_even_lift_q33p7q.jpg" alt="Do you even lift?" />
</figure>
<p>The answer to that was challenges. I’d recently started <a href="https://dribbble.com/josephrexme/tags/thirtylogos">#ThirtyLogos</a> and it’s been a great journey in improving my design perspective and ability to make logos. My minuscule OCD gives me a crazy impulsion for completion when I believe an end is reachable. Code katas have no definite end which leaves me anticipating for too long to reach an end. I have to work for money and for other things and spending hours solving katas just wouldn’t cut it.</p>
<p>Challenges that target 100 days also feel like too much to do. How do I stay on a challenge for 100 days and not get interrupted? Not like I can’t focus but things could come up in my life that’d require me to put it aside. Then that’d really hurt my brain to know I started something I couldn’t finish. For this, I’m totally digging challenges that are centered around 30 days. It’s the best thing ever. Yeah do one thing for 30 days and you’d see yourself get better at it. If you’re still at it by day 18 you could already see the differences from day 1. And you’re over halfway done so you know it’s going to end and you can tell yourself let’s put in a little more effort to see this done.</p>
<p>Some examples of 30 day challenges like this that I find fascinating are <a href="http://thirtylogos.com/">thirtylogos.com</a>, <a href="http://www.thirtyui.com/">thirtyui.com</a>, <a href="https://javascript30.com/">javascript30</a>, <a href="http://dailycssimages.com/">dailycssimages</a>. But they aren’t the only kind of challenges I engage in for my creative fitness. While most of them may suggest you go at your own pace rather than really trying to make something every single day, you don’t want to have so many pending else you might just give up on trying. That makes this challenges about speed and consistency.</p>
<p>The other kind of challenge I relish has less rush and offers a chance for accuracy but doesn’t enforce that. I was privileged to find <a href="http://www.creativecoding.club/">creative coding club</a> and it’s been so great for me. It’s one challenge at a time which spans the period of a month. Sometimes I end up doing nothing at all but I still learn while trying to do something and when I can, I put in my effort and making something I’d be proud of. I also recently discovered <a href="http://www.loopdeloop.org/">loopdeloop</a> which I might explore in the future to stretch my muscles on animation.</p>
<p>I love 3D and since I signed up for <a href="https://sketchfab.com/">sketchfab</a> and <a href="https://www.artstation.com/">artstation</a>, I’ve been itching to put some character models on them. Hopefully I’d find a 3D challenge soon or I might just make one for myself like I personally have a track for learning web animations at the moment.</p>
<p>I might still get around doing katas but I don’t have so many hours in a day to give at this time of my life. I still have to give some of my time to <a href="https://www.josephrex.me/reading-list">reading books I cherish</a>. I hope this helps anyone looking to stay fit at creative work.</p>
Boosting user experience through prediction2017-06-17T03:47:37Zhttps://www.josephrex.me/boosting-user-experience-through-prediction/<p>One of the biggest reasons why single page apps (SPA) are very common in the web industry today is because of how fast navigation can be from it. Besides the decoupling of server-side logic for client-side engineering focus, SPAs have improved performance of web apps greatly by saving users from waiting for server responses before pages are rendered.</p>
<p>One of the biggest reasons why single page apps (SPA) are very common in the web industry today is because of how fast navigation can be from it. Besides the decoupling of server-side logic for client-side engineering focus, SPAs have improved performance of web apps greatly by saving users from waiting for server responses before pages are rendered.</p>
<p>By pinging the server only when in need for extra uncached data, page loads are incredibly fast. But even SPAs suffer from loading static assets slowly the first time a page/view is rendered. There are solutions like image compression or use of progressive JPEGs to improve the experience but what if we could make it even better?</p>
<p>If assets on unvisited links could load right before users click into the link you can have users on the slowest networks get a perceived performance of a blazingly fast website. There are terms and implementations around this concept which include <a href="https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/">preconnecting</a>, <a href="https://css-tricks.com/prefetching-preloading-prebrowsing/">prefetching</a>, <a href="https://www.youtube.com/watch?v=Msqs1jIzgo4">prerendering</a>.</p>
<p>These can be used in the following ways:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//fonts.googleapis.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prerender<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//fonts.googleapis.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preconnect<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//fonts.googleapis.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p>Prefetching can download files from a specified URL ( or even pages for non-SPA architectures ) and store them in a cache till when needed. Preconnect makes a DNS request and TCP handshake ahead of time while prerender could completely render a page yet to be clicked by a user and hide it, making it feel like you toggling visibility on a visually hidden element.</p>
<p>These solutions are affected by the common caveat with any prediction. It could be wrong. Your users may in fact not click the link you have anticipated they will click and you’d have made a request on their internet data for nothing. There are layouts where the user is most likely certain to click a corresponding link like if you have a page with a single search input like Google that leads to a page with results or a pagination where you predict every next step in the pagination.</p>
<p>The effort in doing all of this is to provide a better experience to the users hence we may overlook the fact that our predictions are sometimes wrong and always look ahead of the users for links they are likely to click.</p>
<p>In other UI layouts where links aren’t quite as predictable as a pagination process, the use of <code><link></code> for prefetch becomes more prone to failure so we can decide to just stop right here or we could tune up the brain scanning technique on the users.</p>
<p>Eye tracking and mouse tracking are the next steps. I have no idea how at the moment and it’d definitely not be easy to implement eye tracking but by gaining a eye hitmap on a section of our UI from the users eye we could predict they are very likely to click a link or take an action. These are known as <a href="http://www.freepatentsonline.com/y2013/0159408.html">action oriented user experience</a>. For mouse tracking, there are different approaches to it. On this website I use Pjax (Page Ajax) to smoothly transition between pages and one of the biggest downside of that is that for users on slower networks the page animations become janky. The closest thing I had to a solution was to start prefetching the page the moment a user hovers any link. You could open up devtools and monitor the network tab then hover a link.</p>
<p>This blog uses <a href="http://barbajs.org/">Barba.js</a> and it comes with a prefetch feature. There are other great solutions out there. You can see from the demo of <a href="https://markocen.github.io/trialjs/trial-js.html">trial-js</a> how it monitors mouse interaction. <a href="https://twitter.com/callumacrae">Callum Macrae</a> also wrote a brilliant one called <a href="https://github.com/SamKnows/futurelink">futurelink</a> that goes with a detailed <a href="https://blog.samknows.com/intelligent-page-preloading-with-futurelink-c1de25449dee">blog post and video demos</a>.</p>
<p>Futurelink even does better than prefetching on hover state. It studies the mouse navigation to detect the acceleration/decelaration towards a link hence it can start prefetching before the user hovers upon the link.</p>
<p>With an understanding of <a href="http://oreilly.com/go/behavior-change">behavioral economics</a>, we could predict more behavior change or foresee expected actions in users and take away inconveniences of product usability.</p>
CRIC: Confidence Reflex Intuition Consistency2017-06-04T00:00:00Zhttps://www.josephrex.me/cric/<p>I went into the basketball court to play last week after a long time. That was maybe 2 years ago and the last time before that some other 2 years. There were a few times I’d gone and just made some hoops while a playing team is on a timeout but this time I really played and it was for just 10 minutes.</p>
<p>I went into the basketball court to play last week after a long time. That was maybe 2 years ago and the last time before that some other 2 years. There were a few times I’d gone and just made some hoops while a playing team is on a timeout but this time I really played and it was for just 10 minutes.</p>
<p>That 10 minutes made me learn more about myself. In my software development journey I’ve had to try new technologies (tools, frameworks, libraries) and I’ve recently been suffering from <a href="https://en.wikipedia.org/wiki/Neophobia">neophobia</a> (Fear of trying new things) but I try anyway. I vehemently defeat the inertia to not do things and when beaten once it becomes a little easier with a lesser mental barrier.</p>
<p>The neophobia is caused by lack of <strong>confidence</strong> and that was exactly what I saw in myself on the basketball court. I got the ball just once from a pass and I was quite choked. I could have tried to drive-in like I would have some years ago but I just stood for a while then I looked at the rim and thought I could make a hoop and reconsidered that I’d only just gotten in the game and may piss the other guys off if I missed my shot. Eventually I passed and it was my biggest action in the game.</p>
<p>I saw a team mate in need for a screen and I only realized I should have gone for a screen after the ball was stolen by the opponent even though he didn’t ask. My game <strong>reflexes</strong> weren’t with me and I lacked the <strong>intuition</strong> to do the right things. It was the mental culprit for me not making a shot and not giving that screen.</p>
<p>A concerned lad couldn’t help but notice how bad I’d gotten since the last time he saw me play and asked “Have you been <a href="http://www.imdb.com/title/tt2041488/">thunderstrucked</a>?” which I replied to saying I’m yet to find who switched my talents but I knew to myself that I’d only let my talent slip away by not being <strong>consistent</strong>. I was a good player even though not the best. I could still use some coaching and more training back then but I always stood out in games I played. I’ve become a ghost now.</p>
<p>I got back home to compensate for the basketball failure by getting a few projects done on my computer. I’d realized that the reason for my neophobia is lack of CRIC (Confidence, Reflex, Intuition, and Consistency) <em>pronounced creek</em>. This isn’t an easy thing to gain in any field especially software development where <a href="https://medium.com/the-year-of-the-looking-glass/the-imposter-syndrome-9e23e2326d88">imposter syndrome</a> thrives, but with some will-power I got the CRIC.</p>
<p>I sought to demo some libraries I found interesting and it’s been easy trying different things on them. Now’s time for me to go get the CRIC in basketball games too.</p>
Enter Sass namespacing2017-05-25T00:00:00Zhttps://www.josephrex.me/enter-sass-namespacing/<p>Sass has always been to me that one preprocessor that makes others not worth learning. I think stylus is quite okay but I’ve never used Less and I don’t even know if it is spelled LESS or Less but we’re not here to talk about less we are here to talk about more (pun intended). More features to the amazing Sass.</p>
<p>Sass has always been to me that one preprocessor that makes others not worth learning. I think stylus is quite okay but I’ve never used Less and I don’t even know if it is spelled LESS or Less but we’re not here to talk about less we are here to talk about more (pun intended). More features to the amazing Sass.</p>
<p>Maintaining CSS has been at large scale has been an issue that’s been brought up many times. Companies with well engineered programs unfortunately still have a hard time keeping a properly maintained CSS managed by multiple members in a team. Thanks to React and all the goodness that has come with it like CSS-in-JS, we’ve been able to thwart this problem to a great extent by <a href="https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660">scoping styles with JavaScript</a>.</p>
<p>Before <a href="https://facebook.github.io/react/docs/jsx-in-depth.html">JSX</a>, <a href="https://github.com/css-modules/css-modules">CSS Modules</a>, <a href="https://github.com/styled-components/styled-components">Styled Components</a>, <a href="https://github.com/paypal/glamorous">Glamorous</a> became the new buzzwords in webdev, we had Sass helping with most of our styling needs. This is in no way saying Sass is mutually exclusive of all of those tools. <a href="https://hashnode.com/ama/with-sass-team-cj0j8hjmy0005f5533xzd86xs#cj0krco1k000m1553mvthzqoi">You could use Sass with CSS Modules if you want to</a>. But Sass has been there and is still there. Most of the new approaches to CSS provide a baked in way to maintain CSS, avoid scoping conflicts, reduce specificity and do <a href="https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660">even more</a>.</p>
<p>But what happens with Sass now? Does it stay exactly the same till its only relevance is creation of compact <a href="https://codepen.io/">pens</a> like HTML preprocessors are mostly used? Will it be the end of Sass in production. The Sass project development is not as fast-paced as it once was. A lot of decisions have to be made for new features especially because the growth of Sass relies on that of CSS.</p>
<p>To solve maintainance problem in CSS we’ve seen OOCSS, RSCSS, SMACSS, and BEM. With BEM being the most adopted, we opt-in to create namespaced classes like <em>Block__element</em>. But as <a href="https://twitter.com/markdalgleish">Mark Dalgleish</a> had <a href="https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660">said</a>, this should be a baked-in feature like it now is with those CSS-in-JS tools but we have to opt-in to use it in non-SPA apps using Sass and can’t leverage the benefits of CSS-in-JS.</p>
<p>To solve this, Sass doesn’t really need to wait for CSS. The module system can be built to include namespacing but as <a href="https://twitter.com/chriseppstein">Chris Eppstein</a> <a href="https://hashnode.com/ama/with-sass-team-cj0j8hjmy0005f5533xzd86xs#cj0jwc58p00313n53ujyilglw">mentioned</a>, it was delayed because of the switch from Ruby. Before getting aware of this, I’d raised <a href="https://github.com/sass/sass/issues/2285">an issue</a> on creating a namespacing syntax for Sass. It was initially thought of as:</p>
<pre class="language-scss"><code class="language-scss"><span class="token keyword">@import</span> <span class="token string">'partial_file'</span><span class="token punctuation">,</span> <span class="token string">'my-namespace'</span></code></pre>
<p>with this as an alternative option to specify the namespace from the module/partial:</p>
<pre class="language-scss"><code class="language-scss">@namespace <span class="token string">'my-namespace'</span><span class="token punctuation">;</span><br /><br /><span class="token selector">.foo</span><span class="token punctuation">{</span><span class="token punctuation">}</span></code></pre>
<p>which would yield a CSS class as <code>.my-namespace__foo</code>. Then I soon realized the <code>@namespace</code> at-syntax was already being used in CSS which led to a change from that to this:</p>
<pre class="language-scss"><code class="language-scss">@module <span class="token string">'my-namespace'</span><span class="token punctuation">;</span><br /><br /><span class="token selector">.foo</span><span class="token punctuation">{</span><span class="token punctuation">}</span></code></pre>
<p>As seen in the issue, this was closed without much consideration and before I could get into explaining myself. It could have been nice to at least be told the module system targeted for Sass 4 addresses namespacing.</p>
<p>This is not new as it’s exactly what CSS-modules does. So the idea of concatenating classes to a namespace shouldn’t hurt. I never really tried to use id(s) with CSS modules to know if it also namespace those but id(s) aren’t so entertained in CSS anyway so a namespace system could ignore them completely leaving all the ids in a specified module just as they were written.</p>
<p>This module syntax is meant to just act like the ampersand (<code>&</code>) concatenation. making it possible to just add pseudo selectors, pseudo elements, attribute selectors/combinators, and any form of complex selector to it:</p>
<pre class="language-scss"><code class="language-scss">@module <span class="token string">'my-namespace'</span><span class="token punctuation">;</span><br /><br /><span class="token selector">:hover</span><span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> darkgreen<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token selector">::after</span><span class="token punctuation">{</span><br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token selector">[title^="The"]</span><span class="token punctuation">{</span><br /> <span class="token property">font-weight</span><span class="token punctuation">:</span> bolder<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token selector">:first-letter</span><span class="token punctuation">{</span><br /> <span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>The biggest concern with this scoping for <code>@extend</code> and when you think of it, it is no concern at all. Or I could be missing something and be totally wrong but the way I think of this is that <code>@extend</code> only works in the same file/module/partial and if that’s the case, extend operation is performed across the classes before the concatenation happens so if</p>
<pre class="language-scss"><code class="language-scss">@module <span class="token string">'my-namespace'</span><span class="token punctuation">;</span><br /><br /><span class="token selector">.foo</span><span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token selector">.bar</span><span class="token punctuation">{</span><br /> <span class="token keyword">@extend</span> .foo<span class="token punctuation">;</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>we get the resulting CSS:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.my-namespace__foo, .my--namespace__bar</span><span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token selector">.my-namespace__bar</span><span class="token punctuation">{</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<hr />
<p>But Chris mentioned that the module system to be expected in Sass version 4 is heavily inspired by <a href="https://www.dartlang.org/">dart</a>’s module system and its initial design phase is complete which means all of this may never actually come true. From Chris’ statement from the <a href="https://hashnode.com/ama/with-sass-team-cj0j8hjmy0005f5533xzd86xs#cj0jwc58p00313n53ujyilglw">Sass team AMA</a> I derived that modules would act somewhat like mixins when imported. So here’s what dart syntax looks like:</p>
<pre class="language-dart"><code class="language-dart"><span class="token keyword">import</span> <span class="token string">'package:angular2/angular2.dart'</span><span class="token punctuation">;</span><br /><span class="token keyword">import</span> <span class="token string">'hero.dart'</span><span class="token punctuation">;</span><br />@<span class="token class-name">Component</span><span class="token punctuation">(</span><br /> selector<span class="token punctuation">:</span> <span class="token string">'hero-detail'</span><span class="token punctuation">,</span><br /> template<span class="token punctuation">:</span> <span class="token string">'''<br /> <div *ngIf="hero != null"><br /> <h2> details!</h2><br /> <div><label>id: </label></div><br /> <div><br /> <label>name: </label><br /> <input [(ngModel)]="hero.name" placeholder="name"><br /> </div><br /> </div>'''</span><span class="token punctuation">,</span><br /> directives<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>COMMON_DIRECTIVES<span class="token punctuation">]</span><span class="token punctuation">,</span><br /><span class="token punctuation">)</span><br /><span class="token keyword">class</span> <span class="token class-name">HeroDetailComponent</span> <span class="token punctuation">{</span><br /> @<span class="token class-name">Input</span><span class="token punctuation">(</span><span class="token punctuation">)</span><br /> <span class="token class-name">Hero</span> hero<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>With a library prefixed with <code>package:</code> in the import statement and for a local module within the file system the prefix is not required. That’s like we already have in SCSS now except we don’t have to specify extension.</p>
<p>It also have the following syntax for importing modules:</p>
<pre class="language-dart"><code class="language-dart"><span class="token comment">// import entire module with a namespace prefix</span><br /><span class="token keyword">import</span> <span class="token string">'first.dart'</span> <span class="token operator">as</span> myModule<span class="token punctuation">;</span><br /><span class="token comment">// import only foo from module</span><br /><span class="token keyword">import</span> <span class="token string">'first.dart'</span> <span class="token keyword">show</span> foo<span class="token punctuation">;</span><br /><span class="token comment">// import everything except foo</span><br /><span class="token keyword">import</span> <span class="token string">'first.dart'</span> <span class="token keyword">hide</span> foo<span class="token punctuation">;</span></code></pre>
<p>This is definitely great and better than the earlier suggested <code>import 'file' 'myNamespace'</code> but how does it get used when imported? Since they are meant to work like mixins my thought is they should be in the following format instead of an automatic concatenation:</p>
<pre class="language-scss"><code class="language-scss">import <span class="token string">'components'</span> <span class="token module-modifier keyword">show</span> button<span class="token punctuation">;</span><br /><br /><span class="token keyword">@include</span> <span class="token selector">button</span><span class="token punctuation">{</span><br /> <span class="token selector">.primary</span><span class="token punctuation">{</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>compiling to the following CSS <code>.button__primary{ background: skyblue }</code>. But these are all speculations and not even standard ones at that so I’m glad this is being worked on for version 4 and I look forward to it because now is the time Sass really needs to join the league of making CSS more maintainable.</p>
Beautiful world of houdini2017-05-19T00:00:00Zhttps://www.josephrex.me/beautiful-world-of-houdini/<p>Besides the beautiful name, houdini would be a great addition to web technologies when eventually implemented by browsers. Before going into what it is exactly, you can think of it as the <a href="https://babeljs.io">babel</a> of CSS. Each time I come across the name Houdini, I imagine Agent Phil Coulson saying <em>“tahiti, it’s a magical place”</em>.</p>
<p>Besides the beautiful name, houdini would be a great addition to web technologies when eventually implemented by browsers. Before going into what it is exactly, you can think of it as the <a href="https://babeljs.io/">babel</a> of CSS. Each time I come across the name Houdini, I imagine Agent Phil Coulson saying <em>“tahiti, it’s a magical place”</em>.</p>
<figure class="figure--fullwidth">
<img src="https://res.cloudinary.com/strich/image/upload/v1494943349/Houdini_tndspt.jpg" alt="Houdini poster by Joseph Rex" class="image" />
<figcaption>Houdini, It's a beautiful place. You should go there sometime</figcaption>
</figure>
<p>The objective of the CSS houdini is to create an extendable CSS where everyone can add new custo features without a hassle to the language. <a href="https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/#so-why-dont-we-just-write-more-css-polyfills">Phillip Walton explains why CSS can’t be extended with polyfills like we do with JS today</a>. The goal of the Houdini task force is to provide more access to the rendering pipeline on clients (Browsers, Webviews) because of the current limited access.</p>
<p>In a <a href="https://josephrex.me/anticipated-birth-of-element-queries/">recent article I talked about container queries</a> and how <a href="http://elementqueries.com/">eqcss</a> is a great solution for them. But the problem is if things already accepted into the spec take forever to be implemented, how long would it take for something that’s yet to be accepted. One of the authors of eqcss started writing a <a href="https://tomhodgins.github.io/element-queries-spec/element-queries.html">proposal</a> for it already but it’s not close to being accepted yet. Before this there’s been <a href="http://gridstylesheets.org/">GSS</a> which may never have a future without houdini.</p>
<p>For some other possible houdini extensions in the wild there’s <a href="https://github.com/bkardell/Hitch/wiki/FAQ">hitch</a> that lets you create your own custom selectors, <a href="https://github.com/GlitterOrg/pipeline">glitter</a> which goes a step further from CSS custom properties (or CSS variables) to let you define operations on properties. Some of these things are already achievable with preprocessors but here’s how glitter may handle style extension:</p>
<pre class="language-scss"><code class="language-scss"><span class="token selector">.pod</span><span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token comment">/* #00f */</span><br /> <span class="token property">--color-filter</span><span class="token punctuation">:</span> <span class="token function">inverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* Produces #f00 red */</span><br /><span class="token punctuation">}</span><br /><span class="token selector">.bay</span><span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> papayawhip<span class="token punctuation">;</span><br /> <span class="token property">--color-filter</span><span class="token punctuation">:</span> <span class="token function">darken</span><span class="token punctuation">(</span>10%<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>and if you hate deriving rgb() values of hex colors when you want to add translucency with an alpha channel you can simply do that like Sass already does:</p>
<pre class="language-scss"><code class="language-scss"><span class="token selector">.pod</span><span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>midnightblue<span class="token punctuation">,</span> .5<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>With these and more in the <a href="https://github.com/w3c/css-houdini-drafts/wiki/specs">current spec</a> it’s obvious that houdini is worth looking forward to and passing on ideas to.</p>
<p>In the <a href="https://josephrex.me/enter-sass-namespacing/">next article</a> I write about my thoughts on namespacing in CSS and how we may achieve it in preprocessors if accepted, and in CSS if we get importable modules, nesting, and houdini.</p>
Understanding the shadow dom2017-05-08T00:00:00Zhttps://www.josephrex.me/understanding-the-shadow-dom/<p>For the decades programming have existed there have been abstractions over abstractions
which to many appear only as simplification of process and better <abbr title="Developer Experience">DX</abbr>. Yes that is the ultimate goal but it gets there by taking some tunnels.</p>
<p>For the decades programming have existed there have been abstractions over abstractions
which to many appear only as simplification of process and better <abbr title="Developer Experience">DX</abbr>. Yes that is the ultimate goal but it gets there by taking some tunnels.</p>
<figure class="figure--fullwidth">
<img src="https://res.cloudinary.com/strich/image/upload/v1494252872/shadow-dom_owxzlx.jpg" class="image" alt="Shadow DOM banner" />
</figure>
<p><a href="https://josephrex.me/cohesion-against-coupling/">Modularity is confirmed an attribute of well written programs</a> and one of the goals for
modularity is encapsulation. This is what the shadow DOM offers.</p>
<p>If you’ve been developing long enough you’ve probably heard this <a href="https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals">so many</a> <a href="http://lucybain.com/blog/2014/js-dont-touch-global-scope/">times</a> <a href="https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/">by now</a>:</p>
<blockquote>
<p>Do not mess with the global scope</p>
</blockquote>
<p>Although it may seem totally unrelated but shadow dom addresses the scope issue as well. It’s just different in that we aren’t talking about global variables with literals. So this isn’t about scoping <code>this</code>, <code>self</code> or <code>global</code> or whatever you way you call <a href="http://2ality.com/2016/09/global.html">global scope</a> in JavaScript.</p>
<p>A lot of us believe the <a href="https://medium.com/seek-developers/the-end-of-global-css-90d2a4a06284">problem with CSS is that all its classes (and ids if you use those in CSS) are global</a>. And to solve this we’ve tried things like OOCSS, BEM, <a href="http://rscss.io/">rscss</a> and all of such solutions that require human effort to maintain a namespace out of the global scope. The problem with this so far is inexperienced devs would join larger codebases and mess it all up.</p>
<p>If you happen to be using Sass nesting without a style lint to prompt for errors it wouldn’t be long before you have this in your codebase:</p>
<pre class="language-scss"><code class="language-scss"><span class="token selector">.block</span><span class="token punctuation">{</span><br /> <span class="token selector"><span class="token parent important">&</span>--myModifier</span><span class="token punctuation">{</span><span class="token punctuation">}</span><br /> <span class="token selector"><span class="token parent important">&</span>.i-like-messy-code</span><span class="token punctuation">{</span><span class="token punctuation">}</span><br /> <span class="token selector"><span class="token parent important">&</span>-myNewModifier</span><span class="token punctuation">{</span><span class="token punctuation">}</span><br /> <span class="token selector"><span class="token parent important">&</span>__elementB</span><span class="token punctuation">{</span><br /> @<span class="token function">media</span><span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 765px<span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token selector">.foo.bar.baz</span><span class="token punctuation">{</span><br /> <span class="token selector"><span class="token parent important">&</span>:after</span><span class="token punctuation">{</span><br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'danger!!!'</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /> <span class="token selector"><span class="token parent important">&</span>_element_of_element</span><span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> red <span class="token important">!important</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>I couldn’t control myself so I made that a little worse than it should look but the point is human are prone to errors and there are times single underscores would be used, single hyphens would be used when trying to follow something like BEM.</p>
<p>Well <a href="https://www.youtube.com/watch?v=z6ODMDtG6-I">good news everyone</a>, CSS-modules solves this problem and even though it may also be abused it seem like a better option over sprinkling global styles everywhere. The problem with CSS-modules is what if you aren’t building a React or Vue app? Or anything that complex at all? There should be a way to handle this in the web platform.</p>
<p>The shadow DOM tackles this problem exactly and more. It offers a way to encapsulate components as part of <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">web components</a>. Here’s an example</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.root'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">const</span> shadow <span class="token operator">=</span> parent<span class="token punctuation">.</span><span class="token function">attachShadow</span><span class="token punctuation">(</span><span class="token punctuation">{</span>mode<span class="token operator">:</span> <span class="token string">'open'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br />shadow<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'<span>This should appear!</span><style>span{ color: red}</style>'</span><span class="token punctuation">;</span></code></pre>
<p>If you work with React, this is the <code>ReactDOM.render()</code> of shadow DOM.</p>
<figure class="figure--fullwidth">
<img src="https://res.cloudinary.com/strich/image/upload/v1494275896/screenshot-shadow-dom_ay4top.png" alt="Shadow DOM insertion" class="image" />
<figcaption>Shadow DOM on chrome 60</figcaption>
</figure>
<p>As shown in the figure above, the shadow root can take its own style that applies to that particular component only. Not messing with the rest of the DOM. Best part is the shadow node also doesn’t take the styles of whatever parent elements it has since it is an external and detached DOM from the regular DOM. To make it take its parent styles you’d have to explicitly tell it to</p>
<pre class="language-javascript"><code class="language-javascript">shadow<span class="token punctuation">.</span>applyAuthorStyles <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></code></pre>
<p>If you’ve ever looked through the DOM when using 3rd party libraries like modals, datepickers, and whatever cool stuff you use on your websites, you’d notice some massive additions into the DOM by them. These library authors are very much aware of the CSS cascading problems so they try to increase specificity of whatever they add. In most situations, direct inline elements are added but imagine there’s a library author that decides to add classes and pass a <code><style></code> tag with the DOM insertions. The library has a class <code>.pod{ color: red !important }</code> and in your code you’ve been trying a <code>.pod{ color: papayawhip }</code> that doesn’t seem to be working. This is the kind of clash that happens when you have everyone peeing in the DOM. ShadowDOM gives every library author their own bathroom.</p>
<p>Also, like the virtual dom in React, you can make traversals in the shadow dom and make only few direct data passing into the DOM improving performance over directly messing with the DOM.</p>
Anticipated birth of element queries2017-04-29T00:00:00Zhttps://www.josephrex.me/anticipated-birth-of-element-queries/<p>There have been <a href="https://alistapart.com/article/container-queries-once-more-unto-the-breach">so many</a> <a href="https://au.si/css-container-queries">talks</a> <a href="http://www.xanthir.com/b4PR0">on</a> <a href="http://www.xanthir.com/b4VG0">constraint-based</a> <a href="https://ethanmarcotte.com/wrote/on-container-queries/">layouts</a> <a href="https://ethanmarcotte.com/wrote/a-bit-more-on-container-queries/">or</a> <a href="https://www.smashingmagazine.com/2013/06/media-queries-are-not-the-answer-element-query-polyfill/">container/element</a> <a href="http://codepen.io/tomhodgins/post/what-the-heck-are-element-queries-container-queries">queries</a> <a href="http://kittygiraudel.com/2014/04/22/why-element-queries-matter/">lately</a> and that’s because without them responsive styling with <a href="http://ianstormtaylor.com/media-queries-are-a-hack/">media queries will remain an unpleasant hack</a>.</p>
<p>There have been <a href="https://alistapart.com/article/container-queries-once-more-unto-the-breach">so many</a> <a href="https://au.si/css-container-queries">talks</a> <a href="http://www.xanthir.com/b4PR0">on</a> <a href="http://www.xanthir.com/b4VG0">constraint-based</a> <a href="https://ethanmarcotte.com/wrote/on-container-queries/">layouts</a> <a href="https://ethanmarcotte.com/wrote/a-bit-more-on-container-queries/">or</a> <a href="https://www.smashingmagazine.com/2013/06/media-queries-are-not-the-answer-element-query-polyfill/">container/element</a> <a href="http://codepen.io/tomhodgins/post/what-the-heck-are-element-queries-container-queries">queries</a> <a href="http://kittygiraudel.com/2014/04/22/why-element-queries-matter/">lately</a> and that’s because without them responsive styling with <a href="http://ianstormtaylor.com/media-queries-are-a-hack/">media queries will remain an unpleasant hack</a>.</p>
<p>What does any of all that mean? Constraints based layouts puts child layouts or components to the scope of their parents such that changes made are relative to the parent/container size.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1497692305/container-qs-1_grttug.png" alt="Container and child fluidity constraint" />
</figure>
<p>What may come to your thought at first is <strong>just use a percentage value to achieve a size constrained to parent</strong>. By doing that we’d be making a <a href="http://css-discuss.incutio.com/wiki/Fluid_Design">fluid design</a> and we had that before responsive design with media queries yet we needed more responsiveness beyond fluidity.</p>
<p>Media queries allow you make certain styles based on the size of the viewport <code>(min-width: 720px)</code> means target viewports that are 720 or wider. Consider having that constraint to be in the scope of an element instead.</p>
<p>What is an element scope? Like <a href="https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/">scopes in JavaScript</a>, <a href="https://css-tricks.com/saving-the-day-with-scoped-css/">scoped styles</a> were implemented to limit a set of rules to an element and its children without the need for a class or any selector. But after a while they were removed from chrome and most of the other browser vendors never attempted to implement them. With its syntax,</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br /> <span class="token selector">h1,p</span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> tomato <span class="token punctuation">}</span><br /> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Time to play a game<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>I left my game pads at the zoo.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>every scoped style only applies to elements within the container element that has the style but this wasn’t really solving any problem that can’t already be handled with existing selectors. Container queries are to behave somewhat like this but with a combination of the media query behavior.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1497697668/container-qs-2_fsipar.png" alt="Container scope with condition based descendant" />
</figure>
<p>Up until now I’ve used container queries and element queries like they mean the exact same thing. To clarify I’ll try to explain them better. If given a syntax like in the figure above:</p>
<pre class="language-scss"><code class="language-scss"><span class="token selector">section</span><span class="token punctuation">{</span><br /> @container <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token selector">h1</span><span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>our constraint will always have to contain the depending elements (i.e a parent element) which would leave us with half the solution of what we need constraint based layout. There is so much that can be done with this which we will get into later but as of now this just shows that a container query isn’t the solution to constraint based layouts for the web, elements queries are.</p>
<p>Another syntax that have been <a href="https://alistapart.com/article/container-queries-once-more-unto-the-breach">proposed by the <abbr title="Responsive Issues Community Group">RICG</abbr></a> for container queries is as below:</p>
<pre class="language-scss"><code class="language-scss"><span class="token property">section</span><span class="token punctuation">:</span><span class="token function">media</span><span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">)</span> <span class="token selector">h1</span><span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>We could Sass that up with some nesting:</p>
<pre class="language-scss"><code class="language-scss"><span class="token property">section</span><span class="token punctuation">:</span><span class="token function">media</span><span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token selector">h1</span><span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>as it shows, container queries would only ever be able to affect their descendants. Element queries on the other hand should affect just about anything. If we weren’t targeting descendants only, that same syntax could look this way:</p>
<pre class="language-scss"><code class="language-scss"><span class="token property">section</span><span class="token punctuation">:</span><span class="token function">media</span><span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token selector">body</span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>This means if I have a section greater than or equal to 100px make the body background lime. body doesn’t have to be a child or descendant to section to be affected by its scope. It goes beyond container scoping as a great way to address element queries however the syntax could be very misleading. Anyone with normal experience in CSS would expect <code>section</code> to have a <code>body</code> descendant. How do we solve the syntax problem and achieve this right?</p>
<h2 id="solutions-to-constraint-based-layouts" tabindex="-1">Solutions to constraint based layouts</h2>
<p><a href="https://en.wikipedia.org/wiki/Cassowary_(software)">Cassowary</a> constraint satisfaction algorithm, a known layout solution used in Apple development was used as an early implementation of CCSS (Constrained Cascading Style Sheet) after which more solutions like <a href="http://web-design-weekly.com/2015/01/21/gss-layout-reimagined/">GSS (Grid Style Sheets)</a> have tried to adapt the concept behind it.</p>
<p>More recently, <a href="http://elementqueries.com/">EQCSS (Element Queries CSS)</a> was born as a great speculative polyfill for element queries by <a href="https://twitter.com/innovati">Tom Hodgins</a> and <a href="http://twitter.com/MaximeEuziere">Maxime Euzière</a>. It puts the at-rule into consideration for scoping elements like it is used with media queries and proposes the best syntax yet.</p>
<pre class="language-scss"><code class="language-scss">@<span class="token selector">element section</span><span class="token punctuation">{</span><br /> <span class="token selector">body</span><span class="token punctuation">{</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>Like media queries before being used for RWD (Responsive Web Design), we could target any media without specifying any dimensions</p>
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> screen</span><span class="token punctuation">{</span><br /> <span class="token selector">body</span><span class="token punctuation">{</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>the eqcss snippet would change the background color provided there is one or more <code>section</code> element in the <a href="https://www.w3.org/TR/cssom-1/">CSSOM</a>. Then with media queries we get responsive design with conditions:</p>
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 720px<span class="token punctuation">)</span></span><span class="token punctuation">{</span><br /> <span class="token selector">body</span><span class="token punctuation">{</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>which element queries offer as:</p>
<pre class="language-scss"><code class="language-scss">@element .mod <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token selector">body</span><span class="token punctuation">{</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>an element could be its own constraint which would help achieve better pluggable <a href="http://atomicdesign.bradfrost.com/">atomic design</a>.</p>
<p>What happens when there is more than one element being used as constraint? Eqcss allows you to target current scope only with meta selectors</p>
<pre class="language-scss"><code class="language-scss">@element input <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token selector"><span class="token variable">$this</span>:focus</span><span class="token punctuation">{</span><br /> <span class="token property">border</span><span class="token punctuation">:</span> solid thin crimson<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>This would only apply a border to the input that is focused and no other input. There are more meta selectors including with <a href="http://elementqueries.com/#meta-selectors">demos here</a>. They include <code>$parent</code>, <code>$next</code>, <code>$prev</code>, and <code>$root</code>.</p>
<p>EQCSS allows more conditions for the scoped element including <code>min-aspect-ratio</code>, <code>orientation</code>, <code>min-scroll-y</code>, <code>min-lines</code>, <code>min-characters</code>, <code>min-children</code>, and more.</p>
<h2 id="container-queries-and-cyclic-dependency-problem" tabindex="-1">Container queries and cyclic dependency problem</h2>
<p>People have raised possible issues with container queries to be circularity of dependent containers or recursion. Basing an element on the container of a container of a container may lead to a O(N<sup>2</sup>) <a href="https://josephrex.me/big-o-notation-explained/">complexity</a>. Here’s what the recursion looks like from an <a href="https://au.si/css-container-queries">example</a> by <a href="https://twitter.com/ausi">Martin Auswöger</a></p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1497697683/container-qs-3_rldb7o.png" alt="Cyclic dependency of container query" />
</figure>
<pre class="language-scss"><code class="language-scss"><span class="token selector">.container</span><span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span><br /><span class="token selector">.child</span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token punctuation">}</span><br />.<span class="token property">container</span><span class="token punctuation">:</span><span class="token function">media</span><span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 150px<span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token selector">.child</span><span class="token punctuation">{</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>Ausi recommended that the fix to this would be to use a syntax like this:</p>
<pre class="language-scss"><code class="language-scss">.<span class="token property">child</span><span class="token punctuation">:</span><span class="token function">container</span><span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 150px<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100px <span class="token punctuation">}</span></code></pre>
<p>leaving the browser to make a decision of a reliable container after traversing the DOM to find ancestors. The container would then be the nearest ancestor with a fixed width or the document width when no ancestors are found.</p>
<p>How does EQCSS handle this? As said earlier, EQCSS does not use container queries but element queries hence there’s no such thing as scoping child elements within their parents. It simply picks an element and gives it a condition to be met. What this means is, when the problem above is addressed with eqcss, the child element would just always base on its on min-width since the scoped element relies on it. It does cause a few self-referencing issue but CSS already has self referencing issues. This video explains:</p>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/QfM_JwSDdjo?controls=0" title="Does Circularity (Self Reference) Pose a Problem for Element Queries?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<p>Here’s eqcss addressing the problem above. As of the time of testing it only behaves weird in Chrome Canary (Chrome 60) and that’s not surprising as we see <a href="https://greensock.com/will-change">with the growth of Chrome things get weird like it did with will-change</a>.</p>
<iframe width="100%" height="300" src="https://jsfiddle.net/bl4ckdu5t/6wuzuer5/embedded/result,css,html/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>and a demonstation of it when resized:</p>
<div style="position:relative;padding-bottom:36%"><iframe src="https://gfycat.com/ifr/FirstCheerfulFrenchbulldog" frameborder="0" scrolling="no" width="100%" height="100%" style="position:absolute;top:0;left:0;" allowfullscreen=""></iframe></div>
<hr />
<h2 id="resources" tabindex="-1">Resources</h2>
<ul>
<li><a href="https://bradfrost.github.io/this-is-responsive/resources.html#element-queries">Brad Frost’s list of element/container queries post and tools</a></li>
<li><a href="https://github.com/eqcss/eqcss#documentation--tutorials">EQCSS demos</a></li>
<li><a href="http://www.xanthir.com/b4VG0">2014 state of element queries</a></li>
<li><a href="http://www.xanthir.com/b4PR0">Element queries</a></li>
<li><a href="https://alistapart.com/article/container-queries-once-more-unto-the-breach">Alistapart - Container queries once more unto the breach</a></li>
<li><a href="https://au.si/css-container-queries">Ausi’s css container queries</a></li>
<li><a href="https://ethanmarcotte.com/wrote/on-container-queries/">On container queries - Ethan Marcotte</a></li>
</ul>
Cohesion against coupling2017-04-17T00:00:00Zhttps://www.josephrex.me/cohesion-against-coupling/<p>Coupling and Cohesion are two major principles for structured design in software. It’s commonly heard that high cohesion and low/loose coupling leads to good software design. Cohesion is an act of sticking together. In physics cohesion gets contrasted against adhesion as the sticking together of particles of the same substance where adhesion happens with dissimilar substances. With this in mind we know that any 2 things can be put together and we could assume a cohesive code.</p>
<p>Coupling and Cohesion are two major principles for structured design in software. It’s commonly heard that high cohesion and low/loose coupling leads to good software design. Cohesion is an act of sticking together. In physics cohesion gets contrasted against adhesion as the sticking together of particles of the same substance where adhesion happens with dissimilar substances. With this in mind we know that any 2 things can be put together and we could assume a cohesive code.</p>
<p>Cohesion in software is a measure of function relationship within a module. Cohesion is brought up in the <abbr title="Object Oriented Programming">OOP</abbr> paradigm than any other paradigm because of the methods that make up a class which is usually what makes up a module. An object-oriented code is considered cohesive if its methods are closely related to each other with little or no dependency from external modules. I said earlier that cohesion and coupling make up structured design and structured design with structured analysis are used to analyze business requirements since they were invented by Larry Constantine. According to Wikipedia:</p>
<blockquote>
<p>In software engineering, structured analysis (SA) and structured design (SD) are methods for analyzing business requirements and developing specifications for converting practices into computer programs, hardware configurations, and related manual procedures.</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Structured_analysis">Structured analysis</a></li>
</ul>
</blockquote>
<p>To meet business needs, developers create business specific tests for <abbr title="Behavior Driven Development">BDD</abbr> which would then define the related methods per class with each following the <abbr title="Single Responsiblity Principle">SRP</abbr>. It’s known that a method needs to have a single responsibilty if you follow SRP already hence you could have the following class:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Chat</span><span class="token punctuation">{</span><br /> <span class="token function">connectSocket</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><br /> <span class="token function">printLog</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><br /> <span class="token function">kickBanUser</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><br /> <span class="token function">spamIPverification</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>While all these may be performing a single responsibility they are not related in any way. This is like adhesion in physics as described earlier where the class would be an adhesive substances that merges all sort of unrelated particles. This is also an example of low cohesion. It is about the relationship of responsibilities. Here’s a cohesive version of the Chat class example:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Chat</span><span class="token punctuation">{</span><br /> <span class="token function">pullChatThread</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><br /> <span class="token function">getOnlineStatus</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><br /> <span class="token function">sendMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><br /> <span class="token function">addEmoji</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><br /> sanitizeInputs <span class="token punctuation">{</span><span class="token punctuation">}</span><br /> <span class="token function">updateChatThread</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>The method names explain what the methods here are doing and you can think of how they are related to each other in order to make the chat work. If you fire up a chat, you want to be able to see past messages and the <code>pullChatThread()</code> method helps with that after which you may want to know the online status of the user. The <code>pullChatThread()</code> method might be calling that method within itself to let you know if the user is active to have a conversation with. You decide to send a message which invokes the <code>sendMessage()</code> method that sanitize your inputs with <code>sanitizeInput()</code> and could also call the <code>addEmoji()</code> method if you are using an emoji. Finally the method sends this message to a socket server with you as the sender and your sanitized input. The socket server replies with your message and any message from the other party which you can then use <code>updateChatThread()</code> to update the chat thread. This is basically how most chat applications work. And all that happen in very little time.</p>
<p>In Chapter 10 of Uncle Bob’s <a href="https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882">clean code</a>, he says by introducing instance variables to be shared between methods of a class we make those methods cohesive to the class.</p>
<blockquote>
<p>Classes should have a small number of instance variables. Each of the methods of a class should manipulate one or more of those variables. In general the more variables a method manipulates the more cohesive that method is to its class. A class in which each variable is used by each method is maximally cohesive.</p>
</blockquote>
<p>Now I’ll introduce some instance variables to our chat class. In JavaScript you could add instance variables within the constructor as:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Chat</span><span class="token punctuation">{</span><br /> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">this</span><span class="token punctuation">.</span>currentUser <span class="token operator">=</span> User<span class="token punctuation">.</span><span class="token function">authenticated</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>or you could use the stage-2 proposed ES syntax of instance variables with <a href="https://babeljs.io/docs/plugins/transform-class-properties/">babel class properties plugin</a> which I’d prefer to use:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Chat</span><span class="token punctuation">{</span><br /> currentUser <span class="token operator">=</span> User<span class="token punctuation">.</span><span class="token function">authenticated</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> recipient <span class="token operator">=</span> Conversation<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>currentUser<span class="token punctuation">)</span><span class="token punctuation">.</span>last<span class="token punctuation">.</span>recipient<span class="token punctuation">;</span><br /><br /> <span class="token function">pullChatThread</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> thread <span class="token operator">=</span> Conversation<span class="token punctuation">.</span><span class="token function">between</span><span class="token punctuation">(</span><br /> <span class="token keyword">this</span><span class="token punctuation">.</span>currentUser<span class="token punctuation">,</span><br /> <span class="token keyword">this</span><span class="token punctuation">.</span>recipient<span class="token punctuation">,</span><br /> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getOnlineStatus</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>recipient<span class="token punctuation">)</span><br /> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> thread<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token function">getOnlineStatus</span><span class="token punctuation">(</span><span class="token parameter">entity</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">return</span> entity<span class="token punctuation">.</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'active'</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token function">sendMessage</span><span class="token punctuation">(</span><span class="token parameter">inputText</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> newMessage <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">sanitizeInput</span><span class="token punctuation">(</span>inputText<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">pullChatThread</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateChatThread</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">addEmoji</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>currentUser<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>recipient<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token function">addEmoji</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// ... Some magic happens here. It's Tahiti</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token function">sanitizeInput</span><span class="token punctuation">(</span><span class="token parameter">text</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> text<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">all evil things</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">'all that glimmers'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token function">updateChatThread</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>params</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">const</span> message<span class="token punctuation">,</span> sender<span class="token punctuation">,</span> recipient <span class="token operator">=</span> params<span class="token punctuation">;</span><br /> <span class="token keyword">const</span> socketUpdate <span class="token operator">=</span> Socket<span class="token punctuation">.</span><span class="token function">retrieveWithNew</span><span class="token punctuation">(</span>sender<span class="token punctuation">,</span> recipient<span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> socketUpdate<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>In this example you can see methods referencing methods and the instance variables for the current user and the recipient. The most cohesive method here is the <code>sendMessage()</code> as it makes use of <code>this.currentUser</code>, <code>this.recipient</code> and also the instance methods <code>this.addEmoji()</code> and <code>this.sanitizeInput()</code>. The least are the <code>getOnlineStatus()</code>, <code>sanitizeInput()</code> and <code>addEmoji()</code> which aren’t referencing any other method directly. As a matter of fact those could become static methods instead of being instance method. There’s a <a href="http://eslint.org/docs/rules/class-methods-use-this">eslint rule</a> to make sure such methods are made static.</p>
<p>Uncle bob suggested using instance variables but wasn’t explicit enough about why so I’d try to explain. In a language that supports private methods, we may make such instance variables even private as they have nothing to do outside of the class. In JavaScript or any language without private methods, this values are of no use outside of the class so it’s better to keep them as instance variables to add an extra layer of construction before invocation.</p>
<p>Cohesion can reduce the complexity of a module, increase usability, and system maintanability. It is of 8 major types. I’ll only list them because <a href="https://en.wikipedia.org/wiki/Cohesion_(computer_science)#Types_of_cohesion">Wikipedia has done a good job at explaining them</a>.</p>
<ul>
<li>Coincidental cohesion (worst)</li>
<li>Logical cohesion</li>
<li>Temporal cohesion</li>
<li>Procedural cohesion</li>
<li>Communcation/informational cohesion</li>
<li>Sequential cohesion</li>
<li>Function cohesion (best)</li>
<li>Perfect cohesion (atomic)</li>
</ul>
<hr />
<p>Coupling measures the degree of module interdependency as cohesion does for function interdependency within a module. A software is considered properly designed when it has loose coupling. Loose coupling goes with high cohesion and vice versa.</p>
<p>In previous examples, a chat module was used in building a chat application. Modules could really be anything beyond the scope of a class but to maintain simplicity we’d keep a class to a module. The chat module could use some lower coupling. Notice how we call an alien <code>Socket</code> class within the <code>updateChatThread()</code>?</p>
<p>We could improve this by making the user of the API to add the Socket class themselves when the Chat class gets constructed. Hence a <a href="https://en.wikipedia.org/wiki/Dependency_injection">dependency injection</a>.</p>
<pre class="language-js"><code class="language-js"><span class="token function">updateChatThread</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>params</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">const</span> message<span class="token punctuation">,</span> sender<span class="token punctuation">,</span> recipient<span class="token punctuation">,</span> socket <span class="token operator">=</span> params<span class="token punctuation">;</span><br /> <span class="token keyword">return</span> <span class="token function">socket</span><span class="token punctuation">(</span>sender<span class="token punctuation">,</span> recipient<span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Because the <code>sendMessage()</code> method invokes <code>updateChatThread()</code>, it still needs the socket but we are trying to avoid depending on the Socket module directly in our Chat module so we could once again apply dependency injection.</p>
<pre class="language-js"><code class="language-js"><span class="token function">sendMessage</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> inputText<span class="token punctuation">,</span> socket <span class="token operator">=</span> params<span class="token punctuation">;</span><br /> <span class="token keyword">const</span> newMessage <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">sanitizeInput</span><span class="token punctuation">(</span>inputText<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">pullChatThread</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updateChatThread</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">addEmoji</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>currentUser<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>recipient<span class="token punctuation">,</span> socket<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>If <code>sendMessage()</code> gets called on instance its parameters would be like:</p>
<pre class="language-js"><code class="language-js">myChatInstance<span class="token punctuation">.</span><span class="token function">sendMessage</span><span class="token punctuation">(</span><span class="token string">'hello :)'</span><span class="token punctuation">,</span> Socket<span class="token punctuation">.</span>retrieveWithNew<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>We could further reduce the coupling of this by finding ways to take out the dependency of the Conversation class but I could also see reasons to keep that. It’s great to write optimal code, reduce coupling and increase cohesion but we shouldn’t put all the focus on this that we end up making our software inconvenient to maintain.</p>
<p>Balance is a big factor in software engineering and everything in life. You’d notice by reducing coupling we add more cohesion. The <code>sendMessage()</code> method had always used the <code>updateChatThread()</code> but now <code>updateChatThread()</code> also depends on it for the socket call. Like cohesion, coupling can also be broken down in types:</p>
<ul>
<li>Content coupling (high)</li>
<li>Common coupling</li>
<li>External coupling</li>
<li>Control coupling</li>
<li>Stamp coupling</li>
<li>Data coupling</li>
<li>Message coupling (low)</li>
<li>No coupling</li>
</ul>
<p>An example of data coupling is how we changed the use of a supposed <code>Socket</code> module to a parameter entry in the Chat module. The major reason why tightly coupled software is discouraged is that it increases <a href="https://en.wikipedia.org/wiki/Connascence_(computer_science)">connascence</a> of system implementations i.e a change in one may lead to a ripple effect to have to change another. If the <code>Socket</code> module gets directly called in <code>Chat</code> module then the API for socket changes to use a <code>retrieve()</code> method instead of <code>retrieveWithNew()</code> we’d have to update the chat module too respectively. But now we have it such that our chat module is almost independent of changes from other modules.</p>
<p>Abiding by the <a href="https://en.wikipedia.org/wiki/Law_of_Demeter">law of demeter (LoD)</a> would prevent the method change on the dependent Socket module. The law says:</p>
<ul>
<li>Each unit should have only limited knowledge about other units: only units “closely” related to the current unit</li>
<li>Each unit should only talk to its friends; don’t talk to strangers.</li>
<li>Only talk to your immediate friends</li>
</ul>
<p>Why speak with Socket who is a stranger? what is retrieveWithNew? I don’t even know Socket enough to know it has a child named that. Socket is not my friend!</p>
Why go to college2017-03-24T00:00:00Zhttps://www.josephrex.me/why-go-to-college/<p>We are in an era where knowledge has become so accessible that we question the need for higher education which was once known as the touchstone for professional excellence. Having so much data at our fingertips and knowing how to apply them is a great advantage of living in this century.</p>
<p>We are in an era where knowledge has become so accessible that we question the need for higher education which was once known as the touchstone for professional excellence. Having so much data at our fingertips and knowing how to apply them is a great advantage of living in this century.</p>
<p>However with all that much data defying gravity around us some of us fail to utilize it. Some put wrong interpretation to it. I think misinterpreting things has become the wonted thing in many aspects of life now. Different interpretations of one religion by its followers leading to problems that make the world perceive them as either unstable or stereotype them as bad due to the ones with a wrong perception. The same goes for sexual orientation, work ethics, and this has begot the inevitable bigotry that has become what we hear of or experience daily.</p>
<p>Everyone in life is constantly learning but there’s a measure of how much we learn as individuals which become a metric to how much we can achieve. Programming being a simple skill to pick up falsely leads people to <a href="https://www.quora.com/Why-is-programming-so-easy">believing mastery of software engineering is just as easy</a>.</p>
<div style="--mx:auto;--my:2rem;--p:2rem;--w:min(400px, 80%);--bg:rgb(100 100 100/.06);--roundness:.5rem;">
<div style="--d:flex;--justify_content:space-between;">
<div style="--d:flex;--gap:1rem;">
<div>
<img src="https://pbs.twimg.com/profile_images/851638519600529408/_7GOVSiq_normal.jpg" class="no-zoom" width="48" height="48" alt="" style="--roundness:50%;" />
</div>
<div>
<strong>Computer Science</strong>
<div style="--font_sz:1.4rem;--opacity:.7">@CompSciFact</div>
</div>
</div>
</div>
<div style="--py:1.5rem;--word_break:break-word;">
<p>Simple != Easy</p>
<p>Simplicity and ease are uncorrelated, or maybe even negatively correlated.</p>
</div>
<time datetime="2017-03-10T02:46:16.000+00:00" style="--d:block;--pb:1rem;--font_sz:1.4rem;--opacity:.7;">Mar 10, 2017, 2:46 AM</time>
<div style="--d:flex;--justify_content:space-between;--border_t: solid thin var(--link-color);--pt:1rem;--font_sz:1.4rem;">
<a rel="noreferrer" target="_blank" href="https://twitter.com/CompSciFact/status/840031018165948417">Read on twitter</a>
<div style="--py:.4rem">
<div>287 likes, 254 retweets</div>
</div>
</div>
</div>
<p>If you work as a software engineer soon you’d realize <a href="http://thedailywtf.com/articles/programming-is-hard">programming is hard</a> and you may either decide to doggedly be at your best with it and pick up all it takes remain relevant or you could just put up a smokescreen to mask your slackness. While trying to find a place you fit in, you get faced with interviews that are worthily intense or just totally off-putting and the only way you feel you can fill the knowledge gap is by going back to college if you’ve never had a college degree or didn’t study computer science. Even if you aren’t applying to positions yet, you could have a passion for computers or whatever your interests are that makes you believe it’s worth going to college for.</p>
<p>At this point where you have to make a decision between losing money for education and saving your money for cheaper knowledge sources, you come across articles that <a href="https://medium.com/javascript-scene/want-to-code-a-university-degree-might-be-a-huge-waste-of-time-81e1817a2ef0#.98sjxivhh">paint universities as a waste of time</a>.</p>
<blockquote>
<p>Forget university programs. Unless it’s from Stanford or MIT, your degree will mean a lot less than having some apps to show off. In fact, most university programs struggle to keep up with changing technology. A degree will buy you a few thousand dollars more for the first 1–3 years. After that it makes exactly zero difference. Unless you like flushing time and money down the toilet…</p>
</blockquote>
<p>Some good points were made in that article but firing so much shots at university programs? It looks like the article is addressed at newbie coders with no experience in programming whatsoever. I’ll start by addressing that spending on college isn’t splurging if you have a <strong>purpose</strong> and you know how to stick to it.</p>
<hr />
<p>I’d beeline to what purpose means to clarify that point</p>
<h2 id="what-is-purpose" tabindex="-1">What is purpose?</h2>
<p>Purpose is a person’s sense of resolve or determination according to the Apple dictionary but Merriam-Webster define it as</p>
<blockquote>
<p>The action for which a person or thing is specially fitted or used or for which a thing exists</p>
</blockquote>
<p>Now you may think if you have passion you have a purpose but I urge you to see this video</p>
<figure>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VZEThJNvnUA?controls=0" title="Episode 4 | Advice From The Most Successful People On The Planet | IGNORE Social Media |" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
</iframe>
</figure>
<p>At a point in the video purpose is defined as whatever you’re trying to accomplish with an understanding of why it’s important and a tenacity to never give up on it. And passion is what you like, what feels good, what you find that you want to do but not necessarily need to do. Passion is considered to be dangerous because it is admiration when you really need aspiration.</p>
<hr />
<p>Back to <a href="https://twitter.com/_ericelliott">Eric Elliot</a>’s article, <a href="https://medium.com/@leaverou/youre-completely-missing-the-point-of-higher-education-274570eb5a02#.a26hn4yck">Lea Verou replied</a> saying:</p>
<blockquote>
<p>University teaches you how to think, not 2016’s trendiest frameworks or programming languages. Those are transient skills</p>
</blockquote>
<p>I couldn’t agree more with <a href="https://twitter.com/leaverou">Lea</a>. But I believe since she was just dropping a comment she couldn’t elaborate enough and that’s what I’ll try to help with here.</p>
<h2 id="i’m-not-convinced-what-does-college-really-have-to-offer" tabindex="-1">I’m not convinced. What does college really have to offer?</h2>
<p>So many people who eventually go to college go with high expectations and graduate thinking they’ve acquired the right to fit in anywhere or get any job without any extra efforts.</p>
<p>There’s the case I heard of from a friend’s organization where they had to let go of the 3 masters degree holders they had because they weren’t fitting into the company culture and were never submissive to learning. They thought their degree was everything</p>
<p>Harry Robert also digressed to address this on <a href="https://github.com/csswizardry/ama/issues/24">his AMA issue</a></p>
<blockquote>
<p>This calls to mind a slightly different opinion I hold about so many people working on the web these days being from a traditional CompSci background, with none of the knowledge of the nuance or the history of the Web as a platform. The sheer number of developers who’re badass programmers but with no idea about HTML/CSS/progressive enhancement is kinda worrying.</p>
</blockquote>
<p>Universities offer 4 things (NICK):</p>
<ul>
<li>Network</li>
<li>Isolation</li>
<li>Closure</li>
<li>Knowledge</li>
</ul>
<p><strong>Network:</strong> This is the most important reason for college in my opinion. You could meet the world’s best professors and I don’t mean their lectures I mean just having the privilege to know them in person, you could have the smartest minds as classmates. The value of some friends may not reflect in the moment but you’d know they are worth more than treasure. You could also meet influential people. All these without being part of any student groups. If you join such groups it’s more network and if you’re studying in a new city you could also build a network through communities outside school.</p>
<p><strong>Isolation:</strong> For people who get to leave their homes to go study in college, you’d find it is a great chance to meet the inner you, spend more time with yourself and realize things about yourself that you’ve not paid close attention to. You may have friends in college but you probably get your moments of isolation more frequently than you will in a family home.</p>
<p><strong>Closure:</strong> It’s sad that a large percentage of people seeking college education only go after this. Degree is what gives you closure. It’s what makes you an option over other options in the sight of employers who fail to see beyond degrees and you can’t disregard it because that organization might be the place you find your professional happiness.</p>
<p><strong>Knowledge:</strong> Knowledge acquisition is the objective of most people going to college. They focus so much on having the best lecturers to impact this knowledge into them and often get dissappointed if the lecturers are anything short of perfection. There’d be complaints about accents of lecturers from different cultures, complaints about charisma of the ones who speak the way we expect and even if you manage to keep good grades you never get the sense of satisfaction. You feel you were robbed off what you paid for. If these describe you in any way you should know that knowledge is everything in the ecosystem of college. Learning that a janitor can be so happy and cheerful even with critical health issues, learning the different cultures and opinions of different people you meet, learning what it takes to struggle to retain good grades. That is all knowledge. If you have the best professors and you get what you perceive as wonderful lectures, consider it to be an added privilege because not everyone gets that. If you carry on this mindset you wouldn’t be dissapointed when you get otherwise. Like I said earlier, knowledge is everywhere and you don’t have to wait for a lecturer to spoonfeed it to you. It’s called higher education.</p>
<p>If you seek any of those things listed then you should give college a try. If you’re working already and you consider going to college to prove to employers or clients that you are a better person/staff/consultant without being able to prove that without a degree, think again because college wouldn’t teach you whatever it takes to excel at your area of specialization because as Lea said those skills required for your current job are transient which makes them ineligible for a university curriculum. You could learn about algorithms from the MIT open courseware for free and you could learn anything you need without college if you are disciplined. College students learn by a curriculum which would bring knowledge needed but not sought at them unlike a self-learned person who goes after what is needed to be known to achieve certain objectives. This puts college students at a bit of an edge over self-learned persons unless you can be really disciplined and make exhaustive research when learning on your own. College isn’t for everyone as Eric insinuated but you should consider it if it even slightly aligns with your purpose in life. You should also start making other micro-adjustments that project you towards your goals either way because in the end it’s the talent you’ve been able to build as an individual that makes up your value.</p>
Frontend asset management in rails applications2017-03-17T00:00:00Zhttps://www.josephrex.me/frontend-asset-management-in-rails-applications/<p>In rails planet it’s easy to assume that asset management is at its best with the assets pipeline it provides which includes sprockets for simple requires. Sprockets is great but could be better with a properly structured application.</p>
<p>In rails planet it’s easy to assume that asset management is at its best with the assets pipeline it provides which includes sprockets for simple requires. Sprockets is great but could be better with a properly structured application.</p>
<p><a href="http://bundler.io/">Bundler</a> makes it easy to install and manage ruby gems and with its most used source/registry being <a href="https://rubygems.org/">rubygems.org</a>; a platform that homes a lot of ruby libraries you can be sure to find almost any ruby library you need or publish one that doesn’t already exist.</p>
<p>If you’re picking up rails for the first time you’d find it easy to add just about anything you need to your Gemfile and bundle it up but the problem with this is many frontend libraries aren’t made for just ruby developers so they are kept on frontend targeted registries like npm or bower. Because of npm’s nested dependency tree which only works well in node environments, bower becomes the best source for frontend assets. <a href="http://stackoverflow.com/a/18652918/2649933">Check difference between npm and bower</a>.</p>
<p>At this point you’d think you could just add bower as a source in your Gemfile and name whatever library you want from its registry but that wouldn’t work because bower wasn’t made to work with bundler. To solve this problem <a href="https://rails-assets.org/">rails-assets</a> was created. From version 1.8.4 of <a href="http://bundler.io/">bundler</a> you can include multiple sources to your Gemfile and wrap them in a block. rails assets builds upon this by proxying between bundler and bower to provide bower assets through the Gemfile. If all you need is a little app with no further maintainance (they always grow into a maintainance hell), this is all you need.</p>
<p>For a properly maintained project, you consider seperation of concern; something rails as a framework does a fair amount of itself. When you install ruby libraries through bundler you usually don’t want to modify them or anything. You are fine with having them install freshly on your development machine and the rest of your team’s as well as on the production machine. This is not always the same with a frontend library. Sometimes there are little tweaks you want to make to the library to behave better with your application and modifying just what you have in your locally installed shims directory wouldn’t keep the change for the rest of the team on in production. Also, your Gemfile can grow really quick with frontend assets and you don’t want that if you want easier debugging in your app.</p>
<p>To solve this, you use bower directly and save yourself the extra layer rails-assets offers.</p>
<h2 id="configuring-rails-for-bower-sprocket-requires" tabindex="-1">Configuring rails for bower sprocket requires</h2>
<p>First you specify where bower should install its components. By default it installs them in the</p>
<p><code>bower_components</code> directory within the root of your project but rails already make it possible to make a sprocket require of assets in <code>vendor/assets/javascripts</code> and <code>vendor/assets/stylesheets</code>. You may or may not be using these already but it’s easier to think of the vendor directory as where vendor scripts/libraries go hence we’d tell bower to store components in there by creating a <code>.bowerrc</code> file in the root folder and adding this:</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><span class="token property">"directory"</span><span class="token operator">:</span> <span class="token string">"vendor/assets/components"</span><span class="token punctuation">}</span></code></pre>
<p>In my opinion, bower also has the best cli search of all registries so if you’re not sure of a library name you can run a search to see what it’s called by the most legitimate maintainer <code>bower search bootstrap</code>.</p>
<p>Once found <code>bower install bootstrap</code> and your component would be stored at <code>vendor/assets/components/bootstrap</code>. Because of bower’s flat dependency and also for the reason I mentioned earlier on easily debugging and making changes to frontend assets, you don’t gitignore your bower components (this is just my opinion. If you have better reasons to gitignore it then do that). For rails to find these newly installed components and make them available as sprocket requires modify your application.rb located at <code>config/application.rb</code> with this assets path modification:</p>
<pre class="language-rb"><code class="language-rb"><span class="token keyword">module</span> <span class="token constant">YourApp</span><br /> <span class="token keyword">class</span> <span class="token class-name">Application</span> <span class="token operator"><</span> <span class="token constant">Rails</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Application</span><br /> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><br /> config<span class="token punctuation">.</span>assets<span class="token punctuation">.</span>paths <span class="token operator"><</span><span class="token operator"><</span> <span class="token constant">Rails</span><span class="token punctuation">.</span>root<span class="token punctuation">.</span>join<span class="token punctuation">(</span><span class="token string">'vendor'</span><span class="token punctuation">,</span> <span class="token string">'assets'</span><span class="token punctuation">,</span> <span class="token string">'components'</span><span class="token punctuation">)</span><br /> <span class="token keyword">end</span><span class="token operator">></span><br /><span class="token keyword">end</span></code></pre>
<p>Now you can go into your stylesheets manifest file (application.css) and do this:</p>
<pre class="language-css"><code class="language-css"><span class="token comment">/*<br /> * Applicaiton.css<br /> *= require bootstrap/dist/css/bootstrap<br /> *<br /> */</span></code></pre>
<p>for Javascript it’d be</p>
<pre class="language-js"><code class="language-js"><span class="token comment">// Application.js</span><br /><span class="token comment">//= require bootstrap/dist/js/bootstrap</span><br /><span class="token comment">//</span></code></pre>
<p>The final names here do not need their extensions .css and .js like every other sprocket require is always smart to determine the filetype by the parent filetype. To derive the path given to sprockets you simply have to look at the path from inside <code>vendor/assets/components</code> and your component name till its required asset file name.</p>
<p>If you’ve chosen to ignore your bower components directory earlier you should make sure you have a bower.json file to save your installed component names. This can be generated with <code>bower init</code> and add <code>--save</code> to your installs e.g <code>bower install --save bootstrap</code>.</p>
<p>This way you can look at all the frontend assets easily in the bower.json file and they’d look like this:</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"bootstrap"</span><span class="token operator">:</span> <span class="token string">"^3.3.7"</span><span class="token punctuation">,</span><br /> <span class="token property">"lodash"</span><span class="token operator">:</span> <span class="token string">"^4.17.3"</span><span class="token punctuation">,</span><br /> <span class="token string">"Snap.svg"</span> <span class="token string">"snap.svg#^0.4.1"</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>leaving your Gemfile free of frontend mess. This is espcially useful if you work with frontend developers that you would rather not have messing with things that affect/influence the backend process.</p>
Algorithm Analysis: Best, Worst and Average Case2017-03-06T00:00:00Zhttps://www.josephrex.me/algorithm-analysis/<p>Algorithms are a sequence of decisions we make to solve a problem. Like every decision in life we can make great decisions and really terrible decisions. But it doesn’t end there. Good decisions vary, they can come easy and can take a lot harder process to reach an expected outcome.</p>
<p>Algorithms are a sequence of decisions we make to solve a problem. Like every decision in life we can make great decisions and really terrible decisions. But it doesn’t end there. Good decisions vary, they can come easy and can take a lot harder process to reach an expected outcome.
There are 3 categories of efficiency an algorithm can fall under when analyzing its usage of resources. They are best case, worst case, and average case.</p>
<p>To give you a mind picture, my friend Jesse and I decided to go on a road trip. We were to travel 300 miles and Jesse assured me we had enough gas for each gas station stops through the journey. Jesse made a good calculation but ignored the possibility of errors which led to an unexpected outcome when we had traveled 160 miles and found that the next gas station wasn’t functional. This was really unfortunate because the next gas station was 80 miles away and we were about to hit the E. We got it to 220 miles through our journey and the car stopped. We wanted to hitchhike through the rest of the journey but after waiting for 2 hours with no passerby we had to decide on walking down to the next gas station with some gallons we had in the car.</p>
<p>2 miles after the next gas station, there’s another station, and another one 1 mile after that. That’s a good reason to believe going to fetch some gas would be a better decision than waiting for hours for a chance to hitchhike. But another condition we were constrained by was that our car runs on diesel and while there’s always petrol in all gas stations, they don’t always have diesel.</p>
<p>So far we’ve chosen footslogging with gallons over hitchhiking. We think it’s a good decision but we have another case here. If the gas station 20 miles away has diesel, that’d be the <strong>best case</strong>, if we have to try the first and second second gas stations to find that only the third has diesel or none of them have diesel, it would be the <strong>worst case</strong>. If the second gas station has diesel and the first didn’t then we don’t have to try the third. That’s an <strong>average case</strong>.</p>
<p>With that understanding, when giving an array of length <strong>n</strong>, when <strong>n = 5</strong> and our array items are <strong>23, 34, 13, 44, 18</strong>, we are to write an algorithm to find a number in the list of array items. By performing a linear search, we will have our best case if 23 is the number to be searched as it is the first item on the array.</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<semantics>
<mrow>
<mi>k</mi>
<mo>=</mo>
<mn>23</mn>
</mrow>
</semantics>
</math>
<p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<semantics>
<mrow>
<msub>
<mi>C</mi>
<mi>best</mi>
</msub>
<mo>(</mo>
<mi>n</mi>
<mo>)</mo>
<mo>=</mo>
<mn>1</mn>
</mrow>
</semantics>
</math>
</p>
<p>If we then have to search for 18 or any other number like 58 which doesn’t exist in the list, it’d be a worst case efficiency.</p>
<p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<semantics>
<mrow>
<mi>k</mi>
<mo>=</mo>
<mn>18</mn>
</mrow>
</semantics>
</math>
</p>
<math>
<semantics>
<mrow>
<msub>
<mi>C</mi>
<mi>worst</mi>
</msub>
<mo>(</mo>
<mi>n</mi>
<mo>)</mo>
<mo>=</mo>
<mi>n</mi>
</mrow>
</semantics>
</math>
<p>For every possibility of worst case either the item is found in the last position or not found at all we go through the <strong>n</strong> number of elements.</p>
<p>34, 13, and 44 are the average cases of the search. To find any of those items at a position <strong>i</strong> of the array, we derive the probability of success and failure. Given that:</p>
<math>
<semantics>
<mrow>
<mtext>Probability of Successful Search</mtext>
<mo>=</mo>
<mi>p</mi>
</mrow>
</semantics>
</math>
<p>
<math>
<semantics>
<mrow>
<mtext>where,</mtext>
<mspace width="20px"></mspace>
<mn>0</mn>
<mo>≤</mo>
<mi>p</mi>
<mo>≤</mo>
<mn>1</mn>
</mrow>
</semantics>
</math>
</p>
<p>
<math>
<semantics>
<mrow>
<mtext>Probability of Unsucessful Search</mtext>
<mo>=</mo>
<mn>1</mn>
<mo>-</mo>
<mi>p</mi>
</mrow>
</semantics>
</math>
</p>
<p>The probability to find an item that is neither the first nor last item of the array at a position <strong>i</strong> in the array then becomes:</p>
<math>
<semantics>
<mrow>
<mi>p</mi>
<mo>/</mo>
<mi>n</mi>
</mrow>
</semantics>
</math>
<p>and the probability of reoccurence of the item in position <strong>i</strong> would be:</p>
<math>
<semantics>
<mrow>
<msub>
<mi>C</mi>
<mi>average</mi>
</msub>
<mo>(</mo>
<mi>n</mi>
<mo>)</mo>
<mo>=</mo>
<mrow>
<mo>[</mo>
<mrow>
<mn>1</mn>
<mo>x</mo>
<mfrac>
<mi>p</mi>
<mi>n</mi>
</mfrac>
<mo>+</mo>
<mn>2</mn>
<mo>x</mo>
<mfrac>
<mi>p</mi>
<mi>n</mi>
</mfrac>
<mo>+</mo>
<mi>…</mi>
<mo>+</mo>
<mi>i</mi>
<mo>x</mo>
<mfrac>
<mi>p</mi>
<mi>n</mi>
</mfrac>
<mo>+</mo>
<mi>…</mi>
<mo>+</mo>
<mi>n</mi>
<mo>x</mo>
<mfrac>
<mi>p</mi>
<mi>n</mi>
</mfrac>
</mrow>
<mo>]</mo>
<mo>+</mo>
<mi>n</mi>
<mo>(</mo>
<mi>1</mi>
<mo>-</mo>
<mi>p</mi>
<mo>)</mo>
</mrow>
</mrow>
</semantics>
</math>
<p>with <strong>1 - p</strong> added as probability of unsuccesful search.</p>
<p>Simplifying the above equation we get:</p>
<math>
<semantics>
<mrow>
<mfrac>
<mi>p</mi>
<mi>n</mi>
</mfrac>
<mo>[</mo>
<mi>1</mi>
<mo>+</mo>
<mi>2</mi>
<mo>+</mo>
<mi>…</mi>
<mo>+</mo>
<mi>i</mi>
<mo>+</mo>
<mi>…</mi>
<mi>n</mi>
<mo>]</mo>
<mo>+</mo>
<mi>n</mi>
<mo>(</mo>
<mn>1</mn>
<mo>-</mo>
<mi>p</mi>
<mo>)</mo>
</mrow>
</semantics>
</math>
<p>and substituting the series with <math display="inline"><mfrac><mrow><mi>n</mi><mo>(</mo><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo></mrow><mn>2</mn></mfrac></math>, we have:</p>
<math>
<semantics>
<mrow>
<mfrac>
<mi>p</mi>
<mi>n</mi>
</mfrac>
<mo>[</mo>
<mfrac>
<mrow>
<mi>n</mi>
<mo>(</mo>
<mi>n</mi>
<mo>+</mo>
<mn>1</mn>
<mo>)</mo>
</mrow>
<mn>2</mn>
</mfrac>
<mo>]</mo>
<mo>+</mo>
<mi>n</mi>
<mo>(</mo>
<mn>1</mn>
<mo>-</mo>
<mi>p</mi>
<mo>)</mo>
<mspace linebreak="newline"></mspace>
<mfrac>
<mrow>
<mi>p</mi>
<mo>(</mo>
<mi>n</mi>
<mo>+</mo>
<mn>1</mn>
<mo>)</mo>
</mrow>
<mn>2</mn>
</mfrac>
<mo>+</mo>
<mi>n</mi>
<mo>(</mo>
<mn>1</mn>
<mo>-</mo>
<mi>p</mi>
<mo>)</mo>
</mrow>
</semantics>
</math>
<p>we have a simplified addition of successful search and unsuccessful search for an average case. The probability <em>§</em> of a successful search (certainty) is <strong>1</strong> and unsuccessful search (impossibility) is <strong>0</strong>. To start with the successful search we substitute p for 1.</p>
<math>
<semantics>
<mrow>
<mtext>Successful Search</mtext>
<mo>→</mo>
<mfrac>
<mrow>
<mn>1</mn>
<mo>(</mo>
<mi>n</mi>
<mo>+</mo>
<mn>1</mn>
<mo>)</mo>
</mrow>
<mn>2</mn>
</mfrac>
<mo>+</mo>
<mi>n</mi>
<mo>(</mo>
<mn>1</mn>
<mo>-</mo>
<mn>1</mn>
<mo>)</mo>
<mspace linebreak="newline"></mspace>
<msub>
<mi>C</mi>
<mi>average</mi>
</msub>
<mo>(</mo>
<mi>n</mi>
<mo>)</mo>
<mo>=</mo>
<mfrac>
<mrow>
<mo>(</mo>
<mi>n</mi>
<mo>+</mo>
<mn>1</mn>
<mo>)</mo>
</mrow>
<mn>2</mn>
</mfrac>
</mrow>
</semantics>
</math>
<p>For unsuccessful search, p is substituted for 0:</p>
<math>
<semantics>
<mrow>
<mtext>Unsuccessful Search</mtext>
<mo>→</mo>
<mfrac>
<mrow>
<mn>0</mn>
<mo>(</mo>
<mi>n</mi>
<mo>+</mo>
<mn>1</mn>
<mo>)</mo>
</mrow>
<mn>2</mn>
</mfrac>
<mo>+</mo>
<mi>n</mi>
<mo>(</mo>
<mn>1</mn>
<mo>-</mo>
<mn>0</mn>
<mo>)</mo>
<mspace linebreak="newline"></mspace>
<msub>
<mi>C</mi>
<mi>average</mi>
</msub>
<mo>(</mo>
<mi>n</mi>
<mo>)</mo>
<mo>=</mo>
<mi>n</mi>
</mrow>
</semantics>
</math>
<p>and the unsuccessful search of average case has led right back to being the same as worst case.</p>
<math>
<semantics>
<mrow>
<msub>
<mi>C</mi>
<mi>unsuccessful average</mi>
</msub>
<mo>(</mo>
<mi>n</mi>
<mo>)</mo>
<mo>=</mo>
<msub>
<mi>C</mi>
<mi>worst</mi>
</msub>
<mo>(</mo>
<mi>n</mi>
<mo>)</mo>
</mrow>
</semantics>
</math>
<p>The best case from the examples is the optimum solution to the problems while every other solutions are feasible. Feasible solutions are the set of input values that satisfy all the constraints of an algorithm. Hence, going to the first and second gas stations before finding diesel at the third still makes the first and second feasible solutions while the third becomes the optimum solution.</p>
The Big O notation explained2017-02-03T00:00:00Zhttps://www.josephrex.me/big-o-notation-explained/<p>The big O notation (also asymptotic notation) helps determine how a function may decline or scale with a larger set of inputs (n). According to <a href="https://en.wikipedia.org/wiki/Big_O_notation">Wikipedia</a>,</p>
<p>The big O notation (also asymptotic notation) helps determine how a function may decline or scale with a larger set of inputs (n). According to <a href="https://en.wikipedia.org/wiki/Big_O_notation">Wikipedia</a>,</p>
<blockquote>
<p>It is a mathematical notation that describes the limiting behavior of a function when the argument tends towards a particular value or infinity
<cite>Wikipedia</cite></p>
</blockquote>
<p>Its role in helping decide how a program/function can scale is why it’s important for software writers to have a proper understanding of it. Unfortunately, people ignore the basics of computer science as soon as they understand the syntax of a language they program in. Even worse, developers do not think of future failure possibilities of code they’ve written as long as it works in the moment they need it. Most people have abused the term MVP (Minimum Viable Product) to describe the <a href="https://en.wikipedia.org/wiki/Big_ball_of_mud">big ball of mud</a> they write.</p>
<p>The big O is derived from the word “Order” which is the rate of growth of a function in computer science and there’s also a little o (another landau’s symbol) which has its applications in math.</p>
<p>Here’s a list of common function orders starting with slow growing functions:</p>
<table>
<thead>
<tr>
<th>Notation</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>0(1)</td>
<td>Constant</td>
</tr>
<tr>
<td>0(log(n))</td>
<td>Logarithmic</td>
</tr>
<tr>
<td>0((log(n))<sup>c</sup>)</td>
<td>Polylogarithmic</td>
</tr>
<tr>
<td>0(n)</td>
<td>Linear</td>
</tr>
<tr>
<td>0(n<sup>2</sup>)</td>
<td>Quadratic</td>
</tr>
<tr>
<td>0(n<sup>c</sup>)</td>
<td>Polynomial</td>
</tr>
<tr>
<td>0(c<sup>n</sup>)</td>
<td>Exponential</td>
</tr>
<tr>
<td>0(n!)</td>
<td>Factorial</td>
</tr>
</tbody>
</table>
<p>An important part to note here is a O(log(n<sup>c</sup>)) is the same as O(log(n)). The big O will ignore the fact that the value being passed to a logarithmic function is changed. That can be clearly seen from here:</p>
<pre><code>f(x) = log(x^2)
</code></pre>
<p>The input is evaluated at the logartihmic level before being evaluated by the main function order so</p>
<pre><code>f(3) = log(3)
</code></pre>
<p>would have the same functional complexity as</p>
<pre><code>f(3) = log(3^3)
f(3) = log(21)
</code></pre>
<p>Also worth considering is that while O(c<sup>n</sup>) may look a lot like O(n<sup>c</sup>), it grows a lot faster. A function that grows faster than any power of n is called a <em>superpolynomial</em> and one that grows slower than an exponential function (n<sup>c</sup>) is called <em>subexponential</em>.</p>
<p>Consider the JavaScript function here:</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">getCube</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token operator">=></span> n <span class="token operator">**</span> <span class="token number">3</span></code></pre>
<p>No matter what input (n) is passed to the getCube function it performs one simple function which is to find the cube root. However with a function like this:</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">getPowerofThree</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token number">3</span> <span class="token operator">**</span> n</code></pre>
<p>For the first example, we will always have <code>n * n * n</code> but with the second it could be <code>n * n * n * n * n ...... * n(1000th)</code> which would consume more computational time.</p>
<p>Note however that the both functions <code>getCube()</code> and <code>getPowerofThree()</code> are of constant time complexity. They simply describe the operational difference of both orders O(n<sup>c</sup>) and O(c<sup>n</sup>).</p>
<p>We study <a href="https://en.wikipedia.org/wiki/DSPACE">space</a>-<a href="https://en.wikipedia.org/wiki/Time_complexity">time</a> complexity of a function to understand <a href="https://en.wikipedia.org/wiki/Algorithmic_efficiency" title="Algorithm Efficiency">efficiency</a> and scalability of a piece of code. Some important resources that can be influenced by the efficiency of an algorithm are:</p>
<ul>
<li>CPU/Time consumption</li>
<li>Memory consumption</li>
<li>Energy/Power consumption</li>
<li>Disk usage</li>
<li>Network usage</li>
</ul>
<p>With space (Memory consumption) and Time (CPU time to run/execute) being often the most critical. However the best algorithms really depends on what measure of efficiency is really important to the implementation.</p>
<p>If you are on macOS you’d notice that the activity monitor basically watches for these things in programs.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1498818330/activity-monitor-macos_cbgxqk.jpg" alt="activity monitor macOS" class="image image--wide" />
<figcaption>A macOS activity monitor</figcaption>
</figure>
<h2 id="examples-of-the-listed-common-notations" tabindex="-1">Examples of the listed common notations</h2>
<p><strong>O(1)</strong> as the slowest growing function can be found in simple cases like checking conditions.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br /><span class="token keyword">const</span> <span class="token function-variable function">isTrue</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">bool</span><span class="token punctuation">)</span> <span class="token operator">=></span> bool <span class="token operator">===</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br /><span class="token function">bool</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Another example is the use of a dictionary/Hashmap to return a value based on its key as input:</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">getHex</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">color</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> colorDictionary <span class="token operator">=</span> <span class="token punctuation">{</span>blue<span class="token operator">:</span> <span class="token string">'#00f'</span><span class="token punctuation">,</span> red<span class="token operator">:</span> <span class="token string">'#f00'</span><span class="token punctuation">,</span> green<span class="token operator">:</span> <span class="token string">'#0f0'</span><span class="token punctuation">}</span><br /> <span class="token keyword">return</span> colorDictionary<span class="token punctuation">[</span>color<span class="token punctuation">]</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>I could rewrite the getHex() function in an uglier code structure using massive ifs.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">getHex</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">color</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token keyword">let</span> hex<span class="token punctuation">;</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span>color <span class="token operator">==</span> <span class="token string">'blue'</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> hex <span class="token operator">=</span> <span class="token string">'#00f'</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>color <span class="token operator">==</span> <span class="token string">'red'</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> hex <span class="token operator">=</span> <span class="token string">'#f00'</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span><br /> hex <span class="token operator">=</span> <span class="token string">'#0f0'</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>but note here that the operation remains a constant and the only difference is the brevity and neatness that comes with having it written as a Hashmap.</p>
<p><strong>O(n)</strong> Simple loops are good examples of linear complexity. A loop is passed an input (n) to execute n number of times.</p>
<p>Looking at a simple FizzBuzz solution where n = 100:</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">fizzBuzz</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> n<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">let</span> f <span class="token operator">=</span> i <span class="token operator">%</span> <span class="token number">3</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">,</span> b <span class="token operator">=</span> i <span class="token operator">%</span> <span class="token number">5</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">;</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f <span class="token operator">?</span> b <span class="token operator">?</span> <span class="token string">'FizzBuzz'</span> <span class="token operator">:</span> <span class="token string">'Fizz'</span> <span class="token operator">:</span> b <span class="token operator">?</span> <span class="token string">'Buzz'</span> <span class="token operator">:</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>A great way to think about the complexity of function is to consider how the time required to compute a function scales with larger inputs. In a order O(n) for example, the time for computation continually scales based on the input. We had 100 as the input (n) above. To write the same function for a input f(200), the time will increase linearly with the input growth.</p>
<h2 id="sequence-of-statements" tabindex="-1">Sequence of statements</h2>
<p>In a function with condition blocks of different statement complexity, the total time is found by adding the times for all statements.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">getHex</span><span class="token punctuation">(</span><span class="token parameter">color</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token string">'#00f'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token string">'#f00'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'green'</span><span class="token punctuation">,</span> <span class="token string">'#0f0'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br /> <span class="token keyword">let</span> hex<span class="token punctuation">;</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span>color <span class="token operator">==</span> <span class="token string">'turquoise'</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> hex <span class="token operator">=</span> <span class="token string">'#00e5ee'</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span><br /> colors<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token punctuation">{</span><br /> hex <span class="token operator">=</span> val <span class="token operator">==</span> _<span class="token punctuation">.</span><span class="token function">first</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span> <span class="token operator">?</span> _<span class="token punctuation">.</span><span class="token function">last</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token keyword">return</span> hex<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<pre class="language-text"><code class="language-text">Total time = time(first statement) + time(second statement) + .... + time(nth statement)</code></pre>
<p>As the first block is O(1) and the second O(n) we get <strong>O(1) + O(n)</strong> which sums up as <strong>O(n)</strong>. The addition of both possibilities gives the worst-case order.</p>
<p><strong>O(n<sup>2</sup>)</strong> unlike the linear complexity, takes twice the time to compute with a given input (n). We see this in nested loops. For a given O(n):</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">loop</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> n<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>when an inner loop is provided, for every loop of x there’s y number of loops.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">loop</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> x <span class="token operator"><=</span> n<span class="token punctuation">;</span> x<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> y <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> y <span class="token operator"><=</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> y<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>which makes statements in the inner loop execute x * y times. The example nested loop above will execute 3 * 2 = 6 times. Hence a quadratic order O(n<sup>2</sup>).</p>
<p>with a deeper loop inception we get a faster growing polynomial notation O(n<sup>c</sup>).</p>
<p><strong>O(log(n))</strong> logarithmic order is not common in simple programs but an example of it is a binary search. Here’s a simple example in JavaScript</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10000</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br /><br />a<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">return</span> a <span class="token operator">-</span> b<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">const</span> <span class="token function-variable function">binarySearch</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> mid <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span> <span class="token operator">===</span> i<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'match'</span><span class="token punctuation">,</span> arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span> <span class="token operator"><</span> i <span class="token operator">&&</span> arr<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'mid lower'</span><span class="token punctuation">,</span> arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> <span class="token function">binarySearch</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>mid<span class="token punctuation">,</span> Number<span class="token punctuation">.</span><span class="token constant">MAX_VALUE</span><span class="token punctuation">)</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span> <span class="token operator">></span> i <span class="token operator">&&</span> arr<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'mid higher'</span><span class="token punctuation">,</span> arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> <span class="token function">binarySearch</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> mid<span class="token punctuation">)</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'not here'</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /><span class="token punctuation">}</span><br /><span class="token function">binarySearch</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p><a href="http://stackoverflow.com/questions/22697936/binary-search-in-javascript">Binary Search Example Source</a>
<a href="https://illustrated-algorithms-ommzftrylh.now.sh/">Visual binary search operation</a></p>
<hr />
<p>We may begin to write more efficient software with slower growing functions but this wouldn’t always cover every part of performance of a software. For a complete performance check, you also need to consider the hardware resources the program is being run against e.g processing capability, also compiler/interpreter speed. With more performance needs, multithreading becomes significantly needed and that’s where languages with immutable data and static types shine.</p>
<p>Here are some useful resources to learn more on algorithms and complexity theory:</p>
<ul>
<li><a href="http://www.austinmohr.com/Work_files/complexity.pdf">Quantum Computing in Complexity Theory and Theory of Computation</a></li>
<li><a href="http://www.perlmonks.org/?node_id=573138">The Big O - What is it good for?</a></li>
<li><a href="https://www.amazon.com/Introduction-Algorithms-3rd-MIT-Press/dp/0262033844/ref=sr_1_1?ie=UTF8&qid=1486056079&sr=8-1&keywords=introduction+to+algorithms">Introduction to Algorithms</a></li>
<li><a href="http://bigocheatsheet.com/">Big O Cheatsheet</a></li>
</ul>
Setting up uploads with paperclip and fog in rails applications2016-02-04T00:00:00Zhttps://www.josephrex.me/setting-up-uploads-with-paperclip-and-fog-in-rails-applications/<p>Paperclip is a great gem and one of the most used gem for handling file attachment in rails applications. <a href="https://github.com/carrierwaveuploader/carrierwave">Carrierwave</a> is another good choice. This article describes how to use it with the fog gem (a gem that helps you connect with almost any cloud service).
This article will use a Car model to handle scenarios of car image uploads.
Start by adding the necessary gems to your Gemfile</p>
<p>Paperclip is a great gem and one of the most used gem for handling file attachment in rails applications. <a href="https://github.com/carrierwaveuploader/carrierwave">Carrierwave</a> is another good choice. This article describes how to use it with the fog gem (a gem that helps you connect with almost any cloud service).
This article will use a Car model to handle scenarios of car image uploads.
Start by adding the necessary gems to your Gemfile</p>
<pre><code>gem 'fog', '~> 1.37'
gem 'paperclip', '~> 4.3'
</code></pre>
<p>The versions placed with the gems are the current stable versions and may be dated at the time you’re reading this. Be sure to check for the <a href="https://rubygems.org/gems/paperclip">latest</a> <a href="https://rubygems.org/gems/fog">releases</a>. Bundle install and you can set up your model for use with paperclip</p>
<pre><code>rails g model car
</code></pre>
<p>modify the migrations file as needed</p>
<pre class="language-rb"><code class="language-rb"><span class="token keyword">class</span> <span class="token class-name">CreateCars</span> <span class="token operator"><</span> <span class="token constant">ActiveRecord</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Migration</span><br /> <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">change</span></span><br /> create_table <span class="token symbol">:brands</span> <span class="token keyword">do</span> <span class="token operator">|</span>t<span class="token operator">|</span><br /> t<span class="token punctuation">.</span>string <span class="token symbol">:name</span><br /> t<span class="token punctuation">.</span>reference <span class="token symbol">:brand</span><br /> t<span class="token punctuation">.</span>attachment <span class="token symbol">:image</span><br /><br /> t<span class="token punctuation">.</span>timestamps null<span class="token punctuation">:</span> <span class="token boolean">false</span><br /> <span class="token keyword">end</span><br /> <span class="token keyword">end</span><br /><span class="token keyword">end</span></code></pre>
<p>Paperclip allows you store upload images in different dimensions. This is possible with the use of <a href="http://www.imagemagick.org/">imagemagick</a> and it’s essential that you have it installed on your computer. For Mac OS X users it’s as easy as:</p>
<pre><code>brew install imagemagick
</code></pre>
<p>and for debian-based Linux (e.g Ubuntu)</p>
<pre><code>$sudo apt-get install imagemagick -y
</code></pre>
<p>Imagemagick comes with binaries like <code>convert</code>, <code>compare</code>, <code>composite</code> that are handy. Convert calls are made on the image for scaling:</p>
<pre><code>$convert dragon.gif -resize 64x64\> shrink_dragon.gif
</code></pre>
<p>but this doesn’t have to be done by you. You only need to set the dimensions you want from your model</p>
<pre class="language-rb"><code class="language-rb"><span class="token keyword">class</span> <span class="token class-name">Upload</span> <span class="token operator"><</span> <span class="token constant">ActiveRecord</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Base</span><br /> <span class="token comment"># Associations</span><br /> has_many <span class="token symbol">:brands</span><br /><br /> <span class="token comment"># Paperclip</span><br /> has_attached_file <span class="token symbol">:image</span><span class="token punctuation">,</span> <span class="token symbol">:styles</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token symbol">:medium</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"300x300>"</span><span class="token punctuation">,</span> <span class="token symbol">:thumb</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"100x100>"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token symbol">:default_url</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"/images/:style/missing.png"</span><br /> validates_attachment_content_type <span class="token symbol">:image</span><span class="token punctuation">,</span> <span class="token symbol">:content_type</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token regex">/\Aimage\/.*\Z/</span><br /><span class="token keyword">end</span></code></pre>
<p>Notice the line with <code>has_attached_file</code>? That’s where the action is initiated. You can create more dimensions (:style) depending on your custom need. This simple set up makes your application ready to receive files and store them in the file system but we need to set up a form interface for users. In your view file you should have your form written as below:</p>
<pre class="language-php"><code class="language-php"><span class="token operator"><</span><span class="token operator">%=</span> form_for @car<span class="token punctuation">,</span> <span class="token argument-name">url</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>action<span class="token punctuation">:</span> create<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token argument-name">html</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>multipart<span class="token punctuation">:</span> <span class="token constant boolean">true</span><span class="token punctuation">}</span> <span class="token keyword">do</span> <span class="token operator">|</span><span class="token class-name">f</span><span class="token operator">|</span> <span class="token operator">%</span><span class="token operator">></span><br /><span class="token operator"><</span><span class="token operator">%=</span> f<span class="token operator">.</span>file_field <span class="token punctuation">:</span>image <span class="token operator">%</span><span class="token operator">></span><br /><span class="token operator"><</span><span class="token operator">%</span> end <span class="token operator">%</span><span class="token operator">></span></code></pre>
<p>With the set up so far paperclip will default to saving uploaded files to your files system. For production you wouldn’t want this and that’s why you’ve installed fog to act as an interface to any cloud service we may be using. Fog has a very easy setup. All that’s required is to set paperclip defaults with fog and the gem will handle the rest:</p>
<pre class="language-rb"><code class="language-rb">config<span class="token punctuation">.</span>paperclip_defaults <span class="token operator">=</span> <span class="token punctuation">{</span><br /> storage<span class="token punctuation">:</span> <span class="token symbol">:fog</span><span class="token punctuation">,</span><br /> fog_credentials<span class="token punctuation">:</span> <span class="token punctuation">{</span><br /> provider<span class="token punctuation">:</span> <span class="token string">"Rackspace"</span><span class="token punctuation">,</span><br /> rackspace_username<span class="token punctuation">:</span> <span class="token constant">ENV</span><span class="token punctuation">[</span><span class="token string">'FOG_USERNAME'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> rackspace_api_key<span class="token punctuation">:</span> <span class="token constant">ENV</span><span class="token punctuation">[</span><span class="token string">'FOG_API_KEY'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> rackspace_region<span class="token punctuation">:</span> <span class="token constant">ENV</span><span class="token punctuation">[</span><span class="token string">'FOG_REGION'</span><span class="token punctuation">]</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> fog_directory<span class="token punctuation">:</span> <span class="token constant">ENV</span><span class="token punctuation">[</span><span class="token string">'FOG_CONTAINER'</span><span class="token punctuation">]</span><br /><span class="token punctuation">}</span></code></pre>
<p>you should have your environment variables defined somewhere. <a href="https://github.com/laserlemon/figaro">Figaro</a> is a good option to manage env vars on development and heroku production server.</p>
<p>In my config I’m using a Rackspace server to handle file uploads and CDN delivery. You can do the same with Amazon S3 and Cloudfront CDN.</p>
<p>If you’re uploading files within the same table of your form object then that’s all it takes but I’ll go further by explaining how to handle this for using a separate database to handle uploads.</p>
<h2 id="using-a-separate-model-for-uploads" tabindex="-1">Using a separate model for uploads</h2>
<p>This becomes useful when you have multiple models making the same kind of uploads. To keep a DRY code you’d only want to do this once. For my example I’d use a uploads model to handle uploads for cars. Since we aren’t uploading to our cars table the migration would be somewhat like this (without the attachment type):</p>
<pre class="language-rb"><code class="language-rb"><span class="token keyword">class</span> <span class="token class-name">CreateCars</span> <span class="token operator"><</span> <span class="token constant">ActiveRecord</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Migration</span><br /> <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">change</span></span><br /> create_table <span class="token symbol">:brands</span> <span class="token keyword">do</span> <span class="token operator">|</span>t<span class="token operator">|</span><br /> t<span class="token punctuation">.</span>string <span class="token symbol">:name</span><br /> t<span class="token punctuation">.</span>reference <span class="token symbol">:brand</span><br /><br /> t<span class="token punctuation">.</span>timestamps null<span class="token punctuation">:</span> <span class="token boolean">false</span><br /> <span class="token keyword">end</span><br /> <span class="token keyword">end</span><br /><span class="token keyword">end</span></code></pre>
<p>and we can create a uploads migration with the image attachment</p>
<pre class="language-rb"><code class="language-rb"><span class="token keyword">class</span> <span class="token class-name">CreateUploads</span> <span class="token operator"><</span> <span class="token constant">ActiveRecord</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Migration</span><br /> <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">change</span></span><br /> create_table <span class="token symbol">:uploads</span> <span class="token keyword">do</span> <span class="token operator">|</span>t<span class="token operator">|</span><br /> t<span class="token punctuation">.</span>string <span class="token symbol">:role</span><br /> t<span class="token punctuation">.</span>integer <span class="token symbol">:parent_id</span><br /> t<span class="token punctuation">.</span>attachment <span class="token symbol">:image</span><br /> t<span class="token punctuation">.</span>timestamps null<span class="token punctuation">:</span> <span class="token boolean">false</span><br /> <span class="token keyword">end</span><br /> <span class="token keyword">end</span><br /><span class="token keyword">end</span></code></pre>
<p>The two migrations we’ve created requires a one-to-many (1:N) relationship between the cars and uploads models where car <code>has_many uploads</code> and uploads <code>bleong_to car</code>. We have to state the associations in the models</p>
<pre class="language-rb"><code class="language-rb"><span class="token keyword">class</span> <span class="token class-name">Upload</span> <span class="token operator"><</span> <span class="token constant">ActiveRecord</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Base</span><br /> <span class="token comment"># Associations</span><br /> belongs_to <span class="token symbol">:car</span><br /><br /> <span class="token comment"># Paperclip</span><br /> has_attached_file <span class="token symbol">:image</span><span class="token punctuation">,</span> <span class="token symbol">:styles</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token symbol">:medium</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"300x300>"</span><span class="token punctuation">,</span> <span class="token symbol">:thumb</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"100x100>"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token symbol">:default_url</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"/images/:style/missing.png"</span><br /> validates_attachment_content_type <span class="token symbol">:image</span><span class="token punctuation">,</span> <span class="token symbol">:content_type</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token regex">/\Aimage\/.*\Z/</span><br /> <span class="token keyword">end</span></code></pre>
<pre class="language-rb"><code class="language-rb"><span class="token keyword">class</span> <span class="token class-name">Car</span> <span class="token operator"><</span> <span class="token constant">ActiveRecord</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Base</span><br /> has_many <span class="token symbol">:brands</span><br /> has_many <span class="token symbol">:uploads</span><span class="token punctuation">,</span> foreign_key<span class="token punctuation">:</span> <span class="token symbol">:parent_id</span><span class="token punctuation">,</span> dependent<span class="token punctuation">:</span> <span class="token symbol">:destroy</span><br /><br /> accepts_nested_attributes_for <span class="token symbol">:uploads</span><br /><span class="token keyword">end</span></code></pre>
<p>The <code>accepts_nested_attributes_for</code> allows you to include a field for uploads in your car form object within the view. Rails automagically knows that the upload associated with car should go to the uploads table and be referenced by the car with a foreign key I’ve specified in the association <code>parent_id</code>. You could use <code>car_id</code> but that’ll defeat the ambiguity we are trying to achieve with the uploads model.
To make the uploads file field available for use in the view you have to build it from the <code>new</code> controller method or whichever method you are creating your form from.</p>
<pre class="language-rb"><code class="language-rb"><span class="token keyword">def</span> <span class="token method-definition"><span class="token function">new</span></span><br /> <span class="token variable">@car</span> <span class="token operator">=</span> <span class="token constant">Car</span><span class="token punctuation">.</span><span class="token keyword">new</span><br /> <span class="token variable">@car</span><span class="token punctuation">.</span>uploads<span class="token punctuation">.</span>build<br /><span class="token keyword">end</span></code></pre>
<p>and you can create a file upload field in the view with this:</p>
<pre class="language-php"><code class="language-php"><span class="token operator"><</span><span class="token operator">%=</span> <span class="token function">form_for</span><span class="token punctuation">(</span>@car<span class="token punctuation">,</span> <span class="token argument-name">url</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>action<span class="token punctuation">:</span> <span class="token string single-quoted-string">'create'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token argument-name">html</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> multipart<span class="token punctuation">:</span> <span class="token constant boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">do</span> <span class="token operator">|</span><span class="token class-name">f</span><span class="token operator">|</span> <span class="token operator">%</span><span class="token operator">></span><br /> <span class="token operator"><</span><span class="token operator">%</span> f<span class="token operator">.</span>text_field <span class="token punctuation">:</span>name <span class="token operator">%</span><span class="token operator">></span><br /> <span class="token operator"><</span><span class="token operator">%=</span> f<span class="token operator">.</span>fields_for <span class="token punctuation">:</span>uploads <span class="token keyword">do</span> <span class="token operator">|</span><span class="token class-name">upload_field</span><span class="token operator">|</span> <span class="token operator">%</span><span class="token operator">></span><br /> <span class="token operator"><</span><span class="token operator">%=</span> upload_field<span class="token operator">.</span>hidden_field <span class="token punctuation">:</span>role<span class="token punctuation">,</span> <span class="token argument-name">value</span><span class="token punctuation">:</span> <span class="token string single-quoted-string">'car'</span> <span class="token operator">%</span><span class="token operator">></span><br /> <span class="token operator"><</span><span class="token operator">%=</span> upload_field<span class="token operator">.</span>file_field <span class="token punctuation">:</span>image <span class="token operator">%</span><span class="token operator">></span><br /> <span class="token operator"><</span><span class="token operator">%</span> end <span class="token operator">%</span><span class="token operator">></span><br /><span class="token operator"><</span><span class="token operator">%</span> end <span class="token operator">%</span><span class="token operator">></span></code></pre>
<p>The role field for the uploads records takes <code>car</code> as a value as specified in the hidden field of the form. This is optional but I like to know what each upload is meant for when using a single model for various kind of uploads.
You may also consider <a href="http://fineuploader.com/">fineuploader</a> for advanced and better uploads.</p>
Using version managers and virtual environments2016-01-06T00:00:00Zhttps://www.josephrex.me/using-version-managers-and-virtual-environments/<p>It’s a new year and 2015 was a blast for me. I successfully ticked every item on my list for 2015 and I had even more that I hadn’t expected from the start of the year.
In July, I got an email from <a href="http://packtpub.com">PacktPub</a> about reviewing a book on building GUIs with Python. The opportunity was influenced by <a href="/getting-started-with-gui-development-in-python/">the article I’d written</a> on the subject and I’m glad I did. The book was completed and published in December and I got really excited to see that I’m a part of something that’ll impact the lives of people around the world. It is available on <a href="http://www.amazon.com/gp/product/1785283758?keywords=python%20gui%20programming%20cookbook&qid=1451209838&ref_=sr_1_1&s=books&sr=1-1">Amazon</a> and <a href="https://www.packtpub.com/application-development/python-gui-programming-cookbook">PacktPub</a> and I urge you to grab a copy as there’s so much to learn from it.</p>
<p>It’s a new year and 2015 was a blast for me. I successfully ticked every item on my list for 2015 and I had even more that I hadn’t expected from the start of the year.
In July, I got an email from <a href="http://packtpub.com/">PacktPub</a> about reviewing a book on building GUIs with Python. The opportunity was influenced by <a href="https://www.josephrex.me/getting-started-with-gui-development-in-python/">the article I’d written</a> on the subject and I’m glad I did. The book was completed and published in December and I got really excited to see that I’m a part of something that’ll impact the lives of people around the world. It is available on <a href="http://www.amazon.com/gp/product/1785283758?keywords=python%20gui%20programming%20cookbook&qid=1451209838&ref_=sr_1_1&s=books&sr=1-1">Amazon</a> and <a href="https://www.packtpub.com/application-development/python-gui-programming-cookbook">PacktPub</a> and I urge you to grab a copy as there’s so much to learn from it.</p>
<p>I had to let that out to share my excitement, and happy new years by the way. One of the things that impacted my productivity last year was using version managers which made working with various tools a lot easier.</p>
<p>I mostly work with JavaScript, Ruby, and Python and each of these languages have different versions that can be used on different projects I work on. For Python the version difference isn’t so big and doesn’t change so often. There is python2 and python3 and in various projects I’m either having to use 2.7 or 3.5 each of which have their own packages and modules. Both versions of Python can be installed with 2.7 being run with the <code>python</code> binary and 3.5 with <code>python3</code>. This seemed fine to me for so long till I started installing wrong packages with pip. I’d use pip for python2 when I really need python3. Remembering to type pip3 all the time was so not fun. I don’t use python on the web and I think it would have been a bigger nightmare for me if I kept on using it that way with the web.</p>
<p>The solution for the python2, python3 issue as well as package management in python was to use virtualenv which simply just needs to be activated for each version we want. Having it this way there’s no limit to the python versions that we can have including 2.5, 2.6, 2.7, 3.3, 3.5.</p>
<p>Ruby has more minor releases and when building rails applications or other ruby applications, we rely on the version for the operations and gems that we use. Usually gems are stored in <code>~/.gem</code> directory but we could manage them easily per version with rvm, rbenv, or chruby. I use and prefer rbenv.</p>
<p>With the popularity of node on the web today, almost every JavaScript framework relies on it. I was working on an ember project where version 0.12 was used and I had version 5.1 installed. At first I thought I’d just update all it’s npm modules to work with 5.1. It was a hectic task but I went on with it anyway. At first it seemed like success but I hit a block not too long within the project and I learned about nvm. Nvm has since made it easy for me to manage packages for 0.12, 5.1, and 5.3. I also have a io.js 3.3 among my nvm versions making it easy to just juggle on my desired environment per project.</p>
<h2 id="why-you-should-use-them" tabindex="-1">Why you should use them</h2>
<p>In a <a href="https://www.josephrex.me/quality-against-speed-in-development/">recent post</a> I discussed the 5s on productive maintenance and while explaining <strong>seiton</strong> which means tidiness I quoted</p>
<blockquote>
<p>A place for everything and everything in its place <br /></p>
</blockquote>
<ul>
<li>Benjamin Franklin</li>
</ul>
<p>The primary goal of virtual environments are to be able to create any environment for different projects with ease and the ultimate goal is tidiness. This is the same with version managers</p>
<h2 id="setting-up-nvm-rbenv-and-virtualenv" tabindex="-1">Setting up NVM, Rbenv, and VirtualEnv</h2>
<p>To set up nvm you need to have a version of node and npm running on the system to install it globally after which all npm packages will be installed on nvm versions. For a global install of nvm</p>
<pre><code>npm install -g npm
</code></pre>
<p>To view versions of node or iojs available for install:</p>
<pre><code>nvm ls-remote
</code></pre>
<p>versions you have installed</p>
<pre><code>nvm ls
</code></pre>
<p>and more info can be found with <code>nvm help</code>. For each version activated, the $PATH is updated to use binaries from within that version. I’ve heard nvm isn’t available for Windows users but I don’t know how true that is.</p>
<p>To install Rbenv in OS X 10.11 you should follow <a href="https://gorails.com/setup/osx/10.11-el-capitan">this guide</a> and <a href="https://gorails.com/setup/ubuntu">this for Ubuntu</a>. Gorails have some of the best and most updated guides on how to do this so make sure to check there.</p>
<p>For Virtualenv with python you can follow <a href="https://hackercodex.com/guide/python-development-environment-on-mac-osx/">this guide</a> to install, enter your virtual environment folder and use:</p>
<pre><code>source bin/activate
</code></pre>
<p>and to deactivate when you are in the environment the <code>deactivate</code> command is always available.</p>
<p>If you aren’t already using them then you should give them a try to improve your productivity in 2016.</p>
What happens when using CSS frameworks2015-12-27T00:00:00Zhttps://www.josephrex.me/what-happens-when-using-css-frameworks/<p>I’ve always been an anti-css-frameworks person for no reason till I finally got a good reason recently. I just knew I preferred writing my own CSS even though I’m seen as a back-end developer and a lot of people think <a href="http://uxdiogenes.com/blog/on-being-a-designer-and-a-developer-not-quite-unicorn-rare">design and development should be mutually exclusive</a>. I love design and development and I wouldn’t allow <a href="https://en.wikipedia.org/wiki/Learned_helplessness">learned helplessness</a> or people’s opinions to keep me from exploring either of them to my satisfaction.</p>
<p>I’ve always been an anti-css-frameworks person for no reason till I finally got a good reason recently. I just knew I preferred writing my own CSS even though I’m seen as a back-end developer and a lot of people think <a href="http://uxdiogenes.com/blog/on-being-a-designer-and-a-developer-not-quite-unicorn-rare">design and development should be mutually exclusive</a>. I love design and development and I wouldn’t allow <a href="https://en.wikipedia.org/wiki/Learned_helplessness">learned helplessness</a> or people’s opinions to keep me from exploring either of them to my satisfaction.</p>
<p>There are developers that just choose to spend more time at what they’re good at which is server-side languages but that’s not the case with me and it also doesn’t mean I think less of such developers as I’ve found many of such developers to be really good at the aspects they focus on. Being so interested in everything on the clientside as much I am with server-side, I’ve once believed I had to understand every CSS framework that is released and they were majorly Bootstrap and Foundation. I’ve worked with bootstrap2 and 3, foundation3, and 4 and I never enjoyed writing code with either. It got me wondering why people speak so much of them like they should be indispensable. At a point when I told someone I prefer to write my own CSS he told me that’s because I feel like showing off my CSS skill and don’t understand the essence of time management. What followed that was an abused use of <a href="https://en.wikipedia.org/wiki/Reinventing_the_wheel">DO NOT RE-INVENT THE WHEEL</a> which you should have learned <a href="https://blog.codinghorror.com/dont-reinvent-the-wheel-unless-you-plan-on-learning-more-about-wheels/">can be dangerous when taken too literally</a> as a learning software developer or a software developer who knows better than the existing wheel and prefers to build solid wheels.</p>
<p>CSS Frameworks are great! I’d use them when prototyping, I’d advise anyone that’s just after demonstrating an implementation to use them as it gives you more time to focus on the purpose of what you’re making while ignoring a satisfying user interface. When building larger applications with frameworks however, you’d find yourself wanting to change the look of components already provided by the framework, you’d have to keep overriding things to suit your own visual desires or goals. If you consider your process carefully you’d realise that the framework that should make your work faster is slowing you down.</p>
<p>Let’s build an imaginary computer in two scenarios. In the first scenario we are given a built computer with motherboards we do not want, PCI slots that are rusty or not good enough, redundant disk. In the second scenario we are given the chasis with a new motherboard and brand new components to assemble. Speed may depend on the person on the experiment but the second case will definitely win on efficiency.</p>
<p>I have a Framework-gone-weird detector with the way I style my applications. I have an <code>_overrides.scss</code> partial where I place… well you guessed it right overrides. For static sites, overrides only occur when I use a CSS Framework and I have to change the way certain things look from how the framework makes them look. In Rails applications where I use bower for asset management, some file dependencies from the CSS of used libraries can’t be accessed by my <a href="http://guides.rubyonrails.org/asset_pipeline.html">rails assets pipeline</a> so I create specificity overrides pointing at files in a directory assets pipeline can reach. If <code>_overrides.scss</code> gets too long then there’s something wrong. I’ve been spending too much time undoing things I could have just done newly.</p>
<p>If you need a backbone for your design and want to save time, <a href="http://www.thegridsystem.org/">grid systems</a> are a good call, if you’ve been doing this long enough some of your old styles should be reusable. Frameworks also bloat your CSS files and make you bend to the will of someone else on naming your HTML classes. If you’d argue on my point that they bloat CSS by bringing up <a href="http://bit.ly/uncss">uncss</a> or any similar tool that takes off irrelevant CSS rules then your argument is invalid because that’s not even the main point from the whole of this article. Also, I’ve had cases where uncss removed styles for elements added with JavaScript. It scans through your HTML and takes out every rule that is presently in use. For me, I sometimes have cases where uncss is rather a pain and I’d stay off it by writing efficient code.</p>
<p>Server-side frameworks make the work easier with little or no reasons to tweak them, JavaScript frameworks may include the needed number of assets resulting in more HTTP requests or will result in a bloated JS file when compressing all JavaScript files but they serve a good purpose in the end and are always worth the performance loss but CSS Frameworks are never worth it on production apps. <a href="https://psdtowp.net/best-responsive-css-frameworks.html#jeremy-keith">Industry experts think so too</a></p>
<blockquote>
<p><strong>Update:</strong> Selectors for elements added at runtime can be ignored in uncss as mentioned <a href="https://github.com/giakki/uncss#within-nodejs">in the docs</a></p>
</blockquote>
Quality against speed in development2015-12-21T00:00:00Zhttps://www.josephrex.me/quality-against-speed-in-development/<p>It is common for humans to expect things to arrive almost as soon as they find the need for them. It starts from kids wanting their parents to get them their favorite toy from a toy store. A parent that tells the child we’ll have to come back next year for this toy will make the child unhappy at that moment.</p>
<p>It is common for humans to expect things to arrive almost as soon as they find the need for them. It starts from kids wanting their parents to get them their favorite toy from a toy store. A parent that tells the child we’ll have to come back next year for this toy will make the child unhappy at that moment.</p>
<p>This follows through to adulthood and to professionalism and management. What makes grown-ups different is their ability to understand how to prioritize things and respect the flow of things in order to get an expected outcome.</p>
<p>In my last post I briefly spoke on the topic of taking your time to get good work done and not yielding to the clients demand for a rushed up work. No one in their right senses want to be anyone’s puppet and in a way even if we haven’t lived up to our talents, there’s something unique about us. It’s essential for your clients to know that there’s a reason why they’ve hired you to get a job done for them. It’s not because you have a label like <em>“I am a plumber”</em>, <em>“I make websites”</em> on your nerd shirt. They probably hired you because you’re a professional at what you do and except you really aren’t, you should be open to ideas and suggestions from them but you should make the rules about how the job gets done not them. If you leave them with critical decisions on project delivery and project flow then you may drive off a cliff with them.</p>
<p><a href="https://en.wikipedia.org/Agile_methodology">The Agile manifesto</a> includes that we may have frequent meetings with clients and take actions based on their suggestions but very often we are often made to set timelines. These timelines are good because they guide around how hard we work to achieve a certain set of tasks at an expected time. However, some say it’s hard to put dates to projects in software development which is true. If you don’t think deeply enough you’d feel it shouldn’t be so hard to put a date to building this feature or that project. The case sometimes is more about how long the client think it should take against how long a good developer think it would take. There are different kind of clients that have existed in my world and they are:</p>
<ul>
<li>
<p>Clients that know nothing about how the technology works but want a product</p>
</li>
<li>
<p>Clients that know about someone else who has achieved building a similar product</p>
</li>
<li>
<p>Clients with a little technical background. They probably wrote code poorly at some point in their lives and feel they know every steps software development involves.</p>
</li>
</ul>
<p>There may be different people within one client organization that fit each of those descriptions. A common thing to encounter from any of them especially the last two described will be that they expect the product at a particular time based on the fact that someone they know got a product in that exact timeline or because they think when they used to write noob code that’s how long it took to get the job done. We may want to succumb to their timeline desire but if we think about the process in building great software. We think about <a href="https://en.wikipedia.org/wiki/Test-driven_development">TDD</a>, <a href="https://en.wikipedia.org/wiki/Behavior-driven_development">BDD</a>, <a href="https://en.wikipedia.org/wiki/Extreme_programming">XP</a>, we will definitely want to reconsider that.</p>
<p>It’s a tough decision to make but we have to decide if we want a quality product or a rushed up product. If we choose the latter. The client will still get back to us to fix the problem.</p>
<p>Good software developers understand that most of the work we do lies in maintenance and not in manufacturing. And by developers in this context it covers but is not limited to building developers, automobile developers, content developers, and definitely software developers. It can also be said that it lies in the avoidance of maintenance.</p>
<p>About avoidance of maintenance, this is about building a product where the client does not have to call you to fix a bug every once in 2 weeks. On building good products by focusing on maintenance, the <a href="https://en.wikipedia.org/wiki/Total_productive_maintenance">TPM (Total Productive Maintenance) approach</a> which emerged in Japan from 1951 with a 5s philosophy comes handy. It comprises</p>
<ul>
<li><em>Seiri - Organization:</em> Properly organizing your build steps</li>
<li><em>Seiton - Tidiness:</em> A place for everything and everything in its place</li>
<li><em>Seiso - Cleaning:</em> Avoid code litters and mess</li>
<li><em>Seiketsu - Standardization:</em> Following agreed-upon patterns and standards</li>
<li><em>Shatsuke - Self Discipline:</em> Willingly following all the above and having a constant desire to get better.</li>
</ul>
<p>I wouldn’t have to break this down further if the Wikipedia page covered all of this but I’ll bring this more into the context of software development.</p>
<p><strong>Organization:</strong> Organizing code we write is very important for us as the code authors and the unknown future contributors. Understanding the fact that the variable names must be well thought of to match their uses. This is the part where separation of concerns is also considered.</p>
<p><strong>Tidiness:</strong> All these points are very similar but when closely looked at we can observe their differences and try to follow each of them by respecting them individually. Benjamin Franklin once quoted <em>“A place for everything and everything in its place”</em>. If you keep a cup in the closet the next you need it you may not think about looking into the closet but the kitchen which is its actual place and when it’s not there it can’t serve its purpose at the time.</p>
<p><strong>Cleaning:</strong> As I often get to work with code written by others I have seen code comments I appreciate and code comments that irk me. Developers who randomly spray comments around their code to temporarily disable or undo a function, feature, or part of the design make the code look really messy. If you’ve been doing this then a better option is to have a detailed commit message in your version control and if it’s something you think you want to remember for application somewhere else then take it out of the code and put it somewhere like a storage of snippets.</p>
<p><strong>Standardization:</strong> The one major thing I love about the PHP community is the fact that they have <a href="http://www.php-fig.org/">a set of standards</a> which every major framework and library developers follow. It’s even gone beyond just that and a lot of developers follow these practices to make code readable and understandable. The design and front-end community have <a href="http://alistapart.com/article/creating-style-guides">styleguides and pattern libraries</a> which they follow to promote agreement in patterns.</p>
<p><strong>Self-Discipline:</strong> Most importantly knowing all these and taking a stand to keep up with them is what defines a good coder.</p>
<hr />
<p>What happens when you just have to deliver something to the client and there isn’t enough time for quality code? Usually clients can be fine with prototypes when they just need to see an implementation of the product. In this cases it’s preferred to write a mock-up code that is entirely different from the main application code that will be used in production because it will save you from making hasty conclusions that may end up being at the cost of the end product.</p>
What "It's not about the money" really means2015-12-12T00:00:00Zhttps://www.josephrex.me/what-its-not-about-the-money-really-means/<p>Have you found yourself telling someone it’s not about the money? I guess that’s something common with anyone passionate about what they do. Some years back I’d do anything I could do to get my hands on code even if all I’d get for it is a <a href="http://www.totally-funky.co.uk/gift-guide/silly-gifts">cheap gift</a>.</p>
<p>Have you found yourself telling someone it’s not about the money? I guess that’s something common with anyone passionate about what they do. Some years back I’d do anything I could do to get my hands on code even if all I’d get for it is a <a href="http://www.totally-funky.co.uk/gift-guide/silly-gifts">cheap gift</a>.</p>
<p>Like so many people I was just interested in ways I could get better at what I do. But soon I realized I was making a big mistake. Why? you may ask. There’s bills, rents, and food that needs to be taken care of and all of these have to be considered in the decisions we make. Sometimes our need for money/rewards may be beyond the mentioned.</p>
<p>What was my big mistake? It’s not what you assumed. My mistake wasn’t in believing <em>it’s not about the money</em> but it was that I wasn’t doing anything towards fixing the money issues. Some people that are so-called <em>business-minded</em> will make you believe it is dumb to say it’s not about the money. They’d give suggestions like you should start a company so you can buy yourself a Ferrari in 6 months and all sorts of similar things.</p>
<p>These aren’t bad ideas at all but we need to understand the real context of <strong>It’s not about the money</strong>. Everyone needs to pay bills or put money into certain things and all we have to do about this is to do something about it (pun intended). But we shouldn’t let our work be driven by the money. Money should be the reward of our work done in the sense that we get good work done and put ourselves in a position to be rewarded by what has been done.</p>
<p>My point may still be vague but I’ll try to nail it even further at this point. My example is <em>An entry level Software Developer that starts at a company with a limited skillset is set to do a job and get paid. At this point this person is being human in that they are satisfying their need and creating a solution to their money problems. However this developer remains complacent about improving their skills and think as long as they get paid and can implement basic programming operations good enough to keep them at the job, then they’re in the game.</em></p>
<p>Why is there free software? where is there open source? If every developer only cared about feeding their pockets and bank accounts only then the large number of libraries, frameworks, operating system, and other kind of software that make your workflow easier wouldn’t exist.</p>
<p>What the developer in my example could have done differently would be to look for industry standards, check flaws that old developers have made outside of primary company work and make sure to not repeat them in the company work you are being paid for and whatever it is you get to do or contribute to. This sounds like a very easy thing to do but yet you’d hear developers get all narcissistic about their crappy way of writing code believing they’ve written perfect programs simply because the debuggers have found no errors. Well, debugging goes beyond debugging with debuggers. It’s a thing that happens from the unit tests written to fail the features you haven’t even built yet.</p>
<p>Contributing to open source and building open source projects is another great way to build up skills and distinguish yourself from a money-driven developer. At this point when you’re asked <em>Why are you spending time building this plugin? I know one that works similarly besides you are not even getting paid for this. Are you?</em> Your response would be that <em>It’s not about the money</em> and further it could be a <a href="https://en.wikipedia.org/wiki/Not_invented_here">NIH syndrome</a> which in some cases is very good and helps you to have a better solution than the already existing one.</p>
<p><a href="https://codility.com/programmers/">Training</a> and <a href="https://sites.google.com/site/steveyegge2/practicing-programming">practice</a> is important in everything we do. Why should you think athletes of your favorite teams need a lot of practice to win games like <a href="http://www.nfl.com/gamecenter/2015120300/2015/REG13/packers@lions#menu=gameinfo%7CcontentId%3A0ap3000000598071&tab=recap">Packers won Lions</a>. Okay now I’m just showing off with my favorite team and it doesn’t mean the Lions don’t go through training too. I used to be in a basketball team and it took extra hours of training to always be in the coach’s top 5 picks. Pardon me for drifting but if we think training is needed in sport then why should we ignore it in what we call our own game.</p>
<p>Many will complain about time availability but no matter what happens and the hours we have to work there’s always a time for improvements if we create the time for ourselves. An understandable boss can respect that you need some time for self development. You can tell them <strong>This is the only way I can make better software for you</strong>.</p>
<p>If you work for yourself or do freelance then your case may not be that with a boss but always about client deadlines. It was once mentioned in <a href="https://devchat.tv/freelancers">the freelancers show</a> that for every short deadlines clients give there’s always an extra time and personally I’ve watched history repeat itself as I’ve finished projects before deadlines and right on the deadlines to find out the clients aren’t ready for the product that has already been built for them.</p>
<p>Now do you want to be that coder that hastily writes code to impress your client in a short time or the one that writes code that lasts with little or no tendency to break and yet reusable and readable for future developers to work with.</p>
<p>If you are the former then I’d advise you based on what a friend recommended that you should keep your name out of the docs of that code because you’re tagging yourself a bad programmer to the programmers that will lay their hands on the code after you. If you are the latter then there are steps you need to take. You can do <a href="http://codekata.com/">code</a> <a href="http://exorcism.io/">katas</a> and engage in all sort of activities to build up your skill.</p>
<p>You can voluntarily accept projects (mostly open-source) that wouldn’t come in the way of your work and get shit done.</p>
<p>Are we abandoning the philosophy aspect of computer science and only chasing the money? From a distant perspective of the industry yes is the answer but there are the exceptions of those struggling to keep the philosophy and you should strive to be on that path and build software that doesn’t suck and you’d get a reward for it. It may come in anyway but trust me, hardwork always pay.</p>
<p>Now why the heck are you doing all these if you aren’t getting paid for it?</p>
<p><strong>IT’s NOT ABOUT THE MONEY</strong></p>
Migrating database password algorithm gracefully2015-10-25T00:00:00Zhttps://www.josephrex.me/migrating-database-password-algorithm-gracefully/<p>If you are a developer that keeps up with the community and best practices you will often find bits of your code and process that needs improvement for security, scalibility, performance or whatsoever. Sometimes it’s not code you wrote but code that had been used in a company you find yourself. The situation here is to change the application’s users database encyption from that salted MD5 or SHA1 hash or even a non-salted integrity based hash to a hash that uses multiple rounds like bcrypt.</p>
<p>If you are a developer that keeps up with the community and best practices you will often find bits of your code and process that needs improvement for security, scalibility, performance or whatsoever. Sometimes it’s not code you wrote but code that had been used in a company you find yourself. The situation here is to change the application’s users database encyption from that salted MD5 or SHA1 hash or even a non-salted integrity based hash to a hash that uses multiple rounds like bcrypt.</p>
<p>You may be complacent that your salted hash can escape dictionary attacks but what if your code leaks? or the intruder discovers how your salts are generated with their access to the database? Bcrypt to the rescue. For the rails community, since version 3 when <a href="http://api.rubyonrails.org/classes/ActiveModel/SecurePassword/ClassMethods.html">has_secure_password</a> was introduced, passwords storage have been handled in bcrypt. If however you are writing something custom in ruby then this is how it works:</p>
<pre class="language-rb"><code class="language-rb"><span class="token keyword">require</span> <span class="token string">'bcrypt'</span><br /><span class="token constant">BCrypt</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Password</span><span class="token punctuation">.</span>create<span class="token punctuation">(</span><span class="token string">"secret"</span><span class="token punctuation">)</span></code></pre>
<p>A really good part to it is that it already handles salting for you and wouldn’t require you to go through that extra process. PHP also does this nicely from version 5.5 with the <em>password_hash</em> function.</p>
<pre class="language-php"><code class="language-php"><span class="token function">password_hash</span><span class="token punctuation">(</span><span class="token variable">$clearText</span><span class="token punctuation">,</span> <span class="token constant">PASSWORD_DEFAULT</span><span class="token punctuation">,</span> <span class="token keyword">array</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'cost'</span><span class="token operator">=></span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>This requires that you also check if the password needs a hash upgrade on every login</p>
<pre class="language-php"><code class="language-php"><span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">password_verify</span><span class="token punctuation">(</span><span class="token variable">$clearText</span><span class="token punctuation">,</span> <span class="token variable">$hash</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">password_needs_rehash</span><span class="token punctuation">(</span><span class="token variable">$hash</span><span class="token punctuation">,</span> <span class="token variable">$algo</span><span class="token punctuation">,</span> <span class="token variable">$options</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token variable">$hash</span> <span class="token operator">=</span> <span class="token function">password_hash</span><span class="token punctuation">(</span><span class="token variable">$clearText</span><span class="token punctuation">,</span> <span class="token variable">$algo</span><span class="token punctuation">,</span> <span class="token variable">$options</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>On lesser PHP versions it’s best you just upgrade but if you are constrained by server restrictions then you can use Anthony Ferrara’s (ircmaxell) <a href="https://github.com/ircmaxell/password_compat">password compat library</a> with php >= 5.3.7</p>
<h2 id="the-problem" tabindex="-1">The problem</h2>
<p>After so much awareness on how you can improve your database password storage you realize your company already has a large userbase. Even if less, you don’t want to make the users have to reset passwords they didn’t forget.</p>
<p>After asking around and spending some time to think of best solutions I got to a conclusion that resulted in this:</p>
<p>With <em>password_hash</em> containing bcrypt passwords (initially empty) and <em>password_hash2</em> containing old salted MD5. The intended flow is that after users are checked against password_hash and it is empty then it verifies their password_hash2 and creates a new bcrypt password for them in the password_hash column.</p>
<p>A great con to this is the additional unneccessary column. Why should I have a empty column from the start right? Then I read <a href="https://www.reddit.com/r/PHP/comments/3lwxlw/hash_and_verify_passwords_in_php_the_right_way/cva6y6p"><em>NeoThermic’s</em> approach</a> to this on <strong>/r/php</strong> on reddit also contributed to by ircmaxell and the idea of a legacy column got me so pulled in. After then I restructured my schema to something I see as a better idea</p>
<p>Legacy values appears as <strong>True</strong> and <strong>False</strong> boolean in the image but are stored as <em>1</em>s as <em>0</em>s. The password_hash column will contain all passwords (both the bcrypt and md5). A <code>DEFAULT 0</code> is required on the legacy table while all the existing users get updated with a legacy value of 1. If a user attempts log in with a legacy value 1, the program should store the plain text in a variable and check against the MD5 password. If it verifies, a password upgrade will happen by updating legacy value to 0 and storing plain text password in bcrypt.</p>
<p>The sample snippet below should make it clearer if you’d rather deal with less words</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token keyword">try</span><span class="token punctuation">{</span><br /> <span class="token variable">$email</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'johndoe@gmail.com'</span><span class="token punctuation">;</span><br /> <span class="token variable">$plainTextPassword</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'secret'</span><span class="token punctuation">;</span><br /> <span class="token variable">$stmt</span> <span class="token operator">=</span> <span class="token variable">$db</span><span class="token operator">-></span><span class="token function">prepare</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'SELECT id, email, password_hash, salt, legacy FROM users WHERE email = :id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token variable">$stmt</span><span class="token operator">-></span><span class="token function">execute</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">':id'</span> <span class="token operator">=></span> <span class="token variable">$email</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token variable">$stmt</span><span class="token operator">-></span><span class="token function">rowCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token comment">// Checking if the user exists</span><br /> <span class="token variable">$row</span> <span class="token operator">=</span> <span class="token variable">$stmt</span><span class="token operator">-></span><span class="token function">fetchAll</span><span class="token punctuation">(</span><span class="token class-name static-context">PDO</span><span class="token operator">::</span><span class="token constant">FETCH_ASSOC</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'legacy'</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token variable">$newPassword</span><span class="token operator">.</span><span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'salt'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token function">md5</span><span class="token punctuation">(</span><span class="token variable">$plainTextPassword</span><span class="token punctuation">)</span><span class="token operator">.</span><span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'salt'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token variable">$newPassword</span> <span class="token operator">=</span> <span class="token function">password_hash</span><span class="token punctuation">(</span><span class="token variable">$plainTextPassword</span><span class="token punctuation">,</span> <span class="token constant">PASSWORD_DEFAULT</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'cost'</span> <span class="token operator">=></span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token variable">$legacy</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span><br /> <span class="token variable">$stmt</span> <span class="token operator">=</span> <span class="token variable">$db</span><span class="token operator">-></span><span class="token function">prepare</span><span class="token punctuation">(</span><span class="token function">sprintf</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'UPDATE users SET legacy = :legacy AND password_hash = :hash WHERE id = %d'</span><span class="token punctuation">,</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token variable">$stmt</span><span class="token operator">-></span><span class="token function">execute</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">':legacy'</span> <span class="token operator">=></span> <span class="token variable">$legacy</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">':hash'</span> <span class="token operator">=></span> <span class="token variable">$newPassword</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token comment">// log the user in</span><br /> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span><br /> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"Invalid username or password"</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">password_verify</span><span class="token punctuation">(</span><span class="token variable">$plainTextPassword</span><span class="token punctuation">,</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'password_hash'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">password_needs_rehash</span><span class="token punctuation">(</span><span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'password_hash'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token constant">PASSWORD_DEFAULT</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'cost'</span> <span class="token operator">=></span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token variable">$newPassword</span> <span class="token operator">=</span> <span class="token function">password_hash</span><span class="token punctuation">(</span><span class="token variable">$plainTextPassword</span><span class="token punctuation">,</span> <span class="token constant">PASSWORD_DEFAULT</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'cost'</span> <span class="token operator">=></span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token comment">// store new password</span><br /> <span class="token punctuation">}</span><br /> <span class="token comment">// log the user in</span><br /> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span><br /> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"Invalid username or password"</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span><br /> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"User does not exist"</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><span class="token keyword">catch</span><span class="token punctuation">(</span><span class="token class-name">PDOException</span> <span class="token variable">$e</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"The following error occurred: <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$e</span><span class="token punctuation">}</span></span>"</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></span></code></pre>
<p>Or just use a framework helper and avoid the excess lines of PHP code. I see no reason to explain the ruby method for this because life is just a lot easier with rails and similar ruby frameworks.</p>
<style>
img{ transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5) }
</style>
Revealing animations on scroll with pureJS2015-08-31T00:00:00Zhttps://www.josephrex.me/revealing-animations-on-scroll-with-purejs/<p>This is one of the posts I hesitate to write about because I feel there’s too many blog authors that have already written on it. The concept of lazy loading is majorly for performance reasons and it is welcomed on various aspects of technology. However its use in this case is majorly for aesthetics purpose as it doesn’t improve performance in any way. I decided to write this after seeing that many solutions to this are written in jQuery.</p>
<p>This is one of the posts I hesitate to write about because I feel there’s too many blog authors that have already written on it. The concept of lazy loading is majorly for performance reasons and it is welcomed on various aspects of technology. However its use in this case is majorly for aesthetics purpose as it doesn’t improve performance in any way. I decided to write this after seeing that many solutions to this are written in jQuery.</p>
<p>With much we can do using JavaScript these days and browser compatibility with recent browsers including IE9+, the purpose of jQuery is being served by our <a href="http://vanilla-js.com/">vanillaJS</a>. If so, why waste an additional <a href="https://mathiasbynens.be/demo/jquery-size">242.55 Kb (minified 82.27Kb)</a> on HTTP request making your <a href="http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/">users suffer</a> long page loads? There are <a href="http://youmightnotneedjquery.com/">so many</a> <a href="http://lea.verou.me/2015/04/jquery-considered-harmful/">interesting</a> <a href="http://www.sitepoint.com/do-you-really-need-jquery/">write-ups</a> <a href="http://blog.garstasio.com/you-dont-need-jquery/why-not/">on why jQuery</a> <a href="http://developers.slashdot.org/story/15/04/27/1754230/javascript-devs-is-it-still-worth-learning-jquery">is not needed</a> <a href="http://callmenick.com/post/jquery-functions-javascript-equivalents">anymore</a> so I wouldn’t need to dive into that here.</p>
<p>To achieve this we need:</p>
<ul>
<li>library to track our scroll position on the viewport - <a href="http://imakewebthings.com/waypoints/"><em>Waypoints</em></a></li>
<li><a href="http://daneden.github.io/animate.css/">Animate.css</a> to do what it does best; <em>Animate</em></li>
</ul>
<p>Using the No Framework version of Waypoints, we can include the library before our main script however it suits the existing workflow. In my case 01_waypoints.js to make it included first on compilation for gulp-concat. Also you should include animate.css whichever way you want. For every element on the page that needs to be animated, animate.css requires they have a class of <code>animated</code> in the HTML.</p>
<p>AnimateCSS plays the role of using some transitions to <strong>load in</strong> the content to the page. To load in content, it shouldn’t pre-exist. Well it should be existing in the DOM but visually unseen. To do this you may need to create a unique class like <code>.waypoints</code> for giving all waypoint elements a default property of <code>visibility: hidden</code>. This way they still occupy their expected spaces in the layout, keeping the layout intact even before the animations come alive. I’ll recommend you do not use a utility/helper class e.g <code>u-invisible, u-hidden</code> for this.</p>
<p>You can have various waypoints handling various animations per section of your web page. To do this in your script, it’s as simple as:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">ready</span><span class="token punctuation">(</span><span class="token parameter">cb</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">in</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>readyState<span class="token punctuation">)</span> <span class="token comment">// in = loadINg</span><br /> <span class="token operator">?</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token function">ready</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> cb<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">)</span><br /> <span class="token operator">:</span> <span class="token function">cb</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token comment">/*======= Waypoints http://imakewebthings.com/waypoints/ ============= */</span><br /> <span class="token keyword">var</span> waypointRow1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Waypoint</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> element<span class="token operator">:</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.waypoint'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token function-variable function">handler</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">var</span> one <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'animation1'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> two <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'animation2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> one<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'bounceInLeft'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> two<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'bounceInRight'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> one<span class="token punctuation">.</span>style<span class="token punctuation">.</span>visibility <span class="token operator">=</span> <span class="token string">'visible'</span><span class="token punctuation">;</span><br /> two<span class="token punctuation">.</span>style<span class="token punctuation">.</span>visibility <span class="token operator">=</span> <span class="token string">'visible'</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> offset<span class="token operator">:</span> <span class="token string">'70%'</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">var</span> waypointRow2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Waypoint</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> element<span class="token operator">:</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.waypoint2'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token function-variable function">handler</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">var</span> one <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'animation3'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> two <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'animation4'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> one<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'zoomIn'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> two<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'rubberBand'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> one<span class="token punctuation">.</span>style<span class="token punctuation">.</span>visibility <span class="token operator">=</span> <span class="token string">'visible'</span><span class="token punctuation">;</span><br /> two<span class="token punctuation">.</span>style<span class="token punctuation">.</span>visibility <span class="token operator">=</span> <span class="token string">'visible'</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> offset<span class="token operator">:</span> <span class="token string">'70%'</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Notice how I used that tiny ready function? That’s for those concerned about how they’ll load it on documentReady like the jQuery <code>$(document).ready()</code>. Also I had set my offset to 70% because that works just fine for me. You can choose to go 100% like a lot of the jQuery implementations do. You can pick up one of the <a href="http://daneden.github.io/animate.css/">animations for animate.css</a> and add their classes in place of the ones I used in the code above.</p>
<p>Your HTML should look similar to this:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>animated waypoint<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>animation1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
First tale of my career as a freelancer2015-08-12T00:00:00Zhttps://www.josephrex.me/first-tale-of-my-career-freelancing/<p>I have always loved computers and when it was time to start building projects I made random projects to understand how programming works. Like many other starters I got web design jobs at ridiculously cheap prices but I really didn’t care about the money. I was enthusiastic to put my knowledge to use and have websites on the internet that I’ll proudly say were made by me.</p>
<p>I have always loved computers and when it was time to start building projects I made random projects to understand how programming works. Like many other starters I got web design jobs at ridiculously cheap prices but I really didn’t care about the money. I was enthusiastic to put my knowledge to use and have websites on the internet that I’ll proudly say were made by me.</p>
<p>My first experience working with a company was with a startup company of about 5 employees. I loved the flexibility of working with a startup as there weren’t any strict policies like clocking in and more of the regular things you get from large organizations. Don’t get me wrong I am not saying I hate protocols in large organizations. I haven’t worked with any large organization because the ones in my reach are not what I dream of. While there are many more large organizations I’m willing to work with, I have pursuits that need to be attained before taking the application steps. I’m only prioritizing to make myself the fit candidate at the expected time.</p>
<p>I worked at several startup companies and finally had a chance to take on a freelance project after I left the last startup to relocate temporarily. In the various startups I’ve worked with I’ve gone from using PHP to Ruby-on-rails and because they are startups there were times we didn’t have good enough frontEnd developers to take over application frontEnd. For this I took on advancing my frontEnd skills beyond what they were and I followed up with blogs and podcasts that puts me in the best practices. I used methods like <a href="https://bem.info/">BEM</a>, <a href="http://oocss.org/">OOCSS</a>, <a href="http://smacss.com/">SMACSS</a>, and <a href="http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/">namespacing</a> in CSS. I have also had to use various JavaScript frameworks and some animations on the frontEnd.</p>
<p>I have an eye for design and I follow up with frontEnd community but I really love to do a lot more backEnd development. Following up with the FrontEnd community made me more aware of performance and now I try to consider performance on every part of my development. I have been programming Python outside of the web for so long that it gave me the comfort to explore Ruby after switching from Laravel PHP.</p>
<p>Ruby is easy to write and it is against everything I used to be till I understood software development better. I thought I needed to go back to writing my own machine code, I thought I should build everything from scratch to feel like an elite developer, I thought re-inventing the wheel was what geniuses do. It turned out I was wrong. Geniuses find solutions to existing problems and solve them in the fastest and best way possible. Ruby-on-rails uses convention over configuration which saves a lot of writing of code. In my days as a Ruby developer I’ve written lesser code than I did when I wrote PHP but I’ve done a lot more than all the PHP code I ever wrote with the less Ruby code.</p>
<p>There’s way too many amazing things about Ruby and the ruby-on-rails framework. What I love most is the way assets pipeline helps me handle performance in its own way. I also got introduced to TDD by skimming the Rails documentation and I haven’t ever thought of going back on testing.</p>
<p>I considered everything I’ve gathered from using all the mentioned technologies and thought for a second <em>What can I call myself?</em> . Well, I’m a polyglot programmer or if I’ll use the buzzword, I’m a full stack developer. I needed more freelance jobs and I sought out to find more when I saw a tweet that led me to <a href="http://www.toptal.com/web">Toptal</a>.</p>
<p>Toptal has the best freelancers you can find and if I really need to get hired by the top companies then I have to be with toptal. The chances are really slim as it is often said that the screening process is tough (so tough that only 3% applicants make it). I’m hoping I’ll get a rails engineer/full stack position. I will have my first interview today and I really hope it turns out fine.</p>
<p>Besides toptal being a reputable company to be associated with, I love that they make developers write <a href="http://www.toptal.com/blog">blog posts</a>. I love writing and I think one way we can spread discoveries and get back from our community is by blogging. The blog posts have educative comments that are both useful to the blog writer and to the other readers.</p>
Moving to PostCSS2015-08-09T00:00:00Zhttps://www.josephrex.me/moving-to-postcss/<p>At some point as a developer you’ve thought of leveling up by leaving spaghetti CSS to write in preprocessors. There are 3 popular CSS preprocessors LESS, Sass, Stylus, and there may be others I’ve never heard of. What makes CSS hard is its lack of logic. These preprocessors made our workflow easier by introducing logic to us like iterating things that regular CSS coders will spend ours rewriting, use of partials, use of mixins and variables.</p>
<p>At some point as a developer you’ve thought of leveling up by leaving spaghetti CSS to write in preprocessors. There are 3 popular CSS preprocessors LESS, Sass, Stylus, and there may be others I’ve never heard of. What makes CSS hard is its lack of logic. These preprocessors made our workflow easier by introducing logic to us like iterating things that regular CSS coders will spend ours rewriting, use of partials, use of mixins and variables.</p>
<p>I never used any other preprocessor but Sass which I started by writing in indented format till I moved ahead with most industry experts to write in the SCSS syntax for clarity. It’s a good thing some developers have chosen to take this step towards getting better at writing stylesheets but we’re still coding for the web and the web changes very often.</p>
<p><a href="https://github.com/postcss/postcss">PostCSS</a> was introduced first in 2013 and it sounded pretty much like every other preprocessor we already had except for the fact that its Readme said it is a post-processor which is different from what I’ve always heard. A post processor? Really? How does that work? I ignored it with the thoughts that it was too much for me to start worrying about and went back to writing the good ol’ Sass.</p>
<p>Some days ago I came across the article <a href="http://benfrain.com/breaking-up-with-sass-postcss/">Migration from Sass to PostCSS</a> by <a href="http://twitter.com/benfrain">Ben Frain</a> and I have a new project I’m working on where I’m willing to try out new technologies. The post was so convincing that it made me decide to take a leap into PostCSS. I have a contrary opinion to what he said in the summary</p>
<blockquote>
<p>For the majority of style sheet authors currently (and happily) using Sass, there is little benefit in jumping ship to PostCSS right now. I hope it’s clear from this post that I believe to do so would be for philosophical and/or personal reasons. My default advice to someone looking to pick a tool to help organise and maintain CSS would still be ‘use Sass’.</p>
</blockquote>
<p>I think there is a huge benefit jumping ship to PostCSS right now and maybe it’s just the difference between when he posted and when I’m posting but there’s a lot of benefits switching over to PostCSS.</p>
<p>To use PostCSS, you have to integrate it to your build process to have it post-processing CSS files after they are saved. The two popular task runners that come to mind are <a href="http://gruntjs.com/">Grunt</a> and <a href="http://gulpjs.com/">Gulp</a> but there <a href="http://webpack.github.io/">are</a> <a href="http://broccolijs.com/">many</a> <a href="http://brunch.io/">more</a> <a href="http://mimosa.io/">these</a> <a href="http://jakejs.com/">days</a>. I always used Grunt but my new project is about trying new things besides I have heard of how Gulp smacks Grunt with code over configuration. If you’re already using Gulp in your workflow it’ll be very easy to get started but if you aren’t I’ll go through every detail.</p>
<p><a href="http://gulpjs.com/">Install gulp</a> and set up your gulpfile like I have mine below:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">var</span> gulp <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> jshint <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-jshint'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> uglify <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-uglify'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> concat <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-concat'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> notify <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-notify'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> cache <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-cache'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> browserSync <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'browser-sync'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> reload <span class="token operator">=</span> browserSync<span class="token punctuation">.</span>reload<span class="token punctuation">;</span><br /><br /><br /><span class="token keyword">var</span> postcss <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-postcss'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">var</span> cssImport <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-import'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">var</span> mixins <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-mixins'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">var</span> simpleVars <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-simple-vars'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">var</span> nested <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-nested'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">var</span> autoprefixer <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer-core'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">var</span> cssnext <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-cssnext'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">var</span> mqpacker <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'css-mqpacker'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">var</span> cssnano <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'cssnano'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">var</span> sourcemaps <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-sourcemaps'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">var</span> pixrem <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'pixrem'</span><span class="token punctuation">)</span><br /><br />gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'css'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">var</span> processors <span class="token operator">=</span> <span class="token punctuation">[</span><br /> cssImport<span class="token punctuation">,</span><br /> mixins<span class="token punctuation">,</span><br /> simpleVars<span class="token punctuation">,</span><br /> nested<span class="token punctuation">,</span><br /> <span class="token function">autoprefixer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>browsers<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'last 2 version'</span><span class="token punctuation">,</span> <span class="token string">'safari 5'</span><span class="token punctuation">,</span> <span class="token string">'ie 8'</span><span class="token punctuation">,</span> <span class="token string">'ie 9'</span><span class="token punctuation">,</span> <span class="token string">'opera 12.1'</span><span class="token punctuation">,</span> <span class="token string">'ios 6'</span><span class="token punctuation">,</span> <span class="token string">'android 4'</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> mqpacker<span class="token punctuation">,</span><br /> pixrem<span class="token punctuation">,</span><br /> cssnano<br /> <span class="token punctuation">]</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'./src/css/*.css'</span><span class="token punctuation">)</span><br /> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">cssnext</span><span class="token punctuation">(</span><span class="token punctuation">{</span>compress<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">postcss</span><span class="token punctuation">(</span>processors<span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'./dist/css'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token comment">// Static server</span><br />gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'browser-sync'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token function">browserSync</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> server<span class="token operator">:</span> <span class="token punctuation">{</span><br /> baseDir<span class="token operator">:</span> <span class="token string">"./"</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token comment">// Concatenate & Minify</span><br />gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'scripts'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">return</span> gulp<span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">'./src/js/*.js'</span><span class="token punctuation">)</span><br /> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>sourcemaps<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token string">'app.js'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'dist/js'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">uglify</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>sourcemaps<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'../maps'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">'dist/js'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">{</span>stream<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token comment">// Watch</span><br />gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'watch'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'./src/**/*.css'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'css'</span><span class="token punctuation">,</span> browserSync<span class="token punctuation">.</span>reload<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <br /> gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'./src/**/*.js'</span><span class="token punctuation">,</span> <span class="token string">'main.js'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'scripts'</span><span class="token punctuation">,</span> browserSync<span class="token punctuation">.</span>reload<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> gulp<span class="token punctuation">.</span><span class="token function">watch</span><span class="token punctuation">(</span><span class="token string">'*.html'</span><span class="token punctuation">,</span> browserSync<span class="token punctuation">.</span>reload<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><br />gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'default'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'css'</span><span class="token punctuation">,</span> <span class="token string">'browser-sync'</span><span class="token punctuation">,</span> <span class="token string">'scripts'</span><span class="token punctuation">,</span> <span class="token string">'watch'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>You probably were using a task runner like this to use libsass for compiling your written Sass into CSS. Or you were using <code>compass watch</code> with the nice CSS3 features of compass and vendor prefix mixins. To emulate the watch feature in compass I have used the <strong>watch</strong> task and to make it even better I’m using <strong>browser-sync</strong> for live reload (no one wants to deal with reloading browsers anymore).</p>
<h2 id="i’m-not-convinced-why-should-i-leave-sass" tabindex="-1">I’m not convinced. Why should I leave Sass?</h2>
<p>If you like holy wars you’ll try to start throwing points on why PostCSS can’t do what CSS does and your points will include the use of mixins, partials, variables, compass plugins, Sass nested statements, loops,</p>
<p>About compass plugins, there’s way more plugins available for use with gulp and they are what will be used to fill in for those expected Sassy features.</p>
<hr />
<p><strong>Variables:</strong> On the <a href="https://github.com/postcss/postcss/blob/master/README.md#what-is-postcss">PostCSS readme</a> you are given an option to use <a href="http://cssnext.io/">cssnext</a> or <a href="https://github.com/jonathantneal/precss">PreCSS</a>. PreCSS is a pack of plugins that makes you write sassy code with all the Sass features you left. While I can reason that you need some time to adopt to the new PostCSS you may want to do this but on deeper thoughts it’s just like you never left Sass. CSSnext on the other hand encourages you to write <a href="http://futurefriend.ly/">future friendly</a> CSS. The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS4 specs allows us declare variables in CSS</a> and you don’t need to be afraid of whether this feature is supported yet or not as it will be post-processed into browser-compatible CSS. More features like custom properties are made possible with cssnext. If you still like to have it the good ol’ way then you can use the <a href="https://github.com/postcss/postcss-simple-vars">postcss-simple-vars</a> plugin to define variables just like you did in Sass. With this and other plugins that will be discussed you’ll get the possible benefits of PreCSS while using cssnext.</p>
<p><strong>Partials:</strong> If you were thinking of having underscore prefixed mixins, that’s a ruby thing and we had to do that because Sass was born out of Ruby. The <code>@import</code> statement can be used to import files but it doesn’t suppport <a href="https://github.com/chriseppstein/sass-globbing">globbing imports</a>. To make the <em>@import</em> available the <a href="https://github.com/postcss/postcss-import">postcss-import</a> plugin is needed and FYI it should be called before the other postcss dependent plugins (e.g postcss-simple-vars, postcss-mixins). Here’s what my app.css look like as I import other modules into it</p>
<pre class="language-scss"><code class="language-scss"><span class="token keyword">@import</span> <span class="token string">"partials/variables.css"</span><span class="token punctuation">;</span><br /><span class="token keyword">@import</span> <span class="token string">"partials/mixins.css"</span><span class="token punctuation">;</span><br /><span class="token keyword">@import</span> <span class="token string">"partials/h5bp.css"</span><span class="token punctuation">;</span><br /><span class="token keyword">@import</span> <span class="token string">"partials/animations.css"</span><span class="token punctuation">;</span><br /><span class="token keyword">@import</span> <span class="token string">"partials/layout.css"</span><span class="token punctuation">;</span><br /><span class="token keyword">@import</span> <span class="token string">"partials/print.css"</span><span class="token punctuation">;</span><br /><span class="token keyword">@import</span> <span class="token string">"partials/helpers.css"</span><span class="token punctuation">;</span></code></pre>
<p>I like to separate variables, mixins, html5 boilerplate CSS, and others as shown above. The downside to this is that there’s no syntax coloring for the variables and mixins as they aren’t regular CSS. The Sass and Scss formats have syntax coloring on editors like Sublime Text and Atom when necessary packages are installed.</p>
<p><strong>Mixins:</strong> The mixin syntax with postcss is different from what you’ve been used to with Sass. It uses <a href="https://github.com/postcss/postcss-mixins">postcss-mixins</a> and it’s syntax is also pretty clear and easy:</p>
<pre class="language-scss"><code class="language-scss"><span class="token atrule"><span class="token rule">@define-mixin</span> icon <span class="token variable">$name</span></span> <span class="token punctuation">{</span><br /> <span class="token property">padding-left</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span><br /> <span class="token selector"><span class="token parent important">&</span>::after </span><span class="token punctuation">{</span><br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span><br /> <span class="token property">background-url</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/icons/$<span class="token punctuation">(</span>name<span class="token punctuation">)</span>.png<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.search </span><span class="token punctuation">{</span><br /> <span class="token keyword">@mixin</span> icon search<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Also note that when using postcss-nested and postcss-simple-vars it must be set before them.</p>
<p><strong>Minifying CSS:</strong> From using compass I used to set an option to have compiled(minified) CSS output and I could also include Autoprefixer for postprocessing CSS to handle vendor prefixes within my <em>config.rb</em>. Autoprefixer is a derivative of the PostCSS project and now we can watch it do it’s work with its mother project. To really handle css minification there are two options I consider which are <a href="https://www.npmjs.com/package/csswring">csswring</a> and <a href="http://cssnano.co/">cssnano</a>. Csswring does its work properly but not as good as cssnano. Cssnano performs advanced compression to shrink CSS files and that makes it a <a href="http://cssnano.co/optimisations/">better option for optimisation</a>.</p>
<p>If you need to handle data structures like iterating through a JSON file, you can go with <a href="http://benfrain.com/breaking-up-with-sass-postcss/">Ben Frain’s technique</a>. Other important plugins I’ve used in my gulpfile.js that are not mentioned are <em>mqpacker</em>, <em>gulp-sourcemaps</em>, and <em>pixrem</em>. mqpacker for grouping similar media queries, gulp-sourcemaps for sourcemaps which I also used to handle in <em>config.rb</em> for compass, and finally <em>pixrem</em> something I had to write a mixin for on previous Sass projects. Pixrem finds all your rem values and create a px fallback for legacy browsers.</p>
<p>I’m excited about this transitioning and I think anyone taking this step will also enjoy the better workflow with PostCSS.</p>
Throttling and debouncing input handlers2015-07-26T00:00:00Zhttps://www.josephrex.me/throttling-and-debouncing-input-handers/<p>2 years ago when JavaScript sounded a lot impossible to me and yet I had to perform a tasks in it for a project I was working on, I requested help on the <em>#jQuery</em> IRC channel and someone mentioned:</p>
<p>2 years ago when JavaScript sounded a lot impossible to me and yet I had to perform a tasks in it for a project I was working on, I requested help on the <em>#jQuery</em> IRC channel and someone mentioned:</p>
<blockquote>
<p>You may wanna debounce inputs on that one. I use this plugin for that <a href="http://benalman.com/projects/jquery-throttle-debounce-plugin/">http://benalman.com/projects/jquery-throttle-debounce-plugin/</a></p>
</blockquote>
<p>I didn’t understand what he was saying but I couldn’t express how much I was confused so I decided to play the <em>I get it</em> character. While I found the solution to what I really needed as a JavaScript script kiddie, of course I didn’t understand what the solution was doing and I could not explain how it worked either but I used it anyway. I had since bookmarked that link telling myself <strong>This will be useful some day</strong>. That day has come and I’ve used it on a couple of projects. I’ll go through what it does.</p>
<p>A common example here is scroll events which <a href="http://aerotwist.com/">Paul Lewis</a> explained properly and more clearly than I can in a <a href="https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers?hl=en">Rendering Performance article</a> he wrote at Google. He wrote about scroll events and touch events and mentioned how these input handlers are scheduled to run after <code>requestAnimationFrame</code> callbacks.</p>
<p><a href="https://twitter.com/chriscoyier">Chris Coyier</a> also recently wrote about <a href="https://css-tricks.com/the-difference-between-throttling-and-debouncing/">the difference between throttling and debouncing</a> where he metioned that he had been confused about them the same way I’ve stayed confused about them for long. I’ll rehash how he explained the difference.</p>
<p><strong>Throttling:</strong> It enforces a maximum number of times a function can be called over a time. It says you can’t call this function more than once in X duration.</p>
<p><strong>Debouncing:</strong> It enforces that a function can not be called again until a certain amount of time has passed. It says if function Y is called, it can’t be called until after X duration.</p>
<p>A big difference there that’s hardly a difference. What it does primarily is save the CPU or GPU from performing way too much calculations especially in resize events aspect where you go through a window resize and you hit various width from about 2400px down to 320px and back up. Monitoring the scroll and having a change occur in the DOM on the scroll event will be too much computing.</p>
<p>With throttling or debouncing, the DOM changes can wait until after every pause during the resize rather than through every resize point.</p>
<p>Here’s a pseudocode of what happens</p>
<pre><code>// Without a throttle/debounce
Listener(EventScroll) ->
print 'The quick brown fox'
// With a throttle of every 900ms
Listener(EventScroll, throttle(800s) ) ->
print 'The quick brown fox'
</code></pre>
<p>If we hit 200 resize points scrolling from 2400px to 320px, the first case will print “The quick brown fox” 200 times but instead with a 900ms throttle which says only call this function once in 900ms, while the scrolling takes 3s from 2400px it will be</p>
<figure>
3s = 3000ms
<br />
3000 / 900 = 3.3
</figure>
The function now has to run 3 times saving it from the heavy 200 times of computation which may cause lagging on the web page. Another good use case I've come across for this especially in a recent project was handling ajax submission on click of radio button among several options.
<p>As a human with an understanding of cognitive science, I try to think of how other humans think and while I have 3 radio button options to be selected from, an indecisive user can select option A and in that minute choose to change to option B. With a little debounce on the click input, it says do not send the ajax request again until X seconds are gone, saving my database from getting too frequent hits.</p>
<p>About the first <a href="http://benalman.com/projects/jquery-throttle-debounce-plugin/">jQuery throttle-debounce plugin</a> that found me before I even knew its use, it had been my option when it comes to debouncing my input handlers and it works just great but on my most recent I chose to give the <a href="http://underscorejs.org/">underscorejs</a> a try and I liked using it more with its _.debounce() callback which works just like below</p>
<pre class="language-js"><code class="language-js"><span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'resize'</span><span class="token punctuation">,</span> _<span class="token punctuation">.</span><span class="token function">debounce</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"The quick brown fox"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">800</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Ben Alman mentions in the jquery plugin page that debouncing can be especially useful for rate limiting execution of handlers on events that will trigger AJAX requests and I chose debounce over throttle for this in my usecase.</p>
Specialist or Full Stack generalist2015-06-26T00:00:00Zhttps://www.josephrex.me/full-stack-or-generalist/<p>As a full stack developer I’ve had critiques about how I can’t be good enough at one thing if I do a lot of things. I totally agree to this and I’m not claiming to be a master of everything I do. Some will rather describe it as:</p>
<p>As a full stack developer I’ve had critiques about how I can’t be good enough at one thing if I do a lot of things. I totally agree to this and I’m not claiming to be a master of everything I do. Some will rather describe it as:</p>
<blockquote>
<p>Jack of all trades and master of none</p>
</blockquote>
<p>do I think of myself as this? No! From a reasonable point of view, I’m not trying to jump into VFX/FUI even though I may have an obsession for them but instead, I’m sticking to web development even as I know my programming skills can be of use in other fields and I’m very much willing to explore it for research purposes in those fields but professionally, I’ve chosen to be a web developer.</p>
<p>When people ask questions like:</p>
<blockquote>
<p>What programming language do you write?</p>
</blockquote>
<p>I find it hard to answer for two major reasons being <a href="https://www.josephrex.me/i-am-an-x-programmer/">I have once mentioned that I don’t believe there is one way to solving all problems</a> and secondly I always think you may need to get a pen to take them down as I mention. I’ve had to feed and do a lot for myself by using the skills I’ve acquired and that required being independent. I took design jobs when they came, I took back-end development jobs, I took front-end development jobs. Doing all of this made me what I am today and that’s a guy that uses Photoshop, Gimp, Illustrator, Inkscape and writes SVG, CSS3 (SCSS), JavaScript, Ruby, Python, PHP, and C. Working with these languages have made me work on platforms like various Amazon Services and made me use several APIs. I couldn’t help this because it was what I needed and what I had to do.</p>
<p>From earlier, I said I agree that I’m not good enough at all of these things but disagree that I’m a master of none. While I took majorly PHP projects and used frameworks that exposed me to proper use of Object-Oriented PHP, I kept realizing there was more to learn each time. I was a <a href="https://nikic.github.io/2011/12/27/Dont-be-STUPID-GRASP-SOLID.html">STUPID</a> PHP programmer that was ready to learn to do things the right way. I read blog posts and skimmed through questions and answers on the PHP IRC channel. I was gradually becoming like one of the PHP <a href="http://www.ircmaxell.com/">specialists</a>. I’d been doing a lot of front-end in-between and writing CSS code that I didn’t totally understand. I also followed <a href="http://zedshaw.com/">Zed Shaw</a> closely on learning python. Inadvertently, following the paths of a non-specialist like Zed I was becoming more like him.</p>
<h2 id="wait-that-doesn’t-make-me-full-stack" tabindex="-1">Wait! That doesn’t make me Full-stack</h2>
<p>I decided to take some more projects where I could put a lot more focus on front-end development and then I learnt more about the Syntax of CSS and JavaScript, patterns, style guides. All of these put me in the direction of writing readable and reusable front-end code which is basically what it takes to be a front-end developer. However, I didn’t stop there. I keep participating in the community to know everything there is to know on front-end development from trying frameworks to experimenting with bleeding edge technologies. I had leveled up to write front-end code way better than some pronounced “front-end developers” and I relished the mathematical part of it more.</p>
<p>While still doing most of my projects in PHP, I was working on some python projects that were either CLI or for desktops majorly because my orientation on Python didn’t make me think of it as a thing for the web. Trying out Django and Flask were just experimental and I didn’t use them for any real-life projects. After reading on ruby-on-rails I thought Ruby sounded like just what I needed to be the developer I imagine myself to be and it turned out I wasn’t wrong. After reading docs and various articles I dived into a client’s project using ruby-on-rails and I was lucky the client didn’t care to know my past experience with the technologies I was using. The project turned out successful and through it I’d learned a lot in Ruby and Rails but not all the good habits of Ruby-on-Rails developers. Test-Driven Development, Behavior-Driven Development, and Agile development were all alien to me and I gradually understood these things doing more project because I wanted to know them and roll with some of the best in the industry.</p>
<p>From my story, obviously it all just didn’t come once and the fact that I had time to spend with each technology makes me able to say I might have mastered some of it.</p>
<hr />
<p>A <a href="http://andyshora.com/full-stack-developers.html">seemingly interesting</a> article I found tackles the use of the word full-stack but the author made an interesting point by saying some of the so-called full-stack developers just have an ability to learn new things which is an entirely different thing. He further mentioned that such people know what is required on various layers to achieve given tasks even if they do not understand the whole of those layers. If I’m to go through the tests as he had mentioned in the article, I will have some branches where I’ll almost be hitting 100 and some others at 70.</p>
<p>I use Photoshop and I google my way through it most times but I get stuff done anyway. That makes me less of a designer on that end but I’m still full-stack in many other ways. If I’ll get a 25 on Photoshop, 75 on JavaScript, 80 on Ruby, and 95 on CSS I think that is reasonable enough.</p>
<h2 id="the-risk-of-hiring-full-stack" tabindex="-1">The risk of hiring full stack</h2>
<p>I’ve made it sound cool to be a full stack developer from the start but if I was a recruiter I will hire more specialists than full-stack developers and for that reason I pose to recruiters like I’m a specialist. My reason for this is because I’ve been in a position where I had to work closely with HR to see how the sharp-mouthed so-called full-stack developers failed at little tests where the specialists knew their thing and did it right.</p>
<h2 id="why-i-think-you-should-hire-a-full-stack-developer" tabindex="-1">Why I think you should hire a full stack developer</h2>
<p>Being a freelance developer that mostly works solely I structure my database and back-end based on the design I have and also vice versa. While this may be the same for teams with different specialists, the edge here is I can make comparisons right in my head without having an actual structure. This helps for proper prototyping. Someone described it as having a bird eye to see through the whole of the forest.</p>
<p>The chances of getting a good full-stack developer are slim but if you find an original full-stack developer they’ll be of great use especially to small companies and start-ups.</p>
Using Rails assets pipeline with Cloudfront CDN2015-06-21T00:00:00Zhttps://www.josephrex.me/rails-assets-pipeline-with-cloudfront-cdn/<p>Performance is an essential thing in every application that should be considered not only from the front-end but also the back-end. CDNs have been a great way to serve and deliver assets on web pages in this advent of HTTP1. It may not be the same with HTTP2.0 but at this, majority of the web is on HTTP1 and it will be that way for years to come. Cloudfront is an Amazon web service that delivers content from nearby locations and it works greatly when combined with the powers of the rails assets pipeline.</p>
<p>Performance is an essential thing in every application that should be considered not only from the front-end but also the back-end. CDNs have been a great way to serve and deliver assets on web pages in this advent of HTTP1. It may not be the same with HTTP2.0 but at this, majority of the web is on HTTP1 and it will be that way for years to come. Cloudfront is an Amazon web service that delivers content from nearby locations and it works greatly when combined with the powers of the rails assets pipeline.</p>
<p>I’ve come across websites serving assets with S3 and I only see it as a technology misuse. S3 is meant for storing files and I had initially only used it just for storing user uploads in applications. Serving static assets from S3 wouldn’t make requests any faster than they will be if you weren’t using a different subdomain for static assets.</p>
<h2 id="what-makes-cloudfront-different-from-s3" tabindex="-1">What makes cloudfront different from S3</h2>
<p>Cloudfront fetches file from a origin like a S3 bucket where files are stored and distributes it to different edge locations. When users request for assets, the assets are served from the nearest edge location making request time a lot faster.</p>
<h2 id="setting-up-cloudfront" tabindex="-1">Setting up Cloudfront</h2>
<p>Just as <strong>buckets</strong> are to S3, <strong>distributions</strong> are to cloudfront. Each distribution has an origin which could be the S3 bucket as I prefer but it could also be some other assets server of yours. If you don’t already have a distribution, set up a new one and configure it to suit your needs. Most of the default configurations are ok but you can make minor changes like setting a custom domain rather than using the subdomains with random characters provided by cloudfront. You should have a subdomain like this:</p>
<pre><code>http://whatever.cloudfront.net
</code></pre>
<p>Create an <code>assets</code> folder in your S3 bucket if you’ve chosen S3 bucket as origin then go to your <code>config/environments/production.rb</code> and add this line:</p>
<pre class="language-rb"><code class="language-rb">config<span class="token punctuation">.</span>action_controller<span class="token punctuation">.</span>asset_host <span class="token operator">=</span> <span class="token string">"http://whatever.cloudfront.net"</span></code></pre>
<p>If you choose to only use cloudfront CDN for images, you can do this instead:</p>
<pre class="language-rb"><code class="language-rb">config<span class="token punctuation">.</span>action_controller<span class="token punctuation">.</span>asset_host <span class="token operator">=</span> <span class="token builtin">Proc</span><span class="token punctuation">.</span><span class="token keyword">new</span> <span class="token punctuation">{</span> <span class="token operator">|</span>source<span class="token operator">|</span><br /> <span class="token keyword">if</span> source <span class="token operator">=</span><span class="token operator">~</span> <span class="token regex">/\b(.png|.jpg|.gif)\b/i</span><br /> <span class="token string">"http://whatever.cloudfront.net"</span><br /> <span class="token keyword">end</span><br /><span class="token punctuation">}</span></code></pre>
<p>There’s a big chance you already have that in your production config and you will only need to uncomment it. With that in place, calling <code>image-url()</code>, <code>asset_path</code>, <code>image_path</code>, and <code>asset_url</code> will always append your cloudfront domain with your asset pipeline content hashed file like:</p>
<pre><code>http://whatever.cloudfront.net/assets/logo-4c7b3d.png
</code></pre>
<p>If you’re dropping files directly in your assets folder of the origin S3 bucket, you may encounter problems with the web page not finding the desired files. This is because the files in your bucket are without a hash suffix.</p>
<p>The solution to this is to precompile your assets in the production environment before pushing changes to server and then uploading contents of <code>public/assets</code> into your assets folder on S3 Bucket.</p>
<pre><code>RAILS_ENV=production bundle exec rake:assets precompile
</code></pre>
<p>Following these steps carefully will get you up and running with CDNs plus assets cache that can be easily invalidated on file changes. Iterating this process of precompilation and uploading to S3 may be painful if you have to do it manually always. I suggest you write a custom script, maybe a Grunt plugin that makes the task a lot easier for you.</p>
Good Citizen: Copyrights and Licenses2015-05-14T00:00:00Zhttps://www.josephrex.me/good-citizen-copyrights-and-licenses/<p>A lot of us follow most legal laws to remain good citizens and mostly to stay out of trouble. The best people are those who follow these laws because they feel it’s the right thing to do, and not just because they may get arrested for doing otherwise.
In the Software development industry, there are licenses and copyright laws. These laws are ignored by many and I used to be one.</p>
<p>A lot of us follow most legal laws to remain good citizens and mostly to stay out of trouble. The best people are those who follow these laws because they feel it’s the right thing to do, and not just because they may get arrested for doing otherwise.
In the Software development industry, there are licenses and copyright laws. These laws are ignored by many and I used to be one.</p>
<p>While working on a rails project recently, I had upgraded my version of rails from 4.1.7 to 4.2. In the process, my uglifier gem had <a href="https://github.com/gneatgeek/uglifier/commit/8816c85ee0dca0dd1b9b22c7e5ea301c903362a9#diff-0a1bbe5d453e58345ac2d708f80701b0L240">upgraded</a> to version 2.7.1 and that was cool. I love updated stuff!</p>
<p>The one thing about the uglifier update I was not pleased with initially was its <a href="https://github.com/lautis/uglifier/pull/78">copyright comment preservation</a>. Uglifier started allowing comments that had a bang to remain unminified and this kept giving me a warning from my rule based metric that JavaScript is not minified because of some whitespaces sold off with the copyright comment lines.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">/*!<br /> * jQuery JavaScript Library v2.1.3<br /> * http://jquery.com/<br /> *<br /> * Includes Sizzle.js<br /> * http://sizzlejs.com/<br /> *<br /> * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors<br /> * Released under the MIT license<br /> * http://jquery.org/license<br /> *<br /> * Date: 2014-12-18T15:11Z<br /> */</span></code></pre>
<p>I wanted nothing more than to get rid of this and my resort was to edit my production configuration from</p>
<pre class="language-rb"><code class="language-rb">config<span class="token punctuation">.</span>assets<span class="token punctuation">.</span>js_compressor <span class="token operator">=</span> <span class="token symbol">:uglifier</span></code></pre>
<p>to</p>
<pre class="language-rb"><code class="language-rb">config<span class="token punctuation">.</span>assets<span class="token punctuation">.</span>js_compressor <span class="token operator">=</span> <span class="token constant">Uglifier</span><span class="token punctuation">.</span><span class="token keyword">new</span><span class="token punctuation">(</span>output<span class="token punctuation">:</span> <span class="token punctuation">{</span> comments<span class="token punctuation">:</span> <span class="token symbol">:none</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre>
<p>At this point, I’m including jquery2 with sprockets and <a href="http://sizzlejs.com/">sizzlejs</a> with it.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">//= require jquery2</span></code></pre>
<p>With a change in the production configuration, I got my JS file smoothly minified the way I want it and then I started writing this blog post to tell anyone else trying to get rid of it that this is how I’ve gone about it. Then I read <a href="https://tldrlegal.com/license/mit-license">this tldr MIT license</a> which was an eye opener for me. I’ve taken licenses and copyrights with lethargy for so long and this was a turn-around for me and I needed to get back the copyrighted JQuery in my app and at the same time keep most of it minified. Luckily there’s a minified jquery2 that can be included with sprockets</p>
<pre class="language-js"><code class="language-js"><span class="token comment">//= require jquery2.min</span></code></pre>
<p>That has a single-line copyright with less white-space and it was my go.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">/*! jQuery v2.1.3 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */</span></code></pre>
<p>If you’re privileged to use a software or product for free. For all its worth which may be inclusion of License and Copyrights, we’ll be good software community citizens by keeping them.</p>
Understanding how ajax upload preview works2015-03-30T00:00:00Zhttps://www.josephrex.me/understanding-how-ajax-upload-preview-works/<p>From a very early stage of my development, I’ve been fascinated by ajax upload previews and <a href="http://www.dropzonejs.com/">dropzone</a> upload areas. For a long time I guess I was too scared to try any of them but after some time, I started using some jQuery plugins that did the job fine. I could have been contended with that and just have that in my every project but every project aren’t the same. I may use a bunch of plugins on a static website but on web applications where I’m so conscious about performance I prefer taking my time to write code that will help me do away with plugins or gems where I can.</p>
<p>From a very early stage of my development, I’ve been fascinated by ajax upload previews and <a href="http://www.dropzonejs.com/">dropzone</a> upload areas. For a long time I guess I was too scared to try any of them but after some time, I started using some jQuery plugins that did the job fine. I could have been contended with that and just have that in my every project but every project aren’t the same. I may use a bunch of plugins on a static website but on web applications where I’m so conscious about performance I prefer taking my time to write code that will help me do away with plugins or gems where I can.</p>
<p>There are some of these that are really important and one will only be re-inventing the wheel by trying to re-write them but a upload preview is just too small to be considered as re-inventing the wheel. On a recent rails project where I was using the twitter-style page edit, I needed such file upload and by gathering ideas I came up with the way to go about it.</p>
<p>To do this, there should be the user avatar image where they can click for upload when the page is in editable state. Also, we need a file upload form.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>profile.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>My profile<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avatar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>uploadAvatar<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">visibility</span><span class="token punctuation">:</span> hidden</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span></code></pre>
<p>These two elements will be communicating with each other and that requires adding some JS hooks in class and id. The actual file upload form also has to be visuall hidden. You can use any approach you find suitable to achieve this. I’ve had cases where I used text-indent and some times, I use the hidden visibility and place the element absolutely in a place where it doesn’t disturb the actual page.</p>
<p>We want the user to click the avatar image for the file upload dialog to pop so we will have to trigger a click on the actual input form when the <code>.avatar</code> image is clicked.</p>
<pre class="language-js"><code class="language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.avatar'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#uploadAvatar'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trigger</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>The next challenge will be to have a way to display the images selected on the web page. To do this, we will use the JavaScript FileReader object to get the data-URI of the selected image and set it as a background of the upload area. We have to listen to the change event of the file upload input to grab image data when uploaded.</p>
<pre class="language-js"><code class="language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#uploadAvatar'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">change</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>files <span class="token operator">&&</span> <span class="token keyword">this</span><span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">var</span> reader <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> reader<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".avatar::before"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addRule</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> background<span class="token operator">:</span> <span class="token string">"url("</span><span class="token operator">+</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>result<span class="token operator">+</span><span class="token string">")"</span><span class="token punctuation">,</span><br /> content<span class="token operator">:</span> <span class="token string">""</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".avatar::before"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addRule</span><span class="token punctuation">(</span><span class="token string">"background-size: 100%"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> reader<span class="token punctuation">.</span><span class="token function">readAsDataURL</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Notice my use of addRule there. That’s not a built-in JavaScript function. I had used it because my upload preview is shown on a pseudo element on top of the actual image rather than as a replacement of the image. This is useful when you are using an image tag to load the actual image and setting a background wouldn’t overwrite the displayed image.</p>
<p>There’s no regular way to add styles to pseudo elements with JavaScript so I used this <a href="https://gist.github.com/yckart/5563717">neat little function</a> by <a href="http://yckart.com/">Yannick Albert</a>.</p>
Sticky: Scroll to fix content2015-03-23T00:00:00Zhttps://www.josephrex.me/scroll-to-fix-content/<p>Late last year, <a href="https://twitter.com/chriscoyier">Chris Coyier</a> addressed this on <a href="https://css-tricks.com/scroll-fix-content/">CSS-Tricks</a> with illustrating images including GIF. In his solution to the problem, he had used <a href="http://css-tricks.com/magic-numbers-in-css/">magic numbers</a> which he confirmed made his soluton not re-usable. He also wrote it in jQuery which may be nice considering that a lot of people use jQuery as it works on legacy browsers.</p>
<p>Late last year, <a href="https://twitter.com/chriscoyier">Chris Coyier</a> addressed this on <a href="https://css-tricks.com/scroll-fix-content/">CSS-Tricks</a> with illustrating images including GIF. In his solution to the problem, he had used <a href="http://css-tricks.com/magic-numbers-in-css/">magic numbers</a> which he confirmed made his soluton not re-usable. He also wrote it in jQuery which may be nice considering that a lot of people use jQuery as it works on legacy browsers.</p>
<p>The first issue I’ll address here is that jQuery may be used by majority of web developers but not everyone does. To produce code that works in less time, I use jQuery to handle a lot of my freelance projects just to get the job done so fast. In this cases, performance is my least priority. I’m usually not trying to meet any performance budget even though I still take things like concatenation and minification very seriously. I maintain my blog here and I try my best possible to keep good performance. In total, I’m only having to use JavaScript to achieve about 6 things on my blog and I saw no need to load the whole jQuery library just to achieve those. I have chosen to go with vanilla JavaScript.</p>
<p>I had to talk about my blog not using jQuery because the point I’m making is that I want a solution with no dependency of jQuery. If you notice the home page of this blog, the logo gets fixed to the header after scroll. This is exactly what we are trying to achieve here. While Chris focused on mobile, I think we usually need this even on desktop web platforms as well. Infact, my mobile view, does not have the scroll-to-fix effect like the desktop does.</p>
<p>Considering a vanilla JavaScript solution without magic numbers, <a href="https://css-tricks.com/scroll-fix-content/#comment-1585386">Jessica</a> wrote <a href="https://codepen.io/anon/pen/chDbg">one</a> where she was using anchor to aid the sticky position retrieval and I think it’s a bit too much work for the little thing we need to do.</p>
<p>To listen on scroll event, we add a event listener with</p>
<pre class="language-js"><code class="language-js">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Now to avoid the use of magic numbers, I suggest the element that gets fixed is already an absolutely positioned element with a <code>top</code> value determining its initial distance from the top of the window. That top value becomes the fix point where we make the element become sticky.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">/* Selecting the DOM element that'll be fixed */</span><br /><span class="token keyword">var</span> wrap <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'js-wrap'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token comment">/* Get the top property which must have been set in<br />the CSS and remove whatever units it has with parseInt */</span><br />fixPoint <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span> <span class="token function">getComputedStyle</span><span class="token punctuation">(</span>wrap<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getPropertyValue</span><span class="token punctuation">(</span><span class="token string">'top'</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Lastly, we want the element to get fixed when scrolled to. We do this by creating a condition to fix the content when the distance from the document top exceeds our acquired fixPoint.</p>
<pre class="language-js"><code class="language-js">wrap<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">"fixed"</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop <span class="token operator">></span> fixPoint<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>The whole code should now look like this:</p>
<pre class="language-js"><code class="language-js">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> fixPoint <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span> <span class="token function">getComputedStyle</span><span class="token punctuation">(</span>wrap<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getPropertyValue</span><span class="token punctuation">(</span><span class="token string">'top'</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /> wrap<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span> <span class="token string">"fixed"</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop <span class="token operator">></span> fixPoint <span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Toggling a class <code>fixed</code> that gives the element a fixed position a new top value with a shorter distance from the window top as shown with the CSS code:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.logo</span><span class="token punctuation">{</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br /> <span class="token property">top</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span><br /> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">z-index</span><span class="token punctuation">:</span> 100<span class="token punctuation">;</span><br /> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token selector">.logo.fixed</span><span class="token punctuation">{</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span><br /> <span class="token property">top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span><br /> <span class="token property">z-index</span><span class="token punctuation">:</span> 200<span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
Exploring SVG for absolute beginners2015-03-06T00:00:00Zhttps://www.josephrex.me/exploring-svg-for-absolute-beginners/<p>SVG is one of the cool stuff of these HTML5 days and if you aren’t already fiddling with them already, either by using ready SVG icons or writing your own SVG, then you are missing out on a lot.</p>
<p>SVG is one of the cool stuff of these HTML5 days and if you aren’t already fiddling with them already, either by using ready SVG icons or writing your own SVG, then you are missing out on a lot.</p>
<p>It’s mostly known for its ability to scale across various pixel densities without pixelating. Regular raster images will do fine on 70 pixel per inch (ppi) and some densities slightly higher but we’re in the future now and things are getting different. With displays of nearly up to 360ppi, raster will pixelate. Also, SVG survives zooming to any length and it retains its initial quality.</p>
<p>That’s definitely a good point but what really got me using SVG was my hunger for less HTTP requests. Besides head images of posts, I’m almost not using any images on this blog. At some point I thought data-uri’s were the good thing but in no time I realized they aren’t what you should just use with a sole aim of achieving reduced HTTP requests. There are cases where data-uri can come to play but I’ll still do without it where I can. Just for test, I ran my 764k header image on the home page through a data-uri converter and this was the outcome</p>
<p>As seen from the image, the 764k file had become 1.3M. This may save me from making an extra 764k request for an image but then it’ll cost me to download a larger HTML file. I wouldn’t sell my soul for a penny :D. SVG to rescue!!</p>
<p>For readers who hate long posts, I’ll explain and discuss ways to use SVG early enough and keep the goodies (writing and understanding) for later.</p>
<p>Loading SVG in HTML can be done through SVG sprites or embedded. The SVG <code>use</code> elements allow the re-use of parts of a larger pre-defined SVG and this what I mean when I say SVG sprites in HTML. Having a bunch of SVG shapes in one SVG file that are separated with groups (<code><g></code> tags).</p>
<p>We could just embed this parent SVG file somewhere in our HTML file but sometimes when it is really large, we like to maintain a neat mark-up by including it with JavaScript like below</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">var</span> url <span class="token operator">=</span><span class="token string">'fonts/icons.svg'</span><span class="token punctuation">;</span><br /><span class="token keyword">var</span> c<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> c<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> c<span class="token punctuation">.</span><span class="token function">setRequestHeader</span><span class="token punctuation">(</span><span class="token string">'Content-Type'</span><span class="token punctuation">,</span> <span class="token string">'text/xml'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> c<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br />document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>c<span class="token punctuation">.</span>responseXML<span class="token punctuation">.</span>firstChild<span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>firstChild<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Each group in the carrier SVG file looks like:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>coolIcon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M67, 18.0c ....<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<p>and they are used as shown:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 32 32<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#coolIcon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>use</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<p>We can also achieve sprites the good o’l way with CSS by referencing the SVG file with url() and using <code>background-position</code></p>
<pre class="language-css"><code class="language-css"><span class="token selector">.icon</span><span class="token punctuation">{</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>icon.svg<span class="token punctuation">)</span></span><span class="token punctuation">;</span><br /> <span class="token property">background-position</span><span class="token punctuation">:</span> 0px -50px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Both spriting techniques still require a HTTP request for the SVG carrier (just one). Embedding SVG will increase the size of the HTML file but it can’t be as much as the impact of data-uri. It’s always just a difference of few bytes so it seems like the best way for me. Mostly, I stick with embedded SVG.</p>
<p>If I’ll need a circle then I’ll just write</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>60<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>60<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>circle</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<hr />
<p>Now let’s try to understand what was going on up there. When we remember art from grade school, the first thing we were made to understand was making a line (the distance between points). Similar to how we do it on the basketball court when making shots training, we say</p>
<blockquote>
<p>Let’s go to school</p>
</blockquote>
<p>and then we begin shooting from a very close distance to the rim till we go further beyond the 3-points line, and then the center court.</p>
<p>Ok enough of illustrations outside the topic. First thing you should know is understanding how a SVG line works and here you go</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>line</span> <span class="token attr-name">x1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">y1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">x2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">y2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<figure>
<svg>
<line x1="0" y1="0" x2="200" y2="0" stroke="black" stroke-width="1"></line>
</svg>
</figure>
<p>You can inspect the demos on the art board to confirm their live operation. All I can think of with this is a quadratic graph. I don’t mean to scare you off if you’re not mathematically inclined because this is so easy to figure out. The x and y represent X and Y axis in a graph.</p>
<p>X represents the horizontal flow while Y represents the vertical flow like the image above. X1 is the horizontal starting point, X2 is the horizontal end point, Y1 is the vertical starting point, and Y2 is the vertical end point. Makes sense right? Stroke is just the color of the line as you may have guessed, and stroke-width is how thick the line should be.</p>
<p>Let’s make something out of that. A <strong>triangle</strong></p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>line</span> <span class="token attr-name">x1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">y1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">x2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">y2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>line</span> <span class="token attr-name">x1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">y1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">x2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">y2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>line</span> <span class="token attr-name">x1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">y1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">x2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">y2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<figure>
<svg>
<line x1="100" y1="0" x2="0" y2="100" stroke="black"></line>
<line x1="200" y1="100" x2="100" y2="0" stroke="black"></line>
<line x1="0" y1="100" x2="200" y2="100" stroke="black"></line>
</svg>
</figure>
<p>Circles are similar to lines. Since we can only advance from Triangles to Rectangles, and to other Polygons, I think here’s the best place for cicles and ellipsis to fit in</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skyblue<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crimson<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<figure>
<svg>
<circle cx="70" cy="70" r="50" stroke="skyblue" fill="crimson" stroke-width="4"></circle>
</svg>
</figure>
<p>We can also create circles with the ellipse tag</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ellipse</span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span> <span class="token attr-name">rx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">ry</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crimson<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<p>Creating an ellipse will only require having two different <code>rx</code> and <code>ry</code> values</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ellipse</span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span> <span class="token attr-name">rx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>40<span class="token punctuation">"</span></span> <span class="token attr-name">ry</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>60<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>crimson<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<figure>
<svg>
<ellipse cx="70" cy="70" rx="40" ry="60" fill="crimson"></ellipse>
</svg>
</figure>
<p>So far, I introduced some more attributes for circles and ellipsis. The <em>cx</em> and <em>cy</em> is for the circular X and circular Y co-ordinates. For perfect circles, we only need a radius and that’s what <em>r</em> stands for. In the case for ellipsis, we need double radius for the X and Y circle co-ordinates which are <em>rx</em> and <em>ry</em>.</p>
<p>Getting on with shapes, rectangle is a 4-angled shape and here’s how to go about it</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>royalblue<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<figure>
<svg>
<rect width="400" height="200" fill="royalblue"></rect>
</svg>
</figure>
<p>The rectangle <code>rect</code> uses height and width attributes to define its shape like regular HTML elements. If you haven’t known the use of <code>fill</code> all along, it’s used to fill the vector graphic with a color.</p>
<p>To produce a curvy rectangle the <em>x</em>, <em>y</em>, <em>rx</em> and <em>ry</em> values should also be set</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">rx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>40<span class="token punctuation">"</span></span> <span class="token attr-name">ry</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>salmon<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<figure>
<svg>
<rect x="10" y="10" rx="40" ry="20" width="200" height="100" fill="salmon"></rect>
</svg>
</figure>
<p>With a little transform, we could make a <strong>kite</strong></p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tomato<span class="token punctuation">"</span></span> <span class="token attr-name">transform</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rotate(-45,100,100)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<figure>
<svg>
<rect x="50" y="10" width="100" height="100" fill="tomato" transform="rotate(-45,100,100)"></rect>
</svg>
</figure>
<p>SVG also allows search engines index text in its graphics. To write such texts, we use the <code>text</code> element.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span><span class="token property">font-size</span><span class="token punctuation">:</span>15px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Little Caesars have the best pizzas<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<figure>
<svg>
<text x="0" y="20" fill="black" style="font-weight:bold;font-size:15px;">Little Caesars have the best pizzas</text>
</svg>
</figure>
<p>And right there, I introduced something seemingly new which was the use of CSS on <code>style</code> attributes. You can also use <em>classes</em> or <em>id</em> like you’ll do with other HTML elements. An example of a style made for SVG may be as shown:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.icon</span><span class="token punctuation">{</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span><br /> <span class="token property">fill</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span><br /> <span class="token property">stroke</span><span class="token punctuation">:</span> #aaa<span class="token punctuation">;</span><br /> <span class="token property">stroke-width</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>You can also create Polygons and more complex shapes with SVG. The <em>polygon</em> element is really an interesting one to explore. For other complex shapes, we need to use <code>path</code> element to draw their co-ordinates. This will be done in the next article of my SVG series. If SVG is incapable of handling the kind of pixel based image you want, then you may also give HTML5 canvas a try.</p>
<p>The <a href="http://svgpocketguide.com/book">SVG pocket guide</a> is very handy when learning SVG:</p>
Relative and Absolute Thinkers2015-02-10T00:00:00Zhttps://www.josephrex.me/relative-and-absolute-thinkers/<p>The way we think plays a great impact on how we live our lives and relate with people around us. This article may seem like it’s going down the path of one of the internet articles on temperament.</p>
<p>The way we think plays a great impact on how we live our lives and relate with people around us. This article may seem like it’s going down the path of one of the internet articles on temperament.</p>
<p>Temperament is involved whenever or wherever there is a talk on human thinking as it has to do with individual personalities based on Wikipedia. However, I promise this article is not totally going down that path. I’ve come across different types of temperament from different sources. I mostly think of this 5 as the major genuine temperament types</p>
<ul>
<li>Melancholy</li>
<li>Phlegmatic</li>
<li>Choleric</li>
<li>Sanguine</li>
<li>Supine</li>
</ul>
<p>To read more on them, I recommend <a href="http://fivetemperaments.weebly.com/">this article</a>. I have a melancholy/sanguine temperament and so do many other people as usually we are made of about two of the temperaments.</p>
<p>Relative and Absolute thinkers may fall under any of the temperaments listed so this makes this topic a different perspective of the human thinking.</p>
<h2 id="relative-thinkers" tabindex="-1">Relative Thinkers</h2>
<p>Relative thinkers are common. A lot of people I come across daily are relative thinkers but they are totally unaware of it. A relative thinker is someone who lives based on things he has been brought up with. He/She keeps and believes in the principles giving to them without a second thought. There is hardly any form of skeptism with a relative thinker. Their thoughts are relative to the things they’ve heard. In the long run, some of them end up being so gullible.</p>
<h2 id="absolute-thinkers" tabindex="-1">Absolute Thinkers</h2>
<p>Absolute thinkers are mostly scientists by nature even if their field of nature has nothing to do with science. They believe every thing that has not been proven should be taken hypothetically rather than theoratically. They are the most skeptical people. Some absolute thinkers just doubt things without trying to see if there are ways those things can be possible, while others are the curious trying to decipher things and understand why exactly things work the way they do in order to have a reason for believing in the things they believe in.</p>
<p>A good instance is a religious point of view. Anyone in any religion is born to hear things like:</p>
<blockquote>
<p>There is a God, God created us</p>
</blockquote>
<p>A relative thinker believes this without any doubt. They follow all the steps their parents had thought them to being good believers of the religion because it is what inculcated in them. On the other hand, an absolute thinker may and may not believe in the religion he was brought up in. Every absolute thinker take their time to come out of their regular thoughts and see a reason to do whatever they do. For an absolute thinker that had chosen not to believe in the religion they were bread with, it is either they found that religion not to be worth the time because everything they know about it seems ingenuine. Another category of people that may not believe in religion are the ones who never try seeking a reason to believe and remain skeptical.</p>
<p>An absolute thinker that believes in a religion has spent time considering why this religion exists, how it came about, what may make it worth believing. The illustration with religion does not mean this has to do with religion and this article is not meant to also be one of the argumentative religious posts. I am Christian and I believe in God and this is because I took my time to see reasons to because I’m an absolute thinker. At some point in my life, I stopped believing in any religion and I just lived life even with the fact that I was born in a Christian home. Now, I’m a christian because I want to be and I have reasons to be.</p>
<p>In the technology field I find myself as well. If you keep doing the things that the regular software engineers do or whoever they are in your field, then there is very little for you to discover about yourself, your career, and life as a whole. Just like temperaments, this things may be so much of who we are and you may find it uneasy to change from one to the other.</p>
<p>I really believe the inventors we know are absolute thinkers because they believed in something that didn’t already exists. <a href="https://en.wikipedia.org/wiki/Steve_Jobs">Steve Jobs</a> is a great example of an absolute thinking inventor.</p>
A grid framework from Susy Part 12015-02-06T00:00:00Zhttps://www.josephrex.me/a-grid-framework-from-susy/<p><a href="http://susy.oddbird.net/">Susy</a> is a great grid framework and something I really love about it is the idea of grid on demand rather than having to use frameworks just as Chris Coyier quoted:</p>
<p><a href="http://susy.oddbird.net/">Susy</a> is a great grid framework and something I really love about it is the idea of grid on demand rather than having to use frameworks just as Chris Coyier quoted:</p>
<blockquote>
<p>I like the idea of grids-on-demand, rather than a strict framework.</p>
</blockquote>
<p>Susy is really broad and I haven’t explored half of its awesomeness. However, the very basic part in which I’ve played around is what my demonstration will be based on.</p>
<p>We really don’t want third-party frameworks for grids because we think it is much load to be loaded over HTTP request. This is why we have chosen Susy. A very simple susy setting is:</p>
<pre class="language-scss"><code class="language-scss"><span class="token property"><span class="token variable">$susy</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token property">columns</span><span class="token punctuation">:</span> 12<span class="token punctuation">,</span> <span class="token property">gutters</span><span class="token punctuation">:</span> 1 <span class="token operator">/</span> 4<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>With this set, we can use the container and span mixins. container(100%) on the parent element i.e row in bootstrap terms. and the span(0%) where span is the percentage out of 100 for a grid to be fit within the 12 column grid.</p>
<p>Using the <a href="https://amcss.github.io/">Attribute Modular CSS</a>, we can create a little framework to use within our apps having grids from column 1 to 12 represent with a data-grid attribute. I’ve chosen to use data attributes for validation purposes. If you are indifferent about validation, you can adopt some of the primary styles from AMCSS.</p>
<p>AMCSS has a grid framework from flexbox where they used am-Grid where fractions were used to derive grid values. In order to stick with the regular convention of numbers from 1 to 12, the little framework uses 1 to 12 for its grids. To achieve this, it takes only 4 lines of code in your Sass file and you’re done. Here it is:</p>
<pre class="language-scss"><code class="language-scss"><span class="token keyword">@for</span> <span class="token variable">$i</span> <span class="token keyword">from</span> 1 <span class="token keyword">through</span> <span class="token selector">12 </span><span class="token punctuation">{</span><br /> <span class="token selector">[data-grid="<span class="token variable">#{$i}</span>"]</span><span class="token punctuation">{</span><br /> <span class="token keyword">@include</span> <span class="token function">span</span><span class="token punctuation">(</span> 100% <span class="token operator">*</span> <span class="token punctuation">(</span> <span class="token variable">$i</span> <span class="token operator">/</span> 12% <span class="token punctuation">)</span> <span class="token operator">-</span> 2% <span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>With that set, we can use grids like so</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">data-grid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">data-grid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">data-grid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">data-grid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">data-grid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">data-grid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
Captain Blogger2015-02-03T00:00:00Zhttps://www.josephrex.me/captain-blogger/<p>Someone once told me to have a purpose for everything I do. I believe that even out of our subconscious, everything we do as humans is for a purpose. <a href="http://www.brainyquote.com/quotes/authors/m/marla_gibbs.html">Marla Gibbs</a> quotes that:</p>
<p>Someone once told me to have a purpose for everything I do. I believe that even out of our subconscious, everything we do as humans is for a purpose. <a href="http://www.brainyquote.com/quotes/authors/m/marla_gibbs.html">Marla Gibbs</a> quotes that:</p>
<blockquote>
<p>I truly believe that everything that we do and everyone that we meet is put in our path for a purpose. There are no accidents; we’re all teachers - if we’re willing to pay attention to the lessons we learn, trust our positive instincts and not be afraid to take risks or wait for some miracle to come knocking at our door.<br />
~ Marla Gibbs</p>
</blockquote>
<p>I started blogging in 2011 because of my passion for technologies. My first blog (<a href="http://rexcorpcyber.net/">rexcorpcyber.net</a>) was about offensive cyber security because I was a skiddie with a unidirectional thinking. I thought being a hacker was about breaking into things and I chose the dark path. With time, I found a need to acquire more skills to achieve complex intrusions and then I picked up books on algorithms and programming which in turn gave me a redirection.</p>
<p>I gained a partial online presence by blogging on how to do things. At this time, I only saw blogging as a thing to do because I enjoyed it. I had no ads at all on the blog because most ad sellers wouldn’t give a blog with illegal content a chance to publish ads for them. What I did with some other amateur bloggers was to feature on their blogs by re-writing what has already been written on my blog. They did the same with me and even as we pursued a good SEO, we never knew we were ruining our SEO reputation by having the same content across multiple sites. I’d thought if I could have another blogger come and reblog his posts on my blog, then for the bigger bloggers that wouldn’t do such, I could just copy their blog posts into my site. Plagiarism became my thing.</p>
<p>I started writing for <a href="http://resources.infosecinstitute.com/">infosec institute</a> and part of the agreement stated:</p>
<blockquote></blockquote>
<ul>
<li>Plagiarism is strictly forbidden</li>
<li>Do not repost your posts from here to your personal blogs until after month</li>
</ul>
<p>It was until then I could take some time to reason that it was totally useless to have one exactly same content on multiple parts of the web. Even if I had written a featured post for another blog or for a company, the best I can do is reference is with a link and give proper attribution where due. Also, I understood copyright policies and what the creative commons license was about. This made me abandon my old ship (blog). I closed down <a href="http://rexcorpcyber.net/">rexcorpcyber.net</a> and ended the blogging part of my life. At this point, I’ve put my computing into better use by building secure software and applications.</p>
<p>About 8 months later, I became what you call a full-time software engineer and it has been a part of me to surf the web always and find ways I can improve myself as it is till date. Then I came across <a href="http://www.twitter.com/JoergM">Joerg Mueller</a>’s blog post on <a href="http://www.joergm.com/2010/01/why-all-programmers-should-blog/">Why all programmers should blog</a>. That gave me a 20% conviction to pick up my old blogging habits again. My skeptical nature didn’t make me totally convinced with just that. It was until I started watching the Star Trek series again in 2014 and I noticed captain Kirk had his log where he logged his experiences I realized how important (b)logs are. If you saw Star Trek then this sounds familiar</p>
<blockquote>
<p>Captain’s log, stardate 41153.7. Our destination is planet Deneb IV</p>
</blockquote>
<p>James Kirk kept log of his experiences and destinations as a Captain of the Enterprise. Now I’m a captain of my own software development adventure and I think it is essential that I keep logs as well. Blog was coined from WebLog. Our technology age provides the internet for us to share our logs with everyone and that’s just what most blogs are about.</p>
<p>I’ll point out some major reasons why I blog today.</p>
<ul>
<li>To keep a record of what I’ve done and how I successfully implemented something programmatically</li>
<li>To help others who may have the same problem find an easy solution</li>
<li>To keep myself busy with something interesting</li>
</ul>
<p>Keeping records from my first point does not include bookmarking links as blog posts. <a href="http://twitter.com/shanselman">Scott Hanselman</a> pointed this in his blog post about <a href="http://www.hanselman.com/blog/BlogInteresting32WaysToKeepYourBlogFromSucking.aspx">keeping your blog from sucking</a>. I learnt from that post that if I come across a post or web page I like, I should make use of <a href="http://delicious.com/">delicious</a> and make my blog posts rather on interesting things which I’ll call <strong>heroin content</strong>.</p>
<p>I started this blog on WordPress because it is a very easy platform for blogging but this year I moved it to Jekyll. It doesn’t matter what platform you may be on, blogging is one essential part of you if you’re exploring anything at all (not just software development).</p>
<p>To find more useful information on becoming a better blogger. Some of the great people in the Software Industry have dropped some articles you’ll find useful.</p>
<ul>
<li><a href="http://www.hanselman.com/blog/BlogInteresting32WaysToKeepYourBlogFromSucking.aspx">Scott Hanselman’s keep your blog from sucking</a></li>
<li><a href="http://blog.codinghorror.com/how-to-achieve-ultimate-blog-success-in-one-easy-step/">Achieve ultimate blog success by Jeff Atwood</a></li>
</ul>
<p>John Sonmez is presently taking an email course on blogging which can be found on <a href="http://devcareerboost.com/blog-course/">http://devcareerboost.com/blog-course/</a> . I’ve been following up with it and it has been of great use to me. Make sure to check out his blog: <a href="http://simpleprogrammer.com/">http://simpleprogrammer.com</a> as he also has various posts on how to become a better software developer.</p>
My failed LSB steganography algorithm2015-01-31T00:00:00Zhttps://www.josephrex.me/my-failed-lsb-steganography/<p>Last month (December 2014), I started developing a new GUI steganography software after building a <a href="https://github.com/josephrexme/stegman">simple steganography tool</a> for my <a href="http://resources.infosecinstitute.com/steganalysis-x-ray-vision-hidden-data/">post at Infosec Institue</a>. The simple tool (stegman) used a really simple approach that can be thought of and implemented by anyone in few minutes.</p>
<p>Last month (December 2014), I started developing a new GUI steganography software after building a <a href="https://github.com/josephrexme/stegman">simple steganography tool</a> for my <a href="http://resources.infosecinstitute.com/steganalysis-x-ray-vision-hidden-data/">post at Infosec Institue</a>. The simple tool (stegman) used a really simple approach that can be thought of and implemented by anyone in few minutes.</p>
<figure class="figure--fullwidth">
<img src="https://res.cloudinary.com/strich/image/upload/v1497699088/failed-stego_ljqwy6.jpg" class="image" alt="stego girl" />
</figure>
<p>Image exif data is stored in about the first 30 hex values of the image hexadecimal data. The number may not be accurate enough but the point remains exif data is stored at the top of the image at it should be kept untampered with to retain a proper and valid image format. The software appends data to the end of image files.</p>
<p>From my analysis as done on the infosec <a href="http://resources.infosecinstitute.com/steganalysis-x-ray-vision-hidden-data/">article</a>, most JPEG file formats have a hexadecimal tail of <code>0xFFD9</code> and PNG images have <code>0x426082</code>. I couldn’t play around with GIF or BMP as there was inconsistency with the hexadecimal structure of most of them I had examined. The tool had a little function to grab hexadecimal values with the <a href="https://docs.python.org/2/library/binascii.html">binascii</a> module:</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">import</span> sys<span class="token punctuation">,</span> re<span class="token punctuation">,</span> binascii<span class="token punctuation">,</span> string<br /><span class="token keyword">def</span> <span class="token function">gethex</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> f <span class="token operator">=</span> <span class="token builtin">open</span><span class="token punctuation">(</span>image<span class="token punctuation">,</span> <span class="token string">'rb'</span><span class="token punctuation">)</span><br /> data <span class="token operator">=</span> f<span class="token punctuation">.</span>read<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> f<span class="token punctuation">.</span>close<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> hexcode <span class="token operator">=</span> binascii<span class="token punctuation">.</span>hexlify<span class="token punctuation">(</span>data<span class="token punctuation">)</span><br /> <span class="token keyword">return</span> hexcode</code></pre>
<p>Every steganography tool performs two main functions which are <strong>embed</strong> and <strong>extract</strong>. Before file is embeded, it checks to see if there is any extra data after the usual JPEG or PNG tail hex values</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">def</span> <span class="token function">extradatacheck</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token builtin">type</span><span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token keyword">if</span> <span class="token builtin">type</span> <span class="token operator">==</span> <span class="token string">'png'</span><span class="token punctuation">:</span><br /> pattern <span class="token operator">=</span> <span class="token string">r'(?<=426082)(.*)'</span><br /> <span class="token keyword">elif</span> <span class="token builtin">type</span> <span class="token operator">==</span> <span class="token string">'jpg'</span><span class="token punctuation">:</span><br /> pattern <span class="token operator">==</span> <span class="token string">r'(?<=FFD9)(.*)'</span><br /> match <span class="token operator">=</span> re<span class="token punctuation">.</span>search<span class="token punctuation">(</span>pattern<span class="token punctuation">,</span> data<span class="token punctuation">)</span><br /> <span class="token keyword">if</span> match<span class="token punctuation">:</span><br /> <span class="token keyword">return</span> match<span class="token punctuation">.</span>group<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><br /> <span class="token keyword">else</span><span class="token punctuation">:</span><br /> false</code></pre>
<p>The embed function</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">def</span> <span class="token function">embed</span><span class="token punctuation">(</span>embedFile<span class="token punctuation">,</span> coverFile<span class="token punctuation">,</span> stegFile<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> filetype <span class="token operator">=</span> coverFile<span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">:</span><span class="token punctuation">]</span><br /> stegtype <span class="token operator">=</span> stegFile<span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">:</span><span class="token punctuation">]</span><br /> <span class="token keyword">if</span> filetype <span class="token operator">!=</span> <span class="token string">'png'</span> <span class="token keyword">and</span> filetype <span class="token operator">!=</span> <span class="token string">'jpg'</span><span class="token punctuation">:</span><br /> <span class="token keyword">print</span> <span class="token string">'Invalid format'</span><br /> <span class="token keyword">elif</span> filetype <span class="token operator">!=</span> stegtype<span class="token punctuation">:</span><br /> <span class="token keyword">print</span> <span class="token string">'Output file has to be in the same format as cover image (%s)'</span> <span class="token operator">%</span> string<span class="token punctuation">.</span>swapcase<span class="token punctuation">(</span>filetype<span class="token punctuation">)</span><br /> <span class="token keyword">else</span><span class="token punctuation">:</span><br /> data <span class="token operator">=</span> <span class="token builtin">open</span><span class="token punctuation">(</span>embedFile<span class="token punctuation">,</span> <span class="token string">'r'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>read<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> info <span class="token operator">=</span> gethex<span class="token punctuation">(</span>coverFile<span class="token punctuation">)</span><br /> <span class="token keyword">if</span> extradatacheck<span class="token punctuation">(</span>info<span class="token punctuation">,</span> filetype<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token keyword">print</span> <span class="token string">'File already contains embedded data'</span><br /> <span class="token keyword">else</span><span class="token punctuation">:</span><br /> info <span class="token operator">+=</span> data<span class="token punctuation">.</span>encode<span class="token punctuation">(</span><span class="token string">'hex'</span><span class="token punctuation">)</span><br /> f <span class="token operator">=</span> <span class="token builtin">open</span><span class="token punctuation">(</span>stegFile<span class="token punctuation">,</span> <span class="token string">'w'</span><span class="token punctuation">)</span><br /> f<span class="token punctuation">.</span>write<span class="token punctuation">(</span>binascii<span class="token punctuation">.</span>unhexlify<span class="token punctuation">(</span>info<span class="token punctuation">)</span><span class="token punctuation">)</span><br /> f<span class="token punctuation">.</span>close<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> <span class="token keyword">print</span> <span class="token string">'Storing data to'</span><span class="token punctuation">,</span> stegFile</code></pre>
<p>The function ends up converting the manipulated hex back to ASCII and writes to the new output file. The extract function performs the same check for appended data after regular tails and converts found data to ASCII if found</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">def</span> <span class="token function">extract</span><span class="token punctuation">(</span>stegFile<span class="token punctuation">,</span> outFile<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> filetype <span class="token operator">=</span> stegFile<span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">:</span><span class="token punctuation">]</span><br /> data <span class="token operator">=</span> gethex<span class="token punctuation">(</span>stegFile<span class="token punctuation">)</span><br /> <span class="token keyword">if</span> extradatacheck<span class="token punctuation">(</span>data<span class="token punctuation">,</span> filetype<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> store <span class="token operator">=</span> <span class="token builtin">open</span><span class="token punctuation">(</span>outFile<span class="token punctuation">,</span> <span class="token string">'w'</span><span class="token punctuation">)</span><br /> store<span class="token punctuation">.</span>write<span class="token punctuation">(</span> binascii<span class="token punctuation">.</span>unhexlify<span class="token punctuation">(</span>extradatacheck<span class="token punctuation">(</span>data<span class="token punctuation">,</span> filetype<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><br /> store<span class="token punctuation">.</span>close<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> <span class="token keyword">print</span> <span class="token string">'Extracted data stored to'</span><span class="token punctuation">,</span> outFile<br /> <span class="token keyword">else</span><span class="token punctuation">:</span><br /> <span class="token keyword">print</span> <span class="token string">'File has no embedded data in it'</span></code></pre>
<p>The program achieved its objective which is the Steganography process but the sophistication level was 10%. Not good enough I thought. Oh! It wasn’t just me, <a href="https://twitter.com/Daniel_Lerch">Daniel Lerch</a> thought the same too</p>
<div style="--mx:auto;--my:2rem;--p:2rem;--w:min(400px, 80%);--bg:rgb(100 100 100/.06);--roundness:.5rem;">
<div style="--d:flex;--justify_content:space-between;">
<div style="--d:flex;--gap:1rem;">
<div>
<img src="https://pbs.twimg.com/profile_images/1626700115606925313/gQiw7YvS_normal.jpg" class="no-zoom" width="48" height="48" alt="" style="--roundness:50%;" />
</div>
<div>
<strong>Daniel Lerch</strong>
<div style="--font_sz:1.4rem;--opacity:.7">@Daniel_Lerch</div>
</div>
</div>
</div>
<div style="--py:1.5rem;--word_break:break-word;">
<p><a href="https://twitter.com/joerex101">@joerex101</a> Sorry but I'm looking for something more sophisticated :)</p>
</div>
<time datetime="2014-12-10T20:27:48.000+00:00" style="--d:block;--pb:1rem;--font_sz:1.4rem;--opacity:.7;">Dec 10, 2014, 8:27 PM</time>
<div style="--d:flex;--justify_content:space-between;--border_t: solid thin var(--link-color);--pt:1rem;--font_sz:1.4rem;">
<a rel="noreferrer" target="_blank" href="https://twitter.com/Daniel_Lerch/status/542777726491324416">Read on twitter</a>
<div style="--py:.4rem">
<div>0 likes, 0 retweets</div>
</div>
</div>
</div>
<hr />
<p>I explored <a href="http://www.twitter.com/oni_49">Oni49</a>’s <a href="https://github.com/oni49/stegoBlue">stegoBlue</a> and created a <a href="https://github.com/bl4ckdu5t/stegoBlue">fork</a> to understand how it worked and see how I could derive a new implementation from it. Took a while but I later found how he used the <a href="http://www.pythonware.com/products/pil/">PIL (Python Imaging Library)</a> to list image data in RGB tuples. StegoBlue is a manipulation of the blue pixels in a pixel list.</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">from</span> PIL <span class="token keyword">import</span> Image<br />img <span class="token operator">=</span> Image<span class="token punctuation">.</span><span class="token builtin">open</span><span class="token punctuation">(</span><span class="token string">'cool.bmp'</span><span class="token punctuation">)</span><br />pixelList <span class="token operator">=</span> <span class="token builtin">list</span><span class="token punctuation">(</span>img<span class="token punctuation">.</span>getdata<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>
<p>The image data in RGB tuples were so much in the list but I managed to grab a few from the bottom to show what the data looked like.</p>
<pre class="language-py"><code class="language-py"><span class="token punctuation">[</span><span class="token punctuation">(</span><span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">26</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">26</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">26</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">26</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">26</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">26</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">33</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">33</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">26</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">26</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">26</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">26</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">]</span></code></pre>
<p>That’s just about 5% of the whole data from a 5M BMP image. I was digging his approach even though it breaks sometimes. I tried with JPGs and PNGs and it passed with some of the files that were tested.</p>
<h2 id="my-new-algorithm" tabindex="-1">My New Algorithm</h2>
<pre class="language-py"><code class="language-py"><span class="token comment">#!/usr/bin/env python</span><br /><span class="token keyword">import</span> binascii<span class="token punctuation">,</span> os<span class="token punctuation">,</span> base64<span class="token punctuation">,</span> gnupg<span class="token punctuation">,</span> hashlib<br /><span class="token keyword">from</span> Crypto<span class="token punctuation">.</span>Cipher <span class="token keyword">import</span> AES<br /><span class="token keyword">from</span> Crypto <span class="token keyword">import</span> Random<br /><br /><span class="token keyword">def</span> <span class="token function">embed</span><span class="token punctuation">(</span><span class="token builtin">file</span><span class="token punctuation">,</span> text<span class="token punctuation">,</span> key<span class="token punctuation">,</span> output <span class="token operator">=</span> <span class="token string">'output.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token comment">#==== Using GPG ====</span><br /> gpg <span class="token operator">=</span> gnupg<span class="token punctuation">.</span>GPG<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> cipher <span class="token operator">=</span> gpg<span class="token punctuation">.</span>encrypt<span class="token punctuation">(</span>text<span class="token punctuation">,</span> recipients<span class="token operator">=</span><span class="token boolean">None</span><span class="token punctuation">,</span> symmetric<span class="token operator">=</span><span class="token string">'AES256'</span><span class="token punctuation">,</span> passphrase<span class="token operator">=</span>key<span class="token punctuation">,</span> armor<span class="token operator">=</span><span class="token boolean">True</span><span class="token punctuation">)</span><br /> ctext <span class="token operator">=</span> hashlib<span class="token punctuation">.</span>md5<span class="token punctuation">(</span> <span class="token builtin">str</span><span class="token punctuation">(</span>cipher<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>hexdigest<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> <span class="token comment">#==== Using AES ====</span><br /> <span class="token comment">#iv = Random.new().read(AES.block_size)</span><br /> <span class="token comment">#cipher = AES.new(key, AES.MODE_CFB, iv)</span><br /> <span class="token comment">#ctext = hashlib.md5( iv + cipher.encrypt(text) ).hexdigest()</span><br /><br /> ctexthex <span class="token operator">=</span> binascii<span class="token punctuation">.</span>hexlify<span class="token punctuation">(</span> ctext <span class="token punctuation">)</span><br /> ctextbin <span class="token operator">=</span> <span class="token builtin">bin</span><span class="token punctuation">(</span> <span class="token builtin">int</span><span class="token punctuation">(</span>ctexthex<span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">:</span><span class="token punctuation">]</span><br /> <span class="token keyword">print</span> <span class="token builtin">len</span><span class="token punctuation">(</span>ctextbin<span class="token punctuation">)</span><br /> <span class="token keyword">try</span><span class="token punctuation">:</span><br /> f <span class="token operator">=</span> <span class="token builtin">open</span><span class="token punctuation">(</span><span class="token builtin">file</span><span class="token punctuation">,</span> <span class="token string">'r'</span><span class="token punctuation">)</span><br /> filebin <span class="token operator">=</span> f<span class="token punctuation">.</span>read<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> hexdata <span class="token operator">=</span> binascii<span class="token punctuation">.</span>hexlify<span class="token punctuation">(</span>filebin<span class="token punctuation">)</span><br /> <span class="token comment"># tuples of each byte in hex</span><br /> bytesTuple <span class="token operator">=</span> <span class="token builtin">zip</span><span class="token punctuation">(</span>hexdata<span class="token punctuation">[</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> hexdata<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><br /> <span class="token comment"># list of every byte in hexadecimal</span><br /> <span class="token builtin">bytes</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">''</span><span class="token punctuation">.</span>join<span class="token punctuation">(</span><span class="token builtin">tuple</span><span class="token punctuation">)</span> <span class="token keyword">for</span> <span class="token builtin">tuple</span> <span class="token keyword">in</span> bytesTuple<span class="token punctuation">]</span><br /> <span class="token comment"># split bytes into two keeping first segment untouched to avoid metadata tampering</span><br /> byteDivisor <span class="token operator">=</span> <span class="token builtin">len</span><span class="token punctuation">(</span><span class="token builtin">bytes</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><br /> byteSegment1<span class="token punctuation">,</span> byteSegment2 <span class="token operator">=</span> <span class="token builtin">bytes</span><span class="token punctuation">[</span><span class="token punctuation">:</span>byteDivisor<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token builtin">bytes</span><span class="token punctuation">[</span>byteDivisor<span class="token punctuation">:</span><span class="token punctuation">]</span><br /> <span class="token keyword">print</span> <span class="token string">'Segment 2 length: '</span><span class="token operator">+</span> <span class="token builtin">str</span><span class="token punctuation">(</span><span class="token builtin">len</span><span class="token punctuation">(</span>byteSegment2<span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token keyword">for</span> i <span class="token keyword">in</span> <span class="token builtin">range</span><span class="token punctuation">(</span> <span class="token builtin">len</span><span class="token punctuation">(</span>ctextbin<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token comment"># modifying the LSB</span><br /> binary <span class="token operator">=</span> <span class="token builtin">bin</span><span class="token punctuation">(</span><span class="token builtin">int</span><span class="token punctuation">(</span> byteSegment2<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">:</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> ctextbin<span class="token punctuation">[</span>i<span class="token punctuation">]</span><br /> hexback <span class="token operator">=</span> <span class="token builtin">hex</span><span class="token punctuation">(</span><span class="token builtin">int</span><span class="token punctuation">(</span>binary<span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">:</span><span class="token punctuation">]</span> <span class="token keyword">if</span> <span class="token builtin">len</span><span class="token punctuation">(</span><span class="token builtin">hex</span><span class="token punctuation">(</span><span class="token builtin">int</span><span class="token punctuation">(</span>binary<span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">:</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token number">2</span> <span class="token keyword">else</span> <span class="token string">'0'</span> <span class="token operator">+</span> <span class="token builtin">hex</span><span class="token punctuation">(</span><span class="token builtin">int</span><span class="token punctuation">(</span>binary<span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">:</span><span class="token punctuation">]</span><br /> byteSegment2<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> hexback<br /> <span class="token comment"># rejoin both byte segments</span><br /> <span class="token builtin">bytes</span> <span class="token operator">=</span> byteSegment1 <span class="token operator">+</span> byteSegment2<br /> <span class="token comment"># converting bytes list back to string</span><br /> mergehex <span class="token operator">=</span> <span class="token string">''</span><br /> <span class="token keyword">for</span> byte <span class="token keyword">in</span> <span class="token builtin">bytes</span><span class="token punctuation">:</span><br /> mergehex <span class="token operator">+=</span> byte<br /> rawbin <span class="token operator">=</span> binascii<span class="token punctuation">.</span>unhexlify<span class="token punctuation">(</span>mergehex<span class="token punctuation">)</span><br /> outdata <span class="token operator">=</span> <span class="token builtin">open</span><span class="token punctuation">(</span>output<span class="token punctuation">,</span> <span class="token string">'w'</span><span class="token punctuation">)</span><br /> outdata<span class="token punctuation">.</span>write<span class="token punctuation">(</span>rawbin<span class="token punctuation">)</span><br /> <span class="token keyword">except</span> IOError<span class="token punctuation">:</span><br /> <span class="token keyword">print</span> <span class="token string">"Failed to locate file"</span><br /><br /><span class="token keyword">def</span> <span class="token function">extract</span><span class="token punctuation">(</span><span class="token builtin">file</span><span class="token punctuation">,</span> key<span class="token punctuation">,</span> output <span class="token operator">=</span> <span class="token string">'output.txt'</span><span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token keyword">try</span><span class="token punctuation">:</span><br /> f <span class="token operator">=</span> <span class="token builtin">open</span><span class="token punctuation">(</span><span class="token builtin">file</span><span class="token punctuation">,</span> <span class="token string">'r'</span><span class="token punctuation">)</span><br /> filebin <span class="token operator">=</span> f<span class="token punctuation">.</span>read<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> hexdata <span class="token operator">=</span> binascii<span class="token punctuation">.</span>hexlify<span class="token punctuation">(</span>filebin<span class="token punctuation">)</span><br /> bytesTuple <span class="token operator">=</span> <span class="token builtin">zip</span><span class="token punctuation">(</span>hexdata<span class="token punctuation">[</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> hexdata<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><br /> <span class="token builtin">bytes</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">''</span><span class="token punctuation">.</span>join<span class="token punctuation">(</span><span class="token builtin">tuple</span><span class="token punctuation">)</span> <span class="token keyword">for</span> <span class="token builtin">tuple</span> <span class="token keyword">in</span> bytesTuple<span class="token punctuation">]</span><br /> byteDivisor <span class="token operator">=</span> <span class="token builtin">len</span><span class="token punctuation">(</span><span class="token builtin">bytes</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><br /> byteSegment1<span class="token punctuation">,</span> byteSegment2 <span class="token operator">=</span> <span class="token builtin">bytes</span><span class="token punctuation">[</span><span class="token punctuation">:</span>byteDivisor<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token builtin">bytes</span><span class="token punctuation">[</span>byteDivisor<span class="token punctuation">:</span><span class="token punctuation">]</span><br /> dataBytes <span class="token operator">=</span> byteSegment2<span class="token punctuation">[</span><span class="token punctuation">:</span><span class="token number">32</span><span class="token punctuation">]</span> <span class="token comment"># md5 data occupied 32 chars</span><br /> mergehex <span class="token operator">=</span> <span class="token string">''</span><br /> <span class="token keyword">for</span> byte <span class="token keyword">in</span> dataBytes<span class="token punctuation">:</span><br /> mergehex <span class="token operator">+=</span> byte<br /> f <span class="token operator">=</span> <span class="token builtin">open</span><span class="token punctuation">(</span>output<span class="token punctuation">,</span> <span class="token string">'w'</span><span class="token punctuation">)</span><br /> f<span class="token punctuation">.</span>write<span class="token punctuation">(</span> binascii<span class="token punctuation">.</span>unhexlify<span class="token punctuation">(</span>mergehex<span class="token punctuation">)</span> <span class="token punctuation">)</span><br /> <span class="token keyword">except</span> IOError<span class="token punctuation">:</span><br /> <span class="token keyword">print</span> <span class="token string">'Failed to locate file'</span><br /><br /><br />filename <span class="token operator">=</span> <span class="token builtin">raw_input</span><span class="token punctuation">(</span><span class="token string">"Enter the name of the file:"</span><span class="token punctuation">)</span><br />embed<span class="token punctuation">(</span>filename<span class="token punctuation">,</span> <span class="token string">'some awesome stuff'</span><span class="token punctuation">,</span> <span class="token string">'abcdefghijklmnop'</span><span class="token punctuation">,</span> <span class="token string">'output.png'</span><span class="token punctuation">)</span><br /><span class="token comment">#extract(filename, 'abcdefghijklmnop')</span></code></pre>
<p>What the heck is going on here? I know that’s like bunch of crap but it seemed like a nice idea to me. Let me explain:</p>
<p>I built a GUI already with PyQt4 with hopes that the logic will work just as I’d thought it would. On completion of a functionless nice GUI, I thought it will be nice to create a separate module to handle the logic of the software implementation.</p>
<p>When I wrote about <a href="https://www.josephrex.me/symmetric-encryption-in-python">symmetric encryption in python</a>, I mentioned how I had used AES from the Crypto module to try achieving a symmetric encryption. I might have not been at my best with that module but it didn’t seem to work fine enough for me. I had resorted to the GPG module which stored the characters</p>
<pre><code>some awesome stuff
</code></pre>
<p>with the cover image file as this</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1497699091/stegoBlackhat_rpktki.png" class="image" alt="Steganography input" />
</figure>
<p>The resulting output has had some major pixels tampered with</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1497700190/stegoOutput_ytlekg.png" class="image" alt="Steganography output" />
</figure>
<p>The distortion is from the middle to the bottom only because I splitted the image hex into two to leave the first half containing EXIF data untampered with. The other half whose LSB was modified now produces a malformed image output.</p>
<p>A steganography software is to modify the media file with no obvious changes but I have a modification with a way too obvious change. I’ve had to put this aside for a while to get on with other work. If you have any suggestions to this algorithm, I’ll appreciate them</p>
Riding on jekyll2015-01-02T00:00:00Zhttps://www.josephrex.me/riding-on-jekyll/<p>It’s a new year and I’m to begin with new things. I started <a href="http://josephrex.me">josephrex.me</a> blog in 2014 and it has revived my old blogging habits.
I have been on Wordpress which is nice considering how I get comments plugged into my blog posts without any third-party integration, the awesome jetpack services, the performance plugins, and most of all the easy WYSIWYG editor where I write with ease.</p>
<p>It’s a new year and I’m to begin with new things. I started <a href="http://josephrex.me/">josephrex.me</a> blog in 2014 and it has revived my old blogging habits.
I have been on Wordpress which is nice considering how I get comments plugged into my blog posts without any third-party integration, the awesome jetpack services, the performance plugins, and most of all the easy WYSIWYG editor where I write with ease.</p>
<p>I had a feel of version 4.0.1 before leaving and they had added the distraction-free writing feature. All of this is good but it was too much in a way.</p>
<p>The need for one or two plugins to do their jobs required extra one or more CSS files to be included. At a point, I couldn’t keep track of the assets being loaded. May not seem like something that matters much but it does in that it makes me stay balanced with pagespeed. Besides pagespeed, it is a good user experience to let my weblog load faster for the viewers.</p>
<p>Jekyll is a static site generator and even if it doesn’t offer all that Wordpress had offered, it does have its own advantages. Some of which includes:</p>
<ul>
<li>
<p>Lesser security concerns (because there’s no databases to be hacked)</p>
</li>
<li>
<p>Light-weight</p>
</li>
<li>
<p>Easily Customizable (You don’t need to learn a set of back-end functions as you have to in Wordpress using PHP)</p>
</li>
<li>
<p>Editing right from your own personal text editor or markdown editor without being online. (Then you can push to your github repo later)</p>
</li>
</ul>
<p>All those things are what makes Jekyll awesome for me. I may be missing some things but this are the most prominent things. I develop WordPress templates and I shouldn’t complain about having to write a set of PHP functions for a new theme but being good at something does not necessariy mean you should enjoy doing it if it causes inconveniences to you. To see more benefits of Ruby over Wordpress, I’ll point you at <a href="http://www.sitepoint.com/blogging-wordpress-or-jekyll/">Kitty Giraudel’s article</a>.</p>
<p>I’ve been programming in Ruby lately and I find it interesting to use something that is from the Rubyist community even if it doesn’t really require me to write Ruby code. Migrating from WordPress to Ruby took me just one day. And it was with the aid of an awesome <a href="https://github.com/benbalter/wordpress-to-jekyll-exporter">wordpress-to-jekyll-converter</a> tool. Next challenge I had was having my domain <a href="http://josephrex.me/">josephrex.me</a> point to <a href="http://bl4ckdu5t.github.io/">bl4ckdu5t.github.io</a> where the blog actually lives on github.</p>
<p>I created a CNAME file in the root of my github repository containing the domain name <code>josephrex.me</code> and had to create an A record with my domain registrar (godaddy) using <a href="https://help.github.com/articles/tips-for-configuring-an-a-record-with-your-dns-provider/">a guide from github help</a>. Godaddy provided me with an interface like below to set my new A records pointing to the github IP</p>
<p>Having a TTL of one hour, it took me a while to be able to see a change when a friend on a separate DNS provider that had never visited <a href="http://josephrex.me/">josephrex.me</a> already could already see the change and tell me all the images in your blog posts are missing. Then I waited a little longer to see that myself. Jekyll doesn’t have a fancy image uploader like WordPress does so I had to retrieve all my images from my Wordpress (the converter helped with that). And they are in a wp-contents folder in my jekyll blog to keep the images pointing at a right location.</p>
<p>This is my first blog post on jekyll and I’ve enjoyed it so far. After my present rails project, I will give it a better look.</p>
Specificity wars2014-12-17T00:00:00Zhttps://www.josephrex.me/specificity-wars/<p>When you look through the element styles of your browser web developer tools, you can see how CSS rules override themselves. What is prioritized is mostly based on the specificity level. It’s a usual thing that styles below override the ones above, inline styles override external styles. These are the little things but it gets deeper when we use id selectors around our stylesheets. Ids have high specificity and there are uncalled for as we don’t want unnecessary spikes in our specificity graph. This <a href="http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/" target="_blank">css-wizardry article</a> tells why IDs can be the demons of our stylesheets.</p>
<p>When you look through the element styles of your browser web developer tools, you can see how CSS rules override themselves. What is prioritized is mostly based on the specificity level. It’s a usual thing that styles below override the ones above, inline styles override external styles. These are the little things but it gets deeper when we use id selectors around our stylesheets. Ids have high specificity and there are uncalled for as we don’t want unnecessary spikes in our specificity graph. This <a href="http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/" target="_blank">css-wizardry article</a> tells why IDs can be the demons of our stylesheets.</p>
<p>I seldom use CSS frameworks, but I do know that bootstrap makes use of classes. If you are not taking advantage of many selectors available today, then you can just stick with the type (element) selectors and classes.</p>
<p>I just sounded like IDs were evil. What’s more evil is the <span style="color: #ff0000;">!important</span>. If you’re a beginner or intermediary CSS coder, then there is a big chance you use the !important which is a maximum specificity level and it’s why it usually overrules the other rules (predecessors and successors). Some designers/developers now find themselves in a quandary when told not to make use of !important they have gotten so used to. They ask questions like <em>Then what should I use?</em>, <em>What else can do the job?</em>.</p>
<p>Chained class naming bro! Chained class naming does it like a boss and then you don’t have to worry about doing something wrong. When you have a class like <em>.box</em> that you need to specify more. You can do it by chaining this way.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.box.box.box.box</span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre>
<p>I had only gone on four chains. You could make this as long as you want. I recently had to go about 12 chains long to overrule an existing style on a wordpress child theme I worked on.</p>
<p>The class chaining should always be used in place of !important.</p>
<p>I made this pen to create a specificity war.</p>
<iframe height="450" style="width: 100%;--my:1.5rem;" scrolling="no" title="A specificity test" src="https://codepen.io/josephrexme/embed/preview/PwzPpo?default-tab=result&theme-id=39976" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>
<p>If you look through the stylesheet of the pen you will see I had a 30 chains class selector, an id selector, and a class selector with !important. Well, I know, !important overrules our chained class naming but when we are on a specificity fight with normal class and id selectors, the class chaining will be king. So for no reason should we still use the !important over class chaining except we already have it used in the rules we are overruling. Then the order of precedence will be our win point.</p>
<p><a href="http://twitter.com/csswizardry" target="_blank">Harry Roberts</a> described <a href="http://csswizardry.com/2014/10/the-specificity-graph/" target="_blank">how the specificity graph of your project should be</a>. He spoke of our helper classes that usually tend to carry !important. As much as I avoid the !important, I have it occurring once or twice in my helper classes. Before I ever put specificity to consideration, I’ve always imported my helpers at the bottom of the stylesheet. You can see that of a jekyll project I just worked on here:</p>
<pre class="language-scss"><code class="language-scss">@charset <span class="token string">"utf-8"</span><span class="token punctuation">;</span><br /><br /><span class="token comment">// Our variables</span><br /><span class="token property"><span class="token variable">$base-font-family</span></span><span class="token punctuation">:</span> Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$base-font-size</span></span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$small-font-size</span></span><span class="token punctuation">:</span> <span class="token variable">$base-font-size</span> <span class="token operator">*</span> 0.875<span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$base-line-height</span></span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span><br /><br /><span class="token property"><span class="token variable">$spacing-unit</span></span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span><br /><br /><span class="token property"><span class="token variable">$text-color</span></span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$background-color</span></span><span class="token punctuation">:</span> #fdfdfd<span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$brand-color</span></span><span class="token punctuation">:</span> #2a7ae2<span class="token punctuation">;</span><br /><br /><span class="token property"><span class="token variable">$grey-color</span></span><span class="token punctuation">:</span> #828282<span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$grey-color-light</span></span><span class="token punctuation">:</span> <span class="token function">lighten</span><span class="token punctuation">(</span><span class="token variable">$grey-color</span><span class="token punctuation">,</span> 40%<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$grey-color-dark</span></span><span class="token punctuation">:</span> <span class="token function">darken</span><span class="token punctuation">(</span><span class="token variable">$grey-color</span><span class="token punctuation">,</span> 25%<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$color-darktheme</span></span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$darktheme-outter</span></span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$darktheme-inner</span></span><span class="token punctuation">:</span> #444<span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$border-darktheme</span></span><span class="token punctuation">:</span> #999<span class="token punctuation">;</span><br /><br /><span class="token comment">// Width of the content area</span><br /><span class="token property"><span class="token variable">$content-width</span></span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span><br /><br /><span class="token property"><span class="token variable">$on-palm</span></span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$on-laptop</span></span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span><br /><span class="token property"><span class="token variable">$nav-height</span></span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span><br /><br /><br /><br /><span class="token comment">// Using media queries with like this:</span><br /><span class="token comment">// @include media-query($on-palm) {</span><br /><span class="token comment">// .wrapper {</span><br /><span class="token comment">// padding-right: $spacing-unit / 2;</span><br /><span class="token comment">// padding-left: $spacing-unit / 2;</span><br /><span class="token comment">// }</span><br /><span class="token comment">// }</span><br /><span class="token keyword">@mixin</span> <span class="token function">media-query</span><span class="token punctuation">(</span><span class="token variable">$device</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token variable">$device</span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span><br /> <span class="token keyword">@content</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br /><br /><br /><span class="token keyword">@import</span><br /> <span class="token string">"fonts"</span><span class="token punctuation">,</span><br /> <span class="token string">"h5bp"</span><span class="token punctuation">,</span><br /> <span class="token string">"variables"</span><span class="token punctuation">,</span><br /> <span class="token string">"mixins"</span><span class="token punctuation">,</span><br /> <span class="token string">"base"</span><span class="token punctuation">,</span><br /> <span class="token string">"syntax-highlighting"</span><span class="token punctuation">,</span><br /> <span class="token string">"helpers"</span><br /><span class="token punctuation">;</span></code></pre>
<p>The reason for this as mentioned by Harry is for our specificity graph to be upward trending.</p>
<p>I used the <a href="http://jonassebastianohlsson.com/specificity-graph/" target="_blank">online specificity graph tool</a> to analyze that pen and here’s what it gave:</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1497701559/specifity-graph_avdcml.png" class="image" alt="specifity-graph" />
</figure>
<p>This graph is great and it has worked fine in giving me a graph of bigger projects. There’s a downside to it though. It doesn’t include rules with a !important value in them. I have my codepen demo giving me the selector with !important as the most specific but then the graph has its highest specificity at the end of the stylesheet to be the 30 chained class selector. The other rise in the middle is the id selector.</p>
<p><a href="https://github.com/katiefenn/parker" target="_blank">Parker</a> is a command-line npm package that analyzes CSS and also shows elements with highest specificity.</p>
<h2 id="conclusion" tabindex="-1">Conclusion</h2>
<p>Avoid ID selectors, avoid !important, start with selectors like <code>*</code>, <code>html</code>, and other element selectors that aren’t too specific, then move on to class selectors. If there is a need for class chaining or !important in your helpers, they should be at the bottom. If there is no need for them, the helpers partial of your project should still be at the bottom if you want it overruling other styles by precedence.</p>
Moving from sqlite3 to postgresql database for your rails project2014-12-15T00:00:00Zhttps://www.josephrex.me/moving-from-sqlite3-to-postgresql-database-for-your-rails-project/<p>Rails uses sqlite3 by default on development. If you are not careful enough, you may get so comfortable with sqlite which I did. After a while, there will be a need to push the application to production and at this point, you wouldn’t want sqlite on your web server. I’m using heroku for my app and they stated <a href="https://devcenter.heroku.com/articles/sqlite3" target="_blank">some good reasons not to use sqlite</a>. On heroku, you wouldn’t be able to push your application to production if sqlite3 remains in your Gemfile.</p>
<p>Rails uses sqlite3 by default on development. If you are not careful enough, you may get so comfortable with sqlite which I did. After a while, there will be a need to push the application to production and at this point, you wouldn’t want sqlite on your web server. I’m using heroku for my app and they stated <a href="https://devcenter.heroku.com/articles/sqlite3" target="_blank">some good reasons not to use sqlite</a>. On heroku, you wouldn’t be able to push your application to production if sqlite3 remains in your Gemfile.</p>
<p>If you are starting a fresh project, you can just begin this way:</p>
<pre class="lang:sh decode:true ">~$: rails new myproject -d postgresql</pre>
<p>On an existing project you’ll have to replace modify your Gemfile to replace</p>
<pre class="lang:default decode:true ">gem 'sqlite3'</pre>
<p>with</p>
<pre class="lang:default decode:true ">gem 'pg'</pre>
<p>run</p>
<pre class="lang:default decode:true ">~$: bundle install</pre>
<p>After which you should change your database.yml in config directory. It should look somewhat like this:</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">default</span><span class="token punctuation">:</span> <span class="token important">&default</span><br /> <span class="token key atrule">adapter</span><span class="token punctuation">:</span> postgresql<br /> <span class="token key atrule">pool</span><span class="token punctuation">:</span> <span class="token number">5</span><br /> <span class="token key atrule">timeout</span><span class="token punctuation">:</span> <span class="token number">5000</span><br /><br /><span class="token key atrule">development</span><span class="token punctuation">:</span><br /> <span class="token key atrule"><<</span><span class="token punctuation">:</span> <span class="token important">*default</span><br /> <span class="token key atrule">database</span><span class="token punctuation">:</span> development_db<br /> <span class="token key atrule">username</span><span class="token punctuation">:</span> joe<br /> <span class="token key atrule">password</span><span class="token punctuation">:</span> <span class="token string">'foobar'</span><br /><br /><span class="token comment"># Warning: The database defined as "test" will be erased and</span><br /><span class="token comment"># re-generated from your development database when you run "rake".</span><br /><span class="token comment"># Do not set this db to the same as development or production.</span><br /><span class="token key atrule">test</span><span class="token punctuation">:</span><br /> <span class="token key atrule"><<</span><span class="token punctuation">:</span> <span class="token important">*default</span><br /> <span class="token key atrule">database</span><span class="token punctuation">:</span> test_db<br /> <span class="token key atrule">username</span><span class="token punctuation">:</span> joe<br /> <span class="token key atrule">password</span><span class="token punctuation">:</span> <span class="token string">'foobar'</span><br /><br /><span class="token key atrule">production</span><span class="token punctuation">:</span><br /> <span class="token key atrule"><<</span><span class="token punctuation">:</span> <span class="token important">*default</span><br /> <span class="token key atrule">database</span><span class="token punctuation">:</span> production_db<br /> <span class="token key atrule">username</span><span class="token punctuation">:</span> appname<br /> <span class="token key atrule">password</span><span class="token punctuation">:</span></code></pre>
<p>The adapter has been changed from the default <em>sqlite3</em> to <em>postgresql</em>.</p>
<p>Next you should create this db in postgre with rake</p>
<pre class="lang:default decode:true ">~$:bin/rake db:create</pre>
<p>If you are like me, you should encounter an error at this point. You can’t access psql. This is because the username (joe) is not set as a role in psql. To create one</p>
<pre class="lang:default decode:true ">~$:sudo -u postgres createuser --interactive</pre>
<p>If you’re on psql < 9.3 you may encounter an error with the –interactive switch so it’s best you <a href="https://wiki.postgresql.org/wiki/Apt" target="_blank">try to upgrade</a>.</p>
<p>Now you can create a password for the user that has been created. Log in to psql</p>
<pre class="lang:default decode:true ">~$:sudo -u postgres psql</pre>
<p>and alter the role of the user created with:</p>
<pre class="lang:default decode:true">ALTER ROLE joe WITH PASSWORD 'secret';</pre>
<p>If for any reasons this fails, you should modify your pg_hba.conf file to use md5.</p>
Using Multiple tables for authentication in laravel2014-12-13T00:00:00Zhttps://www.josephrex.me/using-multiple-tables-for-authentication-in-laravel/<p>Laravel provides a good authentication handler with the Auth class. To authenticate a user attempting to log in, we use the attempt method like so:</p>
<p>Laravel provides a good authentication handler with the Auth class. To authenticate a user attempting to log in, we use the attempt method like so:</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token class-name static-context">Auth</span><span class="token operator">::</span><span class="token function">attempt</span><span class="token punctuation">(</span><span class="token keyword">array</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'email'</span> <span class="token operator">=></span> <span class="token variable">$email</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'password'</span> <span class="token operator">=></span> <span class="token variable">$password</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /><span class="token punctuation">{</span><br /> <span class="token keyword">return</span> <span class="token class-name static-context">Redirect</span><span class="token operator">::</span><span class="token function">intended</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'dashboard'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token delimiter important">?></span></span></code></pre>
<p>That’s just as it is <a href="http://laravel.com/docs/4.2/security#authenticating-users" target="_blank">in the docs</a>. But this checks against the users table which is fine because most apps have a users table for authentication. I’ve never had a need to build something requiring more tables for authentication but I had someone requesting for a solution to this and I was really interested in getting this to work.</p>
<p>If you don’t already have a <a title="Create a helpers file" href="http://laravel-recipes.com/recipes/50/creating-a-helpers-file" target="_blank">helpers file</a>, create one. I made this neat little facade-style function for you to replace with Auth::attempt.</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token keyword">class</span> <span class="token class-name-definition class-name">Hack</span><span class="token punctuation">{</span><br /> <span class="token comment">/**<br /> * @author Joseph Rex<br /> * @since 12/09/2014<br /> * @param array format: array('database'=>'database_for_query','username'=>'username_or_email','password'=>'password')<br /> * @return bool<br /> */</span><br /> <span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">function</span> <span class="token function-definition function">verify</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$auth</span> <span class="token operator">=</span> <span class="token keyword">array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token variable">$fields</span> <span class="token operator">=</span> <span class="token function">array_keys</span><span class="token punctuation">(</span><span class="token variable">$auth</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token comment">// Now we will use eloquent to immitate this DB::where(email, 'email')</span><br /> <span class="token variable">$model</span> <span class="token operator">=</span> <span class="token function">ucfirst</span><span class="token punctuation">(</span> <span class="token function">strtolower</span><span class="token punctuation">(</span> <span class="token function">substr</span><span class="token punctuation">(</span><span class="token variable">$auth</span><span class="token punctuation">[</span><span class="token variable">$fields</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token variable">$fetch</span> <span class="token operator">=</span> <span class="token variable">$model</span><span class="token operator">::</span><span class="token function">where</span><span class="token punctuation">(</span> <span class="token variable">$fields</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token variable">$auth</span><span class="token punctuation">[</span><span class="token variable">$fields</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">first</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">if</span><span class="token punctuation">(</span> <span class="token punctuation">(</span><span class="token variable">$fetch</span> <span class="token operator">==</span> <span class="token constant">NULL</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token variable">$auth</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token keyword">return</span> <span class="token constant boolean">false</span><span class="token punctuation">;</span><br /> <span class="token keyword">elseif</span><span class="token punctuation">(</span> <span class="token function">crypt</span><span class="token punctuation">(</span><span class="token variable">$auth</span><span class="token punctuation">[</span><span class="token variable">$fields</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token variable">$fetch</span><span class="token operator">-></span><span class="token property">password</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token variable">$fetch</span><span class="token operator">-></span><span class="token property">password</span> <span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token class-name static-context">Session</span><span class="token operator">::</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token variable">$fetch</span><span class="token operator">-></span><span class="token property">id</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> <span class="token constant boolean">true</span><span class="token punctuation">;</span><br /> <span class="token keyword">else</span><span class="token punctuation">:</span><br /> <span class="token keyword">return</span> <span class="token constant boolean">false</span><span class="token punctuation">;</span><br /> <span class="token keyword">endif</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><span class="token delimiter important">?></span></span></code></pre>
<p>The function is self-explanatory. It checks if the user exists in the database using the fields you provide as key for the validation function. If the user exists, it fetches the user details which includes the password and id. This part requires that you should have a model for the table you are validating as it uses eloquent ORM.</p>
<p>The password is checked for validity and if it passes, the pooled id from the database is used to create a session id for the user. It is used like so:</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token class-name static-context">Hack</span><span class="token operator">::</span><span class="token function">verify</span><span class="token punctuation">(</span><span class="token keyword">array</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'database'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'users'</span> <span class="token punctuation">,</span><span class="token string single-quoted-string">'email'</span> <span class="token operator">=></span> <span class="token variable">$email</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'password'</span> <span class="token operator">=></span> <span class="token variable">$password</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /><span class="token punctuation">{</span><br /> <span class="token keyword">return</span> <span class="token class-name static-context">Redirect</span><span class="token operator">::</span><span class="token function">intended</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'dashboard'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token delimiter important">?></span></span></code></pre>
<p>Did I forget to mention? The first argument is the name of the database you want to authenticate, making it more flexible.</p>
Moving from Indented Sass to Scss2014-12-12T00:00:00Zhttps://www.josephrex.me/moving-from-indented-sass-to-scss/<p>As soon as I knew about pre-processors, I wanted to test them so bad then I stumbled upon <a href="http://sass-lang.com" target="_blank">Sass website</a>. Syntactically awesome they said? I totally love anything with awesome attached to it because I feel awesome.</p>
<p>As soon as I knew about pre-processors, I wanted to test them so bad then I stumbled upon <a href="http://sass-lang.com/" target="_blank">Sass website</a>. Syntactically awesome they said? I totally love anything with awesome attached to it because I feel awesome.</p>
<p>I program in python and even though strict indentations may be a pain, that pain has become my honey. I fell in love with the indented Sass <a href="http://sassnotsass.com/" target="_blank">(not SASS)</a>. I love checking out <a href="https://twitter.com/thebabydino" target="_blank">Ana Tudor </a>and Kitty Giraudel’s works. A lot more awesome people like <a href="http://twitter.com/codingdesigner" target="_blank">Mason Wendell</a> who created <a href="http://github.com/Team-Sass/breakpoint" target="_blank">breakpoint </a>(a compass extension I can not do without). All these great people in the community have once used the indented Sass but now, they all write SCSS.</p>
<blockquote>
<p>Breakpoint itself was written in SCSS even though I could use it in Sass</p>
</blockquote>
<p>SCSS is also Sass. If that’s confusing see this <a href="http://www.sitepoint.com/whats-difference-sass-scss/" target="_blank">article by Kitty</a>.</p>
<p>One great advantage of SCSS is that it is so similar to CSS and a CSS document passes as a SCSS document but it doesn’t always work vice-versa. This makes it easy for people that are new to pre-processors to easily deal with it.If it’s so easy, why did I choose the indented style? I wouldn’t make excuses that SCSS hadn’t been in existence when I started writing pre-processors because they were and I wasn’t so early to the party. I only felt indented CSS will be cool. Without braces and semi-colon, my code was shorter, sweeter, and more pleasing to my eye even though regular CSS guys couldn’t figure out what was going on whenever I was styling my websites. You can see the line differences in the header image above</p>
<p>The image shows my text editor while I was switching from Sass to SCSS but it didn’t just happen as easy as it appears there. First I had to change all the files with .sass extension to .scss in my current project and I had that done with this little python script</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">import</span> os<span class="token punctuation">,</span>glob<br /><span class="token keyword">for</span> <span class="token builtin">file</span> <span class="token keyword">in</span> glob<span class="token punctuation">.</span>glob<span class="token punctuation">(</span><span class="token string">"*.sass"</span><span class="token punctuation">)</span><span class="token punctuation">:</span><br /> os<span class="token punctuation">.</span>rename<span class="token punctuation">(</span><span class="token builtin">file</span><span class="token punctuation">,</span> <span class="token builtin">file</span><span class="token punctuation">[</span><span class="token punctuation">:</span><span class="token operator">-</span><span class="token number">4</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'scss'</span><span class="token punctuation">)</span></code></pre>
<p>Just that little code did the trick for me but it had to be in the same directory as my sass files. Next step was using <a href="http://sass2scss.com/" target="_blank">sass2scss.com</a> which was a good service for me converting my sass files neatly to scss.</p>
<p>I have chosen to change and leave the indented format which had become more poison because the community of Sass has more people writing in the SCSS format. This means I don’t have to convert every awesome mixin to my own indented format, I’m rest assured I can work with any extensions (although sass still works fine with scss written extensions). I usually have a _external mixin which is where I place styles from javascript plugins I use and I’ve had to convert them to my sass format back then. Although, I still do some refactoring making them inherit (@extend) where neccessary, using the nesting, and the other little Sass benefits, but it is less stress as their CSS already passes as SCSS.</p>
Using source maps2014-12-03T00:00:00Zhttps://www.josephrex.me/using-source-maps/<p>The web browser inspector plays a good role when debugging CSS. However, with the widespread of pre-processors now, we are faced with a challenge of debugging our CSS. Using a pre-processor like Sass, when you have your output style to be expanded or nested, this may not be much of a problem as you will almost get accurate debugging lines except if those lines had been separated by variables and mixins within your pre-processor stylesheet.</p>
<p>The web browser inspector plays a good role when debugging CSS. However, with the widespread of pre-processors now, we are faced with a challenge of debugging our CSS. Using a pre-processor like Sass, when you have your output style to be expanded or nested, this may not be much of a problem as you will almost get accurate debugging lines except if those lines had been separated by variables and mixins within your pre-processor stylesheet.</p>
<p>In my case, I use the compressed (minified) output and I believe a lot of other developers do this to boost their pagespeed. This way, the whole of your compiled CSS stylesheet is on a single line and if you will try to debug for a line number, you will always find rule on line 1.</p>
<p>From Sass 3.3, we can compile our Sass adding the -sourcemap argument to create source maps. Source maps are css.map files that maps our CSS styles to our pre-processor code such that when we inspect element (in chrome browsers), we can see the exact line numbers in our pre-processor stylesheet. To read more about Sourcemaps. <a title="Source maps" href="https://developer.chrome.com/devtools/docs/css-preprocessors#toc-how-css-source-maps-work" target="_blank">Google have it in their pre-processor docs</a>.</p>
<p>Source maps is not just limited to CSS and its pre-processor. It also has its JS implementations that helps us work with it when using minified JS files. <a href="https://twitter.com/ryanseddon" target="_blank">Ryan Seddon</a> speaks about it <a title="Javascript sourcemaps" href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" target="_blank">on HTML5 rocks</a>.</p>
<p>Since I use compass, I didn’t want to have to go back to compiling sass manually when I have the awesome `compass watch`. So I did a little look up for how to use sass maps from within compass and I found <a href="https://chillco.com/blog/setting-sass-and-compass-source-maps" target="_blank">this article</a>. Sweet enough, all I have to do is append my config.rb with</p>
<pre class="language-rb"><code class="language-rb">sourcemaps <span class="token operator">=</span> <span class="token boolean">true</span></code></pre>
<p>I believe other browsers will bring support for this in future. This remains one of the reasons I prefer chrome dev tools for my front-end debugging.</p>
Symmetric Encryption in Python2014-12-02T00:00:00Zhttps://www.josephrex.me/symmetric-encryption-in-python/<p>In the middle of a project I’m presently working on, I needed to make use of a Symmetric encryption based on the workflow of my software. A key is required by users to encrypt data and the same key will be needed to decrypt data. My first thoughts were on PyCrypto so I went ahead doing this</p>
<p>In the middle of a project I’m presently working on, I needed to make use of a Symmetric encryption based on the workflow of my software. A key is required by users to encrypt data and the same key will be needed to decrypt data. My first thoughts were on PyCrypto so I went ahead doing this</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">from</span> Crypto<span class="token punctuation">.</span>Cipher <span class="token keyword">import</span> AES<br /><span class="token keyword">from</span> Crypto <span class="token keyword">import</span> Random<br />text <span class="token operator">=</span> <span class="token string">'The quick brown fox jumped over the dog'</span><br />iv <span class="token operator">=</span> Random<span class="token punctuation">.</span>new<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>read<span class="token punctuation">(</span>AES<span class="token punctuation">.</span>block_size<span class="token punctuation">)</span><br />cipher <span class="token operator">=</span> AES<span class="token punctuation">.</span>new<span class="token punctuation">(</span>key<span class="token punctuation">,</span> AES<span class="token punctuation">.</span>MODE_CFB<span class="token punctuation">,</span> iv<span class="token punctuation">)</span><br />ctext <span class="token operator">=</span> iv <span class="token operator">+</span> cipher<span class="token punctuation">.</span>encrypt<span class="token punctuation">(</span>text<span class="token punctuation">)</span></code></pre>
<p>This was totally fine but when I tried decrypting the ctext data, I got something entirely different from what my input was.</p>
<pre class="language-py"><code class="language-py">decrypted <span class="token operator">=</span> cipher<span class="token punctuation">.</span>decrypt<span class="token punctuation">(</span>ctext<span class="token punctuation">)</span></code></pre>
<p>Strange behaviour from MODE_CFB made me try MODE_CBC. Just the exact same way, I went ahead to just change to MODE_CBC</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">from</span> Crypto<span class="token punctuation">.</span>Cipher <span class="token keyword">import</span> AES<br /><span class="token keyword">from</span> Crypto <span class="token keyword">import</span> Random<br />text <span class="token operator">=</span> <span class="token string">'The quick brown fox jumped over the dog'</span><br />iv <span class="token operator">=</span> Random<span class="token punctuation">.</span>new<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>read<span class="token punctuation">(</span>AES<span class="token punctuation">.</span>block_size<span class="token punctuation">)</span><br />cipher <span class="token operator">=</span> AES<span class="token punctuation">.</span>new<span class="token punctuation">(</span>key<span class="token punctuation">,</span> AES<span class="token punctuation">.</span>MODE_CBC<span class="token punctuation">,</span> iv<span class="token punctuation">)</span><br />ctext <span class="token operator">=</span> iv <span class="token operator">+</span> cipher<span class="token punctuation">.</span>encrypt<span class="token punctuation">(</span>text<span class="token punctuation">)</span></code></pre>
<p>This mode just fails right away with a warning that the message must be a multiple of 16. I expect any length of message from the users of my program and this didn’t seem like a good idea. While searching the web, I came across a solution that was nice but not what I wanted</p>
<p><a href="http://www.codekoala.com/posts/aes-encryption-python-using-pycrypto/" target="_blank">http://www.codekoala.com/posts/aes-encryption-python-using-pycrypto/</a></p>
<p>I wrote my own little function for that</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">def</span> <span class="token function">AEScrypt</span><span class="token punctuation">(</span>action<span class="token punctuation">,</span> string<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token triple-quoted-string string">"""<br /> Solution by codekoala (http://www.codekoala.com/posts/aes-encryption-python-using-pycrypto/)<br /> Requires base64, os, and AES in Crypto.Cipher<br /> @param action string :encrypt or decrypt<br /> @param string string :cipher or plain text<br /> """</span><br /> BLOCK_SIZE <span class="token operator">=</span> <span class="token number">32</span><br /> PADDING <span class="token operator">=</span> <span class="token string">'{'</span><br /> pad <span class="token operator">=</span> <span class="token keyword">lambda</span> s<span class="token punctuation">:</span> s <span class="token operator">+</span> <span class="token punctuation">(</span>BLOCK_SIZE <span class="token operator">-</span> <span class="token builtin">len</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token operator">%</span> BLOCK_SIZE<span class="token punctuation">)</span> <span class="token operator">*</span> PADDING<br /> EncodeAES <span class="token operator">=</span> <span class="token keyword">lambda</span> c<span class="token punctuation">,</span> s<span class="token punctuation">:</span> base64<span class="token punctuation">.</span>b64encode<span class="token punctuation">(</span>c<span class="token punctuation">.</span>encrypt<span class="token punctuation">(</span>pad<span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> DecodeAES <span class="token operator">=</span> <span class="token keyword">lambda</span> c<span class="token punctuation">,</span> e<span class="token punctuation">:</span> c<span class="token punctuation">.</span>decrypt<span class="token punctuation">(</span>base64<span class="token punctuation">.</span>b64decode<span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span>rstrip<span class="token punctuation">(</span>PADDING<span class="token punctuation">)</span><br /> secret <span class="token operator">=</span> os<span class="token punctuation">.</span>urandom<span class="token punctuation">(</span>BLOCK_SIZE<span class="token punctuation">)</span><br /> cipher <span class="token operator">=</span> AES<span class="token punctuation">.</span>new<span class="token punctuation">(</span>secret<span class="token punctuation">)</span><br /> result <span class="token operator">=</span> EncodeAES<span class="token punctuation">(</span>cipher<span class="token punctuation">,</span> string<span class="token punctuation">)</span> <span class="token keyword">if</span> action <span class="token operator">==</span> <span class="token string">'encrypt'</span> <span class="token keyword">else</span> DecodeAES<span class="token punctuation">(</span>cipher<span class="token punctuation">,</span> string<span class="token punctuation">)</span><br /> <span class="token keyword">return</span> result</code></pre>
<p>This seem like the best way to use PyCrypto AES encryption but it wasn’t symmetric. It’s not in a PKI format (no key is required to unlock the message).</p>
<p>I still keep that function but it was of no use in my case. Finally I thought of the gnupg module and installed it for my python2</p>
<pre><code>sudo apt-get install python-gnupg
</code></pre>
<p>I was able to encrypt this way:</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">import</span> gnupg<span class="token punctuation">,</span>base64<br />gpg <span class="token operator">=</span> gnupg<span class="token punctuation">.</span>GPG<span class="token punctuation">(</span><span class="token punctuation">)</span><br /><span class="token keyword">def</span> <span class="token function">encrypt</span><span class="token punctuation">(</span>passphrase<span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> cipher <span class="token operator">=</span> gpg<span class="token punctuation">.</span>encrypt<span class="token punctuation">(</span>message<span class="token punctuation">,</span> recipients<span class="token operator">=</span><span class="token boolean">None</span><span class="token punctuation">,</span> symmetric<span class="token operator">=</span><span class="token string">'AE256'</span><span class="token punctuation">,</span> passphrase<span class="token operator">=</span>passphrase<span class="token punctuation">,</span> armor<span class="token operator">=</span><span class="token boolean">True</span><span class="token punctuation">)</span><br /> <span class="token keyword">return</span> base64<span class="token punctuation">.</span>b64encode<span class="token punctuation">(</span> <span class="token builtin">str</span><span class="token punctuation">(</span>cipher<span class="token punctuation">)</span> <span class="token punctuation">)</span></code></pre>
<p>I had to encode with base64 because I don’t want my encrypted data to have the regular start and end of a GPG encrypted data i.e</p>
<pre class="lang:default decode:true ">
----- BEGIN PGP KEY -----
----- END PGP KEY -------
</pre>
<p>To decrypt the encrypted data, I use this:</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">def</span> <span class="token function">decrypt</span><span class="token punctuation">(</span>cipher<span class="token punctuation">,</span> passphrase<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> deciphered <span class="token operator">=</span> <span class="token builtin">str</span><span class="token punctuation">(</span> gpg<span class="token punctuation">.</span>decrypt<span class="token punctuation">(</span> base64<span class="token punctuation">.</span>b64decode<span class="token punctuation">(</span>cipher<span class="token punctuation">)</span><span class="token punctuation">,</span> passphrase <span class="token punctuation">)</span> <span class="token punctuation">)</span><br /> <span class="token keyword">return</span> deciphered <span class="token keyword">if</span> deciphered <span class="token keyword">is</span> <span class="token boolean">True</span> <span class="token keyword">else</span> <span class="token string">'Incorrect passphrase'</span></code></pre>
<p>When a wrong passphrase is used gpg.decrypt() returns an empty string ` ` which is False. If it is true we get our deciphered text.</p>
Appreciating developers2014-11-29T00:00:00Zhttps://www.josephrex.me/appreciating-developers/<p>We are all humans and appreciations are rewards that gladdens anyone. Some developers live a totally normal life. Especially those that have grown to build a family and have to keep them with love. On the other hand, there are a lot more melancholic developers that only find peace by dealing with complex logic.</p>
<p>We are all humans and appreciations are rewards that gladdens anyone. Some developers live a totally normal life. Especially those that have grown to build a family and have to keep them with love. On the other hand, there are a lot more melancholic developers that only find peace by dealing with complex logic.</p>
<p>If a developer contributes to your project, start-up, firm, it shouldn’t matter if they are still contributing or not. In cases of open source projects contributions, even if you didn’t accept their pull requests and didn’t take their changes, the attempt is worth appreciating. See what <a href="https://twitter.com/brianokken" target="_blank">Brian Okken </a>says about it: <a href="http://pythontesting.net/community/power-of-thank-you/" target="_blank">Power of thank you</a></p>
Things you can do with MathML2014-11-28T00:00:00Zhttps://www.josephrex.me/things-you-can-do-with-mathml/<p>For a while, I’ve been enjoying the awesomeness of mathML. I’ve not had specific use cases but just playing around with it gives me fun. Sometimes I idly just write equations that should be on a paper in my local web pages.</p>
<p>For a while, I’ve been enjoying the awesomeness of mathML. I’ve not had specific use cases but just playing around with it gives me fun. Sometimes I idly just write equations that should be on a paper in my local web pages.</p>
<p>There’s a lot you can learn about MathML by looking through the MDN spec. I’ll just drop in the little parts I’ve played. This has been for so many years and it still available but it is only supported by gecko browsers (Mozilla Firefox, Iceweasel, some others) .</p>
<p>I use Chromium as my major browser and I need to see all of my works of any sort within it. For this reason I had gotten <a title="MathML chrome extension" href="https://chrome.google.com/webstore/detail/math-anywhere/gebhifiddmaaeecbaiemfpejghjdjmhc" target="_blank">a mathML extension for chrome browsers that makes it work fine</a>. However, I find it disturbing that some websites using mathML readily assume that you can’t use mathML from chrome browsers so they check if your browser is gecko based and if not, they serve you up with maybe a warning.</p>
<p>I’ve been able to view mathML on those few websites that do not do these from my Chromium but whenever I hit one of the presumptuous websites, I just have to move over to iceweasel even if it’s not so convenient.</p>
<p>Here are some play-arounds with mathML:</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mtext>Matrix: </mtext>
<mspace width="10px"></mspace>
<mrow>
<mo>(</mo>
<mtable>
<mtr>
<mtd>
<mn>2</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>4</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>8</mn>
</mtd>
</mtr>
</mtable>
<mo>)</mo>
<mspace width="30px"></mspace>
<!-- A new table -->
<mo>{</mo>
<mtable>
<mtr>
<mtd>
<mn>4</mn>
</mtd>
<mtd>
<mn>8</mn>
</mtd>
<mtd>
<mn>16</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>8</mn>
</mtd>
<mtd>
<mn>16</mn>
</mtd>
<mtd>
<mn>32</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>16</mn>
</mtd>
<mtd>
<mn>32</mn>
</mtd>
<mtd>
<mn>64</mn>
</mtd>
</mtr>
</mtable>
<mo>}</mo>
</mrow>
</math>
<br />
<math>
<mtext>More:</mtext>
<mspace width="20px"></mspace>
<mrow mathcolor="#00f">
<mi mathvariant="bold">π</mi>
<msup>
<mi>r</mi>
<mn>2</mn>
</msup>
</mrow>
<mspace width="20px"></mspace>
<mrow mathcolor="#f00">
<mmultiscripts>
<mi>X</mi>
<none></none>
<mi>c</mi>
<mprescripts></mprescripts>
<mi>b</mi>
<none></none>
</mmultiscripts>
</mrow>
</math>
<br />
<math>
<mrow>
<mfrac>
<mrow>
<mi>x</mi>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>3</mn>
</msup>
</mrow>
<mrow>
<mi>2</mi>
</mrow>
</mfrac>
<mspace width="20px"></mspace>
<mo>∑</mo>
<mo>,</mo>
<mo>∫</mo>
<mspace width="20px"></mspace>
<mo stretchy="false">(</mo>
<mn>2</mn>
<mo>,</mo>
<mn>3</mn>
<mo stretchy="false">)</mo>
</mrow>
</math>
<p>For more on mathML, check out the <a href="https://developer.mozilla.org/en-US/docs/Web/MathML" target="_blank">MDN docs</a></p>
<div class="update">
<h4>
Update - 12/14/2014
</h4>
<p>
When I said some sites assume that you can't use mathML and prevent usage on non-gecko browsers, I've majorly had <a href="http://fred-wang.github.io/MozSummitMathML/index.html" target="_blank">this Fred Wang's presentation</a> in mind. I got an email from Fred making me understand why that was necessary. Here it is:
</p>
<blockquote>
<p>
MathJax has many issues with CSS, Javascript, Unicode fonts, RTL writing etc so I doubt your chrome extension can make <a href="http://fred-wang.github.io/MozSummitMathML/index.html" target="_blank">http://fred-wang.github.io/MozSummitMathML/index.html</a> work as expected. This page was designed for demo presentation at the Mozilla summit so this verification is done on purpose to prevent people from opening it into a browser with poor HTML5 support. For normal pages (not MathML demos), I use <a class="moz-txt-link-freetext" href="https://github.com/fred-wang/mathml-warning.js" target="_blank">https://github.com/fred-wang/mathml-warning.js</a> on my Website so that should not be a problem.
</p>
</blockquote>
</div>
<p>Fred is among the developers at Mozilla working on mathML</p>
Styling for print media2014-11-24T00:00:00Zhttps://www.josephrex.me/styling-for-print-media/<p>The @media is mostly known these days for its use with responsive design in a conditional structure. However, it has been for a very long time. It has been used to separate visual CSS from paged CSS. The different media consists screen, print, projector, audio (formerly aural).</p>
<p>The @media is mostly known these days for its use with responsive design in a conditional structure. However, it has been for a very long time. It has been used to separate visual CSS from paged CSS. The different media consists screen, print, projector, audio (formerly aural).</p>
<p>I needed to do a print design in one of my recent projects and I knew I could just make a stylesheet link with a media=“print”. I’ve also been privy that I can use @media print{} to wrap it but that wasn’t all it took. I never really knew there was more to it but I took the search to see how it’s been done by the leaders of the industry. Not too long after, I stumbled upon the following alistapart article by Eric Meyer from 2002.</p>
<p><a href="http://alistapart.com/article/goingtoprint" target="_blank">http://alistapart.com/article/goingtoprint</a></p>
<p>The article really pointed out a lot of things I had thought I will have to implement while designing my print stylesheet. Fortunately, I happen to be <a title="Sass and Compass: My Best Friends" href="http://josephrex.me/sass-and-compass-my-best-friends/" target="_blank">using the awesome compass</a>.</p>
<p>From the beginning of my styles. I already had the following print.sass file predefined for me</p>
<pre class="language-scss"><code class="language-scss"><span class="token comment">/* Print Styles */</span><br />@media print<br /> <span class="token operator">*</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> transparent <span class="token important">!important</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> #000 <span class="token important">!important</span><br /> <span class="token property">box-shadow</span><span class="token punctuation">:</span> none <span class="token important">!important</span><br /> <span class="token property">text-shadow</span><span class="token punctuation">:</span> none <span class="token important">!important</span><br /> a<br /> <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<br /> &<span class="token punctuation">:</span>visited<br /> <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<br /> &[href]<span class="token punctuation">:</span>after<br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" ("</span> <span class="token function">attr</span><span class="token punctuation">(</span>href<span class="token punctuation">)</span> <span class="token string">")"</span><br /> abbr[title]<span class="token punctuation">:</span>after<br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" ("</span> <span class="token function">attr</span><span class="token punctuation">(</span>title<span class="token punctuation">)</span> <span class="token string">")"</span><br /> <span class="token comment">/* Don't show links for images, or javascript/internal links */</span><br /> .ir <span class="token property">a</span><span class="token punctuation">:</span>after<br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><br /> a<br /> &[href^=<span class="token string">"javascript:"</span>]<span class="token punctuation">:</span>after<span class="token punctuation">,</span> &[href^=<span class="token string">"#"</span>]<span class="token punctuation">:</span>after<br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><br /> pre<span class="token punctuation">,</span> blockquote<br /> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #999<br /> <span class="token property">page-break-inside</span><span class="token punctuation">:</span> avoid<br /> thead<br /> <span class="token property">display</span><span class="token punctuation">:</span> table-header-group<br /> tr<br /> <span class="token property">page-break-inside</span><span class="token punctuation">:</span> avoid<br /> img<br /> <span class="token property">page-break-inside</span><span class="token punctuation">:</span> avoid<br /> <span class="token property">max-width</span><span class="token punctuation">:</span> 100% <span class="token important">!important</span><br /> @page<br /> <span class="token property">margin</span><span class="token punctuation">:</span> 0.5cm<br /><br /> p<span class="token punctuation">,</span> h2<span class="token punctuation">,</span> h3<br /> <span class="token property">orphans</span><span class="token punctuation">:</span> 3<br /> <span class="token property">widows</span><span class="token punctuation">:</span> 3<br /> h2<span class="token punctuation">,</span> h3<br /> <span class="token property">page-break-after</span><span class="token punctuation">:</span> avoid</code></pre>
<p>If you checked out the <a href="https://twitter.com/meyerweb">Eric Mayer’s</a> link on alistapart above, you’d find out most of what he explained here.</p>
<p>prefixing links with a parentheses containing their link reference seems like a really good way to show on the printed versions where that link references to.</p>
<p>They also avoided page breaks inside certain elements. This really set the pace for me to go on and add my other print styles.</p>
<h2 id="debugging" tabindex="-1">Debugging</h2>
<p>At a point I had to inspect element and know where a padding was coming from. Meanwhile, all I had was my chrome print preview. Not too long after, I discovered the emulation feature in my chromium.</p>
<p>Once the CSS media is checked, and the print is selected from the combo box, the web page renders the print version. Sometimes it’s still not exactly as the chrome print preview but it’s really close. This helps for major debugs when trying to remove style rules made by the all media stylesheet.</p>
Implementing dynamic drop down / dependent list in laravel42014-11-14T00:00:00Zhttps://www.josephrex.me/implementing-dynamic-drop-down-or-dependent-list-in-laravel4/<p>When I used procedural PHP for most of my projects, I found myself needing what I referred to as a dependent list. These days I hear it being referred to as dynamic drop down more often. After looking around, a friend gave this solution to me.</p>
<p>When I used procedural PHP for most of my projects, I found myself needing what I referred to as a dependent list. These days I hear it being referred to as dynamic drop down more often. After looking around, a friend gave this solution to me.</p>
<p>All examples here will rely on the DDL database schema here:</p>
<pre class="language-sql"><code class="language-sql"><span class="token keyword">CREATE</span> <span class="token keyword">TABLE</span> <span class="token keyword">IF</span> <span class="token operator">NOT</span> <span class="token keyword">EXISTS</span> <span class="token punctuation">`</span>categories<span class="token punctuation">`</span> <span class="token punctuation">(</span><br /> <span class="token punctuation">`</span>id<span class="token punctuation">`</span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">)</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">AUTO_INCREMENT</span><span class="token punctuation">,</span><br /> <span class="token punctuation">`</span>category_name<span class="token punctuation">`</span> <span class="token keyword">varchar</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span><br /> <span class="token keyword">PRIMARY</span> <span class="token keyword">KEY</span> <span class="token punctuation">(</span><span class="token punctuation">`</span>id<span class="token punctuation">`</span><span class="token punctuation">)</span><br /><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">INSERT</span> <span class="token keyword">INTO</span> <span class="token punctuation">`</span>categories<span class="token punctuation">`</span> <span class="token punctuation">(</span><span class="token punctuation">`</span>id<span class="token punctuation">`</span><span class="token punctuation">,</span> <span class="token punctuation">`</span>category_name<span class="token punctuation">`</span><span class="token punctuation">)</span> <span class="token keyword">VALUES</span><br /><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'Electronic'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'Mobile Phones'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'Clothing'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">CREATE</span> <span class="token keyword">TABLE</span> <span class="token keyword">IF</span> <span class="token operator">NOT</span> <span class="token keyword">EXISTS</span> <span class="token punctuation">`</span>subcategories<span class="token punctuation">`</span> <span class="token punctuation">(</span><br /> <span class="token punctuation">`</span>id<span class="token punctuation">`</span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">)</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">AUTO_INCREMENT</span><span class="token punctuation">,</span><br /> <span class="token punctuation">`</span>categoryID<span class="token punctuation">`</span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">)</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span><br /> <span class="token punctuation">`</span>subcategory_name<span class="token punctuation">`</span> <span class="token keyword">varchar</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span><br /> <span class="token keyword">PRIMARY</span> <span class="token keyword">KEY</span> <span class="token punctuation">(</span><span class="token punctuation">`</span>id<span class="token punctuation">`</span><span class="token punctuation">)</span><br /><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">INSERT</span> <span class="token keyword">INTO</span> <span class="token punctuation">`</span>subcategories<span class="token punctuation">`</span> <span class="token punctuation">(</span><span class="token punctuation">`</span>id<span class="token punctuation">`</span><span class="token punctuation">,</span> <span class="token punctuation">`</span>categoryID<span class="token punctuation">`</span><span class="token punctuation">,</span> <span class="token punctuation">`</span>subcategory_name<span class="token punctuation">`</span><span class="token punctuation">)</span> <span class="token keyword">VALUES</span><br /><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'Televisions'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'Deep Freezers'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'Hifi Systems'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'Blackberry'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'Nokia'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'Samsung'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'Shirts'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'Trousers'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /><span class="token punctuation">(</span><span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'Blouses'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>For a clearer view, I have it here on SQL fiddle: <a title="SQL Fiddle DB Schema" href="http://sqlfiddle.com/#!2/58fcf/4/1" target="_blank">http://sqlfiddle.com/#!2/58fcf/4/1</a></p>
<h2 id="procedural-code" tabindex="-1">Procedural code</h2>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>category<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Parent Category<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parent_cat<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parent_cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token prolog"><?php while($row = mysql_fetch_array($query_parent)): ?></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><?php echo $row[<span class="token punctuation">'</span>id<span class="token punctuation">'</span>]; ?><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token prolog"><?php echo $row['category_name']; ?></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /> <span class="token prolog"><?php endwhile; ?></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Sub Category<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sub_cat<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sub_cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<p>The mark-up is a file named with the php extension with the body content as above. It uses the following jQuery snippet</p>
<pre class="language-js"><code class="language-js"><span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#parent_cat"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">change</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">after</span><span class="token punctuation">(</span><span class="token string">'<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> $<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'loadsubcat.php?parent_cat='</span> <span class="token operator">+</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#sub_cat"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#loader'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slideUp</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>From the jQuery code above we try to send the present value of the category to a different PHP file that takes in GET parameters. It gets all the subcategories of the selected category and echo them to that page making it return those listed values to jQuery as sub categories</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token function">mysql_connect</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'localhost'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'root'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token function">mysql_select_db</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'dependent_list'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token variable">$parent_cat</span> <span class="token operator">=</span> <span class="token variable">$_GET</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'parent_cat'</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br /><br /><span class="token variable">$query</span> <span class="token operator">=</span> <span class="token function">mysql_query</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"SELECT * FROM subcategories WHERE categoryID = <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$parent_cat</span><span class="token punctuation">}</span></span>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">while</span><span class="token punctuation">(</span><span class="token variable">$row</span> <span class="token operator">=</span> <span class="token function">mysql_fetch_array</span><span class="token punctuation">(</span><span class="token variable">$query</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<option value='<span class="token interpolation"><span class="token variable">$row</span><span class="token punctuation">[</span>id<span class="token punctuation">]</span></span>'><span class="token interpolation"><span class="token variable">$row</span><span class="token punctuation">[</span>subcategory_name<span class="token punctuation">]</span></span></option>"</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token delimiter important">?></span></span></code></pre>
<p>Good solution right? Thanks to my friend but now I’m dealing with more advanced code.</p>
<p>By using laravel, we mostly use request URIs rather than $_GET requests. I could re-implement this by creating a seperate route that takes that extra request segment to fetch all the information.</p>
<p>I’ll go through 3 ways we can achieve this in Laravel, starting with this.</p>
<h2 id="method-1" tabindex="-1">Method 1</h2>
<p>Create your route to display your drop down list</p>
<pre class="language-php"><code class="language-php"><span class="token class-name static-context">Route</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'myroute'</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'myController@firstMethod'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Define the firstmethod in the myController (these names can be whatever you wish) controller.</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">firstMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token variable">$categories</span> <span class="token operator">=</span> <span class="token class-name static-context">DB</span><span class="token operator">::</span><span class="token function">table</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'categories'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> <span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'myview'</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'categories'</span> <span class="token operator">=></span> <span class="token variable">$categories</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token delimiter important">?></span></span></code></pre>
<p>Next we’ll create a route for our sub-categories feeder view</p>
<pre class="language-php"><code class="language-php"><span class="token class-name static-context">Route</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'loadsubcat/{id}'</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'myController@secondMethod'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>and a method</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">secondMethod</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token variable">$subcategories</span> <span class="token operator">=</span> <span class="token class-name static-context">DB</span><span class="token operator">::</span><span class="token function">table</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'subcategories'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'categoryID'</span><span class="token punctuation">,</span> <span class="token variable">$id</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> <span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'thisview'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'subcategories'</span> <span class="token operator">=></span> <span class="token variable">$subcategories</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token delimiter important">?></span></span></code></pre>
<p>for the view of this method we will add the following</p>
<pre class="language-html"><code class="language-html"><br />@foreach($subcategories as $subcategory)<br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ $subcategory->id }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ $subcategory->subcategory_name }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br />@endforeach<br /></code></pre>
<p>Inside our first display view, we can add the following mark-up:</p>
<pre class="language-html"><code class="language-html"><br />{{ Form::open(['action'=>'myController@secondMethod']) }}<br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>category<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Parent Category<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parent_cat<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parent_cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> @foreach($categories as $category)<br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ $category->id }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ $category->category_name }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /> @endforeach<br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Sub Category<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sub_cat<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sub_cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span><br />{{ Form::close() }}<br /></code></pre>
<p>and finally the JS part</p>
<pre class="language-js"><code class="language-js"><span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#parent_cat"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">change</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> $<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'loadsubcat/'</span> <span class="token operator">+</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#sub_cat"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>So this is really similar to the former procedural version but I took away all the unnecessary loader part.</p>
<h2 id="method-2" tabindex="-1">Method 2</h2>
<p>For this method, I already made a <a title="JS Fiddle direct link" href="https://jsfiddle.net/bl4ckdu5t/npkf9hn6/" target="_blank">JSfiddle</a> to implement with static HTML. This method is meant to use JSON data to feed DB contents to jQuery in order to dynamically change subcategories based on the selected categories.</p>
<iframe width="100%" height="300" src="https://jsfiddle.net/bl4ckdu5t/npkf9hn6/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>Notice I put values of data-load in single quotes because it is expected to contain JSON data which has double quotes. To make our data more dynamic, let’s make the data-load JSON get fetched from the database. Let’s make a controller with this contents</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token comment">// Controller</span><br /><span class="token variable">$categories</span> <span class="token operator">=</span> <span class="token class-name static-context">DB</span><span class="token operator">::</span><span class="token function">table</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'categories'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token variable">$categories_pack</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br /><span class="token keyword">foreach</span><span class="token punctuation">(</span><span class="token variable">$categories</span> <span class="token keyword">as</span> <span class="token variable">$category</span><span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token variable">$category_products</span> <span class="token operator">=</span> <span class="token class-name static-context">DB</span><span class="token operator">::</span><span class="token function">table</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'subcategories'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'categoryID'</span><span class="token punctuation">,</span><span class="token variable">$category</span><span class="token operator">-></span><span class="token property">id</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">lists</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'subcategory_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token variable">$categories_pack</span><span class="token punctuation">[</span><span class="token variable">$category</span><span class="token operator">-></span><span class="token property">category_name</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token variable">$category_products</span><span class="token punctuation">;</span><br /><span class="token keyword">endforeach</span><span class="token punctuation">;</span><br /><span class="token variable">$jsonified</span> <span class="token operator">=</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token variable">$categories_pack</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token variable">$data</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'categories'</span> <span class="token operator">=></span> <span class="token variable">$jsonified</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br /><span class="token keyword">return</span> <span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'yourview'</span><span class="token punctuation">,</span><span class="token variable">$data</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token delimiter important">?></span></span></code></pre>
<p>Here’s the part where we plug that into our view:</p>
<pre class="language-html"><code class="language-html"><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">selected</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>- Categories -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Bags<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Shoes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>T-Shirts<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subcat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>- select a category -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>load<span class="token punctuation">"</span></span> <span class="token attr-name">data-load</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>{{ $categories }}<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /></code></pre>
<p>And with this we can get it to work like it did with the static HTML example above.</p>
<h2 id="method-3" tabindex="-1">Method 3</h2>
<p>In this method, I will simplify <a href="https://twitter.com/msurguy" target="_blank">Maksim Surguy’s</a> solution from this <a href="https://gist.github.com/msurguy/5138788" target="_blank">github gist</a>. Mak used two tables (makers and models) to describe car makers and models. Rather than twisting the flow, I’ll keep to my categories and subcategories tables.</p>
<blockquote>
<p>Categories == Makers</p>
<p>Subcategories == Models</p>
</blockquote>
<p>In order to use Eloquent with this. We will extend eloquent with a models for each of them.</p>
<p>categories.php (<a href="http://laravel.com/docs/4.2/eloquent#one-to-many" target="_blank">One to Many Eloquent Method</a>)</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token keyword">class</span> <span class="token class-name-definition class-name">Category</span> <span class="token keyword">extends</span> <span class="token class-name">Eloquent</span> <span class="token punctuation">{</span><br /> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">Categories</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">hasMany</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Subcategory'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br /><span class="token delimiter important">?></span></span></code></pre>
<p>subcategories.php (Inverse Relation Eloquent)</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token keyword">class</span> <span class="token class-name-definition class-name">Subcategory</span> <span class="token keyword">extends</span> <span class="token class-name">Eloquent</span> <span class="token punctuation">{</span><br /> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">subcategory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">belongsTo</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Category'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br /><span class="token delimiter important">?></span></span></code></pre>
<p>Then a simple route with a callback function</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token class-name static-context">Route</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'api/dropdown'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token variable">$input</span> <span class="token operator">=</span> <span class="token class-name static-context">Input</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'option'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token variable">$category</span> <span class="token operator">=</span> <span class="token class-name static-context">Category</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$input</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token variable">$subcategory</span> <span class="token operator">=</span> <span class="token variable">$category</span><span class="token operator">-></span><span class="token function">subcategory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">return</span> <span class="token class-name static-context">Response</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$subcategory</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'subcategory_name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token delimiter important">?></span></span></code></pre>
<p>The JS part</p>
<pre class="language-js"><code class="language-js"><span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">$</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#cat'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">change</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> $<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token punctuation">{</span> option<span class="token operator">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">var</span> subcat <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#subcat'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> subcat<span class="token punctuation">.</span><span class="token function">empty</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span> element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> subcat<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">"<option value='"</span><span class="token operator">+</span> element<span class="token punctuation">.</span>id <span class="token operator">+</span><span class="token string">"'>"</span> <span class="token operator">+</span> element<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">"</option>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>and whew! The HTML</p>
<pre class="language-html"><code class="language-html"><br />{{ Form::open() }}<br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>category<span class="token punctuation">"</span></span> <span class="token attr-name">data-url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ url(<span class="token punctuation">'</span>api/dropdown<span class="token punctuation">'</span>)}}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Select Car Make<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toyota<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Honda<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mercedes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subcat<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subcategory<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Please choose car make first<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span><br />{{ Form::close();}}<br /></code></pre>
<p>I made some modifications to Mak’s code and I believe it works better this way. Also, the Eloquent method are adjusted to fit the Laravel4.2 documentation.</p>
<blockquote>
<p>If you use Laravel5. Use the files in this <a href="https://gist.github.com/bl4ckdu5t/6b6d3d4e1a753c62f5c2741941791ad9">gist</a></p>
</blockquote>
My Front-end development pattern2014-11-05T00:00:00Zhttps://www.josephrex.me/my-front-end-development-pattern/<p>I’ve seen different front-end developers start their projects. In most cases for intermediate designers, first steps are to write the basic HTML, download <a href="http://getbootstrap.com" target="_blank">bootstrap</a> or <a href="http://foundation.zurb.com/" target="_blank">foundation</a> framework for local use, download an icon-font set like <a href="http://fontawesome.io/" target="_blank">fontawesome</a>, and they start writing their mark-up to fit the styles defined by the framework.</p>
<p>I’ve seen different front-end developers start their projects. In most cases for intermediate designers, first steps are to write the basic HTML, download <a href="http://getbootstrap.com/" target="_blank">bootstrap</a> or <a href="http://foundation.zurb.com/" target="_blank">foundation</a> framework for local use, download an icon-font set like <a href="http://fontawesome.io/" target="_blank">fontawesome</a>, and they start writing their mark-up to fit the styles defined by the framework.</p>
<p>You speak of user experience? You’ve killed it even before starting your project at all. If you fall in that category I described above. Then you need a change henceforth if you are not allergic to advancements.</p>
<p>I think those frameworks are good but <a href="http://marketblog.envato.com/guest/thought-css-frameworks/" target="_blank">it shouldn’t be your steps for every single project you do</a>. That’s just lame! I also understand you find some of these things easier and faster to use but to be a good developer, you need to come out of your comfort zone.</p>
<p>I’m probably not doing it the best way it may be done but I have a conviction that I’m doing it right.</p>
<p>Sometimes I wait for inspirations for a whole week before I begin a front-end design. Thanks to sites like</p>
<ul>
<li><a href="http://culttt.com/design" target="_blank">http://culttt.com/design</a></li>
<li><a href="http://httpster.net/" target="_blank">http://httpster.net/</a></li>
<li><a href="http://designspiration.net/" target="_blank">http://designspiration.net/</a></li>
<li><a href="http://niice.co/" target="_blank">http://niice.co/</a></li>
</ul>
<p>They really help me defeat the process of seeking inspiration for so long. When I have an idea of what I want already, I just sketch it out on a paper and keep in my diary throughout that design.</p>
<p>After this, I wear my developer suits :D and open sublime text editor, starting with a code as little as this</p>
<blockquote>
<p>html:5</p>
</blockquote>
<p>Little but powerful. With <a href="http://emmet.io/" target="_blank">Emmet</a>, that produces the following HTML5 document for me:</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br /> <br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>really cool right! Emmet helps a long way more. You should <a href="http://emmet.io/" target="_blank">check it out</a>.</p>
<p>One thing emmet does in that start HTML:5 document I don’t like is the upper case UTF-8 in the meta tag. Not like there’s anything wrong with this but it’s just one of the things that makes me feel uncomfortable. I prefer it in lower case.</p>
<p>I add my viewport meta tag</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p>I download <a href="http://modernizr.com/">modernizr</a> or just pick a local copy I already have and add it to my vendor sub folder inside my js folder. At this point I have a file structure in this form</p>
<pre><code> ├── styles/
│ └── vendor/
│ └── style.css
├── fonts/
├── images/
├── _js/
│ ├── vendor/
│ └── script.js
│ └── plugins.js
└── index.html
</code></pre>
<p>The separate JS files get concatenated in the end to avoid multiple HTTP requests.</p>
<p>The<a href="http://html5boilerplate.com/" target="_blank"> HTML5 boilerplate</a> is not so spoken of like it was at 2011 but it’s still very much useful. I start up my project by including it and it’s awesome the way I have a prepared 404.html page, I include <a href="http://modernizr.com/" target="_blank">modernizr</a> in the head. I add up Google CDN jQuery with a local fallback, and a favicon.png file to my root directory. My HTML structure then becomes:</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>//fonts.googleapis.com/css?family=Open+Sans:400,800,300<span class="token punctuation">'</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>stylesheet<span class="token punctuation">'</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>text/css<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styles/style.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shortcut icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js/vendor/modernizr.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br /> <span class="token comment"><!--[if lt IE 7]><br /> <p class="browsehappy">You are using an <strong>outdated</strong> browser. <br /> Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <br /> <![endif]--></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br /> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">b<span class="token punctuation">,</span>o<span class="token punctuation">,</span>i<span class="token punctuation">,</span>l<span class="token punctuation">,</span>e<span class="token punctuation">,</span>r</span><span class="token punctuation">)</span><span class="token punctuation">{</span>b<span class="token punctuation">.</span>GoogleAnalyticsObject<span class="token operator">=</span>l<span class="token punctuation">;</span>b<span class="token punctuation">[</span>l<span class="token punctuation">]</span><span class="token operator">||</span><span class="token punctuation">(</span>b<span class="token punctuation">[</span>l<span class="token punctuation">]</span><span class="token operator">=</span><br /> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">(</span>b<span class="token punctuation">[</span>l<span class="token punctuation">]</span><span class="token punctuation">.</span>q<span class="token operator">=</span>b<span class="token punctuation">[</span>l<span class="token punctuation">]</span><span class="token punctuation">.</span>q<span class="token operator">||</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>b<span class="token punctuation">[</span>l<span class="token punctuation">]</span><span class="token punctuation">.</span>l<span class="token operator">=</span><span class="token operator">+</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">;</span><br /> e<span class="token operator">=</span>o<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>r<span class="token operator">=</span>o<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br /> e<span class="token punctuation">.</span>src<span class="token operator">=</span><span class="token string">'//www.google-analytics.com/analytics.js'</span><span class="token punctuation">;</span><br /> r<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span>r<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">(</span>window<span class="token punctuation">,</span>document<span class="token punctuation">,</span><span class="token string">'script'</span><span class="token punctuation">,</span><span class="token string">'ga'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token function">ga</span><span class="token punctuation">(</span><span class="token string">'create'</span><span class="token punctuation">,</span><span class="token string">'UA-XXXXX-X'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token function">ga</span><span class="token punctuation">(</span><span class="token string">'send'</span><span class="token punctuation">,</span><span class="token string">'pageview'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">window<span class="token punctuation">.</span>jQuery <span class="token operator">||</span> document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'<script src="js/vendor/jquery-2.1.1.min.js"><\/script>'</span><span class="token punctuation">)</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js/script.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>I added a google font to that because most times I do the google fonts since I can’t afford other webfonts. I also converted boilerplate’s stylesheet to a partial (_h5bp.sass) and imported it in my styles.sass file.</p>
<p>Now the HTML is set up. The JS is fine as well. My main.js is where I write my javascript and plugins.js by HTML5 boilerplate has a nice fallback for browsers without console and also gives me space to initialize my third-party plugins.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">// Avoid `console` errors in browsers that lack a console.</span><br /><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">var</span> method<span class="token punctuation">;</span><br /> <span class="token keyword">var</span> <span class="token function-variable function">noop</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span><br /> <span class="token keyword">var</span> methods <span class="token operator">=</span> <span class="token punctuation">[</span><br /> <span class="token string">'assert'</span><span class="token punctuation">,</span> <span class="token string">'clear'</span><span class="token punctuation">,</span> <span class="token string">'count'</span><span class="token punctuation">,</span> <span class="token string">'debug'</span><span class="token punctuation">,</span> <span class="token string">'dir'</span><span class="token punctuation">,</span> <span class="token string">'dirxml'</span><span class="token punctuation">,</span> <span class="token string">'error'</span><span class="token punctuation">,</span><br /> <span class="token string">'exception'</span><span class="token punctuation">,</span> <span class="token string">'group'</span><span class="token punctuation">,</span> <span class="token string">'groupCollapsed'</span><span class="token punctuation">,</span> <span class="token string">'groupEnd'</span><span class="token punctuation">,</span> <span class="token string">'info'</span><span class="token punctuation">,</span> <span class="token string">'log'</span><span class="token punctuation">,</span><br /> <span class="token string">'markTimeline'</span><span class="token punctuation">,</span> <span class="token string">'profile'</span><span class="token punctuation">,</span> <span class="token string">'profileEnd'</span><span class="token punctuation">,</span> <span class="token string">'table'</span><span class="token punctuation">,</span> <span class="token string">'time'</span><span class="token punctuation">,</span> <span class="token string">'timeEnd'</span><span class="token punctuation">,</span><br /> <span class="token string">'timeStamp'</span><span class="token punctuation">,</span> <span class="token string">'trace'</span><span class="token punctuation">,</span> <span class="token string">'warn'</span><br /> <span class="token punctuation">]</span><span class="token punctuation">;</span><br /> <span class="token keyword">var</span> length <span class="token operator">=</span> methods<span class="token punctuation">.</span>length<span class="token punctuation">;</span><br /> <span class="token keyword">var</span> console <span class="token operator">=</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>console <span class="token operator">=</span> window<span class="token punctuation">.</span>console <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token keyword">while</span> <span class="token punctuation">(</span>length<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> method <span class="token operator">=</span> methods<span class="token punctuation">[</span>length<span class="token punctuation">]</span><span class="token punctuation">;</span><br /><br /> <span class="token comment">// Only stub undefined methods.</span><br /> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>console<span class="token punctuation">[</span>method<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">[</span>method<span class="token punctuation">]</span> <span class="token operator">=</span> noop<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token comment">// Place any jQuery/helper plugins in here.</span><br /><span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.flexslider'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">flexslider</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> animation<span class="token operator">:</span> <span class="token string">"fade"</span><span class="token punctuation">,</span><br /> controlNav<span class="token operator">:</span> <span class="token boolean">false</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre>
<p>I just gave an example of flexslider being used in my project to show usage of plugins.</p>
<p>I’ll say my whole javascript is fine but <a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank">pagespeed</a> really matters to me and this makes me take minification very seriously. I minify my js with <a href="http://gruntjs.com/" target="_blank">grunt</a> <a href="https://www.npmjs.org/package/grunt-contrib-uglify" target="_blank">uglify</a> after installing it with <a href="https://npmjs.org/" target="_blank">npm</a>.</p>
<pre><code>npm install grunt-contrib-uglify --save-dev
</code></pre>
<p>After this step, all that needs to be done is to register the task in Gruntfile.js</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">grunt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /><br /> <span class="token comment">// Project configuration.</span><br /> grunt<span class="token punctuation">.</span><span class="token function">initConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> pkg<span class="token operator">:</span> grunt<span class="token punctuation">.</span>file<span class="token punctuation">.</span><span class="token function">readJSON</span><span class="token punctuation">(</span><span class="token string">'package.json'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> uglify<span class="token operator">:</span> <span class="token punctuation">{</span><br /> options<span class="token operator">:</span> <span class="token punctuation">{</span><br /> banner<span class="token operator">:</span> <span class="token string">'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> build<span class="token operator">:</span> <span class="token punctuation">{</span><br /> src<span class="token operator">:</span> <span class="token string">'js/main.js'</span><span class="token punctuation">,</span><br /> dest<span class="token operator">:</span> <span class="token string">'js/main.min.js'</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token comment">// Load the plugin that provides the "uglify" task.</span><br /> grunt<span class="token punctuation">.</span><span class="token function">loadNpmTasks</span><span class="token punctuation">(</span><span class="token string">'grunt-contrib-uglify'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token comment">// Default task(s).</span><br /> grunt<span class="token punctuation">.</span><span class="token function">registerTask</span><span class="token punctuation">(</span><span class="token string">'default'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'uglify'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>I had created a package.json file from the start of the project with <code>npm init</code>. Now everything seems fine with JS. I’ll just have to change main.js to main.min.js at the end of my design.</p>
<h2 id="the-css" tabindex="-1"><strong>The CSS</strong></h2>
<p>I write Sass (indented). For those that agree with my steps from the beginning and got here to say :</p>
<blockquote>
<p>B.S! He uses indented Sass</p>
</blockquote>
<p>I feel comfortable with indented sass maybe because I’m a python developer and I live by indenting :P. I’ve been thinking I’ll change to Scss format soon enough. I really <a title="Sass and Compass: My Best Friends" href="http://josephrex.me/sass-and-compass-my-best-friends/" target="_blank">leverage Sass by using compass</a>. Consider all you want just getting done so easily.</p>
<p>First, I make use of <a href="http://compass-style.org/reference/compass/" target="_blank">compass extensions</a>, they help and provide me with a lot of useful mixins in addition with the ones I created myself. Here are some of mine</p>
<pre class="language-scss"><code class="language-scss">=<span class="token function">three-d</span><span class="token punctuation">(</span><span class="token variable">$shadowcolor</span><span class="token punctuation">)</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> relative<br /> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 1px 1px <span class="token variable">$shadowcolor</span><span class="token punctuation">,</span> 2px 2px <span class="token variable">$shadowcolor</span><span class="token punctuation">,</span> 3px 3px <span class="token variable">$shadowcolor</span><br /> <span class="token property">transition</span><span class="token punctuation">:</span> all 0.1s ease-in<br /> &<span class="token punctuation">:</span>active<br /> <span class="token property">box-shadow</span><span class="token punctuation">:</span> none<br /> <span class="token property">top</span><span class="token punctuation">:</span> 3px<br /> <span class="token property">left</span><span class="token punctuation">:</span> 3px<br /><br />=<span class="token function">font-face</span><span class="token punctuation">(</span><span class="token variable">$family</span><span class="token punctuation">,</span> <span class="token variable">$path</span><span class="token punctuation">,</span> <span class="token variable">$svg</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$weight</span></span><span class="token punctuation">:</span> normal<span class="token punctuation">,</span> <span class="token property"><span class="token variable">$style</span></span><span class="token punctuation">:</span> normal<span class="token punctuation">)</span><br /> @font-face<br /> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token variable">$family</span><br /> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span><span class="token string">'#{$path}.eot'</span><span class="token punctuation">)</span><br /> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span><span class="token string">'#{$path}.eot?#iefix'</span><span class="token punctuation">)</span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'embedded-opentype'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url">url</span><span class="token punctuation">(</span><span class="token string">'#{$path}.woff'</span><span class="token punctuation">)</span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url">url</span><span class="token punctuation">(</span><span class="token string">'#{$path}.ttf'</span><span class="token punctuation">)</span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'truetype'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url">url</span><span class="token punctuation">(</span><span class="token string">'#{$path}.svg##{$svg}'</span><span class="token punctuation">)</span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'svg'</span><span class="token punctuation">)</span><br /> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token variable">$weight</span><br /> <span class="token property">font-style</span><span class="token punctuation">:</span> <span class="token variable">$style</span><br /><br /><span class="token comment">// Makes Ellipsis on Single Line</span><br />=<span class="token function">ellipsis-line</span><span class="token punctuation">(</span><span class="token variable">$width</span><span class="token punctuation">)</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">$width</span><br /> <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<br /> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<br /> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<br /><br /><span class="token comment">// GrayScale Filter</span><br />=<span class="token function">grayscale</span><span class="token punctuation">(</span><span class="token variable">$level</span><span class="token punctuation">)</span><br /> <span class="token property">-webkit-filter</span><span class="token punctuation">:</span> <span class="token function">grayscale</span><span class="token punctuation">(</span><span class="token variable">$level</span><span class="token punctuation">)</span><br /> <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">grayscale</span><span class="token punctuation">(</span><span class="token variable">$level</span><span class="token punctuation">)</span><br /><br />=<span class="token function">socle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> relative<br /> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<br /> &<span class="token punctuation">:</span>after<br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><br /> <span class="token property">z-index</span><span class="token punctuation">:</span> -1<br /> <span class="token property">position</span><span class="token punctuation">:</span> absolute<br /> <span class="token property">border-radius</span><span class="token punctuation">:</span> 6px<br /> <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 0 1px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.1<span class="token punctuation">)</span><span class="token punctuation">,</span> inset 0 -1px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>0.7<span class="token punctuation">)</span><br /> <span class="token property">top</span><span class="token punctuation">:</span> -6px<br /> <span class="token property">bottom</span><span class="token punctuation">:</span> -6px<br /> <span class="token property">right</span><span class="token punctuation">:</span> -6px<br /> <span class="token property">left</span><span class="token punctuation">:</span> -6px<br /> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.1<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">)</span><br /><span class="token comment">// Gradients</span><br />=gradient-dark-linear<br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-webkit-linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>.25<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-o-linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>.25<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>.25<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">)</span><br />=gradient-light-linear<br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-webkit-linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-o-linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">)</span><br />=gradient-dark-radial<br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>center 0<span class="token punctuation">,</span> circle farthest-corner<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.15<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">)</span><br />=gradient-light-radial<br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>center 0<span class="token punctuation">,</span> circle farthest-corner<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>0.4<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>255<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>
<p>Kitty Giraudel gave <a href="http://www.sitepoint.com/sass-mixins-kickstart-project/" target="_blank">some kick-start mixins here</a>. I also use <a href="http://breakpoint-sass.com/" target="_blank">breakpoints</a> for my responsive styling.</p>
<pre class="lang:default decode:true ">sudo gem install breakpoint</pre>
<p>with it you can write media queries like this</p>
<pre class="language-scss"><code class="language-scss">.fancy<br /> <span class="token property">width</span><span class="token punctuation">:</span> 500px<br /> +<span class="token function">breakpoint</span><span class="token punctuation">(</span>max-width 1200px<span class="token punctuation">)</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 200px</code></pre>
<p>which is an equivalent of the following CSS</p>
<pre class="language-scss"><code class="language-scss"><span class="token selector">.fancy</span><span class="token punctuation">{</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br />@media only screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token selector">.fancy</span><span class="token punctuation">{</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>The force is with me on this one.</p>
<p>When there is need for grids, I call for <a href="http://susydocs.oddbird.net/en/latest/install/" target="_blank">susy</a>. Susy is way better than bootstrap grids in that I don’t have to load some unnecessary classes I don’t need. I call for grids just when I need them this way</p>
<pre class="language-scss"><code class="language-scss">.container<br /> +<span class="token function">container</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><br /> >div<br /> +<span class="token function">span</span><span class="token punctuation">(</span>25%<span class="token punctuation">)</span></code></pre>
<p>with a mark-up of this sort</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>That’s just 4 grids but we can go 12 just like bootstrap too. I like the idea that we can just call grids on demand rather than loading excess mark-up as with bootstrap.</p>
<p>Finally, I will like my websites to have browser compatibility when using properties by some vendor browsers. <a href="http://css-tricks.com/autoprefixer/" target="_blank">Autoprefixer</a> comes to my rescue at this point. I just need to add it to require it in my config.rb with my breakpoints and susy. But I also have to do some things to make it work after CSS file is generated, since it is a post processor.</p>
<pre class="language-rb"><code class="language-rb"><span class="token keyword">require</span> <span class="token string">'compass/import-once/activate'</span><br /><span class="token keyword">require</span> <span class="token string">'autoprefixer-rails'</span><br />on_stylesheet_saved <span class="token keyword">do</span> <span class="token operator">|</span>file<span class="token operator">|</span><br /> css <span class="token operator">=</span> <span class="token builtin">File</span><span class="token punctuation">.</span>read<span class="token punctuation">(</span>file<span class="token punctuation">)</span><br /> <span class="token builtin">File</span><span class="token punctuation">.</span>open<span class="token punctuation">(</span>file<span class="token punctuation">,</span> <span class="token string">'w'</span><span class="token punctuation">)</span> <span class="token keyword">do</span> <span class="token operator">|</span>io<span class="token operator">|</span><br /> io <span class="token operator"><</span> <span class="token constant">AutoprefixerRails</span><span class="token punctuation">.</span>process<span class="token punctuation">(</span>css<span class="token punctuation">)</span><br /> <span class="token keyword">end</span><br /><span class="token keyword">end</span><br /><span class="token keyword">require</span> <span class="token string">'breakpoint'</span><br /><span class="token keyword">require</span> <span class="token string">'susy'</span><br /><br />http_path <span class="token operator">=</span> <span class="token string">"/"</span><br />css_dir <span class="token operator">=</span> <span class="token string">"stylesheets"</span><br />sass_dir <span class="token operator">=</span> <span class="token string">"sass"</span><br />images_dir <span class="token operator">=</span> <span class="token string">"images"</span><br />javascripts_dir <span class="token operator">=</span> <span class="token string">"js"</span><br /><br />output_style <span class="token operator">=</span> <span class="token symbol">:compressed</span></code></pre>
<p>I also set output_style to compressed in my config.rb to get a resulting minified CSS. Finally, I had put a snippet of <a href="http://google.com/analytics" target="_blank">google analytics</a> at the bottom to help me monitor and maintain the website.</p>
<p>Now I’m all set. I don’t have to do all this every time I start a new project as I’ve made a default directory where I have it all set up. In cases where I have to use bootstrap, I also have a default-bootstrap directory where bootstrap is included in my config.rb.</p>
<p>These are good practices and I really do hope it helps anyone that stumbles upon them.</p>
<div class="update">
<h4>
Update
</h4>
<p>
12/13/2014 - I use Scss now. See <a title="Moving from Indented Sass to Scss" href="http://josephrex.me/moving-from-indented-sass-to-scss/">this post</a>
</p>
</div>
There shall be binaries2014-10-28T00:00:00Zhttps://www.josephrex.me/there-shall-be-binaries/<p>There comes a point when your program needs to be distributed to other users. You don’t want to always have to give every intended user of your program a list of modules or libraries to be installed before they can use your software.</p>
<p>There comes a point when your program needs to be distributed to other users. You don’t want to always have to give every intended user of your program a list of modules or libraries to be installed before they can use your software.</p>
<p>I’ve found myself developing software with python a lot lately and usually, I like people to check them out. Most times, my target users are Windows OS users. I built my programs but packing them into binaries became the pain in the neck for me.</p>
<p>Thanks to sherafff on the IRC. He got my first required binary done for me from his windows development machine. I’m no windows user and yet I have to be on the operating system for the target binary while I bundle it. This is no big deal! I have a windows VM.</p>
<p>After sherafff made the first binary for me, I found there were still a lot of program bugs that I had to fix. After fixing this in the source, I needed my binary to be updated again but then I wasn’t seeing sherafff active. He was on like most IRC users but was always away.</p>
<h2 id="taking-my-decision-on-what-binary-builder-to-use" tabindex="-1">Taking my decision on what binary builder to use</h2>
<p>I’d always thought of py2exe but it seemed like too much headache for me as a starter. Sherafff had used PyInstaller and said it was cool so I tried reading the docs carefully and I was able to make use of it. My preferred way of running pyinstaller on windows is</p>
<pre class="lang:default decode:true">pyinstaller --noconsole --onefile --upx-dir=. --icon=program.ico program.py</pre>
<ul>
<li>--icon because I like specifying my icon because I don’t like the default icon for generated executables</li>
<li>--noconsole because I don’t need a debugger console being displayed to a human end user</li>
<li>--onefile to get my single file rather than folders with a lot of DLLs (Dynamic Link Libraries)</li>
<li>--upx-dir just to specify where I’ve downloaded UPX to.</li>
</ul>
<p><a href="http://upx.sourceforge.net/#download" target="_blank">Upx</a> helps with compression while the executable is being packed. Pyinstaller integrates finely with upx and that is cool to me. I know py2exe has limitations even as I’ve not explored it well enough (I should soon). There are other builders that can be used to build my binaries which I also hope to explore soon and they are:</p>
<ul>
<li>py2app</li>
<li>cx_Freeze</li>
<li>bbFreeze</li>
<li>vendorID</li>
</ul>
<p>While I was being lazy to read the docs and get started with pyinstaller, I also got a heads up on a graphical builder which I think is cool. I haven’t used it yet but I hope to put it to use in my next project. It is <a href="https://code.google.com/p/gui2exe/" target="_blank">gui2exe</a> which was built with wxpython.</p>
<hr />
I've only scratched the surface of C programming but I believe in such a compiled language as C, we don't have to create executable for Linux as that is what is done after compiling. 0xFEEDBAC had always felt python will ruin me but I love it anyway :D. He said run while you can :) . Yea after a few more python experiments, I think I will be building some of my desktop applications in C. The whole point for me is to be a language agnostic programmer. I like the fact that I can get what I want done on one language at the moment. I will only learn other languages to do them later not because I care about a certain language or think another is inferior.
Using resources files with Qt designer2014-10-13T00:00:00Zhttps://www.josephrex.me/adding-resource-files-to-your-qt-designer-project-and-using-pyrcc-with-python/<p>I’ve planned writing on this for long but I’ve just been so busy. When I started building GUI programs with Qt designer, this was a big challenge for me for a while but somehow I figured it out on my own.</p>
<p>I’ve planned writing on this for long but I’ve just been so busy. When I started building GUI programs with Qt designer, this was a big challenge for me for a while but somehow I figured it out on my own.</p>
<p>When creating a GUI project in Qt designer, you need images on some parts of your interface. Qt designer allows you add images that have been included in your resource files. My first pain was “How the heck do I add images to this resource file and where the heck is it?”.</p>
<p>Well I said I figured it out on my own but yet I got the little internet aid. I found out from a search that I needed to have a <strong>app.qrc</strong> file for my resource files. This was all the information I got.</p>
<p>After failing to create a resource file several times, I decided to try out the “Add new resource file button”</p>
<p><img src="https://res.cloudinary.com/strich/image/upload/v1497715921/apprc_q6mqse.png" alt="apprc" /></p>
<p>From this point you can open an existing qrc file or create a new one.</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1497715924/apprc1_nsb5kn.png" alt="apprc1" class="image" />
</figure>
<p>Now we can add images as needed to the file</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1497715926/apprc2_f2ujxx.png" alt="apprc2" class="image" />
</figure>
<p>Now that’s it. When saved, this creates our app.qrc in the following format:</p>
<pre class="language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RCC</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>qresource</span> <span class="token attr-name">prefix</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/images<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>file</span><span class="token punctuation">></span></span>resources/images/128x128/james.jpg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>file</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>file</span><span class="token punctuation">></span></span>resources/images/128x128/jacque.jpg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>file</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>file</span><span class="token punctuation">></span></span>resources/images/128x128/sandra.jpg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>file</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>file</span><span class="token punctuation">></span></span>resources/images/128x128/alex.jpg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>file</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>file</span><span class="token punctuation">></span></span>resources/images/128x128/adams.jpg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>file</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>file</span><span class="token punctuation">></span></span>resources/images/128x128/joerex.jpg<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>file</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>file</span><span class="token punctuation">></span></span>resources/images/48x48/stop.png<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>file</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>qresource</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RCC</span><span class="token punctuation">></span></span></code></pre>
<p>So far I’ve named my resource file app.qrc. After compiling your ui file with pyuic, it will require a app_rc.py to be imported. In a case where you chose example.qrc for your resource files, a example_rc.py file is expected from the generated UI python modules. To create this resource modules containing binaries of our image data, we have to use pyrcc to compile to python like so:</p>
<pre><code>pyrcc app.qrc > app_rc.py
</code></pre>
<p>Now we have successfully made use of our resource files with our GUI program. If you have any additions please don’t hesitate to drop it in the comments.</p>
Getting started with GUI development in Python2014-09-12T00:00:00Zhttps://www.josephrex.me/getting-started-with-gui-development-in-python/<p>Most people that are fond of Windows operating system will always root for graphical desktop applications (GUI) over command line (CLI) programs. Since after DOS, windows operating systems have been known to use simple and user friendly GUI. This is one of the reasons why they have made a lot of customers around the world.</p>
<p>Most people that are fond of Windows operating system will always root for graphical desktop applications (GUI) over command line (CLI) programs. Since after DOS, windows operating systems have been known to use simple and user friendly GUI. This is one of the reasons why they have made a lot of customers around the world.</p>
<figure class="figure--fullwidth">
<img src="https://res.cloudinary.com/strich/image/upload/v1497718095/z_design_kkn1lu.jpg" class="image" alt="Graphical interface" />
</figure>
<p>Apple computers have also had wonderful GUI but their product prices still limits their products to those with more funds. There’s always an argument on Microsoft stealing the GUI concept from Apple but as much as I’m not a big Microsoft fan, I never agreed to that. Xerox started it, Apple found it, then Microsoft found it. You may say Microsoft stole from Apple what they had stolen from Xerox. I wouldn’t want to have the argument here. If you aren’t familiar with these stories, you should <a title="History of Graphical User Interface" href="https://en.wikipedia.org/wiki/History_of_the_graphical_user_interface" target="_blank">read the history</a>.</p>
<p>Most programmers I’ve seen from various languages usually start with CLI programs besides web developers. We are in a world where everyone wants a graphical interface for everything and then we choose to make programs that are CLI based. Since Microsoft is fully GUI oriented, its programming languages allow you easily build GUI programs. I once developed with Visual Basic 8 and Visual <a href="http://basic.net/">Basic.NET</a> in Visual Studio 2008, 2011. It was very easy and interesting building what I needed on those platforms but I just totally got tired of being a Windows developer and I abandoned them ever since.</p>
<p>I chose the Python path now as I’m still interested in building GUI programs and I will work you through GUI development as I’ve had my adventure in it so far.</p>
<p>In Python, there are 4 modules you can use to build GUI programs and they are</p>
<ul>
<li>Tkinter (Ships with Python)</li>
<li>wxPython</li>
<li>PyGTK</li>
<li>pyQT</li>
</ul>
<p>I started out with Tkinter since it shipped with my python installation while I was on a Windows operating system. This tutorial helped me <a href="http://sebsauvage.net/python/gui/">http://sebsauvage.net/python/gui/</a>. As soon as I got to do my first Tkinter program, I went ahead to do the wxpython program. At this point, I knew what it felt like to build a GUI but I didn’t fully understand how to handle signals and slots. I only used samples from sites and my GUI programs didn’t have enough objects and enough actions in them.</p>
<p>After some reading, I decided to go with pyQt. I never tried pyGTK till date so I have less to say about it. I wrote my first pyQt4 program this way:</p>
<pre class="language-py"><code class="language-py"><span class="token comment"># Code Example: Display a window in PyQt4</span><br /><span class="token comment"># Python 2.6 with PyQt 4</span><br /><span class="token keyword">import</span> sys<br /><span class="token keyword">from</span> PyQt4 <span class="token keyword">import</span> QtGui<br /><span class="token keyword">class</span> <span class="token class-name">MainFrame</span><span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QMainWindow<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token keyword">def</span> <span class="token function">__init__</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> QtGui<span class="token punctuation">.</span>QMainWindow<span class="token punctuation">.</span>__init__<span class="token punctuation">(</span>self<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>setWindowTitle<span class="token punctuation">(</span><span class="token string">"Window title"</span><span class="token punctuation">)</span> <span class="token comment"># title</span><br /> self<span class="token punctuation">.</span>resize<span class="token punctuation">(</span><span class="token number">1024</span><span class="token punctuation">,</span> <span class="token number">768</span><span class="token punctuation">)</span> <span class="token comment"># size</span><br /> self<span class="token punctuation">.</span>setMinimumSize<span class="token punctuation">(</span><span class="token number">800</span><span class="token punctuation">,</span> <span class="token number">600</span><span class="token punctuation">)</span> <span class="token comment"># minimum size</span><br /> self<span class="token punctuation">.</span>move<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment"># position window frame at top left</span><br /><br /><span class="token keyword">if</span> __name__ <span class="token operator">==</span> <span class="token string">"__main__"</span><span class="token punctuation">:</span><br /> app <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QApplication<span class="token punctuation">(</span>sys<span class="token punctuation">.</span>argv<span class="token punctuation">)</span><br /> frame <span class="token operator">=</span> MainFrame<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> frame<span class="token punctuation">.</span>show<span class="token punctuation">(</span><span class="token punctuation">)</span><br /><br /> exit_code <span class="token operator">=</span> app<span class="token punctuation">.</span>exec_<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> sys<span class="token punctuation">.</span>exit<span class="token punctuation">(</span>exit_code<span class="token punctuation">)</span></code></pre>
<p>The comments explain what each part of the code does. This is just a blank window frame with no objects in it. After this, I found this code for creating shapes within a canvas in a frame</p>
<pre class="language-py"><code class="language-py"><span class="token comment"># Code Example: Display a window with a button, icon and canvas in PyQt4</span><br /><span class="token comment"># Python 2.7 with PyQt 4</span><br /><span class="token comment"># This example build on the last one by adding a button, changing the</span><br /><span class="token comment"># window icon, and adding a canvas where we can draw some shapes.</span><br /><span class="token keyword">import</span> sys<br /><span class="token keyword">from</span> PyQt4 <span class="token keyword">import</span> QtGui<span class="token punctuation">,</span> QtCore<br /><span class="token keyword">class</span> <span class="token class-name">MainFrame</span><span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QMainWindow<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token keyword">def</span> <span class="token function">__init__</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> QtGui<span class="token punctuation">.</span>QMainWindow<span class="token punctuation">.</span>__init__<span class="token punctuation">(</span>self<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>setWindowTitle<span class="token punctuation">(</span><span class="token string">"Window title"</span><span class="token punctuation">)</span> <span class="token comment"># title</span><br /> self<span class="token punctuation">.</span>resize<span class="token punctuation">(</span><span class="token number">1024</span><span class="token punctuation">,</span> <span class="token number">768</span><span class="token punctuation">)</span> <span class="token comment"># size</span><br /> self<span class="token punctuation">.</span>setMinimumSize<span class="token punctuation">(</span><span class="token number">800</span><span class="token punctuation">,</span> <span class="token number">600</span><span class="token punctuation">)</span> <span class="token comment"># minimum size</span><br /> self<span class="token punctuation">.</span>move<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment"># position window frame at top left</span><br /> <span class="token comment"># Adding the icon:</span><br /> self<span class="token punctuation">.</span>setWindowIcon<span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QIcon<span class="token punctuation">(</span><span class="token string">"myicon.png"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> <span class="token comment"># Set the central widget for the main window</span><br /> cwidget <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QWidget<span class="token punctuation">(</span>self<span class="token punctuation">)</span><br /> <span class="token comment"># Set up a layout for the button and canvas:</span><br /> layout <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QVBoxLayout<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">#vertical box layout</span><br /> <span class="token comment">#layout = QtGui.QHBoxLayout() #horizontal box layout</span><br /> self<span class="token punctuation">.</span>add_button<span class="token punctuation">(</span>layout<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>add_canvas<span class="token punctuation">(</span>layout<span class="token punctuation">)</span><br /> cwidget<span class="token punctuation">.</span>setLayout<span class="token punctuation">(</span>layout<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>setCentralWidget<span class="token punctuation">(</span>cwidget<span class="token punctuation">)</span><br /> <span class="token comment"># Now set up the shapes that we draw on each button click</span><br /> <span class="token comment"># get the button back from the layout</span><br /> button <span class="token operator">=</span> layout<span class="token punctuation">.</span>itemAt<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span>widget<span class="token punctuation">(</span><span class="token punctuation">)</span><br /><br /> <span class="token comment"># Create objects used for drawing</span><br /> sol_pen <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QPen<span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QColor<span class="token punctuation">(</span><span class="token string">"black"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /><br /> dot_pen <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QPen<span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QColor<span class="token punctuation">(</span><span class="token string">"black"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> dot_pen<span class="token punctuation">.</span>setStyle<span class="token punctuation">(</span>QtCore<span class="token punctuation">.</span>Qt<span class="token punctuation">.</span>DotLine<span class="token punctuation">)</span><br /> dash_pen <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QPen<span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QColor<span class="token punctuation">(</span><span class="token string">"black"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> dash_pen<span class="token punctuation">.</span>setStyle<span class="token punctuation">(</span>QtCore<span class="token punctuation">.</span>Qt<span class="token punctuation">.</span>DashLine<span class="token punctuation">)</span><br /><br /> r_brush <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QBrush<span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QColor<span class="token punctuation">(</span><span class="token string">"red"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> g_brush <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QBrush<span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QColor<span class="token punctuation">(</span><span class="token string">"green"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> b_brush <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QBrush<span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QColor<span class="token punctuation">(</span><span class="token string">"blue"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> triangle <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QPolygonF<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> triangle<span class="token punctuation">.</span>append<span class="token punctuation">(</span>QtCore<span class="token punctuation">.</span>QPointF<span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> triangle<span class="token punctuation">.</span>append<span class="token punctuation">(</span>QtCore<span class="token punctuation">.</span>QPointF<span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> triangle<span class="token punctuation">.</span>append<span class="token punctuation">(</span>QtCore<span class="token punctuation">.</span>QPointF<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>scene_data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><br /> <span class="token comment"># add data for drawing circle</span><br /> <span class="token comment">#self.scene.addEllipse(0, 0, 150, 150, sol_pen, r_brush) #x, y, w, h etc</span><br /> self<span class="token punctuation">.</span>scene_data<span class="token punctuation">.</span>append<span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">'routine'</span><span class="token punctuation">:</span>self<span class="token punctuation">.</span>scene<span class="token punctuation">.</span>addEllipse<span class="token punctuation">,</span><br /> <span class="token string">'args'</span><span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">150</span><span class="token punctuation">,</span><span class="token number">150</span><span class="token punctuation">,</span>sol_pen<span class="token punctuation">,</span>r_brush<span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token string">'z'</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">#z-index</span><br /> <span class="token string">'next'</span><span class="token punctuation">:</span> <span class="token string">"Draw Rectangle"</span><span class="token punctuation">}</span><span class="token punctuation">)</span><br /> <span class="token comment"># add data for drawing square</span><br /> <span class="token comment">#self.scene.addRect(100, 100, 150, 150, dot_pen, g_brush) #x, y, w, h etc</span><br /> self<span class="token punctuation">.</span>scene_data<span class="token punctuation">.</span>append<span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">'routine'</span><span class="token punctuation">:</span>self<span class="token punctuation">.</span>scene<span class="token punctuation">.</span>addRect<span class="token punctuation">,</span><br /> <span class="token string">'args'</span><span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">,</span><span class="token number">150</span><span class="token punctuation">,</span><span class="token number">150</span><span class="token punctuation">,</span> dot_pen<span class="token punctuation">,</span> g_brush<span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token string">'z'</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token punctuation">,</span><br /> <span class="token string">'next'</span><span class="token punctuation">:</span> <span class="token string">"Draw Triangle."</span><span class="token punctuation">}</span><span class="token punctuation">)</span><br /> <span class="token comment"># add data for drawing triangle</span><br /> <span class="token comment">#self.scene.addPolygon(triangle, dash_pen, b_brush)</span><br /> self<span class="token punctuation">.</span>scene_data<span class="token punctuation">.</span>append<span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">'routine'</span><span class="token punctuation">:</span>self<span class="token punctuation">.</span>scene<span class="token punctuation">.</span>addPolygon<span class="token punctuation">,</span><br /> <span class="token string">'z'</span><span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">,</span><br /> <span class="token string">'args'</span><span class="token punctuation">:</span><span class="token punctuation">(</span>triangle<span class="token punctuation">,</span> dash_pen<span class="token punctuation">,</span> b_brush<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><br /> <span class="token comment"># Set up self.draw_next_item to fire when button is clicked.</span><br /> self<span class="token punctuation">.</span>connect<span class="token punctuation">(</span>button<span class="token punctuation">,</span> QtCore<span class="token punctuation">.</span>SIGNAL<span class="token punctuation">(</span><span class="token string">"clicked()"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> self<span class="token punctuation">.</span>draw_next_item<span class="token punctuation">)</span><br /><br /> <span class="token keyword">def</span> <span class="token function">add_button</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> layout<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token triple-quoted-string string">"""Create a button and then add it to the layout."""</span><br /> button <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QPushButton<span class="token punctuation">(</span><span class="token string">"Draw Circle"</span><span class="token punctuation">)</span><br /> layout<span class="token punctuation">.</span>addWidget<span class="token punctuation">(</span>button<span class="token punctuation">)</span><br /> <span class="token keyword">def</span> <span class="token function">add_canvas</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> layout<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token triple-quoted-string string">"""Create a canvas and then add it to the layout."""</span><br /> canvas <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QGraphicsView<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> layout<span class="token punctuation">.</span>addWidget<span class="token punctuation">(</span>canvas<span class="token punctuation">)</span><br /> <span class="token comment"># Now create a graphics scene to draw shapes to.</span><br /> <span class="token comment"># Now remember to keep a reference to GraphicsScene for as long as</span><br /> <span class="token comment"># you're using it, because unlike widgets, these are automatically</span><br /> <span class="token comment"># destroyed when they lose reference count</span><br /> self<span class="token punctuation">.</span>scene <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QGraphicsScene<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> canvas<span class="token punctuation">.</span>setScene<span class="token punctuation">(</span>self<span class="token punctuation">.</span>scene<span class="token punctuation">)</span><br /> <span class="token keyword">def</span> <span class="token function">draw_next_item</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token comment"># get the button. could've just saved as self.button, but I wanted to</span><br /> <span class="token comment"># show how it could be done this way</span><br /> button <span class="token operator">=</span> self<span class="token punctuation">.</span>centralWidget<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>layout<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>itemAt<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span>widget<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> d <span class="token operator">=</span> self<span class="token punctuation">.</span>scene_data<span class="token punctuation">.</span>pop<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment"># get first item</span><br /> item <span class="token operator">=</span> d<span class="token punctuation">[</span><span class="token string">'routine'</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token operator">*</span>d<span class="token punctuation">[</span><span class="token string">'args'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment"># just a little python magic</span><br /> item<span class="token punctuation">.</span>setZValue<span class="token punctuation">(</span>d<span class="token punctuation">[</span><span class="token string">'z'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><br /> <span class="token keyword">if</span> <span class="token builtin">len</span><span class="token punctuation">(</span>self<span class="token punctuation">.</span>scene_data<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token comment"># more stuff to draw, set button label</span><br /> button<span class="token punctuation">.</span>setText<span class="token punctuation">(</span>d<span class="token punctuation">[</span><span class="token string">'next'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><br /> <span class="token keyword">else</span><span class="token punctuation">:</span><br /> <span class="token comment"># no more left, disable button</span><br /> button<span class="token punctuation">.</span>setText<span class="token punctuation">(</span><span class="token string">"No more shapes!"</span><span class="token punctuation">)</span><br /> button<span class="token punctuation">.</span>setDisabled<span class="token punctuation">(</span><span class="token boolean">True</span><span class="token punctuation">)</span><br /><br /><br /><span class="token keyword">if</span> __name__ <span class="token operator">==</span> <span class="token string">"__main__"</span><span class="token punctuation">:</span><br /> app <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QApplication<span class="token punctuation">(</span>sys<span class="token punctuation">.</span>argv<span class="token punctuation">)</span><br /> frame <span class="token operator">=</span> MainFrame<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> frame<span class="token punctuation">.</span>show<span class="token punctuation">(</span><span class="token punctuation">)</span><br /><br /> exit_code <span class="token operator">=</span> app<span class="token punctuation">.</span>exec_<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> sys<span class="token punctuation">.</span>exit<span class="token punctuation">(</span>exit_code<span class="token punctuation">)</span></code></pre>
<p>The button object here was sending signals to change the shapes in the canvas. This was my first experience working with signals and slots. It’s like a simple jQuery where we have two objects in the DOM being selected.</p>
<pre class="language-js"><code class="language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#signal'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.receiver'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">'This is my slot'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token comment">// Pure JS</span><br />document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'signal'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.receiver'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'This is my slot'</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>That’s my interpretation in jQuery of handling signals and slots as I have demonstrated them with their related class names.</p>
<p>Writing GUI code can take a lot of time and can be really stressful. This is one of the reasons why I enjoy Qt because it has QtDesigner. It reminds me of my days with Visual Basic as it has a simple environment for you to just pick GUI components and drop on your frame. It’s a good toolkit to build GUI programs in few minutes. Here’s my Qt designer</p>
<figure class="figure--fullwidth">
<img src="https://res.cloudinary.com/strich/image/upload/v1497718070/snapshot8_guqbu6.png" class="image" alt="Snapshot 8" />
</figure>
<p>I designed the UI for my KDE desktop to be dark because I love dark UI so it it may not be such a dark UI in your case. The panes on the left are objects/widgets you can drop on your frame. On the right, we have property editor, signal/slot editor where you can set signals for some slots while designing the UI from the designer. For some signals, I prefer to manually attach them to their slots by writing my python code.</p>
<p>Qtdesigner produces user interface files in .ui extension. This ui files are in XML format. Here’s a short sample of its output</p>
<pre class="language-xml"><code class="language-xml"><span class="token prolog"><?xml version="1.0" encoding="UTF-8"?></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ui</span> <span class="token attr-name">version</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>author</span><span class="token punctuation">></span></span>Joseph Rex<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>author</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>class</span><span class="token punctuation">></span></span>MainWindow<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>class</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>widget</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>QMainWindow<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MainWindow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>property</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>geometry<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>x</span><span class="token punctuation">></span></span>0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>x</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>y</span><span class="token punctuation">></span></span>0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>y</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>width</span><span class="token punctuation">></span></span>749<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>width</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>height</span><span class="token punctuation">></span></span>518<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>height</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rect</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>property</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>widget</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ui</span><span class="token punctuation">></span></span></code></pre>
<p>We can work with these XML files directly to build our GUI but I wouldn’t recommend that. It’s best to turn this into a python code we can work with. Qtdesigner is built for C++ so C++ programmers can simply click Form > View Code to see the cpp code generated. For Python developers we use a UI compiler program (pyuic). I use pyuic4 so compiling a UI program is this way for me:</p>
<blockquote>
<p>pyuic4 guiprogram.ui -o <a href="http://guiprogram.py/">guiprogram.py</a></p>
</blockquote>
<p>You can’t just run this generated program to load up your GUI program. To use the generated code, <a href="http://pyqt.sourceforge.net/Docs/PyQt4/designer.html#using-the-generated-code" target="_blank">see the docs</a></p>
<p>Now you’re up and running. To wrap this all up, let’s create a simple GUI with an input box (QTextEdit), a button (QPushButton), and a label (QLabel). This program will take contents of the input and display in the label field after the button is clicked.</p>
<p>I started by creating a new Main Window from the QtDesigner templates</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1497718069/snapshot9_itwj5j.png" alt="Snapshot 9" class="image" />
</figure>
<p>Next things will be to set the width, height, and geometry (location of the window by XY axis on screen). Also, we have to take note of the objectName because it is the way we call our objects in the program. This is done in the property edior</p>
<figure class="figure--fullwidth">
<img src="https://res.cloudinary.com/strich/image/upload/v1497718072/snapshot10_rtxwwg.png" alt="Snapshot 10" class="image" />
</figure>
<p>You can see my objectName is MainWindow and I have chosen to use a window of size 400 x 280. I want it at the extreme top right so my geometry is (0,0) which stands for x-axis = 0, y-axis = 0.</p>
<p>I could create my signal and slots right away from the designer like so:</p>
<figure class="figure--fullwidth">
<img src="https://res.cloudinary.com/strich/image/upload/v1497718067/snapshot11_ci2vyo.png" alt="Snapshot 11" class="image" />
</figure>
<p>As you can see the signal/slot editor has the names of each object. and the view for the signals/slot editor shows there’s a relationship between the display button and the label below. I will just delete this slot to handle this part with my code because I have less options from the designer. I saved my design as example.ui and I’m compiling to python code with:</p>
<blockquote>
<p>pyuic4 example.ui -o ui_example.py</p>
</blockquote>
<p>Now I have this generated python code:</p>
<pre class="language-py"><code class="language-py"><span class="token comment"># -*- coding: utf-8 -*-</span><br /><br /><span class="token comment"># Form implementation generated from reading ui file 'example.ui'</span><br /><span class="token comment">#</span><br /><span class="token comment"># Created: Fri Sep 12 17:44:41 2014</span><br /><span class="token comment"># by: PyQt4 UI code generator 4.9.3</span><br /><span class="token comment">#</span><br /><span class="token comment"># WARNING! All changes made in this file will be lost!</span><br /><br /><span class="token keyword">from</span> PyQt4 <span class="token keyword">import</span> QtCore<span class="token punctuation">,</span> QtGui<br /><br /><span class="token keyword">try</span><span class="token punctuation">:</span><br /> _fromUtf8 <span class="token operator">=</span> QtCore<span class="token punctuation">.</span>QString<span class="token punctuation">.</span>fromUtf8<br /><span class="token keyword">except</span> AttributeError<span class="token punctuation">:</span><br /> _fromUtf8 <span class="token operator">=</span> <span class="token keyword">lambda</span> s<span class="token punctuation">:</span> s<br /><br /><span class="token keyword">class</span> <span class="token class-name">Ui_MainWindow</span><span class="token punctuation">(</span><span class="token builtin">object</span><span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token keyword">def</span> <span class="token function">setupUi</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> MainWindow<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> MainWindow<span class="token punctuation">.</span>setObjectName<span class="token punctuation">(</span>_fromUtf8<span class="token punctuation">(</span><span class="token string">"MainWindow"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> MainWindow<span class="token punctuation">.</span>resize<span class="token punctuation">(</span><span class="token number">400</span><span class="token punctuation">,</span> <span class="token number">280</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>centralwidget <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QWidget<span class="token punctuation">(</span>MainWindow<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>centralwidget<span class="token punctuation">.</span>setObjectName<span class="token punctuation">(</span>_fromUtf8<span class="token punctuation">(</span><span class="token string">"centralwidget"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>label <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QLabel<span class="token punctuation">(</span>self<span class="token punctuation">.</span>centralwidget<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>label<span class="token punctuation">.</span>setGeometry<span class="token punctuation">(</span>QtCore<span class="token punctuation">.</span>QRect<span class="token punctuation">(</span><span class="token number">130</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">131</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>label<span class="token punctuation">.</span>setFrameShape<span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QFrame<span class="token punctuation">.</span>Box<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>label<span class="token punctuation">.</span>setText<span class="token punctuation">(</span>_fromUtf8<span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>label<span class="token punctuation">.</span>setObjectName<span class="token punctuation">(</span>_fromUtf8<span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>textEdit <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QTextEdit<span class="token punctuation">(</span>self<span class="token punctuation">.</span>centralwidget<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>textEdit<span class="token punctuation">.</span>setGeometry<span class="token punctuation">(</span>QtCore<span class="token punctuation">.</span>QRect<span class="token punctuation">(</span><span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">311</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>textEdit<span class="token punctuation">.</span>setObjectName<span class="token punctuation">(</span>_fromUtf8<span class="token punctuation">(</span><span class="token string">"textEdit"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>pushButton <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QPushButton<span class="token punctuation">(</span>self<span class="token punctuation">.</span>centralwidget<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>pushButton<span class="token punctuation">.</span>setGeometry<span class="token punctuation">(</span>QtCore<span class="token punctuation">.</span>QRect<span class="token punctuation">(</span><span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">89</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>pushButton<span class="token punctuation">.</span>setObjectName<span class="token punctuation">(</span>_fromUtf8<span class="token punctuation">(</span><span class="token string">"pushButton"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> MainWindow<span class="token punctuation">.</span>setCentralWidget<span class="token punctuation">(</span>self<span class="token punctuation">.</span>centralwidget<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>menubar <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QMenuBar<span class="token punctuation">(</span>MainWindow<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>menubar<span class="token punctuation">.</span>setGeometry<span class="token punctuation">(</span>QtCore<span class="token punctuation">.</span>QRect<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>menubar<span class="token punctuation">.</span>setObjectName<span class="token punctuation">(</span>_fromUtf8<span class="token punctuation">(</span><span class="token string">"menubar"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> MainWindow<span class="token punctuation">.</span>setMenuBar<span class="token punctuation">(</span>self<span class="token punctuation">.</span>menubar<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>statusbar <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QStatusBar<span class="token punctuation">(</span>MainWindow<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>statusbar<span class="token punctuation">.</span>setObjectName<span class="token punctuation">(</span>_fromUtf8<span class="token punctuation">(</span><span class="token string">"statusbar"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /> MainWindow<span class="token punctuation">.</span>setStatusBar<span class="token punctuation">(</span>self<span class="token punctuation">.</span>statusbar<span class="token punctuation">)</span><br /><br /> self<span class="token punctuation">.</span>retranslateUi<span class="token punctuation">(</span>MainWindow<span class="token punctuation">)</span><br /> QtCore<span class="token punctuation">.</span>QMetaObject<span class="token punctuation">.</span>connectSlotsByName<span class="token punctuation">(</span>MainWindow<span class="token punctuation">)</span><br /><br /> <span class="token keyword">def</span> <span class="token function">retranslateUi</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> MainWindow<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> MainWindow<span class="token punctuation">.</span>setWindowTitle<span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QApplication<span class="token punctuation">.</span>translate<span class="token punctuation">(</span><span class="token string">"MainWindow"</span><span class="token punctuation">,</span> <span class="token string">"MainWindow"</span><span class="token punctuation">,</span> <span class="token boolean">None</span><span class="token punctuation">,</span> QtGui<span class="token punctuation">.</span>QApplication<span class="token punctuation">.</span>UnicodeUTF8<span class="token punctuation">)</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>pushButton<span class="token punctuation">.</span>setText<span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QApplication<span class="token punctuation">.</span>translate<span class="token punctuation">(</span><span class="token string">"MainWindow"</span><span class="token punctuation">,</span> <span class="token string">"Display"</span><span class="token punctuation">,</span> <span class="token boolean">None</span><span class="token punctuation">,</span> QtGui<span class="token punctuation">.</span>QApplication<span class="token punctuation">.</span>UnicodeUTF8<span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>
<p>The name of the window object in the designer is “MainWindow” so the class name in the generated code is Ui_MainWindow based on that. Following the docs on using generated code, I imported this in my major program</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">import</span> sys<br /><span class="token keyword">from</span> PyQt4 <span class="token keyword">import</span> QtGui<span class="token punctuation">,</span> QtCore<br /><span class="token keyword">from</span> ui_example <span class="token keyword">import</span> Ui_MainWindow<br /><br /><span class="token keyword">class</span> <span class="token class-name">Main</span><span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QMainWindow<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token keyword">def</span> <span class="token function">__init__</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> QtGui<span class="token punctuation">.</span>QMainWindow<span class="token punctuation">.</span>__init__<span class="token punctuation">(</span>self<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>ui <span class="token operator">=</span> Ui_MainWindow<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>ui<span class="token punctuation">.</span>setupUi<span class="token punctuation">(</span>self<span class="token punctuation">)</span><br /><br /><span class="token keyword">if</span> __name__ <span class="token operator">==</span> <span class="token string">'__main__'</span><span class="token punctuation">:</span><br /> app <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QApplication<span class="token punctuation">(</span>sys<span class="token punctuation">.</span>argv<span class="token punctuation">)</span><br /> window <span class="token operator">=</span> Main<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> window<span class="token punctuation">.</span>show<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> sys<span class="token punctuation">.</span>exit<span class="token punctuation">(</span>app<span class="token punctuation">.</span>exec_<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>
<p>Now the signals. We have three objects on this frame. Let’s rehash them but this time with the names we’ve given them in the program.</p>
<ul>
<li>QTextEdit = textEdit</li>
<li>QPushButton = pushButton</li>
<li>QLabel = label</li>
</ul>
<p>You can see I’ve used default names to make things easier but you can make it different in your case. QPushButton sends a signal, QLabel receives it and picks the content of QTextEdit to display in itself as a slot. I’ll amend my code to perform my function</p>
<pre class="language-py"><code class="language-py"><span class="token keyword">import</span> sys<br /><span class="token keyword">from</span> PyQt4 <span class="token keyword">import</span> QtGui<span class="token punctuation">,</span> QtCore<br /><span class="token keyword">from</span> ui_example <span class="token keyword">import</span> Ui_MainWindow<br /><br /><span class="token keyword">class</span> <span class="token class-name">Main</span><span class="token punctuation">(</span>QtGui<span class="token punctuation">.</span>QMainWindow<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> <span class="token keyword">def</span> <span class="token function">__init__</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> QtGui<span class="token punctuation">.</span>QMainWindow<span class="token punctuation">.</span>__init__<span class="token punctuation">(</span>self<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>ui <span class="token operator">=</span> Ui_MainWindow<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>ui<span class="token punctuation">.</span>setupUi<span class="token punctuation">(</span>self<span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>ui<span class="token punctuation">.</span>pushButton<span class="token punctuation">.</span>clicked<span class="token punctuation">.</span>connect<span class="token punctuation">(</span>self<span class="token punctuation">.</span>displayText<span class="token punctuation">)</span><br /> <span class="token keyword">def</span> <span class="token function">displayText</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span><br /> userInput <span class="token operator">=</span> self<span class="token punctuation">.</span>ui<span class="token punctuation">.</span>textEdit<span class="token punctuation">.</span>toPlainText<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> self<span class="token punctuation">.</span>ui<span class="token punctuation">.</span>label<span class="token punctuation">.</span>setText<span class="token punctuation">(</span>userInput<span class="token punctuation">)</span><br /><br /><span class="token keyword">if</span> __name__ <span class="token operator">==</span> <span class="token string">'__main__'</span><span class="token punctuation">:</span><br /> app <span class="token operator">=</span> QtGui<span class="token punctuation">.</span>QApplication<span class="token punctuation">(</span>sys<span class="token punctuation">.</span>argv<span class="token punctuation">)</span><br /> window <span class="token operator">=</span> Main<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> window<span class="token punctuation">.</span>show<span class="token punctuation">(</span><span class="token punctuation">)</span><br /> sys<span class="token punctuation">.</span>exit<span class="token punctuation">(</span>app<span class="token punctuation">.</span>exec_<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>
<p>and voila! It works. See it in action after running “python <a href="http://example.py/">example.py</a>”</p>
<figure>
<img src="https://res.cloudinary.com/strich/image/upload/v1497718065/snapshot12_thdp76.png" alt="Snapshot 12" class="image" />
</figure>
<h2 id="conclusion" tabindex="-1">Conclusion:</h2>
<p>Building GUI programs may be a challenge but as the world evolves, it is very necessary. You should also not directly use generated code from pyuic because you may want to make changes to the UI at any point. Each compilation with pyuic will make you lose your changes you’ve made on the generated code. I’ve chosen Qt as my best module for building GUI. You may choose something else that works for you but from what I hear, Tkinter has a lot of downsides so it’s not recommended.</p>
Prioritizing critical CSS for speed2014-09-10T00:00:00Zhttps://www.josephrex.me/prioritizing-critical-above-the-fold-css-to-optimize-page-load-speed/<p>I made <a href="http://slides.com/bl4ckdu5t/critical-css" target="_blank">a slide</a> on this about a month back and I’ve since intended to write about it here.</p>
<p>I made <a href="http://slides.com/bl4ckdu5t/critical-css" target="_blank">a slide</a> on this about a month back and I’ve since intended to write about it here.</p>
<p>Every developer that cares about user experience will always want to fix everything that makes a user think of not coming back to their website after first visit. I’ve found myself in such situations where I begin to think that whoever did this thing must have invested a lot of time making something that technically feels like nothing. We don’t want our applications to be thought of this way.</p>
<p>I design websites using technologies like <a href="http://sass-lang.com/" target="_blank">Sass</a> and Javascript, and desktop applications with <a href="http://python.org/" target="_blank">python</a> and <a href="http://qt-project.org/" target="_blank">Qt</a> . Usually, on my desktop applications, all I have to care about when considering UX is where the objects are placed around the Window frames to give a good affordability and mapping based on the principles of design by Don Norman. I’ve not taken time to go through the <a href="http://www.gui-bloopers.com/" target="_blank">GUI Bloopers</a> book and for that reason I’ll say I may be wrong on my GUI opinions even as I am capable of building them.</p>
<p>Unlike desktop applications for me, I have to include page load time to the considerations for a good user experience on the web. <a href="http://josephrex.me/im-not-a-perfectionist/" title="I’m not a perfectionist">I’m a DO-IT-RIGHT freak</a> so I try to keep up with the recommended and best ways. <del>I’m in the habit of <a href="http://validator.w3.org/" target="_blank">validating my HTML</a> and <a href="http://jigsaw.w3.org/css-validator/" target="_blank">my CSS </a>when I do website designs</del>. As much as I spend time making sure I have a syntactically ok code, I’m privy that validation tools wouldn’t check for semantic flaws so I put this in place myself. I use <a href="https://developers.google.com/speed/pagespeed/insights" target="_blank">Google pagespeed insights</a> and <a href="http://webpagetest.org/" target="_blank">Web page test</a> to analyze my web pages behavior. I don’t pursue 100% on all my projects but I try to get close on the ones I can by familiarizing with the requirements for good result. Recently, I started getting this line</p>
<p>when I see things like this initially, I just ignore them and tell myself “you don’t need to care about this, it’s for people who love to stress their brain”. Then I realize I don’t want to remain in my comfort zone forever so I take a shot. Well, my trial paid off and I was able to implement it on this little bootstrap project <a href="http://ostrich-dev.com/lab/feedapp" target="_blank">http://ostrich-dev.com/lab/feedapp</a> . As of the date of this writing, that website has 100% user experience and 44% page speed because I didn’t minify my JavaScript and CSS and I’m not leveraging browser caching. Besides this, check the details of the passed rules I have and you will see I have defeated the above-the-fold issue. Now let’s talk about what is really going on here</p>
<p>For each request, HTML, CSS, Javascript, Images, and every other assets are requested by the client’s browser from your website, except if the client isn’t visiting for the first time and you implement a client-side caching mechanism. Images can be optimized (I’ll talk about this in another article soon), JavaScript and CSS can be minified and then made to load better than we may expect.</p>
<p>What we did here was reduce the resources being requested on the initial HTTP request and we requested for the things we really need our users to see first while we waited for the other things to load before they scroll down. Don’t be fooled by the jQuery plugin I used in my example site to think that’s what makes my images make a bouncy load as you scroll below. That’s just an animation effect.</p>
<p>I wouldn’t like to repeat everything I’ve already said in my slide so I’ll just give it to you here</p>
<h2 id="conclusion" tabindex="-1">Conclusion:</h2>
<p>This is just one step to optimizing page load speed. There are other steps that may be required. As you have seen from my example that this didn’t just give me a 100% speed because it wasn’t everything that had to be done. Don’t ignore this as these little things matter. In the slide, I wrote briefly about the Compass extension: jacket. I will talk fully about how I achieved the separation of my critical CSS from the non-critical CSS with this in a future article.</p>
Regex: A required skillset for developers and power users2014-08-27T00:00:00Zhttps://www.josephrex.me/regex-a-required-skillset-for-developers-and-power-users/<p>I care about information and I believe everything we do wraps around trying to find information, protecting it, and making use of it. There is Google, DuckDuckGo, and other search engines, there is grep for Unix-like system users, there are search panes on applications and websites.</p>
<p>I care about information and I believe everything we do wraps around trying to find information, protecting it, and making use of it. There is Google, DuckDuckGo, and other search engines, there is grep for Unix-like system users, there are search panes on applications and websites.</p>
<p>Sometimes these media of information gathering may not be good/aggressive enough to find the exact outputs you expect especially when looking through files. This is why we learn how to do our searching and pattern matching <strong>like a boss</strong>.</p>
<hr />
<p>Regex (Regular expression) is a way to specify your search with deeper intensity. It is somewhat like wildcards. But, this is beyond very generic wildcards we use in simple instances. You may refer to this as wildcards on steroids.</p>
<p>Paint an instance where you have to find every occurrence of gray and grey in a large pile of text. Running (gray|grey) through a regular expressions parser will find all the expected results which are “gray” and “grey”. The pattern used to find them simply means I want to find every occurrence of gray or grey.</p>
<p>Being aware of how the | (pipe) can be used as an OR operator, I can write a better pattern this way gr(a|e)y and it will find the same results as the earlier used pattern.</p>
<p>There are tokens to be passed into regulation expressions parser to get outputs and some of them are listed in the table below:</p>
<table>
<thead>
<tr>
<th>Tokens</th>
<th>Category</th>
<th>Meaning</th>
<th>Example Matches</th>
</tr>
</thead>
<tbody>
<tr>
<td>\w</td>
<td>Meta sequence</td>
<td>word characters</td>
<td>Emma, Wattson</td>
</tr>
<tr>
<td>\d</td>
<td>Meta sequence</td>
<td>digits</td>
<td>12345</td>
</tr>
<tr>
<td>\D</td>
<td>Meta Sequence</td>
<td>non-digits</td>
<td>Andrew&@#c</td>
</tr>
<tr>
<td>\W</td>
<td>Meta Sequence</td>
<td>non-word</td>
<td>47585^#@</td>
</tr>
<tr>
<td>\s</td>
<td>Meta Sequence</td>
<td>white space</td>
<td></td>
</tr>
<tr>
<td>\S</td>
<td>Meta Sequence</td>
<td>non white space</td>
<td>ABC123</td>
</tr>
<tr>
<td>a{3}</td>
<td>Quantifier</td>
<td>Exactly three of a</td>
<td>aaa</td>
</tr>
<tr>
<td>a+</td>
<td>Quantifier</td>
<td>One or more of a</td>
<td>aaaaaa OR a</td>
</tr>
<tr>
<td>a*</td>
<td>Quantifier (Greedy)</td>
<td>Zero or more of a</td>
<td>aaaa</td>
</tr>
<tr>
<td>a?</td>
<td>Quantifier</td>
<td>Zero or one of a</td>
<td>cat OR cup</td>
</tr>
</tbody>
</table>
<p>My examples are probably not the best you will get to see and I can’t mention all the token types here as I will be turning this blog post into a regex dictionary. If you need to find more of them, I think the bottom right pane at <a href="http://regex101.com/" title="Regex101">regex101</a> is enough to feed you with all you want.</p>
<h2 id="summary" tabindex="-1">Summary:</h2>
<p>Regular expressions are very necessary and I think every institution should consider it a as compulsory course for every computer science student and departments that do a lot of computing.<br />
If you will like to see a graphical illustration of what happens while you use regular expressions, try out <a href="http://www.regexper.com/">regexper</a>. It produces neat graphical illustration of what roles the patterns play.</p>
<p><a href="http://www.regexr.com/">Regexr</a> also does something similar to what regex101 provides. It’s your call to pick what’s best for you.</p>
<h2 id="references" tabindex="-1">References:</h2>
<ul>
<li><a href="http://regex101.com/" title="Regex101">regex101</a></li>
<li><a href="http://www.regexper.com/">regexper</a></li>
<li><a href="http://www.regexr.com/">regexr</a></li>
<li><a href="http://www.regular-expressions.info/">regular-expressions.info</a></li>
</ul>
Good son, bad father: I'm leaving PHP but I love Laravel2014-08-12T00:00:00Zhttps://www.josephrex.me/good-son-bad-father-im-leaving-php-but-i-love-laravel/<p>PHP has a really shallow learning curve. It’s easy for a 8 year old to pick it up and start messing around with it. This is good and I love it about Python as well. However, PHP has been known to have a lot of flaws, one of the major reasons being because it was not built as a functional programming language but rather, just a Hypertext pre-processor.</p>
<p>PHP has a really shallow learning curve. It’s easy for a 8 year old to pick it up and start messing around with it. This is good and I love it about Python as well. However, PHP has been known to have a lot of flaws, one of the major reasons being because it was not built as a functional programming language but rather, just a Hypertext pre-processor.</p>
<p>It was meant to just automate the behaviour of HTML. Around 2005, OOP was introduced to PHP and it made PHP developers feel among the big boys of the web.</p>
<p>However, there are still some things wrong about how it behaves in its OOP. For example when using namespaces, the following still seems wrong to me</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token keyword">namespace</span> <span class="token package">Joseph</span><span class="token punctuation">;</span><br /><br /><span class="token variable">$object</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name class-name-fully-qualified"><span class="token punctuation">\</span>Rex<span class="token punctuation">\</span>say_hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token delimiter important">?></span></span></code></pre>
<p>I needed the preceding backward slash to bring me back to the global namespace. But when using the use statement,</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span><br /><span class="token keyword">namespace</span> <span class="token package">Joseph</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">use</span> <span class="token package">Rex<span class="token punctuation">\</span>say_hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token delimiter important">?></span></span></code></pre>
<p>Everything is wrong about this. I have friends that hate me for being a PHP developer but I chose to stick with it anyway.</p>
<p>While I was contemplating to leave PHP earlier before now, I had seen <a href="http://twitter.com/ircmaxell" title="@ircmaxell">Anthony Ferrara</a>’s <a title="PHP sucks but I like it" href="http://blog.ircmaxell.com/2012/04/php-sucks-but-i-like-it.html" target="_blank">blog post</a> “PHP sucks! but I like it” which convinced me to still stick with it. It was a response to the popular post by <a href="http://eev.ee/" target="_blank">Eevee</a> on <a href="http://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/" target="_blank">“PHP:A Fractal of Bad design”</a>. Anthony said it’s easy to get help with PHP. At the time, I was gullible to go with it.</p>
<p>When I think of it now, It’s easy to get help on whatever you need if you have an internet connection. On the Freenode IRC, I went ahead to count the present number of users at this time <code>12/08/2014</code> which is the date of this article, and then I checked the users on the following channels:</p>
<blockquote>
<p>##php <span style="color: red;">639 users</span> (including bots),</p>
<p>#ruby <span style="color: red;">885 users</span> (including bots)</p>
<p>#node.js <span style="color: red;">1299 users</span> (including bots)</p>
<p>#python <span style="color: red;">1469 users</span> (including bots)</p>
</blockquote>
<p>Doesn’t seem like PHP has much help anymore. The need for PHP developers by organizations has plummeted.</p>
<p>Although, the PHP community still have awesome frameworks like Laravel and Symfony where you can use composer and other cool stuff. But that’s for you the coder to think about. An average tech savvy looking to hire a developer for his new idea of a web app will ask other entrepreneurs about what’s best for development and they’ll mention Ruby-on-Rails, Python, Node. After which he starts searching for developers into those. It may take a while to convince them that there is actually a good part to the PHP that sounds evil (or never gets heard of).</p>
<p>Someone may come on the comments to rant that sites like Facebook use PHP. There are still big websites and CMS still making use of PHP but Facebook has been using its <a href="http://hacklang.org/" target="_blank">in-house developed language called Hack</a> since February 2014. It’s commonly described as <a href="http://www.phpclasses.org/blog/post/230-Hack-Language-is-All-that-PHP-Should-Have-Been.html" target="_blank">“All that PHP should have been”</a>.</p>
<p>Facebook had to leave because they had their own better JIT runtime compiler <a href="http://hhvm.com/" target="_blank">HHVM</a> which helps them a lot better and faster. <a href="http://twitter.com/rasmus" target="_blank">Rasmos Lerdorf</a> was faced with <a href="http://www.sitepoint.com/rasmus-lerdorf-php-frameworks-think-again/" target="_blank">a question on how PHP could be sped up and his response was “Well, it can’t be”</a>. He admitted! Now why should Facebook keep tweaking what isn’t getting better. They just had to get their own stuff.</p>
<p>This is not about criticizing PHP. Besides, I’m just a 21st century programmer. I don’t have a 10 years or 20 years programming experience but I like to do what I do right. I am really poor at ASM even as I’ve been reading some books on x86. If you are looking for critiques against PHP, the following sites can be of help</p>
<ul>
<li><a href="http://www.phpwtf.org/" target="_blank">http://www.phpwtf.org/</a></li>
<li><a href="http://phpsadness.com/" target="_blank">http://phpsadness.com/</a></li>
<li><a href="http://quaxio.com/wtf/php.html" target="_blank">http://quaxio.com/wtf/php.html</a></li>
</ul>
<p>In <a href="http://readwrite.com/2014/08/11/why-learn-php#comment-1538686844" target="_blank">my comment</a> to <a href="http://readwrite.com/2014/08/11/why-learn-php" target="_blank">this post</a> on “why learn PHP”, I was soliciting for Laravel as a PHP framework because Laravel is the only reason why I still have some hopes in PHP.</p>
<h2 id="conclusion" tabindex="-1">Conclusion</h2>
<p>I don’t at all hate PHP as I’ve said earlier, it’s not like something you should not do. It’s just something you may not get satisfied with if you like to get the best results. Simply because I’m seeking to do more projects I’ll be happy with myself about, I’ll be dropping PHP after my current project. Well, I can’t leave it totally. I will still be contributing to the open source Laravel packages I’ve forked and I will have to touch it sporadically.</p>
<h2 id="references" tabindex="-1">References</h2>
<ul>
<li><a href="http://blog.ircmaxell.com/2012/04/php-sucks-but-i-like-it.html" target="_blank">http://blog.ircmaxell.com/2012/04/php-sucks-but-i-like-it.html</a></li>
<li><a href="http://www.phpclasses.org/blog/post/230-Hack-Language-is-All-that-PHP-Should-Have-Been.html" target="_blank">http://www.phpclasses.org/blog/post/230-Hack-Language-is-All-that-PHP-Should-Have-Been.html</a></li>
<li><a href="http://www.sitepoint.com/rasmus-lerdorf-php-frameworks-think-again/" target="_blank">http://www.sitepoint.com/rasmus-lerdorf-php-frameworks-think-again/</a></li>
<li><a href="http://readwrite.com/2014/08/11/why-learn-php" target="_blank">http://readwrite.com/2014/08/11/why-learn-php</a></li>
</ul>
I am not a perfectionist2014-08-01T00:00:00Zhttps://www.josephrex.me/im-not-a-perfectionist/<p>I’m sick of hearing everyone call themselves perfectionists everywhere I go. Trust me, this is the most ridiculous thing you should call yourself from my view. I’d rather you use curse words on me than call me a perfectionist.</p>
<p>I’m sick of hearing everyone call themselves perfectionists everywhere I go. Trust me, this is the most ridiculous thing you should call yourself from my view. I’d rather you use curse words on me than call me a perfectionist.</p>
<h2 id="who-is-a-perfectionist" tabindex="-1">Who is a perfectionist?</h2>
<p>By using the google dictionary, I found this:</p>
<blockquote>
<p>A person who refuses to accept any standard short of perfection</p>
</blockquote>
<p>Doesn’t that sound stupid? Well, it does to me as a realist. I’ll define perfectionist as someone who is ever dissatisfied, someone that never gets what he or she wants, someone that keeps ranting on something that will never come true for them, someone who doesn’t reason straight.</p>
<p>Is it everyone that calls themselves perfectionists that my definitions describe? No! Those who do not fit in to the mentioned definitions are dumb because they only call themselves perfectionists without having a proper idea of what it means.</p>
<p>The so called “perfectionists” I’ve encountered in my life are non-creative people that inflict pains on people they are opportune to be superiors to. They make these people burn their lives trying to do things that may not be easily achieved or never achieved.</p>
<p>Perfectionist is derived from the word “perfect”. Personally, I don’t believe any adjective should exist if it doesn’t play a qualification role. The word “perfect” exists and yes, there are things that are perfect. Look at yourself and you’ll see you are a perfect creation of God. Look at the awesome universe, you will see something perfect. We mortals will keep chasing impeccability. It’s like a goal for us to reach and no one actually reaches it. As perfect as the internet tends to work for multiple nations and continents around the world, there are parts of its code commented with minor errors that could be broken some day. It may possible to reach this peak of perfection, but how possible is it? Achieving proper perfection is like escaping the Bermuda triangle.</p>
<p>Our everyday use of the word perfect is only a metaphor of the actual perfection.</p>
<p>How long do you want to fool yourself and say you’re chasing perfection? It’s good to be positive, I know! You feel you want to get the best of what you do, you want to be best at what you do, you want to do it the right way. Perfect isn’t the word for you, there are a lot of words in Dictionaries and Thesaurus that’ll describe you the right way.</p>
<p>I know what I am but I haven’t had a chance to look up a name that describes me, so I choose to call myself a <strong>DO-IT-RIGHT-FREAK</strong>.</p>
<p>For everything I do, I try to be the best at it. In my unadulterated words, I try not to suck at whatever I do.</p>
<h2 id="conclusion" tabindex="-1">Conclusion</h2>
<p>Being a perfectionist only makes you forever a dream chaser. Sit back and watch other guys progress as they do little things while you stay idle and seek perfection. Perfectionists never get contended with what they have, they are mentally imprisoned.</p>
I'm an 'X' programmer2014-07-23T00:00:00Zhttps://www.josephrex.me/im-an-x-programmer/<p>All things programming is a part of hackery to me. I love to hack stuffs and that’s what has pulled me into the planet of development and engineering. From my observation, some people miss the point on what programming is about.</p>
<p>All things programming is a part of hackery to me. I love to hack stuffs and that’s what has pulled me into the planet of development and engineering. From my observation, some people miss the point on what programming is about.</p>
<p>Some see it as a tag to their beings like “Jake the Java Programmer”. What’s that? It doesn’t look reasonable to me. Not because I’m not a Java programmer but because it just isn’t right.</p>
<p>Well, Someone could call me a Python programmer because I love writing stuffs in Python or a PHP programmer because PHP is what they see me do most often. However, I wouldn’t tag myself with any of those because my objective as a programmer is not just to get lauded with a programming language but to create solutions.</p>
<p>If we’re creating solutions then we can’t be stuck with a tool. The <a href="http://en.wikipedia.org/wiki/United_States_Navy_SEALs">SEALS</a> use guns and grenades but when all that’s left is wood, they use it to defeat their enemies.</p>
<p>Why can’t all programmers think this way? You shouldn’t get so obsessed with a language that you want to tag yourself with it alone for the rest of your life.</p>
<p>I’m a good Python programmer and a better PHP developer. I also started working with Ruby lately and I’ve been able to play around with Rails.</p>
<p>According to <a href="http://www.google.com/about/company/philosophy/">Google philosophy</a>, it’s best to do one thing really well. I am in total compliance to this. However, doing one thing really well doesn’t mean you should be stuck to that one thing. Google is popularly known as a search engine and they are the best at it. They go as far as providing search maps and a lot of search filters. But they are not stuck to this. Google also owns gPlus, they own YouTube, they own Android, they recently released a prototype for a Self-driving Car.</p>
<p>Do not misinterpret the message! Be good at what you do, but learn to do other things and do not be stuck on one.</p>
Sending files over Ajax requests with jQuery2014-06-18T00:00:00Zhttps://www.josephrex.me/sending-files-over-ajax-requests-with-jquery/<p>If you’ve been writing [jQuery,][1] you’re probably fond of writing your code this way when submitting forms with ajax</p>
<p>If you’ve been writing <a href="http://jquery.com/">jQuery,</a> you’re probably fond of writing your code this way when submitting forms with ajax</p>
<pre class="language-js"><code class="language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'submit'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">serialize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> type<span class="token operator">:</span><span class="token string">"POST"</span><span class="token punctuation">,</span><br /> data<span class="token operator">:</span>data<span class="token punctuation">,</span><br /> url<span class="token operator">:</span> yourUrl<br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fail</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"It failed"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>and for those using older versions of jQuery or haven’t realized the essence of promises, it should be something like this you have:</p>
<pre class="language-js"><code class="language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'submit'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">serialize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> type<span class="token operator">:</span><span class="token string">"POST"</span><span class="token punctuation">,</span><br /> data<span class="token operator">:</span>data<span class="token punctuation">,</span><br /> url<span class="token operator">:</span> yourUrl<br /> <span class="token function-variable function">success</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token function-variable function">error</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"It failed"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Either way you have it, a problem you will encounter when working with file inputs will be that your files do not get uploaded. This is because <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequests (XHR)</a> was not supporting Form Data Objects with file inputs.</p>
<p>According to <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">the standards by mozilla</a> support has been added for XHR Level 2. This makes it easy to transfer files with Ajax requests. All you need is a little tweak in your code.</p>
<p>If you have the following HTML</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>compform<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<p>You can handle the file upload in ajax as shown here:</p>
<pre class="language-js"><code class="language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'submit'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#compform'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> type<span class="token operator">:</span><span class="token string">"POST"</span><span class="token punctuation">,</span><br /> data<span class="token operator">:</span>data<span class="token punctuation">,</span><br /> url<span class="token operator">:</span> yourURL<span class="token punctuation">,</span><br /> processData<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br /> contentType<span class="token operator">:</span> <span class="token boolean">false</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fail</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"It failed"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>This was stated by the Mozilla Developer Network <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">here</a></p>
Leveraging Sass for your front-end designs2014-06-18T00:00:00Zhttps://www.josephrex.me/leveraging-sass-for-your-front-end-designs/<p>Recently I chose to move from vanilla CSS to the syntactically awesome stylesheeets and this has been a great step in my life.
It’s been a breath of fresh air!</p>
<p>Recently I chose to move from vanilla CSS to the syntactically awesome stylesheeets and this has been a great step in my life.
It’s been a breath of fresh air!</p>
<p><a href="http://sass-lang.com/" target="_blank">Team-Sass</a> provided a style guide for SASS concerning how we can name our variables for colors. A basic variable naming should be as it is on <a href="http://sass-lang.com/styleguide/color/" target="_blank">http://sass-lang.com/styleguide/color/</a> where all the colors have their names as variables like so:</p>
<pre class="language-scss"><code class="language-scss"><span class="token property"><span class="token variable">$hopbush</span></span><span class="token punctuation">:</span> #c69<br /><span class="token property"><span class="token variable">$bouquet</span></span><span class="token punctuation">:</span> #b37399<br /><span class="token property"><span class="token variable">$venus</span></span><span class="token punctuation">:</span> #998099<br /><span class="token property"><span class="token variable">$patina</span></span><span class="token punctuation">:</span> #699<br /><span class="token property"><span class="token variable">$nebula</span></span><span class="token punctuation">:</span> #d2e1dd<br /><span class="token property"><span class="token variable">$dawn-pink</span></span><span class="token punctuation">:</span> #f2ece4<br /><span class="token property"><span class="token variable">$wafer</span></span><span class="token punctuation">:</span> #e1d7d2<br /><span class="token property"><span class="token variable">$iron</span></span><span class="token punctuation">:</span> #dadbdf<br /><span class="token property"><span class="token variable">$regent-grey</span></span><span class="token punctuation">:</span> #808c99<br /><span class="token property"><span class="token variable">$pale-sky</span></span><span class="token punctuation">:</span> #6b717f<br /><span class="token property"><span class="token variable">$midnight-blue</span></span><span class="token punctuation">:</span> #036<br /><span class="token property"><span class="token variable">$light-green</span></span><span class="token punctuation">:</span> #98cbad</code></pre>
<p><a href="http://webdesign.tutsplus.com/tutorials/quick-tip-name-your-sass-variables-modularly--webdesign-13364" target="_blank">This article</a> by <a href="http://tutsplus.com/" target="_blank">tutsplus</a> teaches on how you can create better variable names.</p>
<p>One of SASS awesome features that I cherish besides the wonders of mixins, inheritance, loops, and the other most lauded features of SASS is its rgba().</p>
<p>It’s syntax is</p>
<pre class="language-scss"><code class="language-scss"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$alpha</span><span class="token punctuation">)</span></code></pre>
<p>This way, it’s not limited to just rgb() values for the colors but it converts even hexadecimal colors to RGB for its RGB values</p>
<p>I think everyone that’s not taking advantage of what these pre-processors have to offer is missing out on a lot</p>
Future of CSS: Content Pseudo Selector2014-05-14T00:00:00Zhttps://www.josephrex.me/content-pseudo-selector/<p>Before I started making use of CSS3 to create beautiful websites, I had crappy ways of getting some things done which I think some other designers also did. Since the introduction of [CSS3 pseudo selectors][1], my life got better. They helped me achieve decent mark-up.</p>
<p>Before I started making use of CSS3 to create beautiful websites, I had crappy ways of getting some things done which I think some other designers also did. Since the introduction of <a href="http://www.w3.org/TR/css3-selectors/">CSS3 pseudo selectors</a>, my life got better. They helped me achieve decent mark-up.</p>
<p>Lately, I thought of making my life a lot easier by doing something even more awesome. I don’t know if it exists already or in the works, but I’ll go into details on how I came about it and I think it will be really cool.</p>
<p>I was disquieted by the much unnecessary mark-up used by a UI designer I worked with while playing back-end role on a project and I thought of cleaning up. There was a paragraph that required inner styles on some of it’s contents (last three words). Every normal thinker feels hunky-dory to wrap it around a span and get on but there are people who just aren’t satisfied with the normal way. I happen to be in this category of people. This is what it could have been</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The quick brown fox jumped <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>over the dog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>and the following style</p>
<pre class="language-css"><code class="language-css"><span class="token selector">p span</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre>
<p>But I came up with this simple mark-up</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The quick brown fox jumped over the dog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>and a style like so:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">p:[26:]</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre>
<p>As a python programmer, I feel this should also be handled the way python strings are picked from their variables. The pseudo selector <code>p:[26:]</code> should pick characters from the 26th character in the element, using a cardinal numbering and it then styles it till it hits the end of the element.</p>
<p>To have just <strong>jumped over</strong> styled, we have to specify an end for the selection. That way we can have it this way</p>
<pre class="language-css"><code class="language-css"><span class="token selector">p:[20:30]</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre>
<h2 id="handling-possible-drawbacks" tabindex="-1">Handling possible drawbacks</h2>
<p>If a user has a the following</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Foobar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>and does a style <code>p:[0:8]{}</code>, since the content doesn’t have up to 8 cardinal numbers, it breaks at the end of the closing tag still applying the style to all the characters it could pick. Also, when used on an element with inline <code>< img ></code> or any other inline tag, it breaks when it meets them.</p>
<p>Let’s make the web better for both users and coders!!</p>
Oh Sass! How awesome is it gonna get2014-05-03T00:00:00Zhttps://www.josephrex.me/sass-awesomeness/<p>I started writing Sass not too long ago and it has been one of the best experiences I’ve had. Sass (Syntatically Awesome Stylesheet) is just as awesome as the name sounds.</p>
<p>I started writing Sass not too long ago and it has been one of the best experiences I’ve had. Sass (Syntatically Awesome Stylesheet) is just as awesome as the name sounds.</p>
<p>Sass is a CSS predecessor that gives smart designers a lot more flexibility with the styling. New features are being added to Sass and with contributions of the Google team, it’s getting even faster than you can imagine. This <a href="https://www.youtube.com/watch?v=-ZJeOJGazgE">talk by Chris Eppstein</a> reveals the work in progress.</p>
<p>Some of the common things that can be done with Sass are</p>
<h2 id="variables" tabindex="-1">VARIABLES</h2>
<pre class="language-scss"><code class="language-scss"><span class="token property"><span class="token variable">$color</span></span><span class="token punctuation">:</span> #ff0000<span class="token punctuation">;</span><br />.warning<br /> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$color</span></code></pre>
<h2 id="mixins" tabindex="-1">MIXINS</h2>
<pre class="language-scss"><code class="language-scss">=<span class="token function">border-radius</span><span class="token punctuation">(</span><span class="token variable">$radius</span><span class="token punctuation">)</span><br /> <span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> <span class="token variable">$radius</span><br /> <span class="token property">-moz-border-radius</span><span class="token punctuation">:</span> <span class="token variable">$radius</span><br /> <span class="token property">-ms-border-radius</span><span class="token punctuation">:</span> <span class="token variable">$radius</span><br /> <span class="token property">-o-border-radius</span><span class="token punctuation">:</span> <span class="token variable">$radius</span><br /> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token variable">$radius</span><br /><br />.object<br /> +<span class="token function">border-radius</span><span class="token punctuation">(</span>5px<span class="token punctuation">)</span></code></pre>
<p>And that’s a sweet way to defeat repetition of vendor prefixes.</p>
<h2 id="extend-inheritance" tabindex="-1">Extend (Inheritance)</h2>
<pre class="language-scss"><code class="language-scss">.message<br /> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<br /> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<br /> <span class="token property">color</span><span class="token punctuation">:</span> #333<br /><br />.success<br /> <span class="token keyword">@extend</span> .message<br /> <span class="token property">border-color</span><span class="token punctuation">:</span> green</code></pre>
<p>For most of the new features, Sass3 (SCSS) is used.</p>
<h2 id="each-loop" tabindex="-1">@each loop</h2>
<pre class="language-scss"><code class="language-scss"><span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$alert</span> in success, warning, error</span><span class="token punctuation">{</span><br /> <span class="token selector">.<span class="token variable">#{$alert}</span>-display </span><span class="token punctuation">{</span><br /> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span><span class="token string">'/images/#{$alert}.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>Thanks to <a href="http://benfrain.com/">Ben Frain</a>, I learnt about maps from <a href="http://benfrain.com/using-lists-with-maps-in-sass-3-3">his blog</a>.</p>
<p>You see how he had applied the @each loop in that article to handle a json encoded data by making use of maps this way</p>
<pre class="language-scss"><code class="language-scss"><span class="token comment">// Map</span><br /><span class="token property"><span class="token variable">$colourList</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span><br /> <span class="token property">1</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>#000000<span class="token punctuation">,</span> #000011<span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token property">2</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>#000011<span class="token punctuation">,</span> #000022<span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token property">3</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>#000022<span class="token punctuation">,</span> #000033<span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token property">4</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>#000033<span class="token punctuation">,</span> #000044<span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token property">7</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>#000044<span class="token punctuation">,</span> #000055<span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token property">8</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>#000055<span class="token punctuation">,</span> #000066<span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token property">9</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>#000066<span class="token punctuation">,</span> #000077<span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token property">10</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>#000077<span class="token punctuation">,</span> #000088<span class="token punctuation">)</span><span class="token punctuation">,</span><br /><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token comment">// @each loop</span><br /><span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$colourList</span>, <span class="token variable">$keyNumber</span> in <span class="token variable">$colourList</span> </span><span class="token punctuation">{</span><br /> <span class="token property"><span class="token variable">$background</span></span><span class="token punctuation">:</span> <span class="token function">nth</span><span class="token punctuation">(</span><span class="token variable">$keyNumber</span><span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property"><span class="token variable">$lowlight</span></span><span class="token punctuation">:</span> <span class="token function">nth</span><span class="token punctuation">(</span><span class="token variable">$keyNumber</span><span class="token punctuation">,</span> 2<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token selector">header </span><span class="token punctuation">{</span><br /> <span class="token selector">.section_<span class="token variable">#{$colourList}</span> <span class="token parent important">&</span> </span><span class="token punctuation">{</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token variable">$background</span><span class="token punctuation">;</span><br /> <span class="token property">border-right</span><span class="token punctuation">:</span> 2px dotted <span class="token variable">$lowlight</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>There’s more to play with on Sass, @while loops, @for loops, @if statements, mathematical operations, and more. Head over to the <a href="http://sass-lang.com/documentation/file.Sass_REFERENCE.html" target="_blank">Sass documentation</a> to see more of them and join me in rocking this world of Sass.</p>
<p>Thinking why you may not need Sass if you can just write your CSS? Check out this <a href="http://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/" target="_blank">screencast</a> on some use cases by Chris Coyier</p>
CSS Sanitation2014-05-03T00:00:00Zhttps://www.josephrex.me/css-sanitation/<p>I do a lot of back-end web development but front-end calls me a lot because of my passion for creativity. I’ve had to consider CSS files on various projects I’ve worked on. Some as front-end designer, some as back-end.</p>
<p>I do a lot of back-end web development but front-end calls me a lot because of my passion for creativity. I’ve had to consider CSS files on various projects I’ve worked on. Some as front-end designer, some as back-end.</p>
<p>On a project I’m working on, we’ve had various hands in the stylesheets and it has caused a lot of irrelevant rules in the CSS. Some global classes are not really been put to use and the CSS already contains over 6,500 lines of code already. Also, the fact that multiple frameworks are used on the present project, it lands us in a larger number of selectors.</p>
<p>To clean up my unused rules I have picked on the following:</p>
<ul>
<li>UNCSS -<a href="https://github.com/giakki/uncss"> https://github.com/giakki/uncss</a></li>
<li>Helium-CSS -<a href="https://github.com/geuis/helium-css">https://github.com/geuis/helium-css</a></li>
</ul>
<p>Uncss is really easy to install with npm. You should see this video on how to automate CSS cleanup with uncss <a href="https://www.youtube.com/watch?v=833xr1MyE30">https://www.youtube.com/watch?v=833xr1MyE30</a></p>
Butterfly and Fish2014-04-25T00:00:00Zhttps://www.josephrex.me/butterfly-and-fish/<p>I recently stumbled upon butterfly on <a href="http://paradoxxxzero.github.io/2014/02/28/butterfly.html">here</a> and it is a really awesome web browser shell execution program written in python. It’s not like it’s the first of it’s kind. There are others like:</p>
<p>I recently stumbled upon butterfly on <a href="http://paradoxxxzero.github.io/2014/02/28/butterfly.html">here</a> and it is a really awesome web browser shell execution program written in python. It’s not like it’s the first of it’s kind. There are others like:</p>
<p><a href="https://github.com/antonylesuisse/qweb/tree/master/ajaxterm">ajaxterm</a> and <a href="http://anyterm.org/">anyterm</a></p>
<p>They are also good but development has stopped on them and I don’t think they are better than butterfly. Ajaxterm was adapted from anyterm and there have been no new commits since 2011.</p>
<p>Why should you use butterfly?</p>
<p>You can run butterfly on your server and use it within your browser from any client to SSH into your server and bypass filters. It also has a lot more good use. Just think about it.</p>
<p>Installation is as easy as:</p>
<pre><code>sudo pip install butterfly
</code></pre>
<p>To start the server,</p>
<pre><code>butterfly.server.py
</code></pre>
<p>and you can go to <a href="http://localhost:57575/">localhost:57575</a> on your web browser to access it</p>
<p>To bind to a specific host for remote access,</p>
<pre><code>butterfly.server.py --host="0.0.0.0"
</code></pre>
<p>which isn’t secure according to the owner’s article</p>
<p>One more awesome feature is that you can specify your shell to be used in butterfly</p>
<pre><code>butterfly.server.py --shell=/usr/bin/fish
</code></pre>
<h2 id="what’s-fish" tabindex="-1">What’s Fish?</h2>
<p><a href="http://fishshell.com/">Fish</a> is a user-friendly shell with awesome features. I’ve been using it for a while now and it’s even a lot more awesome inside butterfly.</p>
<p>Its awesome features include auto-suggestions, super-awesome tab completion, scripting, job timing, and more. It also opens any file with its default program just by doing a</p>
<p><code>open filename</code></p>
<p>Try them out.</p>
Dealing with merge conflicts2014-04-19T00:00:00Zhttps://www.josephrex.me/dealing-with-merge-conflicts/<p>Recently, I started using git and mercury for version control. I’ve never really used any other version control system before these two. For most of my recent projects, I’ve chosen to make more use of git. Git is a really awesome version control system as I’ve heard from a lot of Pros coming from other version control system like Subversion (SVN).</p>
<p>Recently, I started using git and mercury for version control. I’ve never really used any other version control system before these two. For most of my recent projects, I’ve chosen to make more use of git. Git is a really awesome version control system as I’ve heard from a lot of Pros coming from other version control system like Subversion (SVN).</p>
<p>I just saw this article by Tobias Günther on<a href="http://css-tricks.com/deal-merge-conflicts-git/"> CSS-Tricks</a> and it was really detailed and interesting, explaining everything about merge conflicts and how we fix them. Tobias works for<a href="http://www.git-tower.com/"> Tower</a> where they built the git-tower. In the article he made demonstrations with <a href="http://www.kaleidoscopeapp.com/" target="_blank">Kaleidoscope</a> which is a diff / merge client for Mac OS X.</p>
<p>As a Linux user, I thought of how I could make use of a merge tool like that to save me the stress of manually cleaning up merges, then I saw this <a href="http://css-tricks.com/deal-merge-conflicts-git/#comment-1579934">comment</a> by <a href="http://ayottesoftware.com/">Richard Ayotte</a> which made made me check out <a href="http://meldmerge.org/" target="_blank">meld merge</a>. He also talked about <a href="https://wiki.gnome.org/Apps/Gitg/" target="_blank">Gitg</a> which I didn’t try out.</p>
<p>It’s barely a day since I’ve been using it and it has helped me come a long way on my current project. I’ll just gather up all the diff / merge tools I’m aware of for various OS below.</p>
<ul>
<li><a href="http://meldmerge.org/" target="_blank">Meldmerge</a> (Linux – <em>stable</em>, Windows and OS – <em>unstable</em>)</li>
<li><a href="https://wiki.gnome.org/Apps/Gitg/" target="_blank">Gitg</a> (Linux)</li>
<li><a href="http://www.kaleidoscopeapp.com/" target="_blank">Kaleidoscope</a> (OS X)</li>
<li><a href="http://www.araxis.com/merge" target="_blank">Araxis merge</a> (Windows and OS X)</li>
<li><a href="http://www.scootersoftware.com/" target="_blank">Beyond compare</a> (Windows)</li>
<li><a href="http://www.perforce.com/product/components/perforce-visual-merge-and-diff-tools" target="_blank">P4merge</a> (Linux, OS X, and Windows)</li>
<li><a href="http://www.deltopia.com/compare-merge-sync/macosx" target="_blank">DeltaWalker</a> (OS X)</li>
<li><a href="http://winmerge.org/" target="_blank">WinMerge</a> (Windows)</li>
</ul>
<p>Try them out and they’ll improve your projects version control just like they did mine.</p>