CSSConf 2014 Recap

cssphoto

On Tuesday (05/27/14) I attended CSSConf for the first time. It was held at the Amelia Island Resort, it’s a short hop from Miami, so I decided to check it out. I was not disappointed; what an excellent conference. The venue was amazing, organization was impeccable, and the speakers were fantastic. It was interesting to see how CSS is evolving and how other front-end developers are integrating their workflow and continuously optimizing their code to make it faster and more modular. I found it especially interesting to hear Nicole Sullivan (@stubornella) talk about producing manageable CSS code and workflows and getting teams of designers and developers on the same page in her “Style Guide Driven Development” talk. She spoke about about her workflow at Pivotal where she faced many similar problems as we are facing developing our new control panel. It was reassuring to see that she made some of the same decisions we made, and I learned a few things that we’ll have to implement soon. She showed us the Trulia Styleguide Generator, our current styleguide sucks and we need a nicer one, this seems to be a really nice tool.

I also enjoyed Lea Verou’s talk. I follow her on Twitter and she always has interesting things to share. She did not disappoint when she gave her awesome talk about colors: The Chroma Zone: Engineering Color on the Web. Just when I thought I knew everything there was to know about colors in CSS, I realized I knew nothing… ok I knew some things… but this was a great talk with well presented information. Here are a few things I learned:

  1. You can use text-shadow and border without defining the color. It will inherit the color property from the text. Who knew… this works:
    div {
        color: #000
        text-shadow: 1px 1px 1px;
    }
    
  2. currentColor is the first CSS variable. It basically gets the current “color:” value. She gave an example using it in gradients. It was cool, but since I hate gradients I don’t see myself using it anytime soon. Nonetheless, I was happy to learn something new.

She also spoke about the new CSS Color Module Level 4. Some new shiny goodies to manipulate color coming up. Here are a few things:

  1. 50 (and more!) shades of gray: gray will become a function. Ex: gray(40%).
  2. 8 digit HEX codes. The regular 6 plus two extras for the alpha channel.
  3. Hwb – hue, white, black. I found this pretty cool.
  4. The new color() function with the color adjusters.

Zach Leatherman gave an awesome talk about icon fonts, or fonts in general. He was right when he said his talk should have been called everything you need to know about Web Fonts. It was a great presentation and he kept it interesting… and funny. He had some good insights on icon fonts. As a designer you need to consider your audience and there are several situations where font icons fail us. He has a great blog post about it: Bulletproof Accessible Icon Fonts. He shared with us A-Font-Garde, a small project to ensure redundancy when using icon fonts.

Angelina Fabbro shared some cool tools I did not know about:

1. Mobile emulation on Chrome https://developer.chrome.com/devtools/docs/mobile-emulation
2. New tool in Firefox https://developer.mozilla.org/en-US/docs/Tools/CSS_Coverage
3. Network link conditioner helps you simulate different bandwidth connections to test your app.

She also had a great tip to get z-index working correctly on mobile:

body {
z-index: 0;
}

Patrick Hamann spoke about the Guardian redesign…what an awesome project! The Guardian Website has over 100 million unique visitors using over 6000 different devices. Not only that, after a survey their users rated fast page load times the second most important requirement after content so they set themselves the goal of having every page on the new Guardian site to load under a second, given that 600 milliseconds of this was already being eaten up by latency, this was a daunting task. They came up with some ingenious solutions; great things happen when you work under constraints. One of the most interesting concepts, which was the core of his talk, was separating their stylesheets into critical and non-critical CSS, and having the critical CSS load first and then loading the non-critical CSS at the end of the page with the Javascript. To render the critical CSS faster, they delivered it as inline css rather than a separate file thus removing one extra http request. They also cached some of their CSS in the local storage when it was available. And in case you are wondering, they reached their 1000 milliseconds goal.

Alex Steton gave a hilarious talk about the history of CSS name colors. I wish I could talk more about it, but I was laughing so much I forgot to take notes.

Finally Paul Irish spoke about performance optimizations for parallax scrolling. It was a really interesting talk into how the browser deals with animations. The big take-aways from the presentation: 4 things that a browser can transition jank-free:

  1. Size -> transform: scale(n)
  2. position -> transform: translatex(npx)
  3. rotation -> transform: rotate(ndeg)
  4. opacity -> opacity: 0…1;

