How was Confoo 2018?
@Linc said:
Tell us something interesting. Here are questions if you can't think of something else to say:
- What sessions did you pick and why?
- What did you learn about?
- Who did you meet?
- Tell us a story about something that happened.
- What would you do differently next time?
Previous post link: https://staff.vanillaforums.com/discussion/150/how-was-confoo
Comments
-
I took markdown notes and have them up on Github here: https://github.com/Charrondev/confoo-2018-notes
The TL;DR versions of the good talks are below:
Asynchronicity, concurrency. A tale of (Or how to make a PB&J sandwich)
This was a talk, with some beautiful detailed slides of taking a simple async example in JS and accomplishing it through different methods (callbacks/promises/generators/async/await).
The author posted the slides and they're in the repo I shared, so if anyone is interested in javascript promises/generators/async-await but isn't really familiar I can do a quick for through any time.
Cross Platform PWAs
PWA's are progressive, responsive, installable, connectivity-independant, app-like web sites. Basically an app-like website that can installed to the home-screen, works offline/low-connectivity and falls back to a normal website if the the browser/os doesn't support the newer APIs.
The can also be used on desktop, although add-to-homescreen support is more limited. It is coming in a big way in the next version of Windows 10 though!
Support for everything
- Any Blink based browser on Android 5.1+ (Chrome, Firefox, Samsung Internet, UC Browser).
- Upcoming Windows 10 version with Edge (and maybe chrome)
- Chrome OS
Partial support
- iOS 10.x
- Chrome, Firefox, Edge on current MacOS/Windows
Broken and Janky
- iOS 11.x (including the upcoming 11.3 which fixes some things).
CSS Grid
Wow this will be really nice in 5 years once we no longer support IE11.
ES2020
This was an overview of upcoming javascript proposal and the 4 stages of ECMA
Stage 0 - Strawman: "It'd be dandy if we had unicord operator to..."
Stage 1 - Proposal: A TC39 member "champions the proposal. General API look and feel hammered down, and many/most cross-cutting concerns addressed.
Stage 2 - Draft: Initial spec text, covers all critical aspects and technical semantics.
Stage 3 - Candidate: Spec complete, verified by appropriate reviewers and greenlighted. API finalized, no stone left unturned.
Stage 4 - Finished: Fully tested (https://github.com/tc39/test262). Spec editor has signed off on the proposal. shipping runtimes must already support it. Usually v8 + chakracore or firefox.
Significant stage 3 proposals or stage 2 proposal with working browser implementations
- Rest/Spread Objects (Iterable Objects). (we are already using this through babel transform).
- Async Iterators
for await (const thing of asyncIterableThing)async function* - RegExp improvements (named capture groups, lookbehind assertions, unicode property escapes)
- Class fields class properties, private class properties, static fields and methods (we are already using this through babel transform).
- Numeric separators
1_000_000_000
On track for ES2019
- Private methods and accessors
- Decorators
- Promise.finally
Fighting JS with JS
This talk covered scaling javascript across multiple teams and repositories. TL;DR
- Split things into modules (with clear responsibility of what team owns what module)
- Write additional custom lint rules
- Use JSCodeShift or some other tokenizer/AST to make well-tested conversion of existing code bases.
- Enforce everything on pull requests with CI
Why and How Instagram Built for Mobile Web
- Apps are too large, PWAs can reach more people
- Aggressive profiling and performance enhancement.
Workers of the World, Unite!
A talk about web workers, not workers unions.
- WebWorkers allow JS to use multiple threads
- ServiceWorkers is basically a proxy that you control that runs in browser in another thread and is shared across your domain. Can be used for flexible caching and preloading.
- Can intercept and transform requests/responses through Ajax.
- The browser doesn't know the difference between talking to the ServiceWorker or the server.
- Be very careful about securing your ServiceWorkers.
1 -
How I learned to stop worrying and love Regular Expressions
The talk was tagged as "Intermediate" but I didn't learn much. It was pretty much a condensed version of https://www.regular-expressions.info/index.html (I highly suggest to everyone that want to learn about REGEX to check that site out)
Automatic web requests clustering for latency analysis
The title was fancy for pretty much nothing. Should have been: "Profiling your stack: How to?".
The actual talk was kind of interesting though. There was a demonstration on how to use LTTng on your whole stack to do some profiling in order to find where your stack bottlenecks are. It was also demonstrated that, by doing very very light profiling on your stack just to monitor spikes and then turning on more profiling options when that happen, you can profile your production stack with very low performance cost. Something that we might want to do once or twice a year.Ingest node: enriching documents within Elasticsearch
A talk about how to use Ingest node for light document enrichment instead of using something more powerful but also more resource intensive like Logstash.
Here is a video summary: https://speakerdeck.com/elastic/ingest-node-enriching-documents-within-elasticsearch
A good talk.
Strong crypto for everyone - libsodium in PHP 7.2
mcrypt is now dead in PHP 7.2 and has been replaced by libsodium.
libsodium is more restrictive at what it let you do in order to avoid potential errors and how that library is built to prevent side channel attacks like Timing Attack as much as possible.Writing Viruses for Fun, not Profit
Cool talk about how viruses are written to evade detection. It was demo intensive that the guy got #$%@# by php 7.2 because he was using mcrypt to encrypt the virus in his demo. Unfortunately I didn't lean anything super useful.
More Secrets of Cryptography
That one was great. The guy demonstrated visually the basis of how a strong cryptographic algo is created.
He talked about elliptic curves and how blockchain works.--
Mutation Testing to the rescue of your Tests
I didn't know what mutation testing was about before the talk.
Long story short this is a way to validate that your tests are useful. Unfortunately it works mostly for unit tests and is more or less applicable for our tests because they aren't really unit tests but integration tests.The idea behind mutation testing is that you modify your code and run it against the unit test. If the tests results are not different from what was expected then it means that the tests are not properly testing your code.
You can see examples there: https://infection.github.io/guide/
TIL!
API Development with Laravel
That one was jaw dropping. That framework does everything that you need almost out of the box.
Database schemas, models, controllers, routes (different routes for API vs Views), rate limiting, oauth2 scope integration, CORS...
All you have to focus on is to implement your business logic.
The "out of the box" capabilities are great and it shows that many developers are using the framework because almost anything that you would want for an app is doable relatively easily.Long story short: Focus on developing your app and less on the structure around it. Loved it.
Au-delà du top 10 de l’OWASP
The guy decided to talk about templating language injection like if it was the discovery of the decade.
HTML injection through a different vector...To SQL or NoSQL, That Is the Question
A talk on the MANY DB that are available to us and which are better in what situation.
Good talk.I also discovered https://db-engines.com/en/ranking which can be useful if I ever need to chose a DB for a project.
Event driven development
Super interesting talk but super high level too. You really had to know your patterns to know that the guy was talking about.
Most of the concept used in event driven development are something we already do.
Event driven UI, for example, would only present a user with a "reason" field for cancelling an order. The date, state or any other "order" field should not be part of the ui. The created even would then contain only what is needed to represent a "cancelledOrder" which would be "reason","date","orderID" ...The talk covered a whole event driven system, controllers, communication bus, projection strategy....
Learning Machine Learning
Really basic introduction to the basic concepts of machine learning. It was fun to watch and also understandable.
Example from the author: https://www.javascripteverything.com/2016-10-22_machine_learning.html1 -
Con Foo 2018
General Questions
- What sessions did you pick and why?
I tried to mostly stick to things that were more directly realted to my job. Learning about random things is cool, but that's how I wanted to chose this year.
What did you learn about?
- JS: Better understanding of the various ways you can have asynchonous code
- Case Study: How/what instagram did for their mobile site
- Accessibility - How APIs work and the difficulty with various browsers. New api coming to directly affect the accessibility dom
- JS: Better understanding of the various ways you can have asynchonous code (Another talk, better than the first)
- Accessibility - Pitfalls to watchout for when making a website accessible. Sometimes trying to make things accessible make it worse for the user
- JS: Web workers/Service Workers (JS)
- HTML/JS: PWA (Progressive Web Apps)
- Performance: How to optimize images for the web
- Case Study: Square Space's Javascript build process
- JS: ServiceWorkers and what they'll be able to do
- Case Study: Using AI to help with ticketting system
- Networking: An overview of what happens from A to Z with a web request
- Progressive Web Apps (PWA): How they work
- Browsers: UTC browser's dominance in other parts of the world (especially India). It's rapidly gaining popularity, especially in emerging markets
- MJML - Really cool framework to write up responsive e-mails! Writing HTML email is really painfull and feels like HTML in 1995. They have their own markup language that has awesome support accross browsers and mail clients. They have some impressive components that are fully responsive. They have a responsive menu (checkbox hack in CSS) and even a carousel (radiobutton hack)
- Performance: How to optimize websites
Who did you meet?
Léonie Watson -> Accessibility expert
Henri "Helvettica" -> Freelance dev, runs a meetup group in Toronto about web performance
- What would you do differently next time?
I'm pretty happy with my choices this year. There's a few talks I wish I wouldn't of picked. It's not always easy to tell, but maybe doing a bit more research on the speakers could of helped.
Wednesday
Opening Keynote
Personal history of Confoo founder and of the conference. Not very informative.
Think Async in Node JS
Good overview of ways to handle asynchronous code in JavaScript. However, the speaker tried to cram way too much information in the talk.
Slides: https://www.slideshare.net/adamlbarrett/think-async-asynchronous-patterns-in-nodejs
Methods of handling async code in JS:
- Callback (passing function as argument and calling it at the end)
- Thunks (Function that returns a function that can be executed later. In other words, part of it executes now and the rest can be done later)
- Promises (.then, .catch. finally functions. These are "eager" and get called now)
- Tasks (Like promises, but can be called when you want/need)
- Observables (Gets stream of events in array, with time as the index. You can "subscribe" to certain events)
- Generators (allows to "pause" execution by adding the "yield" keyword to continue executing at a later time, while being non blocking)
- Async / Await (Makes asynchonous code way easier to write and read. Replaces old callback style with new, simpler syntax)
- Streams (Standard way node.js handles asynchonous code, using the .pipe function)
- Async Iteration (Async iterators work pretty much the same as regular iterators, but they involve promises… the presenter skipped over this one)
- CSP (Interesting new way to handle asynchonous code. You have separate processes that can "put" data in memory and then another process can "take" the value when it needs it.)
Why and how instagram built for the mobile web
This talk was a case study of Instagram and how they worked on their mobile site. They were an mobile app first company, but to increase their user base, they've been wanting to get into emerging markets. These new markets tend to have lower end phones with less storage, bad internet connections and data is expensive.
They whent through multiple site redesigns with A/B testing. For the "filters" preview, they started with a static image to avoid heavy computation for lower end phones. For phones that can handle it, they do the image processing is with WebGL. They used the canvas to render square preview.
They created a progressive web app, so it could be installed on the home screen and be much lighter than the native app.
For video they use shaka-player that breaks up video into multiple qualities and adapts during the video streaming to the network conditions.
There’s more to performance than meets the eye
This was a talk on the history of how screen readers have been handling web pages. Screen readers are always catching up to new technologies. I liked this talk, but I wish there would of been more information at the end on solutions. This is mostly all handled by the browsers.
1990s - copied HTML into screen reader and had separate dom tree and wouldn't always match up with the way the browser handled it.
Early 2000s - New accessibility APIs were starting to be available
Late 2010s - All of the screen readers now use accessibility API, but not everyone has a virtual model of the content.
Multiprocess browsers causes new problems for screen readers. IE was very fast because it had direct access to the virtual model. However, it also made both the browser and the screen reader unstable. OSX and Linus forced the screen reader to be outside this process. Much less performant, but more stable. Firefox and Chrome have implemented different solutions to improve the speed accessing the data. Surprisingly (or perhaps unsurprisingly) Edge does no caching and is 12 to 50x slower!
Solutions:
- Improve browser APIs
- General Performance improvements to the site is good for accessibility
- Avoid Infinite scroll (David MacDonald seemed to think we could do it)
- CSS Animations are much better than old JS style animations
Léonie Watson runs the accessibility blog tink. And the slides are also available online.
Asynchronoucity: concurrency. A tale of
Besides having a very clever title, this was a really good talk. It's a similar to the other talk I saw on asynchronoucity in JS, but there was a much better presentation. The presenter used making a PB&J sandwitch as an example and showed us the same example for each style of code, which made it much easier to follow.
You’re only supposed to blow the bloody doors off
Second talk from Léonie Watson. This one talked about how sometimes by trying to make things more accessible, we end up breaking accessibility.
- Be very careful with hotkeys or keyboard shortcuts
- If you do have a keyboard shortcut, make sure there's another way to do it through the UI
- Always use native HTML5 component when possible
- Don't break native HTML semantics
- Hitting "space" may not work on links, so you need to switch to a button or implement that in JS
- Avoid
role="application"like the plague. It basically means you break all keyboard shortcuts, except for "tab" and you're responsible to reimplementing all of them - Be extra careful when implementing the following roles, as there are shortcuts that are excpected to work and won't automatically work
- tablist
- grid
- menu
- menubar
- toolbar
For tabs, the tabs that are not selected should get
tabindex="-1", you need to usearia-controlsand it needs to support the arrow keys.For one page apps, Léonie recommends resetting the focus on top of the page, as if the page refreshed. However, there's no other special consideration for dynamically loaded content. Modern screen readers are pretty good at handling this sort of thing now.
Future of accessibility:
In the future, it looks like we'll be able to modify the AOM (Accessibility Object Model) directly! That's pretty exciting, but also means we can break things even more.
Book recommendations: Inclusive Design Patterns and Apps For All: Coding Accessible Web Applications
Other links:
The "can i use" of accessibility
Closing Keynote: Innovating is not about technology, but psychology
I didn't care much for this talk. It was about trying to help people be great at their jobs, either through code, or through people skills… or the so called "lazy bear" whom doesn't care… yeah...
Thursday
Keynote 1: Myth of Culture
Interesting talk about group culture, how it changes and how to maintain it. I would of liked some additionnal commentary on how to know when it's a good idea to change and how to go about it. The talk kind of assumed the founders were right about all or most of it.
Keynote 2: Code is not neutral: the ethics of programming
A talk about how your work can have ethical implecations. the presenter went through a few cases studies that happened in the last few years including Toyota and the Hawaii missle test.
Creating and Distributing Custom Web Components
This talk was really dissapointing… I was really hoping to have a talk on Polymer or the webcomponent spec, but it was pretty much making a JS plugin… Making a custom html tag (will not pass validation btw) and writing some JS is not very revolutionary.
Optimize Prime: More Pixels Than Meet the Eye
Really good talk. Henry "Helvetica" goes into statistics of page speeds and the performance of modern devices.
According to a Google study: 53% of users will abandon a webpage that takes more than 3 seconds to load. The mobile antenna takes 2 seconds to wake up and connect, so that leaves about 1 second.
Images are often to blame for a lot of extra data that gets pushed through. Image decoding takes a lot of memory, processing power and battery usage. Sessions that convert have on average 38% less images.
On the web, common formats include JPG, PNG, GIF and SVG. Gifs are really old and can be replaced with better alternatives. Most of the "gifs" we see nowadays are actually MP4s that are more performant.
WebP has been around for a while, but we may be close to having large enough support in the not so distant future. If it happens, it could replace all JPGs, PNGs and GIFs on the web.
Modern digital cameras often add a lot of meta data to images that may not be relevant to your website. The "EXIF data" can have up to 5092 fields of meta data. Apparently, about 16% of JPEG data on the web is EXIF data, maybe not even used.
Chroma Subsampling is a method to improve image compression by favouring light/dark info over colour. Humans are more sensitive to light/dark differences, so it's not percievable by the eye that there was a loss of colour information. Check your export settings!
Suggestions:
- Make sure you use the correct image format for the job
- SVGs also need to be clearned up
- Look our for WebP support in a few years
- User the
<picture>tag - The designer can impact the weight of your page
- Lazy load images
Tools:
- NCC Image Checker Plugin
- Responsive Image Linter
Learn to use your devtools!
- Lighthouse is now part of chrome devtools
- Responsive Image Breakpoint Generator
Books:
Fighting Javascript with Javascript
Case stufy of how Square Space organizes their JS. It was ok, just some general info about "push" (break up code base) or "pull" (cohesion, bring together) code. Watching for major spikes in bundle sizes. Optimize Apps, not libraries in apps. Data tracking is important when the organization is large. Lint everything, it can even be used to lint some code patterns you don't want.
They had a note about adding an object along with the translation string to give some extra contect and meta info. I thought that was a good idea.
How to onboard a Junior Dev
This talk was ok. The speaker shared too many stories. It was just some genral best practices:
- Provide context
- Teach
- Share the training load amonst multiple employees
- Cultuvate company culture
- Help employees reach personnal developement goals
- Training starts at the hiring process
- Give bootcamp training for noobs
- Workshops
- Code Review
- Pair programming
- Documentation
- Give Voice to new employees. Get them to talk before the seniors so they're not intimidated to talk after them
- Feedback
- Ownership
- Apprenticeship
- Make checklists
- Make milestones
Not doing these things will give you "team debt".
Pitfalls:
- Late engagement
- No social contract
- Irregular feedback
- Not taking the time to train
- Not listening
- No critical feedback
- No transparency
The growing importance of optimizing for the UC Browser
Eye opening talk on the UC Browsers dominance in emerging markets. Make of these users are first time internet users, on a low end phone with bad connectivity. Many of these phones have spec under the base recommendation from Android.
There are currently more internet users in India than there are in North America… and there's a minority of India's population online. Most of them strongly prefer mobile over desktop.
By 2020, it's estimated that 75% of new internet users will be from rural India.
UC Browser has better features for bad connectivity and low data plans. They use a proxy.
Their last version was a fork of Chromium, so it's a lot easier to develop for than before, but it still has a lot of quirks. This was a talk by Instagram and they have the luxury of flying to China to talk to their devs.
The UC Browser also offers some "hub" landing pages, so for a lot of people, it is their whole intenret experience.
Workers of the World Unite!
Really good talk on Webworkers and what they bring to the table. There's still some support issues as well as some pretty big security concerns to consider before they're to be used everywhere.
Alows custom caching, so you could cache your site locally as a PWA (Progressive Web App) to work offline.
This code blurs the line between client/server code. The demo he shows us had node running in a Webworker, acting like a server with disabled JS and Network connectivity. His "todo list" app worked with standard form submissions to the webworker.
Friday
Your views know too much
I was dissapoitned with this talk. I was expecting it to be a bit more advanced… Maybe something like: "you think your views don't have logic, but they have more than you think"… but no. It was just a really classic example. It was well done though.
Répondre plus rapidement à vos clients avec l'IA (Answering quickly to your clients with AI)
This was a case study of a company using AI to cut down on their support time. They trained an open source AI Scikit to answer their 3 top types of questions and to gather "context" for their support staff. Like for example, pulling up a history of tickets from that same e-mail before it got to the staff member.
They built that platform as a hackathon over 3 days and they've had a lot of success. Their support staff also really appreciates the AI and talk about him like he's a member of the team.
Anatomy of a Web Request
We all went to see Rob Richardson last year on his talk about Git. Most if not all of the team went to see this talk as well. I thought it was pretty good. I liked he was going over the request multiple times, each time adding another layer of complexity. I felt it was harder to follow than his talk last year. I felt it could of been a little more focussed with less tangenets, but I'm being nit picky.
Short answer:
- key down, key up, key press events, message pump reads them
- DNS lookup of Google suggest servers
- Google suggestions says "go there"
- DNS lookup of the url, resolve CNAME after CNAME until you get to an A record
- open socket to ip
- ethernet wraps tcp wraps http
- tcp slow-start handshake
- https handshake
- client verifies trust chain
- http method, headers, accept, hostname
- server parses request and forms response
- how many tcp packets does it take to arrive?
- browser parses response, loads DOM
- browser stops at , ,
<
style>
- onload, render
- writes win32 messages to paint the screen
Building Cross Platform Progressive Web Apps
Good talk on PWAs. How they work, what is the current support and what to expect. Looks like Apple is lagging behind, but they are adding some new features in the next iOS version. We're likely to have full support in a few iOS versions.
They allow you to add a icon to the home screen. Using Webworkers (see above) you can cache whatever you want to keep them functionnal offline. They support push notifications. They are indexed by web crawlers.
MJML: le nouveau standard pour écrire des emails? (MJML: the new standard for writing e-mail?)
Anybody who's written HTML for e-mails knows how painful it is. It's like writing HTML in 1995 and maybe even worse. However, even though the tech is not moving as fast as desktops, people are expecting a lot out of e-mails.
MJML is a really cool library that has it's own markup language with built in components that are transformed into ugly HTML for all the various e-mail clients and browsers. All of their components are respnonsive! They even have hamburger menus (checkbox hack) and a carousel (radio button hack). Note that they do not support things like "unsubscribe" links, but there a number of companies that have wrapped MJML's open source library to make it a fully featured platform with drag and drop functionality for writing e-mail.
A Firstfull of Data
I quite liked Henry Helvetica's last talk, so I wanted to see this one too. It was a little underwhelming. He said he proposed both talks and only expected one to be accepted, so his material was thin for this one. He basically talks about gzipping your CSS & JS. Using your dev tools to check code coverage, optimizing your images (see previous talk for details) and making sure your cache settings are correct.
1 -
Hello folks,
Basically I picked which sessions to see based on these few criteria like
- It's something I want to learn/have interest in
- It's something that can make me a better dev
- It's something that could improve our migration process
- It's something we use, could use or we use something similar at Vanilla
Sessions
How I learned to stop worrying and love Regular Expressions
He basically went over the beginner, intermediate and advanced regular expressions. Not a bad talk. I would have liked it better if he gave some complicated cases and explain is though process on how he build the necessary pattern.Database schema migrations with zero downtime
I though this could be something very interesting for migrations, whithout being exactly applicable to our infrastructure, it could lead us to a better process, especially with the cases we encountered lately and the large ongoing migrations. Problem is the talk had 2 main ideas either running 2 databases at the same time (old version and new version). You kind of use both while populating the new one with the old one's data, possibly with a script in the background and once it's fully populated you can safely remove your new DB. It also implies your code needs to support but database versions.Ingest node: enriching documents within Elasticsearch
I went to this talk to have a better understanding on how those indexing/searching softwares work. I now have a better grasp on how this whole process is implemented. Felt a little like a sales pitch.Strong crypto for everyone - libsodium in PHP 7.2
Basically explaining why libsodium which now comes integrated in php as of php 7.2 is the go to library to use for hashing, encryption, decryption and signatures. It also prevents the user from using vulnerable algorithms by "removing this possibility from him".Writing Viruses for Fun, not Profit
Fairly easy to know why I went to this one lol. Speaker coded a small php virus in an image, that replicates itself and also showed how to avoid detection. Was an interesting talk overall, the fact that his virus needed an include statement of an image is not so great. Although is presentation was good, it kind of broke at a few points, mainly because he was using php72. I mean test your presentation dude.Functional approach in software design
Very interesting talk, maybe my favorite of the week, the speaker introduced another way of thinking, another way to problem solve. It's a complete different mindset.API Development with Laravel
Simple talk on the different features Laravel comes with, and how to use them to build an api. Straight forward enough but it's pretty interesting to see everything this framework has to offer.How to leverage WebSocket in the real world
Speaker build a simple chat using web sockets, explaining the power behind a full-duplex, bidirectional communications channel to help build scalable and real-time web applications.
A good article to learn more about it http://blog.teamtreehouse.com/an-introduction-to-websockets.To SQL or NoSQL, That Is the Question
A good talk on all the different available DB options, strongly advised to only use the top ones from this site https://db-engines.com/en/ranking if you don't want to have any problems. I would have like for the speaker to give a few real world examples on why in certain scenarios some DBs are a better choice than others and really outline the major factors.Au-delà du top 10 de l’OWASP
Focused entirely on templating injection. I thought it was gonna be the less known but frequently exploited vulnerabilities. It wasn't.Mutation Testing to the rescue of your Tests
Very interesting, although I'm not a unit test expert, the speaker outline how the code coverage metric can be very deceptive. Mutation testing is the idea of altering your code and expecting the original test to fail, if it doesn't your test is faulty. Simply put, it's testing your tests !Event driven development
Very abstract, a little hard to follow, speaker spoke about this at different level of the applications, although his UI examples were very straight forward I can't say the same for the rest of the presentation. I feel like event driven development is something we kind of do instinctively when trying to make the user experience as simple as possible but it's good to know the ins and outs of the whole concept.Building a running website at scale with a team of one
A bit of a disappointment, speaker developed https://plnkr.co/, although I thought he was going to say how he managed to handle hundreds of thousands of monthly requests by himself by introducing some infrastructure concepts, he focused more on the tools/softwares he is using than anything else.Learning machine learning
Very interesting, kind of talk that gave me this
1 -
And my post was cut because of an emoji ... #utf8mb4
1 -
And now ... drum roll ... ?
0