Finch Front-End Conference — What We Have Learned?

Share

In September we had a great opportunity to meet Edinburgh for one of the most interesting front-end conferences in the world: Finch Front-End Conference!

The agenda was quite long, but I will bring out more details from the speeches I loved the most and learned from the most.

To see the full agenda, go to Finch Front-End Schedule.

Jeremy Keith: Going Offline

Jeremy Keith is a web developer, writer, and musician. He authors a popular blog, and has written several books including DOM Scripting, a guide to web design with JavaScript and the Document Object Model. He co-founded Clearleft in 2005 with Andy Budd and Richard Rutter.

What I’ve learned:

  • Thanks to the powerful technology of service workers, you can now design and develop websites that work offline.
  • It’s good to prepare the offline page that will be shown when there will be no internet connection.
  • Previous viewed pages can be stored in browser’s cache memory and then shown on this page, so that user will see all available pages when he goes offline (it can be a page with some time tables, addresses, etc.).
  • We can provide the button that adds page content to cache, so that user can choose what he wants to save.

You can find more info on his page – it also uses service workers so you can try it offline.

Rachel Andrew: The New CSS Layout

Rachel Andrew is a web developer, writer, public speaker. Co-founder of Perch CMS and Notist. Member of the CSS Working Group. Editor in Chief of Smashing Magazine.

What I’ve learned:

  • There is no one right way to write CSS. Some components will be perfect for the grid, some for flexbox and some for other displays, so if it works – it means that it’s the right way.
  • Rather than thinking Grid or Flexbox first, we should look at the patterns we need to build, and then discover which bits of CSS we might need to use to realize them.
  • Source order matters – mainly for keyboard navigation.
  • Work with document flow and CSS is much simpler.
  • Inline start, inline end, inline-size (width) block start, block end, block-size (height).
  • grid-template-columns: subgrid; – line names from the parent grid are inherited by the subgrid.
  • Ask why things work. Avoid always copying and pasting from a cheatsheet.

View Does it work? Using the new CSS Layout on Notist.

Her presentation: https://noti.st/rachelandrew/lDqTZ7/does-it-work-using-the-new-css-layout

David Khourshid: Stateful Style

David Khourshid is a software engineer for Microsoft, a tech author, and a speaker. Also a fervent open-source contributor, he is passionate about statecharts and software modeling, reactive animations, innovative user interfaces, and cutting-edge front-end technologies. When not behind a computer keyboard, he’s behind a piano keyboard or traveling.

What I’ve learned:

  • There are many states that a component can be in and we should look at each case and prepare the right code.
  • We should plan the whole application/page first and it’s good to do it with a designer, because he has to design all of those states.
  • We can use https://xstate.js.org/viz/ to visualize all the states and their relationships across all other states.
  • We can use https://sketch.systems/ to test our states before implementing anything.
  • It’s good to use: ARIA, data-attributes, CSS variables and state machines to bring a new level of maintainability, testability, and interactivity to our styles.
  • https://keyframe.rs/ – nice animations.

Presentation: https://slides.com/davidkhourshid/crafting-stateful-styles#/

Chen Hui Jing: Devtools and Modern Layouts

Chen Hui Jing is a self-taught designer and developer living in Singapore, with an inordinate love for CSS, as evidenced by her blog, that is mostly about CSS, and her tweets, which are largely about typography and the web. She used to play basketball full-time and launched her web career during downtime between training sessions. Hui Jing is currently a Developer Advocate for Nexmo, focusing on growing developer engagement around the APAC region.

What I’ve learned:

  • It’s good to check how elements behave in DevTools to understand how the browser interprets the CSS values you assign.
  • Sometimes we can get the wrong effect because we don’t know some properties really work.
  • Firefox has some useful tabs/functions in its DevTools.

Presentation: https://www.youtube.com/watch?v=ZRtzk0371tk

Hakim El Hattab: Better Interfaces

Hakim El Hattab is a Swedish front-end developer and interface designer who loves to work on visual JavaScript experiments and user interface concepts. He co-founded and is currently working on Slides.com, a fully featured presentation platform built on top of his open source presentation framework, reveal.js.

What I’ve learned:

  • We should keep the user’s focus on the things that he’s interested in to provide a better user experience – so animations/transitions should be applied only when they are needed.
  • It’s better to add popouts and no popups.
  • Users won’t tell us about their impressions according to user experience, they will only report when something doesn’t work, etc. so it’s good to test everything many times on our own and check if everything is ok if nothing disturbs the flow.
  • We should remember about keyboard shortcuts in our apps because many people use them on a daily basis and it will be easier for them to use the keyboard that the mouse.

Presentation: https://www.youtube.com/watch?v=o0NtjY17v5w

Cassie Evans: Animation with SVG