Come to think of it, you can do quite a bit with these four things.

All in all it was a fantastic conference, I look forward to next year’s.

Speaker slides:

Patrick Hamann - https://speakerdeck.com/patrickhamann/css-and-the-critical-path-cssconf-may-2014

Sara Soueidan gave a nice talk on Styling and Animating Vector Graphics with CSS - http://bit.ly/1kn9ZuK

Antoine Butler spoke about height based media queries - https://speakerdeck.com/aebsr/embrace-the-vertical

 

mayo 28 / 2014
Author Kim
Category Conferences
Comments No Comments
Tags

Upcoming Conferences

WeCamp

PHP New Zealand

PHP Summer Camp Croatia

PHPNE

MadisonPHP

brnoPHP

SymfonyLiveLondon

ZgPHP

PHPSouthAfrica

PHPNWUK

SymfonyLiveNYC

PHPForumParis

PHPARG

PHPWorld

TechMeetupUY

SymfonyConMadrid

DrupalCamp Spain 2014 wrap-up

DrupalCamp Spain 2014

DrupalCamp Spain 2014

Last weekend I attended DrupalCamp Spain at the beautiful Centro Cultural Bancaja, in Valencia, Spain. Three whole days of Drupal. This was my first Drupal conference, and… wow! The Drupal community is huge and full of passionate developers eager to learn. ServerGrove was one of the bronze sponsors and consolidates its support for the Drupal community. I was there because I was invited to give a talk about the Symfony components that are being used to create the new version of Drupal (Drupal 8). I got some great feedback from the attendees and I am excited to have the opportunity to participate the Drupal community.

Symfony in Drupal 8

In my talk I pointed out some of the problems of the current version of Drupal, which is mature, robust, and highly extensible, however, it lacks some of the recommended best practices for software engineering. This makes it harder to maintain and find new contributors. I borrowed one of the examples from Anthony Ferrara‘s talk on “Development, by the numbers”, which discusses some metrics of the drupal_http_request() function in Drupal 7, such as the cyclomatic and NPath complexity, and shows that it really needs a refactor, or in that case, use an HTTP abstraction component like HttpFoundation.

Fortunately the (still work in progress) 8th version of Drupal, 50% of its external dependencies are Symfony components, and others such as Twig, Assetic of Symfony CMF come also from the Symfony world.

In the talk I explained nine components being used by Drupal 8:

  • HttpFoundation: Abstraction of the HTTP protocol (more info).
  • HttpKernel: Defines an abstract process to convert a Request object into a Response object (more info).
  • ClassLoader: Class autoload using MapClass or PSR-0 strategies.
  • Routing: Drupal 8 uses CMF/Routing, which extends from the Routing component providing the flexibility needed by a CMS (more info).
  • EventDispatcher: Alternative to the classic Drupal hooks. Implements the Mediator Pattern (more info).
  • DependencyInjection: Implements a dependency injection container to centralize the object construction.
  • Validator: Provides validation tools for values or objects (more info).
  • Serializer: Serializes PHP objects into different formats (JSON, XML…), as wel as in the other way.
  • Yaml: Loads and dumps data in YAML format. A useful format for configuration files written by humans.

Slides are only available in Spanish, but they will be translated to English too as soon as possible. If you understand Spanish, check them out: http://www.slideshare.net/raulfraile/symfony-en-drupal-8-drupalcamp-spain.

Other talks

It was a great opportunity for me to learn different approaches for common problems from a different community. I am used to attend PHP and Symfony events, but as I said before, this was my first time ever in a Drupal conference. The talks I liked most were:

  • WTF! Huge errors in projects told by their own authors: This talk was hilarious. 5 experienced Drupal developers told their unspeakable errors as beginners, such as not using a CVS and losing all the work the night before the deadline.
  • Sockets to the limit: The talk went over an interesting use-case to have a centralised server to manage Symfony translations, and using websockets to “install” them in any server.

Community

Just a photo to see how awesome this community is…

14020046267_383924b817_z

BTW, can you find Waldo? :)

Sponsors

