Fronteers14
@Heydonworks - accessibility
- Tie in wai aria state with css, no selectors needed
- BEM?
- Anchors without hrefs break screenreaders
- Do frontend developers do a good job or facilitate abominations?
- How should i do this vs should i do this?
@danielespeset etsy
- One click deployments
- Configuration of features: a/b tests
- Deploying code that is not run yet because it was not configured yet
- Create dependency graph of all files, maintained by hand
- Statical code analysis to find unused styles
- Switch to scss: converter script that handles edgecases for broken css
- Build tools to be flexible is invaluable
- Shrinkray: ship css/javascript ation with frontendcode
Nathan Ford do we need markup?
- Webdesigner → code and design
- We want to make html less of a chore to get back “flow”
- A clearer mental modal improves adoption
- List model takes away need to validates: tools problem
Arnout kazemier nodejitsu & observe.it @3rdeden
- Plugins → polling → socket connections
- Websockets have lots of issues with browsers, virusscanners, isp proxies and firewalls
- EventSource is new kid on the block, has a lot of the same issues
- Watch out when reconnecting: increment interval over each attempt
- Use heartbeat to keep connections open
- Always use https to avoid meddling with datastream
Rachelnabors animations
- Animation is natural step in application evolution
- Kind of animations
- -static animations
- -stateful animations
- -dynamic animations
- GSAP performs well (greensock.com)
- Web animation api solves some of the issues,
- Will-change promote elements to their own layer
- What should we do:
- UI-designer: play with libraries
- Interaction designer: give feedback to polyfills
- Animation library developers: read the specs and give feedback
- Well performing demos: http://github.com/web-animations
Lessmilk.com
- Made 52 games in a year, using phaser
- Tip: create a simple game that you can finish in a week
Phoboslabs
- Impact commercial game engine
@shwetank webrtc
- Use sdp server to establish p2p link between two firewalled nodes
- Traffic is always encrypted in http, limited to a couple of nodes because of https
Alex feyerke offline first
- Create extra storage layer, sync the local db to server.
- Preemptively load data before going offline
- Advantages of offline first architecture
- Performance (zero latency)
- robustness (server fault tolerance)
- better experiences
- Good example: Polarr Photo Editor (https://www.polarr.co/)
- Good front-end library: Hoodie (http://hood.ie)
Twitter @necholas
- When de eloping at scale with expertise cannot afford to start new webapps from scratch each time
- Use robust automation to acoid regression and developer errors
- -solve a known problem
- -focus on outcome and process, not tools
- -design for adaptability, not perfection
- -components are the primary unit of scale
- -ready-made
- -make skillfull use of what is at hand
- -documentation and ownership over knowledge
- Separate code into components, always use interface to allow change of implementation
- Package all related code, tests, style etc. into the same namespaced directory
- WebPack → module bundler with dependency graph
Dave olsen @dmolsen
- 72% of rwd websites have same load on desktop and mobile
- 1 second delay costs 10% pageviews and 4% conversion
- Categories: Overdownload and poor networks
- -Pagespeed
- -web performance optimazation course
- -webpagetest
- Set performance budget, e.g. 500kb
- Quickwins: browser cache, compress html css, avoid ajax
- Optimize renderpath, render asap
- Useful links:
- **Google PageSpeed insights: **developers.google.com/speed/pagespeed/insights
- **Chrome dev tools course: **udacity.com/course/ud884
- **Webpagetests: **webpagetest.org
- List of performance tools: perf-tooling.today
- Open device lab: http://opendevicelab.com/
Animating svg sara soueidan from codrops
- Animate svg using css
- Transform origin to apply rotations
- Absolute value bug in firefox: dont use percentages
- Embed with svg type has best support
- SMIL animation allows to edit more svg attributes than css
- Shape twee ing is very easy in SMIL: very cool
- Scale -1 flips image
- Saras slides: http://slides.com/sarasoueidan/animating-svg-with-css-and-smil-full-version
Paul kinlan
- Every app should get a lifecycle, webapps as well
- Serviceworkers: Webapps run background code and able to receive push notifications
- Raise prices for ie8
- Command line caniuse: PaulKinlan/cli-caniuse
Meri williams accessibility
- The group of impaired people online is far bigger than the percentage we use for dropping browser support
- Write your team values
- Include refactoring, regression testing in every day flow
- Deliberate practice → more hours in flow makes perfect
- Do Retrospectives, dont do post mortems
Kyle simpson js adventure
- Hell is not understanding my own code
- Transpile your preferred code into browsersupported code
- E.g. Lexical scoping with let in block
Pete hunt evolve test strategy
- Functional quality: software does what it says
- Structural quality: is the code well structured
- Process quality: quality of team process that influence software development
- A prototype is a vehicle for exploring the problem space, we cannot decide how bad a defect is
- System design is most applicable late, when you know what kind of problems you’ve got
Petro salema
- Accessibility bias
- No complaints dont mean that there are no problems: the solution might be obsolete
Mensen ontmoet
to follow up:
- jankfree.com
- contact opnemen Brian Leroux, developer bij adobe / cordova