front end development

• Reusable Patterns (Frontend Components) vs Web Components.
• Separation of concerns (aka MVC): styling, functionality, data.
• Yarn Workspaces to maintain separate component and manage its dependencies.
• data- attrs to control components in a declarative way and w/o js.
• Twig to build all together.
• Using with Drupal or other CMS.
• Using with Fractal or other pattern library.
• Demos: Reusable Carousel, Reusable Gallery, Reusable Modal, compound components.

There are a crazy amount of different approaches for layout management in Drupal today:

• Layout Discovery/Builder
• Block Layout
• Display Suite
• UI Patterns
• Bricks
• Paragraphs (+ Frontend UI)
• ...

In this session we will go through all of them and try to make a big picture — what is designed for, and how to use them properly — together, or independently from each other.

Recently the field of static prototyping, living style guides, and front-end focused development tools has blossomed, and the adoption of these processes has entered into best practices. But we’ve always felt something was missing from this formula and the de-facto tools: Content Strategy.

For quite a while, I've been working with pre-configured gulp files and using the command "gulp watch" to complile my SASS. Recently, I've dug a little deeper to try and understand what Gulp is capable of, how I can customize my workflow with Gulp, and to better understand my alternatives.

This session is a beginners guide to Gulp. We'll start with what Gulp is, what all it is capable of, and whether or not you should use it? We'll take apart the configuration file used by Gulp, gulpfile.js, and show you how to customize it. 

How and why to decouple your Pattern lab from your theme. In this case study I will be talking about the decisions taken in the architecture of this solution for the City of San Francisco.

https://github.com/SFDigitalServices/sfgov-pattern-lab

Debugging in the browser is something every Front End Developer should know, I wish I knew this before... but if you want to save time and learn more about how JS runs in your browser this session is for you.

In this session I'll explain how to debug JavaScript and execute your code step by step. You will learn how to set breakpoints, watch expressions, debug events, and create and execute code directly in your browser.

http://slides.com/isramv/js101#/

Watch the session video here.

React.js has become one of the top players in the JavaScript libraries world. WordPress has rebuilt its WYSIWYG editor using React. Drupal has recently adopted the library to create admin interfaces. This session aims to explain the basic concepts of React outside of the context of any particular CMS implementation. Many examples will be presented to help you understand it and why it is so powerful.

Learning objectives:

Watch the session video here.

Over the past year, Last Call Media has been working with the development team at Massachusetts Digital Services on improving the stability and performance of the mass.gov platform.  One phase of this journey was to realize some massive performance gains on both the front and the back end of the site.  In the first part of this session, we’ll talk about the backend performance, discussing:

• How we used Blackfire and New Relic to identify issues

Watch the session video here.

“Understanding the process of finding a solution is far more valuable than the solution itself.” Lea Verou, author of CSS Secrets.