FullStackCon
Photo by Ed Telling during FullStackCon 2017.

Table of Contents


In Part 1 of this series we looked at #FullstackCon 2017's JS parts, but in this post we will look at the rest, but as it is a JS conf, still related in some way to Javascript, but just more high level or conceptual.

Keynote: Opening Keynote by Douglas Crockford

Before joining the open keynote, after my coffee and conference breakfast, I picked up some of the "conference swag". Instead of a t-shirt, I chose a copy of Douglas Crockford's book: "Javascript: the good parts", so I was looking forward to hearing what this keynote had to offer.

It was a technical talk on numbers, starting with the history of number systems and problems with current systems and languages. For example Java32 and how some mathematical functions in Java and Javascript, which uses this number system, can cause discrepancies and incorrect numerical results. This is why a system relying on accurate numerical operations should not use Java or Javascript in most cases.

Douglas had developed a newer numeric system which he has open sourced. DEC64 is a decimal floating point format for the next generation of application programming languages.

I RLY LOVE Form Controls!

Dave Benson starts by informing us that by using some “sneaky” CSS, we can improve the use of form controls without a single line of JS.

Label input "hack"

By making the label do the job of the input field, we can hide the input and style the labels with pseudo elements, as shown in his "Very boring CSS styled radio and checkbox inputs" codepen example.

Using CSS only (without JS) we can:

  1. Switch checkbox style with animation and text
  2. Use radio buttons to control tabbed UI content
  3. Use checkboxes to create accordion widgets*
  4. Logic gates in CSS with checkboxes:
    AND, OR, XOR, Half Adder, Full Adder, Chained Adder, Decimal Adder

* For similar content heights, otherwise animations are at different speeds. You can use a different class per speed, but that is not ideal.

Keynote: Back to the Future — IoT Maker Revolution

Amie Dansby is a maker and game developer, working with ragdoll physics.

Keynote: Back to the Future — IoT Maker Revolution
Photo by Ed Telling during FullStackCon 2017.

Amie has an RTFD chip implanted in her arm and is heavily involved in the maker community. She introduced what Makers are, the community and purpose: to create items that do not exist or are not readily available / easily accessible. It is a movement about contributing things to be used for greater good.

She has learned through experience how to apply the perspective of a user to development. E.g., after 3D-printing and spending time developing a wand only for it to be broken immediately by the user doing something it was not originally intended to do.

Amie has burned out many boards and suggests to other makers start out:

Use the Rasberry Pi simulator on GitHub when 'making' so as not to fry your boards

Give app servers a REST — CDNs and APIs are the new LAMP

Daniel Demmel
compares shared wells and waterways to centralised app server paradigm (eg. LAMP).

In the traditional model: App server, App code, and content DB, scaling requires a lot of thought.

With the more modern approach, having distributed asset delivery and a Serverless Computing architecture, static assets are compiled down, dynamic content is made available through APIs or CDNs, eg. Netlitfy (as it is only serving files it can be very quick). In this way, Serverless architecture is minimal, as it is on demand only, however, it is more scalable in nature.

Understanding Blockchain

Kevin Hoyt, an IBM developer advocate starts by highlighting the application that everybody most likely knew: Bitcoin — the 1st application built on blockchain.

Kevin suggests to think of Blockchain as a database or datastore, with special characteristics:

  • Ledger
  • Encrypted data, stored in blocks
  • Blocks are chained
  • Cannot be altered retroactively

The blockchain is distributed store with decentralized consensus, but who creates the consensus and guarantees transactions?

“Proof of work” — a similar idea to CAPTCHA to guarantee integrity. This is where “Mining” comes in.

"Smart contracts" (often called chaincode): computer programs that facilitate, verify, or enforce a contract. Most of these are written in Go programming language.

For building Blockchain based applications, Kevin mentions Hyperledger Fabric Composer.

Hyperledger Composer is an Open Source toolkit for build Blockchain based applications. It is written in JS mainly and allows author watching for transactions, etc.

WebAssembly and the Future of the Web

Athan Reines starts by providing a brief history of the web and specifically touching upon Applets and how Java applets gave improved performance over JS initially. Then ActiveX came along, allowing native code to be run, but that was not really cross-platform, being Windows only.

Following that, there was NaCl (Native Client), PNaCl (Portable Native Client), and Asm.js (A reduced subset of JS).

Now, there is WebAssembly, a Binary format for the web agreed by vendors, with a portable compilation target.

In working with WebAssembly, your C/C++ gets transformed to an IR (intermediate representation) then to WASM and finally the compiled format: x86/ARM.

It has advantages such as being Compact, Parsable, Typed, Optimized, Lower-level, and Performant.

