HTML5 Dev Conf 2015 - San Francisco

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:

Design and Performance by Steve Souders
- May be useful to do prototyping early instead of just getting mock ups from UX
- W3C Web timing specs
     Navigation Timing
          overall page metrics: performance.timing, now()
     Resource Timing
          individual HTTP requests
               performance.getEntries()
     User Timing
          performance.mark, performance.measure

- Example about image display time to load
     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.


Michael Jackson - React Router dev contributor
MustacheJS
@reactjstraining
reactjs-training.com

github.com/rackt -> interesting start to get involved in some open source projects...

Checkout:
react-art

react-canvas 

Comments

Post a Comment

Popular posts from this blog

Git commands cheat sheet (in progress)

### Use case: Working on 2 dev branches and merging one into the other and want to revert git checkout dev_branch git merge my_new_feature // merging my branch into develop Ooops, now I realized `my_new_feature` has something wrong git revert -m 1 <sha of merged commit> OR git revert HEAD -m 1 means we keep the parent side of merge ( dev_branch  branch) ### Fetch their new commits and merge to your branch git fetch protected_repo Committed but not pushed to remote. Want to get rid of latest commit git reset --hard HEAD~1 Get a branch from a forked repo to your own repo (or to your own forked repo) git reset HEAD~1  Get a branch from a forked repo to your own repo (or to your own forked repo) git fetch git@github . com : theirusername / reponame . git theirbranch : ournameforbranch Associate your local copy to the upstream branch git remote add repo_name https://github.com/theirusername/their_repo.git Fetch their new commits and merge to your branch git
Read more

async promises in a sync way?

This blog post title is pretty confusing - but if you get to read this blog post by Google, it actually makes sense. 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. async function fetchDogPics(url) {   try {     //this looks synchronous but it isn't...     const response = await fetch(url);     await response.text();   } catch (err) {     console.log('failed', err);   } }
Read more

css position: sticky

This links highlights what's new in Chrome 56: https://developers.google.com/web/updates/2017/01/nic56?utm_source=frontendfocus&utm_medium=email 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 position:sticky . 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. .header {  // Element will be "fixed" when it is 10px from the top of the viewport  position:sticky;  top: 10px } You could set top : 0; to make it stick directly to the top of the viewport. Have to be conscious that this positioning might not be available in other browsers as of yet. There's this site I use to check what's available: http://caniuse.com/#search=sticky As of now, it's not available in IE (not very surprising...)
Read more