DrupalCamp NJ - Theming & Mobile

Fundamentals of Front-End Ops

Preston So — Mon, 05 Jan 2015 23:07:15 +0000

Front-end paradigms are shifting fast, and among the trends singled out are task automation, painless dependency management, and quicker testing. Front-end ops, a term promulgated by Alex Sexton, deals with the synthesis of all of these responsibilities and others that front-end developers today face. We'll talk about a variety of different options available for FEDs to work efficiently and iteratively, such as Yeoman, Grunt, Gulp, Bower, and other lesser-known projects.

Here's what we'll cover:

Why ops? Automation generates consistency
Why front-end ops? Roles, rationales, workflow
Getting started: Scaffolding and setup
Automation: Grunt and Gulp
Linting: Coding standards
CSS: Preprocessing and aggregation
JavaScript: Minification and concatenation
CSS regressions
Testing rendering engines and devices (GhostLab)
Performance testing
Developer tools for debugging

This session assumes some familiarity with the command line.

About me

Preston So has designed websites since 2001 and built them in Drupal since 2007. He is a Software Engineer at Time Inc. and also co-founded the Southern Colorado User Group. Since 2008, Preston has spoken at conferences and camps across the U.S. and on two continents (most recently DrupalCon Amsterdam 2014 and DrupalCon Portland 2013) on topics such as design, theming, usability, responsive design, and cutting-edge code.

Experience level:

Intermediate

Speaker(s):

Preston So

Session Tracks (DrupalCamp NJ 2015)

Theming & Mobile

The Future of HTML and CSS

Preston So — Mon, 05 Jan 2015 23:06:30 +0000

In the face of bewildering advancements in the front end, it's useful to take a step back and take stock of where the fundamentals are headed: namely HTML and CSS. These two lowly languages have been largely left by the wayside as we front-enders scream ahead with abstractions and frameworks. But where are HTML and CSS headed exactly? This session examines progress working groups have made to the existing standards, techniques that are already or will soon be available for developers, and some of the proposals being floated around the standards.

We'll devote our attention to the following questions: How far have HTML and CSS come? What upcoming techniques or proposed additions are most relevant to us as Drupalists? What does the future of HTML and CSS look like in terms of cross-browser compatibility, programmatic approaches, and more extensive possibilities? What are Web Components and the Shadow DOM? How can we prepare for the approaching future of HTML and CSS?

Just some of what we will delve into:

A brief retrospective: Where are we now?
The current rendering engine landscape
Vendor prefixes: Dead but not extinct
New selectors, combinators, and pseudo-classes
Flexbox, Grid, and other layout
CSS backgrounds, borders, and gradients
CSS variables and extensions
Web Components and the Shadow DOM
Custom elements, HTML imports, and CSS scope
General implications for Drupal
... and much more

This session is geared toward front-end developers, themers, and designers interested in a robust crash course in where HTML and CSS are headed in the short and long term. This session also assumes an advanced understanding of modern HTML and CSS. Though some of these techniques are still unavailable for general use, this session will give you the tools to engage in the discussion and to plan for the future of markup and style.

Note: This session is an updated version of the DrupalCon Amsterdam and BADCamp 2014 session The Future of HTML and CSS. It is also a sequel to Frontiers of CSS (BADCamp 2012, DrupalCamp NJ 2013, DrupalCamp CT 2012).

About me

Experience level:

Advanced

Speaker(s):

Preston So

Session Tracks (DrupalCamp NJ 2015)

Theming & Mobile

Designing in Motion: Bridging the Gaps in Your Design Process

Amanda Konopko — Mon, 05 Jan 2015 22:03:49 +0000

Static mockups and the processes behind them have flaws that get revealed when designing responsively. Timelines, complexity and budgets are challenged with each responsive breakpoint defined. Interactivity is often unclear, undocumented, and sometimes unknown. The way in which we design needs to change. We need to rethink our tools and the artifacts they create. We need to go faster, do more, reveal more, experience more and yet also adjust quickly. We need to design in motion.

This session will look at the different aspects of designing in motion: the expansion of design roles, designing in the browser, and acceleration via Drupal compatible toolsets, as well as what this means for your Drupal project’s budget, resource allocation, and client expectations. Some questions that will be answered during this session include:

What is responsive design and how does it influence Drupal decisions?
How can the design process be accelerated, while still designing responsively?
What are the positive effects this shift in process will have on your Drupal project?
How can designing in motion leave you with a more satisfied client?

Experience level:

Beginner

Speaker(s):

Amanda Konopko

Session Tracks (DrupalCamp NJ 2015)

Theming & Mobile

Twig and Drupal 8's new theme layer

davidhernandez — Sun, 04 Jan 2015 17:55:29 +0000

Drupal 8 has changed the default template engine from PHPTemplate to Twig. This is big news for themers and developers alike. This session will go over Twig basics and also changes to Drupal's overall theme layer strategy.

This session will go over:

What has changed in the theme layer
Basics of Twig syntax
Drupal specific Twig functionality
How the new theme layer helps themers
Security
Debugging

Experience level:

Beginner

Speaker(s):

davidhernandez

Session Tracks (DrupalCamp NJ 2015)

Theming & Mobile

Writing maintainable and performant Javascript for Drupal

Siarhei Semashka — Sat, 03 Jan 2015 20:18:49 +0000

Javascript is gaining the power and becoming more and more popular nowadays. Amount of JS features is drastically growing on average site. To be able to successfully extend your old code it should be written according to Drupal best practices.

In this session I will show and explain you:

How to avoid common Javascript pitfalls in Drupal
Techniques for writing maintainable Javascript in a Drupal way
What reduces your JS performance and what to do with that
Ways to process Javascript on Drupal side

Disclaimer: This session affects only Drupal module and theme JS development. Single page applications and native mobile applications mostly don't use Drupal core JS.

Slides:

maintainable JS.pdf

Experience level:

Beginner

Speaker(s):

Siarhei Semashka

Session Tracks (DrupalCamp NJ 2015)

Theming & Mobile

Drupal 8 Theming - Exploring Twig and Other Frontend Changes

crowdcg — Wed, 31 Dec 2014 17:42:48 +0000

Drupal 8 makes use of Twig as it's new template engine and also provides a simpler theme layer. In this session I’ll explore what Twig has to offer, as well as talk about some Drupal 7 theme problems and the solutions for them in Drupal 8. The goal of this session is to illustrate how Drupal 8 will improve the experience of themers and frontend developers.

Slides:

Drupal8-Themeing_013115.pdf

Experience level:

Intermediate

Speaker(s):

crowdcg

Session Tracks (DrupalCamp NJ 2015)

Theming & Mobile