For the second time in a row, ServerGrove proudly sponsored the most important Drupal conference in Spain. We are really happy to be a small part of this great event and hopefully we will keep collaborating in the future. If you attended the conference, remember that we have a couple of coupons for you: “DPSpain15″ for a 15% monthly discount in VPS from VPS 100 to 700, and “DPSpain20″ for a 20% yearly discount in VPS also ranging from VPS 100 to VPS 700. Take a look at our VPS plans.

Photo: Foto de Grupo Drupalcamp Spain 2014, by Pedro Lozano.

mayo 19 / 2014

Upcoming Conferences

WeCamp

PHP New Zealand

PHP Summer Camp Croatia

PHPNE

MadisonPHP

brnoPHP

SymfonyLiveLondon

ZgPHP

PHPSouthAfrica

PHPNWUK

SymfonyLiveNYC

PHPForumParis

PHPARG

PHPWorld

TechMeetupUY

SymfonyConMadrid

WordCamp Miami 2014

The weekend of May 10th & 11th we attended the 5th anniversary of WordCamp Miami of which ServerGrove was one of the sponsors and I had the honor of speaking at.

WordCamp Miami T-Shirt Art

One of the framed t-shirts of previous WordCamp Miami

The conference started early for those who arrived on Thursday and attended the networking party offered by LiveNinja at their shiny new office in WynWood. It was a great time to catch up with local developers and designers as well those that came from as far as L.A. and the U.K. It was also great meeting some of the organizers of WordCamp NYC and WordCamp Orlando.

For its 5th anniversary, WordCamp Miami had a new venue. The Student Center Complex at the University of Miami was a great venue for the 700+ attendees, speakers, sponsors, and volunteers. The UM campus is beautiful and the Student Center had great meeting and social spaces.

There were also great talks, including one on WordPress Security by Dre Armeda. He went over some great security tips for WordPress including a .htaccess directive to be placed in the uploads directory to prevent PHP scripts from running there.

We offer a similar tip done in a different way.

RemoveHandler .php .phtml .php3 php4
RemoveType .php .phtml .php3 php4

Diane Kinney also had a great talk for people looking to hire developers on how to manage themselves, the project, and the developers. It’s not an easy thing to hire and trust someone else to build one of the most important tools your business has. Diane’s talk was honest about the expectations to have when hiring a development company and how to properly manage yourself and the project.

My talk on Linux command line basics was the first talk on the Developers track. I covered some basic commands like find and grep as well as how permissions worked. I was glad to see a few people ask questions during the talk or come up after and discuss ways of how to use command line tools to manage their sites.

One thing that was a new experience for me was the WordCamp Happiness Bar, a meeting space where attendees could meet with developers and designers to ask questions about how to solve specific issues with their sites. I spent a couple of hours helping with the Happiness Bar on Sunday and it was great to see the different level of questions that attendees had.

Overall it was a great conference professionally organized by the WordCamp Miami team and it’s no surprise that it’s still going strong after 5 years.

mayo 17 / 2014
Author Adrian Cardenas
Category Conferences, PHP
Comments No Comments

Upcoming Conferences

WeCamp

PHP New Zealand

PHP Summer Camp Croatia

PHPNE

MadisonPHP

brnoPHP

SymfonyLiveLondon

ZgPHP

PHPSouthAfrica

PHPNWUK

SymfonyLiveNYC

PHPForumParis

PHPARG

PHPWorld

TechMeetupUY

SymfonyConMadrid

PHP 5.5.12 and 5.4.28 released and available on ServerGrove

This week the PHP development team released PHP 5.5.12 and 5.4.28. The release contained numerous bug fixes, including an important one for CVE-2014-0185 regarding PHP-FPM. If you run PHP with PHP-FPM we recommend you upgrade ASAP.

If you are using our repositories, upgrading is simple. Here are instructions on how to use (or upgrade) our Ubuntu/Debian or CentOS PHP packages.

Other updates

Pimple

Pimple is a small Dependency Injection Container for PHP that consists of just one file and one class (about 80 lines of code). It is used by Silex and other projects. Just a few days ago, it was released as an implementation of the library written in C as PHP extension, providing a performance boost for those that need it. We have prepared packages of the extension for CentOS 6, Ubuntu 12, and Debian 6. Ubuntu 14 and Debian 7 will follow soon.

Package names for Ubuntu & Debian:

- php53-pimple_2.1-3_amd64.deb
- php54-pimple_2.1-3_amd64.deb
- php55-pimple_2.1-3_amd64.deb

Package names forCentOS:

- php53-pimple-2.1-1.x86_64.rpm
- php54-pimple-2.1-1.x86_64.rpm
- php55-pimple-2.1-1.x86_64.rpm

We will update these packages as new versions come out. Please use this at your own risk!

HHVM / Hack

Some days ago we announced our packages for HHVM / Hack in our repositories. Give it a try!

mayo 01 / 2014
Author Pablo
Category PHP
Comments No Comments

Upcoming Conferences

WeCamp

PHP New Zealand

PHP Summer Camp Croatia

PHPNE

MadisonPHP

brnoPHP

SymfonyLiveLondon

ZgPHP

PHPSouthAfrica

PHPNWUK

SymfonyLiveNYC

PHPForumParis

PHPARG

PHPWorld

TechMeetupUY

SymfonyConMadrid

Running Composer with HHVM, not so fast!

HHVM is an open-source virtual machine developed by Facebook and designed for executing programs written in Hack and PHP. It offers increased performance for PHP, most of the time. You can already use HHVM in ServerGrove servers by using our packages.

We have read numerous blog posts and articles suggesting to use HHVM when running Composer. If you are not familiar with Composer, check out our Composer 101 article.

Since Composer needs to perform some heavy computations in order to resolve the dependencies of a project, it makes sense to use HHVM. However, the heavy computations are mainly done when running composer update, or when the composer.lock file has not yet been generated so this is where you will see most of your gains in execution time.

Here are some tests while working with a Symfony2 Standard Edition project.

Running composer update with HHVM  takes ~4 seconds:

$ time hhvm composer.phar update --prefer-dist --no-scripts
Loading composer repositories with package information
Updating dependencies (including require-dev)
Nothing to install or update
Writing lock file
Generating autoload files

real 0m4.362s
user 0m3.540s
sys 0m0.168s

While running the same command with PHP takes almost 11 seconds:


$ time php composer.phar update --prefer-dist --no-scripts
Loading composer repositories with package information
Updating dependencies (including require-dev)
Nothing to install or update
Writing lock file
Generating autoload files

real 0m10.768s
user 0m9.692s
sys 0m0.180s

Running composer install

So running composer update with HHVM is clearly a benefit. It will save you a lot of time, and the larger the number of dependencies, the more time you will save.

However, we found that when running composer install with HHVM takes longer than doing it with PHP. This is especially important when using Composer in deployment workflows, as usually you would run install and not update and you will have a composer.lock file.

The reasons why HHVM is slower than PHP when running composer install are still unclear. There is some time lost while doing the JIT warmup, and HHVM really shines when it can run optimized and compiled bytecode, which is not the case with command line scripts, but we believe there is more than just the JIT warmup, as tests show several seconds of difference. We gained some performance by disabling the JIT (hhvm -v Eval.Jit=0), but it is still slower than PHP.

Composer install with PHP:

real 0m2.547s
user 0m1.190s
sys 0m0.919s

Composer install with HHVM:

real 0m4.905s
user 0m3.010s
sys 0m1.337s

Composer install with HHVM and JIT disabled:

real 0m3.062s
user 0m1.604s
sys 0m1.158s

You can run the same tests by using the shell script in this gist. Please share your findings with us.

Conclusion

We have seen many posts and articles suggest that you should create an alias in your shell configuration so you always run Composer with HHVM. Given the fact that HHVM is not always faster than PHP, we don’t think this is a good idea yet. We expect the HHVM team to improve the performance and at some point this article will become obsolete. Until then, consider this before you go all the way HHVM.

Also, we would like to know what others think and we encourage to try this test with your project. Share with us what you find.

abril 17 / 2014
Author Pablo
Category PHP
Comments 3 Comments
Tags ,

Upcoming Conferences

WeCamp

PHP New Zealand

PHP Summer Camp Croatia

PHPNE

MadisonPHP

brnoPHP

SymfonyLiveLondon

ZgPHP

PHPSouthAfrica

PHPNWUK

SymfonyLiveNYC

PHPForumParis

PHPARG

PHPWorld

TechMeetupUY

SymfonyConMadrid