tag:blogger.com,1999:blog-8149275864871947882024-03-12T20:51:33.381-07:00BlogI am maintaining this blog to document things that I have done and would like to remember or perhaps could help other people who are facing the same issues.David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.comBlogger88125tag:blogger.com,1999:blog-814927586487194788.post-78079781208626314422021-05-16T08:10:00.004-07:002021-05-16T08:11:24.767-07:00Collection of bad / confusing UI <p>In this post I want to share some examples of UIs that I find really confusing. Maybe you'll agree or maybe you won't but I think it's still fun to show what I think is bad UI. It's probably going to be an ongoing post - because I always find sites that are confusing online. I won't tell which site it comes from so that we can keep them anonymous. I've wanted to write this post a while ago but never did. There's a saying that goes by "better now than never"</p><p><br /></p><p>1. <br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj96WXqisaIV89Gh8TUKob8ksB3tiDoWWC5r-TavgOkW_s0Iwwteyb4sHmkux_yUDH1eO90wmq7qzGNIgbqT1zgGYeD-w1u8MoN9jsRtA9X6Hy2F1cXEsySXD9TZoqnbCCeaTx95A3fiVgj/s588/Screen+Shot+2021-05-16+at+7.55.35+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="190" data-original-width="588" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj96WXqisaIV89Gh8TUKob8ksB3tiDoWWC5r-TavgOkW_s0Iwwteyb4sHmkux_yUDH1eO90wmq7qzGNIgbqT1zgGYeD-w1u8MoN9jsRtA9X6Hy2F1cXEsySXD9TZoqnbCCeaTx95A3fiVgj/s320/Screen+Shot+2021-05-16+at+7.55.35+AM.png" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>This tab color is really strange to me. Which one is currently selected? Every time I use this, I end up clicking on "Activity Details" (light colored one) but that one is already selected. The one not selected is the one in dark blue. I don't think there's a right and wrong here but my brain cannot come to the conclusion that the light white background color is the selected one.<p></p><p>More to come!</p><p></p><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><p></p>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-55625641305617258882019-06-17T10:57:00.001-07:002021-04-29T11:28:14.987-07:00Git commands cheat sheet (in progress)<div>### Use case: Working on 2 dev branches and merging one into the other and want to revert</div><div><pre style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-size: 13px; font-stretch: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><pre style="border-radius: 3px; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">git checkout dev_branch</code></pre><pre style="border-radius: 3px; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">git merge my_new_feature // merging my branch into develop</code></pre></pre></div><div>Ooops, now I realized `my_new_feature` has something wrong</div><div><br /></div><div><pre style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-size: 13px; font-stretch: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><pre style="border-radius: 3px; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">git revert -m 1 <sha of merged commit> </code></pre><pre style="border-radius: 3px; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">OR</code></pre><pre style="border-radius: 3px; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">git revert HEAD</code></pre></pre></div><div>-m 1 means we keep the parent side of merge (<span style="color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit; white-space: inherit;">dev_branch</span> branch)</div><div><br /></div><div><div>### Fetch their new commits and merge to your branch</div></div><div><pre style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-size: 13px; font-stretch: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><pre style="border-radius: 3px; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">git fetch protected_repo
</code></pre><div><br /></div></pre></div><br />
Committed but not pushed to remote. Want to get rid of latest commit
<br />
<pre style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;">git reset --hard HEAD~1</pre>
Get a branch from a forked repo to your own repo (or to your own forked repo)
<br />
<pre style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">git reset HEAD~1 </code></pre>
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545}
</style>
<br />
<div class="p1">
<div class="p1">
Get a branch from a forked repo to your own repo (or to your own forked repo)<br />
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
</div>
<div class="p1" style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<div class="p1">
</div>
</div>
<br />
<pre style="-webkit-text-stroke-width: 0px; background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; line-height: inherit; margin: 0px 0px 1em; max-height: 600px; orphans: 2; overflow-wrap: normal; overflow: auto; padding: 12px 8px; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; vertical-align: baseline; widows: 2; width: auto; word-spacing: 0px;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">git </code><span class="pln" style="background-color: transparent; border: 0px; box-sizing: inherit; color: #303336; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">fetch git@github</span><span class="pun" style="background-color: transparent; border: 0px; box-sizing: inherit; color: #303336; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">.</span><span class="pln" style="background-color: transparent; border: 0px; box-sizing: inherit; color: #303336; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">com</span><span class="pun" style="background-color: transparent; border: 0px; box-sizing: inherit; color: #303336; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">:</span><span class="pln" style="background-color: transparent; border: 0px; box-sizing: inherit; color: #303336; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">theirusername</span><span class="pun" style="background-color: transparent; border: 0px; box-sizing: inherit; color: #303336; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">/</span><span class="pln" style="background-color: transparent; border: 0px; box-sizing: inherit; color: #303336; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">reponame</span><span class="pun" style="background-color: transparent; border: 0px; box-sizing: inherit; color: #303336; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">.</span><span class="pln" style="background-color: transparent; border: 0px; box-sizing: inherit; color: #303336; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">git theirbranch</span><span class="pun" style="background-color: transparent; border: 0px; box-sizing: inherit; color: #303336; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">:</span><span class="pln" style="background-color: transparent; border: 0px; box-sizing: inherit; color: #303336; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">ournameforbranch</span></pre>
</div>
</div>
Associate your local copy to the upstream branch<br />
<pre style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-size: 13px; font-stretch: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;">git remote add repo_name https://github.com/theirusername/their_repo.git</pre><div><br /></div><div><br /></div>
Fetch their new commits and merge to your branch<br />
<pre style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-size: 13px; font-stretch: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><pre style="border-radius: 3px; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">git fetch protected_repo
git merge protected_repo/foo</code></pre>
</pre>
David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-65783542828382619462017-03-18T13:30:00.003-07:002017-03-18T13:30:47.490-07:00Moving private repos to bitbucketAs much as like github for repos - I didn't feel it was *yet* worth to pay the monthly fee to get unlimited private repos. So I decided to move all my private repos to bitbucket, which is free!<br />
<br />
If you ever need to do the same, here's a link that explains it really well:<br />
<br />
http://befused.com/git/github-bitbucket-move<br />
<br />
<br />
<br />
<br />David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-78359470597919246572017-02-14T19:17:00.000-08:002017-02-14T19:17:12.883-08:00Chrome dev tools - secret weapon?When I started working back in 2010, we used to support IE7. I still remember how much of a paint it was to debug javascript code. With IE8/IE9 debuggers, what I learned is patience, rather than figuring out how to fix all those weird bugs that *always show up *only in IE. The debuggers were so slow. Also back then, firebug was the norm. Chrome dev tools was relatively new and most people I knew did not use it. I liked Chrome so I sticked with it. Now, it's a tool that I use almost every day. In fact, I try to spend some time and follow what's new with the dev tools. I also spend some time experimenting with soon to be features/apis on Chrome Canary. This year, well last year... (2016), I've been pretty busy and haven't had much time to look at the new features. But today, I spent a few hours catching up on the last Google I/O and watch what's new with the dev tools. I wanted to share this link and give back some love to the chrome dev tools by writing this post.<br />
<br />
<a href="https://developers.google.com/web/updates/2016/06/devtools-digest?hl=en">https://developers.google.com/web/updates/2016/06/devtools-digest?hl=en</a><br />
<div>
<br /></div>
<div>
<br /></div>
David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-40869250456385861722017-02-08T12:12:00.001-08:002017-02-08T12:12:49.036-08:00css position: stickyThis links highlights what's new in Chrome 56:<br />
<a href="https://www.blogger.com/goog_921061958"><br /></a>
<a href="https://developers.google.com/web/updates/2017/01/nic56?utm_source=frontendfocus&utm_medium=email">https://developers.google.com/web/updates/2017/01/nic56?utm_source=frontendfocus&utm_medium=email</a><br />
<br />
One cool thing amongst others (bluetooth access is also cool but this one css feature is something I wish we had a while back) is <b>position:sticky</b>.<br />
<br />
It's available in Chrome 56 (stable as of Jan 2017) and to summarize, it allows to fix an element into the viewport when it's within a threshold.<br />
<br />
.header {<br />
// Element will be "fixed" when it is 10px from the top of the viewport<br />
position:sticky;<br />
top: 10px<br />
}<br />
<br />
You could set top : 0; to make it stick directly to the top of the viewport.<br />
<br />
Have to be conscious that this positioning might not be available in other browsers as of yet.<br />
<br />
There's this site I use to check what's available: http://caniuse.com/#search=sticky<br />
<br />
As of now, it's not available in IE (not very surprising...)<br />
<br />
<br />David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-1360334429616915492017-01-23T16:41:00.001-08:002017-01-23T16:41:13.482-08:00Git bisectEver used git bisect?!<br />
<br />
<a href="https://www.metaltoad.com/blog/beginners-guide-git-bisect-process-elimination">https://www.metaltoad.com/blog/beginners-guide-git-bisect-process-elimination</a>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-91138952784609157862016-10-27T22:45:00.000-07:002016-10-27T22:45:38.971-07:00async promises in a sync way?This blog post title is pretty confusing - but if you get to read <a href="https://developers.google.com/web/fundamentals/getting-started/primers/async-functions?utm_source=javascriptweekly&utm_medium=email">this blog post</a> by Google, it actually makes sense.<br />
<br />
It's actually pretty cool. Not that I don't like callbacks or promises, but I can see this being useful in more complex examples.<br />
<br />
<code>
async function fetchDogPics(url) {</code><br />
<code> try {</code><br />
<code> //this looks synchronous but it isn't...<br /> const response = await fetch(url);<br /> await response.text();</code><br />
<code> } catch (err) {<br /> console.log('failed', err);</code><br />
<code> }<br />
}<br />
<br />
<br />
<br />
</code>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-13295396199898384052016-10-15T22:10:00.001-07:002016-10-15T22:22:26.588-07:00Enums in JavascriptFound this tiny library that implements Enums in JavaScript:<br />
<br />
<a href="https://github.com/rauschma/enumify/blob/master/test/basic-tests.js">https://github.com/rauschma/enumify</a><br />
<br />
npm install enumifyDavid Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-16156793663273765892016-03-23T17:56:00.000-07:002016-03-23T17:56:32.242-07:00Babel syntax highlighting for Sublime 3In case you are looking for an ES6 syntax highlighting in sublime, check the babel-sublime project. Here it is: <a href="https://github.com/babel/babel-sublime">babel-sublime</a>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-68095403963258537422016-03-14T00:02:00.001-07:002016-03-14T00:02:15.129-07:00Looking into ES6I'm starting to look at ES6 and here's one post that I found useful for converting react.js components to ES6.<br />
<br />
<a href="http://www.tamas.io/react-with-es6/">http://www.tamas.io/react-with-es6/</a>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-27206371742834042342016-02-04T22:52:00.002-08:002016-02-04T22:52:46.955-08:00Gentle intro to maintaining CSS with WebpackFound a gentle intro on how to maintain CSS with Webpack (targeted at React.js).<br />
<br />
Check it out !<br />
<br />
<a href="http://bensmithett.com/smarter-css-builds-with-webpack/">http://bensmithett.com/smarter-css-builds-with-webpack/</a>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-30974989555211116532015-12-28T23:44:00.002-08:002015-12-28T23:44:39.977-08:00One more webpack - react.js tutorialVery basic tutorial on setting up webpack for react.js with hot reload. All the good things!<br />
<br />
<a href="https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement">https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement</a>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-77921834480706301732015-12-21T23:48:00.000-08:002015-12-23T18:42:14.608-08:00Heroku setup for webpackI'm looking into webpack for react and trying to setup a small project on heroku:<br />
<br />
Here's a tutorial I want to follow:<br />
<br />
<a href="http://ditrospecta.com/javascript/react/es6/webpack/heroku/2015/08/08/deploying-react-webpack-heroku.html">http://ditrospecta.com/javascript/react/es6/webpack/heroku/2015/08/08/deploying-react-webpack-heroku.html</a><br />
<br />
Another well explained tutorial:<br />
<a href="http://www.christianalfoni.com/articles/2015_04_19_The-ultimate-webpack-setup">http://www.christianalfoni.com/articles/2015_04_19_The-ultimate-webpack-setup</a><br />
<br />
and a bootstrap project:<br />
<br />
<a href="https://github.com/cgreening/simple-webpack-react-starter/blob/master/package.json">https://github.com/cgreening/simple-webpack-react-starter/blob/master/package.json</a>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-8691005094924410592015-12-16T09:08:00.006-08:002015-12-16T09:08:10.579-08:00React.js and Flexbox links I want to look at when I have time1. <span style="background-color: white; color: #666666; font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 22.4px;">A set of React components implementing flexboxgrid with the power of CSS Modules</span><br />
https://github.com/roylee0704/react-flexbox-grid?utm_source=html5weekly&utm_medium=email<br />
<br />
2. Grid, Flexbox tutorial<br />
https://24ways.org/2015/grid-flexbox-box-alignment-our-new-system-for-layout/<br />
<br />
3. Grid by examples:<br />
http://gridbyexample.com/David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-62130110859904956212015-10-28T00:02:00.002-07:002015-10-28T00:02:51.810-07:00React.js tutorial code on githubI've been watching and following a few tutorials about React.js during my free time, mostly for fun and also for work and I thought that I would share the code of the examples, since they are pretty much self-explanatory and might be good examples to bootstrap new projects, i.e.: react-router and reflex examples...<div>
<br /></div>
<div>
It's also easier for me to track changes so here you go, <a href="https://github.com/davidlygagnon/react.js-tutorials">https://github.com/davidlygagnon/react.js-tutorials</a>.</div>
<div>
<br /></div>
David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-22526767002626353752015-10-22T00:34:00.004-07:002015-10-22T00:38:02.261-07:00HTML5 Dev Conf 2015 - San Francisco<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
I attended the first day of the conference this year. I didn't take that much notes but here it is in case your interested:<br />
<br />
Design and Performance by Steve Souders</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
Slides at: <a href="http://stevesouders.com/">http://stevesouders.com/</a>
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
- May be useful to do prototyping early instead of just getting mock ups from UX
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
- W3C Web timing specs
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
Navigation Timing
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
overall page metrics: performance.timing, now()
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
Resource Timing
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
individual HTTP requests
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
performance.getEntries()
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
User Timing
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
performance.mark, performance.measure
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
<br /></div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
- Example about image display time to load
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
add performance.measure in two places and take the max(): one on the image unload attribute and the other one at the bottom of the page.
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
<br /></div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
<br /></div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
Michael Jackson - React Router dev contributor
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
MustacheJS
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
@reactjstraining
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
reactjs-training.com
</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
<br /></div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
github.com/rackt -> interesting start to get involved in some open source projects...</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
<br />
Checkout:</div>
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
react-art
</div>
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<br />
<div style="font-family: 'Helvetica Neue'; font-size: 14px;">
react-canvas </div>
David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-78536637640746365142015-02-23T18:28:00.001-08:002015-02-23T18:28:45.075-08:00Fitbit API !I recently bought a Fitbit scale and spent a few hours trying their APIs. At the same time, I decided to open source the code I wrote. It's basically a Fitbit client library to talk to Fitbit.<br/>
<a href="https://github.com/davidlygagnon/fitbit-node#fitbit-node">Github repo of Fitbit-node</a><br/>
It's still a work in progress but the library is available as of now. It's not a lot of code and I am using npm package: OAuth.
When I get a chance, I'm going to add an example on how to use it.
David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-54942941439942402562015-01-31T23:49:00.002-08:002015-01-31T23:49:42.095-08:00ReactJS Conference Jan 28-29 at FacebookI hadn't a chance to go to this Conference. It was at FB headquarters. Instead, I watched a few videos of the conference they posted online:</br>
<a href="http://conf.reactjs.com/schedule.html">
http://conf.reactjs.com/schedule.html</a>
</br>
The keynote is pretty interesting. Tom Occhino talks about the history of React and how it was first introduced.David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-14262375963868006782014-11-19T10:18:00.000-08:002014-11-19T10:18:07.349-08:00Google Chrome Summit Happening now !Watch it live at :<br/>
<a href="https://developer.chrome.com/devsummit/">https://developer.chrome.com/devsummit/</a>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-84955176817399700762014-11-10T17:30:00.002-08:002014-11-10T17:30:35.438-08:00Simple tutorial on React.jsJust found a simple introductory tutorial on React.js. On my todo list!
<br/>
<a href="http://scotch.io/tutorials/javascript/learning-react-getting-started-and-concepts">Learning React.js: Getting Started and Concepts</a>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-82655207457267851972014-10-23T10:44:00.000-07:002014-10-23T10:45:44.820-07:00Twitter Flight Conference LinksFabric<br/>
<a href="https://fabric.io/salesforce6/ios/apps/sfdc.fabrickeynote/twitter
">https://fabric.io/salesforce6/ios/apps/sfdc.fabrickeynote/twitter</a>
<br/><br/>
Twitter Kit<br/>
<a href="https://fabric.io/salesforce6/ios/apps/sfdc.fabrickeynote/twitter
">https://dev.twitter.com/twitter-kit/ios/twitter-login</a>
<br/><br/>
Embedded Tweets<br/>
<a href="https://fabric.io/salesforce6/ios/apps/sfdc.fabrickeynote/twitter">
https://dev.twitter.com/web/embedded-tweets</a>
<br/><br/>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-52576220219502517762014-10-17T18:58:00.001-07:002014-10-17T19:05:40.550-07:00HTML5 Dev Conf and IOTAConfNext week is going to be really fun. I have the opportunity to attend the <a href="http://html5devconf.com/schedule.html">HTML5DevConf</a> and <a href="http://www.iotaconf.com/">IOTAConf</a> again and also go to a new conference hosted by Twitter: <a href="www.twitterflight.com/">Twitter Flight</a>
Here's the schedule of the talks I intend to go for the HTML5DevConf:<br/>
<br/>
http://www.iotaconf.com/schedule.html<br/>
http://html5devconf.com/schedule.html<br/>
<br/>
Monday:
<br/><br/>
<b>7:30-9:00<br/></b>
Registration<br/>
<br/>
<b>9:00-9:50<br/> </b>
1. The Web of things - Leveraging the web for the internet of things, E-135<br/>
2. Design patterns for an internet of things, N-123<br/>
3. Dump SASS and Less CSS for JS powered CSS, Michael Mikowski, Qualaroo, E-131<br/>
<br/>
<b>10-10:40<br/></b>
Break<br/><br/>
<b>10-40-11:30<br/></b>
1. How to create native-like experience in the mobile web, E-131<br/>
2. Bringing Web content to the big screen with google cast, E-130<br/>
<br/>
<b>11:40-12:30<br/></b>
1. Virtual Reality & the future of the web, E-135<br/>
2. The new meteor platform, web and native mobile from a single reactive javascript codebase, E-133<br/>
<br/>
<b>1:30-2:20<br/></b>
1. Engaging Apps: Service Workers, Push and notifications, Alex Russell, Google - E-135<br/>
2. React and Flux, Bill Fisher, Facebook, E-133<br/>
<br/>
<b>2:30-3:20<br/></b>
1. Angular.js 101, N-120<br/>
2. The physical Web + Generating Real Time Imagery Using HTML5, E-132<br/>
<br/>
<b>3:20 - 4:00<br/>
</b>Break<br/>
<br/>
<b>4-4:20, 4:30-4:50<br/>
</b>
1. What’s coming in Node.js, E-135<br/>
<br/>
<b>5-5:50<br/>
</b>
1. Data Structures with Javascript, Rajesh Kumar, Uber, E-135<br/>
2. Beer locker: Building a Restful API with Node, Scott Smith, E-132<br/>
<br/>
<b>Tuesday<br/>
</b>
<b>7:30-9:00<br/>
</b>Registration<br/>
<br/>
<b>9-9:50<br/>
</b>
1. Parallel JavaScript: A high-level parallel programming model for the web + Death to cookies, Long lived JSON web tokens, E-133<br/>
2. Architecting the next generation of IOT + IOT monetization: challenge and changes, N-123<br/>
<br/>
<b>10-10:40<br/>
</b>Break<br/>
<br/>
<b>10-40-11:30<br/>
</b>
1. How Web components will change CSS best practices, Philip Walton, Google, E-133<br/>
<br/>
<b>11:40-12:30<br/>
</b>
1. Scaling A/B testing with Node.js, Alex Liu, Netflix, E-132<br/>
<br/>
<b>12:30-1:30<br/>
</b>Lunch<br/>
<br/>
<b>1:30-2:20 and 2:30-3:20<br/>
</b>
1. Theory and practice of functional reactive javascript, E-133<br/>
<br/>
<b>3:20 - 4:00<br/>
</b>Break<br/>
<br/>
<b>4-4:20, 4:30-4:50<br/>
</b>
1. IOT Landscape, Evolution and maturity models, N-124<br/>
<br/>
<b>5-5:50<br/>
</b>
1. The web is your API, feeds and actions using HTML5 and web mentions, E-134<br/>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-1983005309845905042014-10-02T23:48:00.001-07:002014-10-02T23:48:21.604-07:00Directive restrictions: What are E, A or C.<a href="https://thinkster.io/egghead/directive-restrictions/">Directive Restrictions</a> explained along with a short youtube video.David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-3867299461572329472014-10-01T22:17:00.001-07:002014-10-02T23:49:12.495-07:00angular.js modules?I've been playing around with Angular.js and one thing that I haven't really looked at yet are modules. My app currently has only one module. I was thinking that I should probably soon or later refactor it into more defined modules. Today, while searching for something else, I just found something surprising about modules:
<br><br>
<i>"Angular Modules are good for nothing...so far. Except for loading 3rd-party angular code into your app and mocking during testing. Other than that, there is no reason to use more than one module in your app. Misko said of multiple modules: "[you] should group by view since views will be lazy loaded in near future". I'd love for someone on the Angular team to enlighten us on what their plans are for that."</i>
https://coderwall.com/p/y0zkiwDavid Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0tag:blogger.com,1999:blog-814927586487194788.post-37423238801218284112014-09-25T23:26:00.002-07:002014-09-25T23:26:35.718-07:00Great introduction on Dom Event!<a href="http://www.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/">Introduction to Dom Events</a>David Ly-Gagnonhttp://www.blogger.com/profile/02898082071368490432noreply@blogger.com0