Cassie Evans has a lot of love for animation, especially animation on the web. She can usually be found tinkering on Codepen and nerding out about color palettes. She is a core organizer of codebar Brighton, a non-profit initiative that runs free programming workshops.

What I’ve learned:

  • Working with SVG animations should be fun.
  • SVG has its own DOM structure.
  • It’s best to use GSAP for animations, but keyframes work too 🙂
  • We can edit any SVG or prepare a new one and separate elements that we want to animate.
  • We can use Chrome’s face detection API or color detection to make some interaction-based animations:
    • https://cdpn.io/cassie-codes/debug/jKaVqo
    • https://codepen.io/cassie-codes/details/ZjErdL
  • We should play with easing to make more natural effects:
    • https://greensock.com/docs/v2/Easing
  • There are many examples of SVG animations on codepen – we can learn from them or be inspired to create something nice.

Presentation: https://slides.com/cassiecodes/deck-4-5/fullscreen#/

Val Head: Making Motion Inclusive

Val Head is a Senior Design Advocate at Adobe, author, and web animation expert. She is the author of Designing Interface Animation on Rosenfeld Media, teaches CSS Animation on lynda.com, and curates the weekly UI Animation Newsletter. Val has been published by Fast Company, A List Apart, and Smashing Magazine, and has spoken at dozens of events all over the world including Pixel Up, Web Directions, UX Week and An Event Apart.

What I’ve learned:

  • Some animations can make some people not feeling good, so it’s good to prepare an alternative for them.
  • Use prefers-reduced-motion media query to prepare another animation that can be displayed when someone sets Reduced Screen Motion in their settings (on Mac or Windows).
  • “risky animations”:
    • zooming and scaling from small to very very big
    • rotated elements (that can’t be stopped)
    • parallax effect
    • video and video autoplay (that can’t be stopped)
  • We should provide an option to pause/stop some animations/autoplays.
  • We should prepare some images that can be shown instead of some gifs.

View Making Motion Inclusive on Notist.

Presentation: https://noti.st/valhead/PkWS2k

Aga Naplocha: artistic.css

Aga Naplocha is a coding designer with a strong focus on UX-related issues. She is the co-founder of The Awwwesomes, an initiative teaching how to create awwwesome things on the web, organizing coding workshops for beginners, co-organizing conferences (Front Trends 2018 and Element UX Talks) and meetups in Poland. Aga also teaches coding and design at Skillshare. She loves pink and Wes Anderson movies.

What I’ve learned:

  • We can get inspirations from art.
  • Using clip-path and mask can be fun.
  • Don’t be afraid to experiment with CSS.
  • Use @supports.

Presentation: https://www.youtube.com/watch?v=aQBYAkaABkU

Jason Pamental: Variable Fonts

Jason Pamental is a design strategist, UX leader, technologist, expert in web typography, and Invited Expert on the W3C Web Fonts Working Group.

What I’ve learned:

  • Type is how we “hear” what we read so we should always keep that in mind when designing a website.
  • Variable fonts has their custom properties.
  • With some calculations we can make them responsive.
  • We can animate them.
  • There is just one, smaller file for all font variations.
  • “These technologies and techniques can be combined in a unique way to enable dynamic, fluidly scaling typography that reacts to screen size and other aspects of user context (light/dark modes for example)”.
  • We can create a few layout variants for a page and let user pick which suits him the best.

More info:

  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
  • https://medium.com/variable-fonts/the-evolution-of-typography-with-variable-fonts-7cd0078b5ceb

Sara Soueidan: SVG Filters

Sara Soueidan is an award-winning freelance front-end UI/UX developer from Lebanon. She runs workshops and helps companies and agencies build clean front-end foundations for websites and applications, with strong focus on progressive enhancement, performance and accessibility.

What I’ve learned:

  • There are a lot more filters in SVG than in CSS.
  • We can move many effects from Photoshop using SVG Filters.
  • We can prepare new textures.
  • It requires a lot of time to learn how to use SVG Filter.
  • All filters must be added between tags.
  • We can set in – input, in2 – second input (can be used only in some cases), result – result name (it can be passed to other primitive’s input).
  • Filter primitives starts with fe: feGaussianBlur, feDropShadow, feMorphology, feDisplacementMap, feBlend, feColorMatrix, feConvolveMatrix, feComponentTransfer, feSpecularLighting, feDiffuseLighting, feFlood, feTurbulence, feImage, feTile, feOffset, feComposite, feMerge.
  • You can use multiple filters on each SVG element.

More info here: https://www.sarasoueidan.com/blog/svg-filters/

Comments
Leave a Reply

View Comments (0)...

Related articles:

VS CODE Snippets – How To Code Faster and Easier?

How to Choose Node JS Development Agency?