Emscripten

This is the main tool, the SDK: Emsdk is around 10GB and can be used to compile C++ and output emscripten.

Following compilation, you can load the emscripten file in JS, read it into a buffer and call a new WebAssemblyModule, either setup with a pool of memory, or a wrapper around a C function.

Other options are Binaryen or WebAssembly Binary Toolkit.

Athan believes we are not going to start writing websites in WebAssembly and it will not replace JS, but that it will complement it, particularly for gaming, but that you have to manage and reuse heap memory well.

WebAssembly Status and Roadmap

  • W3C is currently working on standards now
  • Dev tools debugging currently non-existent
  • Can be used with Node version 8 at the moment

From a Developer perspective, if you have an existing C++ codebase and want to run it in the browser, the only way is WebAssembly or asm.js. On the serverside, it is not clear there is a benefit to using WebAssembly, as Node.js native add-ons are much faster.

YES! Your Site Can (and Should) be Accessible

Laura Carvajal talks about her experience with accessibility and how it is something that should be fundamental in any website. She shares the lessons learned along her path in this area.

Lesson No 1 — It does not just happen, you have to make it

Accessibility allows people with various impairments, Physical, Visual, Hearing, and Cognitive to use the web.

Accessibility benefits people on the full spectrum, for each of the above areas, e.g., not just a deaf person, but someone with an ear infection or even bartender who works in a loud bar that has reduced hearing.

Lesson No 2 — Before breaking the build, train people

Laura mentions some really helpful tips which I have outlined below:

The color contrast issue is the most common fault, as it needs to be at least 4.5:1, and the
2nd most common is missing alt attributes on images. So, training people to be aware and reduce the number of these can save considerable time.

Add role=”presentation” to images with blank alt attributes to ensure screen readers skip, as some screen readers still read out "image".

longdesc will be deprecated, so linking to an alternative format, e.g., HTML. Even better, use SVG with charts to take benefit of all markup.

Add the required attribute on required input form elements.

Ensuring tabindex is -1 for iframe and adding aria-hidden=true (same for duplicate content, e.g. footer repeating another block)?

Add visually hidden content to buttons with same names O-visually-hidden, n-visually-hidden, as display: none in CSS can hide content from screen readers.

A recommended intro into Web Accessibility is through taking the Free Web Accessibility Course by Udacity.

Lesson No 3 — Throw away your mouse: use the keyboard

You can use your keyboard instead of the mouse or even the Mac Accessibility Options to DIY accessibility test.

Lesson No 4 — Do not become a bottleneck

Do not take it all on yourself and become a bottleneck, get everyone involved and up-skilled.

Lesson No 5 — Talk about it a lot

Raise awareness by talking about accessibility whenever you can. Spread the good word!

Lesson No 6 — Saying it is right does not get budget

Avoid litigation, look at things from a business perspective and protect your company by doing good for others, Win - Win!

Lesson No 7 — Diversity improves your product

Team member on their team, Ben Fletcher, who is deaf and blind on their team who prioritized integration of Pally and set them as a company on this course.

For custom components that do not suit native, you can use Aria to make them behave like native components.

Accessibility Tools

Recommended automated tools to check out are Pa11y and Pa11yCI.

Pa11y

A tool that runs through markup and checks against web accessibility guidelines. Install by running: npm install -g pally

Laura believes it is good for small sites, but not for larger dynamic sites.

Pa11y CI

Integrate Pa11y into CI processes for larger sites using a simple wrapper script in a make file for Continuous Integration: make a11y - see:
http://engineroom.ft.com/2016/10/21/the-case-for-accessibility

Lightning Talk: Breaking the Monolith a Monorepo

Will Monk in this Lightning Talk starts by stating that based on his experience, if you are creating a new project dependent on many npm packages, or splitting an existing project into separate npm packages, neither work.

Specifically, when versioning, start with the most depended upon module and then push up the version number, then work the way down to the least. This takes a long time and can cause conflicts or discrepancies.

The solution to this, the Monorepo!

The benefits of a Monorepo

  1. Master / HEAD is always stable
  2. No more broken builds
  3. Easier refactoring
  4. Easier for reviewers, as larger changes affecting other repos make it easier to review and get people involved
  5. Easier local development and allows reliable tool development (as tools exist in the same place)

Lerna, as we saw in Part 1 of this blog series, was again recommended.

  • lerna import takes all contextual commit history into new repo
  • lerna run & lerna exec runs npm command across all packages
  • lerna bootstrap bring all packages together and links them all together

The Downsides of a Monorepo

  1. Bigger git repo
  2. More intimidating for new devs
  3. Continuous Integration / Continuous Deployment is more involved to setup

