1. The Front-ier The Distant Future of the Front-End

2. Hello! I am Chris Hallberg.
@crhallberg /
I am the lead front-end developer for VuFind.
I am to blame for out-of-the-box styling and features.

3. Apply Machine Learning to Lightbox Cryptocurrency VuFind Tokens
Presentation Outline
Apply Machine Learning to Lightbox
Cryptocurrency
VuFind Tokens
Discussing React vs. Preact
Saphire-enhanced Ruby on the Third Rails
Personalized Layouts powered by TensorFlow
Voice-Activated Personal Assistant
Bevel-less
Dual SIM card
Blockchained PHP

4. Update Styles Update Templates Non-Breaking Changes Sandal
Bootstrap

5. Panic-Inducing Possibilities for VuFind's Future Front-Ends I'm painting a picture of a flying city

6. Big Picture MODERN ◦ LESS BLOAT ◦ MORE CONTROL
BETTER ACCESSIBILITY ◦ BEST PRACTICES
There are some disagreements about how to go about this: closer to a framework, more independent?
I’ve gathered my more extreme ideas to start a discussion, not cement a path.

7. Out With The Old Drop Bootstrap Drop jQuery Strip stylings
Presentation Outline
Out With The Old
Drop Bootstrap
Drop jQuery
Strip stylings
An Active Process
Touch every template
Accessibility
Code-styling
In With The New
Radically accessible
Not-Quite React
ES6 classes
Prettier

8. Opportunities: cut bloat, increase flexibility and customization
Out with the Old
Opportunities: cut bloat, increase flexibility and customization

9. Native browser stylings can replace most essentials
Drop Bootstrap
Native browser stylings can replace most essentials
Sandal started by removing columns, form-controls, and list-groups
Roll Your Own Bootstrap
Micromodal
W3 components to replace the kitchen sink

10. Notes from the German conference point to the contrary
Drop Bootstrap?
Notes from the German conference point to the contrary
A purer Bootstrap theme
Less custom code
Cut bloat by having more control over which components are included
Interest in Bootstrap 4
If anyone is anxious about version 5, I have a solution that never fails: BS5 will come out the week after we complete the Bootstrap 4 theme.

11. jQuery’s most prominent features are now native
Drop jQuery
jQuery’s most prominent features are now native
$() vs. querySelectorAll()
.add() vs. classList.add()
Reduce dependency differences (1.x vs. 3.x)

12. Remove Almost All Styling
Remove opinions and strong stylings
Focus on layout and semantic classing
Build on a good CSS reset (ie. Reboot.css)
Allow flexibility of frameworks
.btn is shared by Bootstrap, Pure
Easy to map to Primer, Skeleton, Foundation
Create utility styling (ie. Tailwind or Tachyons)

13. An Active Process
Reduce and Refactor

14. Break into smaller, reusable chunks Common UI elements (ie. tabs)
Touch Every Template
Break into smaller, reusable chunks
Common UI elements (ie. tabs)
Merge together ideas more rapidly
Solve some differences between German library and US library needs

15. Improve Accessibility
Utilize best practices
Semantic elements (main, aside, article, etc)
Use proper aria attributes
Screen-reader friendly outlining
Accessible to developers as well

16. Same indents across languages Focus on readability
Code Styling
Standardize code
Same indents across languages
Focus on readability
classes and js-classes

17. Building on the previous good with radical new ideas
In with the New
Building on the previous good with radical new ideas

18. Radically Accessible Results
Use tables in the search results
Proposed by Katherine Deibel
One of the most screen-reader friendly elements
Also, W3 recommends definition lists for accordions
Katherine Deibel of the University of Washington at Code4Lib 2017 (Day 2

19. React itself is overkill and incompatible
Not-Quite React
React itself is overkill and incompatible
But we can borrow a few ideas
Reduce template complexity by populating more elements with JS
record comments, record status, sidebar filters
HTML templating might improve customization

20. Utilize classes to refactor records
Javascript Updates
Upgrade to ES6
Utilize classes to refactor records
JS representation and control of records
Most components are singletons
Prettier formatting
Automatic reformatting of JS and CSS
Fast and becoming widely adapted

21. Get your questions ready, first a few from Germany

22. Why there is code in VuFind for both LESS and SCSS?
VuFind’s styles are developed in LESS and ported to SCSS for institutions who want to develop their themes with Sass.
Maybe the solution is the module PostCSS.

23. Are the barriers to entry low enough for new installers?
No. The amount of configuration is daunting. Customization is not intuitive and can be improved with these ideas in this talk and a new approach to inheritance.

24. Any questions? @crhallberg / challber@villanova.edu
Thanks!
Any questions?
@crhallberg /

25. Presentation template by SlidesCarnival
Credits
Presentation template by SlidesCarnival
Accessibility talk is “The Most Accessible Catalog Search Results Page Ever”
By Katherine Deibel
Slides:
Video: