Frontend meetup topics for 2014

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Mindewen's picture

Last month we did some brainstorming on possible upcoming meetup topics. Here's a list based on my notes. Please let me know which of these sound most interesting to you, and/or if you have more ideas. Let me know if you want to present on anything, too, even if it's just a 5 minute blurb!

Possible topics:

  • Twig
  • Backbone.js / Angular.js / etc.
  • How to make a theme in D8
  • Responsive theming
  • Current base theme options
  • Admin themes / interface
  • Frontend performance
  • Team workflow - successful collaboration between design, front, and back end
  • Frontend development tools / workflows
  • Email theming tips (and/or group therapy on the subject)
  • Testing, Behat
  • Theming for commerce
  • Examples of great Drupal designs + maybe how they were created
  • Config-based layout options, Panopoly, etc.
  • "No judgment" Q&A night
  • Sustainable theming
  • Sass-y stuff (and/or other CSS preprocessors)
  • Prototyping - tools, approaches, stories, gotchas, examples

Furthermore, I'm looking for someone to help me plan the frontend meetups. As I take on the larger event we're planning for the spring, I'm going to have less time available to make sure the monthly meetups happen. So I could use some help!

Comments

Ideas

Greg Boggs's picture

Something I don't see often, but isn't super hard to do is adding a "View Desktop Site" link to responsive websites. Mobile first responsive websites don't always display everything every user might want on a page, so it's nice to give them the option to view the full version.

A few other ideas that came from here: http://calendar.perfplanet.com/2013/browser-wishlist-2013/

There's some cool stuff happening in font loaders that prevent flickering when loading:
https://github.com/typekit/webfontloader
http://help.typekit.com/customer/customer/portal/articles/649336-embed-code

Lastly, there's some really great work around responsive images that's interesting.

See: https://github.com/igrigorik/http-client-hints

Client hints will mean all images served via CDN will be responsive with no work by the developer. This would make the "Picture" module and the massive array of image styles a thing of the past.

Sass/git workflow

Amber Himes Matz's picture

There are some gotchas in working as a team on Sass files using version control and it would be good to hear from folks how they are managing their Sass files as a team using git.

Amber Matz

Darn was that a big pain the

Greg Boggs's picture

Darn was that a big pain the first time we used Sass!

Now, just like generated image style files, we ignore generated CSS files and then compile them on the target environment. Obviously, for this to work, your server has to have Ruby installed.

Here's a crontab I use to automate the updates to our dev server.

https://gist.github.com/Greg-Boggs/7919301

This can be done more elegantly with Jenkins or a Git Post Receive script.

I'd love to see how others do this.

Yup

gdd's picture

We just went through the same thing on lullabot.com, we removed all the CSS and generated files from version control, and added a step to our deployment process that compiles sass on the remote server. It's really the only way to go, otherwise you're going to be constantly chasing conflicts in all your feature branches. We also do it with Jenkins, where we have a script on the production server that takes care of all kinds of tasks (pulling from git, running update scripts, reverting features, compiling sass, etc.)

OpenSourcery has the same

jyee's picture

OpenSourcery has the same thing with their Turnip starterkit (https://github.com/opensourcery/turnip). Another big advantage to compiling sass on the server is that the server should have a very different config.rb than dev/local. Which means you can have it compile production css without comments, line markers or extra whitespace… all the things that you'd want for help debugging on dev/local.

Hello

BLadwin's picture

I'll be moving back to PDX in January, and I'm looking forward to attending more Drupal meetups. At the last front end meetup I went to, Micah had demonstrated Tractor [I think it was still called protobots then], an AngularJS based tool for prototyping our Drupal themes. I've used it on numerous projects since, and it's been a tremendous help in the development workflow. I just recently was able to build, design, and launch [well, launch is this week] 13 sites; 11 were based on a variation to the same theme. Granted, we're using Vagrant, Kraftwagen, and numerous other techs for deployment and environment management, but the best part was that the developers were able to build functionality and structure, while I focused on the front end prototype. Once the Drupal development and the mockups were accepted, it took about 20 hours to implement the prototypes into D7 themes. Anyway, my point: I'm planning on building a prototyping tool that will utilize Twig and be able to build "templates" based on the D8 config files from the devs building the site. The end goal being a drag-and-drop Drupal 8 Twig theme. I'd definitely like to present at a meetup, and if possible help with the "spring event".

Looking forward to seeing you all again in January!
- BLadwin

Yay, ideas!

Mindewen's picture

How could I forget about prototyping? Adding it to the list. I love that idea for a Twig-based prototyping tool.

I'm not sure if the Sass files' Git workflow would go under the topics of Sass or Git, but I'll make a new list item for Sass-y things in any case.

Greg, great ideas for things to explore in terms of responsive theming and frontend performance!