Microcontrollers as Microservices

From work with IoT, Nick Hehr believes that many IoT ideas are not quite in the right direction today. The Twitter account Internet of Shit shows some of these failures and lack of purpose for IoT ideas and products.

Security is not so solid in the IoT space (e.g., Teddy bear that leaked voice messages via MongoDB patch)

Key Characteristics of Micro Services

  1. Fault-tolerant
  2. Self-healing
  3. Deployed Independently
  4. Auto-discovery

Key Characteristics of Micro Services
Photo by Ed Telling during FullStackCon 2017.

Nick then provided a Demo using a Webcam and Weather service using NodeJS, connecting to Webcam via a mounted device, discoverable over WiFi and connectable over PubSub service.

Using PouchDB to provide offline syncing and developed using offline first.

Keynote: Progressing Apps the PWA Way

Christian Heilmann believes that many apps are mobile first and that they stay mobile first, e.g., they have massive buttons on larger devices. He recommends not to just show everything and then just hide items using media queries. Rather, show things if the user has the space on their device.

History of Web Apps

Chrisitan reminds of an old security risk where renaming HTML files to app.hta which cause massive issues.

Windows 8 allowed HTML as apps, but stuck on IE10

We can see where we are today in this regard by visiting: https://whatwebcando.today/

Do not use HTTP anymore at all, people can spoof your website, and you can end up in court.

History of Web Apps
Photo by Ed Telling during FullStackCon 2017.

A PWA is...

  • Progressive
  • Responsive
  • Network-Independent
  • App-Like
  • Fresh (Auto / Manual)
  • Safe
  • Discoverable
  • Re-engageable
  • Installable
  • Linkable

PWA does not need to 100% replicate native; it should allow features in a logical and user-friendly way. It should focus on core purpose tasks and ensure it works on as many devices as possible. There should not be any tech restrictions or barriers to access: Progressive Enhancement. E.g., Google search bar with no JS, then with JS, with Geolocation, etc.

Service Workers much more in control of caching by defining and clearing yourself rather than relying on traditional browser cache which was unpredictable.

Service work cookbook from Mozilla, tutorials from Google. Fallback to push service, firebase, etc. Use a Service Worker instead of Local Storage (synchronous).

How to find a PWA?

Add stores can search and index apps via manifest.json. Otherwise, use robots.txt to disallow it. The PWA Ingestion Process is passive.

For testing your PWAs, Microsoft has Sonar and Google has Lighthouse.

At the end of the day as Christian states, don’t make it a big marketing hype: it's just an app, make it work as quickly as possible.

Auditing Development Guidelines in GitHub Repositories

This talk by Evgeny Poberezkin, was the only one I missed at the conference itself that I intended to go to originally, but I ended up in a different talk. So, I caught up on the video, as I thought it was an interesting topic.

Why Guidelines?

They help us work faster, easier, and it is easier to maintain. They make us feel better and more professional.

Which Guidelines?

  • Code
  • Tests
  • Processes

Code

There are bad parts! So, using tools like ESLint, you decide what is right and what is wrong for the project.

"If you follow dev guidelines, then every developer's code is your code" — you can follow it.

Tests

Writing tests that give us code coverage brings us closer to a Test-first v.s. Debug-later scenario.

Process

Should we commit to master or commit via PR? Both options have merit, but we should have guidelines for which you follow in what situation.

“Semantic commits” — yet to find proof that it works, but Evgeny uses them on their work projects.

How do we know if we follow guidelines?

Using tools like GitMagic and GitMonitor.

  • GhLint: Validate repos against rules: See on github.com/MailOnline/gh-lint
  • Tap GitHub Issues: Manage issues based on TAP report: github.com/MailOnline/tap-github-issues
  • Sample GhLint Config: See on github.com/MailOnline/gh-lint-demo
  • E.g., ensure PR was approved, master branch protected, repo has description in GH UI, etc.

When working with these tools, you can set rules for repos, rules for teams, and rules for organizations.

npm run ghlint -- --tap

It can create, update, reopen, etc. issues via command line with failing causes, eg. "pr not approved", "master not protected", etc.

Can run per team or per organization, can override rules per repo though.

At the end of the talk during questions, a person recommended looking at https://github.com/open-bot/open-bot, which seems worth a deeper look, if interested in going further with this topic.

Looking towards #FullstackCon2018

This was an enjoyable conference, it being my first JS based con, I was impressed. I found it to be diverse and informative, covering many areas, with something for all interests and skill levels. It is much recommended, and I would go again if the opportunity arises. You can Signup for #FullstackCon2018 here. Hope to see you there!