Web Unleashed 2017 (Wrap-up)

I attended Web Unleashed 2017, a front-end event targeted towards designers and developers. Here’s a gist of some of the talks I attended.

Cover 10 minutes blind coding with hackerYou

A Tale of Four Properties (Chris Coyier)

Chris is the cofounder of Codepen. He spoke about emerging CSS properties to look out for. He spent some time going over the following propeties:

  • shape-outside
  • offset-path
  • clip-path

In addition, James encouraged the use of SVGs. With SVGs, images show up without requiring an extra HTTP request. On top of that, you can change some SVG shapes right in CSS:

<svg ...>
  <ellipse class="ground" .../>
</svg>

From Commit to Production and Beyond (Arthur Maltson)

Arthur encourages all companies to deploy many times a day. The more time and money we spend on a changeset, the larger that change set becomes and so the larger the problem space becomes when something goes wrong. We should strive into making smaller change sets to reduce the problem space when issues do happen. Arthur finished his talk by listing some of the tools he uses:

  • Feature flags: Rollout, Togglz
  • Static Analysis: SonarQube (Java, JavaScript, C#, Python, more)
  • CI Servers: ConcourseCI, Jenkins, Bamboo
  • Contract Testing: Pacto, Pact, Pact-JVM
  • Artifact Storage: Nexus, Artifactory
  • Security Analysis: Nexus Lifecycle
  • Deployment: Terraform, Ansible, Pivotal Cloud Foundry
  • Log Aggregation: ELK (ElasticSearch, Logstash, Kibana)
  • Monitoring: DataDog, Prometheus, New Relic
  • Alerting: VictorOps
  • Metrics: InflusDB, Grafana
  • ChatOps: Lita

The Fundamental Flaw in Flat Design (Kate Meyer)

Kate spoke about the flat design, its origins, how a flat design impacts interaction and how to create a flat design that doesn’t hurt usability. Furthermore, findings from usability tests on flat design were showed. Long story short, the findings showed that websites with flat design take more time to scan than a skeuomorphic design.

When you make things flat (e.g., a button), you remove the signs of what is interactive and what is not. Also, users will take more time to make the connection of what is clickable and what is not. All that to say, if your platform is content-heavy, ask yourself if the flat design is really the right choice for you.

An Introduction to the World of Testing for Front-End Developers (Haris Mahmood)

Haris talk was an introduction to the world of testing and why it’s important. Existing options for testing today and the types of tests were covered in great detail.

Options

  • Jasmine
    • Has everything you need baked right in
    • Popular in the angular world
  • Mocha
    • Relies on third party libraries and tools for assertions, mocks, spies, etc…
    • Harder get started but it does result in more flexibility
  • Jest
    • Wraps Jasmine and adds features on top of it to take it to the next level
    • Used heavily in the react ecosystem, but that doesn’t mean you can’t use it elsewhere
  • Istanbul
    • Code coverage tool
  • Karma
    • A test runner
    • Creates a fake server, and then spins up tests in different browsers using data from that fake server
  • Chai
    • An assertion library
  • Enzyme
    • Built by AirBnB
    • A testing utility made specifically for React
    • Easy to assert, manipulate, and traverse your React Components’ output.
  • Sinon
    • A testing plugin
    • Provides spies, stubs, and mocks

Type of tests

  • Unit - test individual functions
  • Integration - test several functions and modules
  • Functional - test entire scenarios. (e.g., user signs up to the app with a username and a password. you expect the entire flow to succeed)
  • Snapshot - a useful tool to make sure your UI does not change unexpectedly.

Can You Just Code Your Way to Fame and Fortune? (Pearl Chen)

It’s important to focus on self promotion to further your career. Putting your head down is not a good career choice. Key points from the presentation:

  • Don’t just focus on your current job
    • Look ahead. Think about your future
  • Join the tech&design community
    • This is your future support network
  • Curated content = clear personal branding
    • People instantly know what you’re about so it’s easier to decide on whether or not to follow
    • Put out content to find people with similar interests

Flexible UI Component For a Multi-Framework World (Kevin Ball)

Implementing UI today is easier than ever but we’re still doing it wrong. Key takeaways:

  • Component should be state driven
  • Coupling should be event driven
  • Components should be “DOM Flexible”

From Doodles to Dashboards, Data Flows, and Docs (Una Kravets)

Una tackled organization principles, basic drawing skills, storytelling, communication skills and documentation tips.

Long term memory

Long term memory is really viable for us. Looking at pictures, listening and making meaning out of text is good strategy when you want to remember something for a very long time. Also, the more we repeat information, the better chances it will go into your long term memory.

Creating documents

We need to diversify how we share information so we can diversity our teams. Written language is a societal construct which wasn’t the primary way our ancestors learned. Probably, the most commonly used method for human communications was the human voice. Some people understand better when listening than reading. One thing that Una started doing is audio record her blog posts so those who are better listeners can listen instead of read.

Points mentioned:

  • Be color conscious when designing
  • Use a flow chart with a legend
  • Become more creative by including assets
  • Have a diagram when explaining a system

Tools you can start using today:

  • draw.io - lets you build charts. Digital ocean has been pretty successful with that
  • graffletopia - another tool to create flowcharts, and other diagrams
  • ASCIIFlow - make flow charts and diagrams in plain text

Progressive Web Apps (Houssein Djirdeh)

Progressive web apps (PWA) use modern web capabilities to provide a reliable, engaging and fast user experience on any device. You can use the automated tool lighthouse to improve the quality of your web pages.

One PWA technique is to use service workers. A service worker is a script that runs on the background of your browser separate from a webpage. Additionally, you can use Workbox, a collection of JavaScript libraries to help you with offline caching and offline analysis. If you’re using webpack, then there’s workbox-webpack-plugin.

To continue, Houssein gave insight about how web loading primitives work behind the scene:

  • <link rel="preload"> - “preload” allows you to force the browser to make a request for a resource without blocking the document’s onload event. If you’re using webpack, then preload-webpack-plugin might come handy.
  • <link rel="prefetch"> - “prefetch” gives a hint to the browser that a resource might be needed but gives the power to the browser to decide when to load it.

Next, code-splitting was shown. Webpack has a feature to split your codebase into chunks which are loaded on demand. webpack-bundle-analyzer is a plugin that can be used to help you find out what really is inside your bundles.