The Nerdary

CSS for Teams

jennlukas — Tue, 14 Nov 2017 11:53:30 -0800

Things I love:

Clean, organized, performant code
Collaboration across teams
Creating usable interfaces
CSS

With those passions in mind, I’ve been enjoying crafting our CSS design system as the UI Architect for URBN the last two years (babies and broken bones have made this blog post is past due).

For us, CSS is not just an afterthought for adding pretty colors; it’s the perfect collaboration tool for improving your team’s approach to web design. We took three separate sites: urbanoutfitters.com, anthropologie.com, and freepeople.com along with three separate teams - each brand had their own engineering team - and have worked to combine them onto one platform and into one web engineering team. Here are some highlights on how we did it.

1. Audit and Combine Our Current Styles

To enhance the user experience of our websites, we focused on reusable patterns to allow our customer to focus on their main goal and keep the interface from getting in their way.

We worked with all three brands’ design and product teams to categorize and inventoried everything! We examined our UI modules, headings, paragraph styles, colors, margins, icons – the works. We analyzed and paired down these styles, removed unneeded variations, and named the new modules appropriately. We then mapped each instance to a new class from our slimmed down system of conventions.

2. Standardize the Grid

From the design side, we had one site using a 4-column grid and another site using a 24-column grid. From the engineering side, there was a strong desire to use Foundation because of the familiarity with the grid classes used in their framework.

We did a grid audit and after reviewing the findings, the design and engineering teams agreed on the suggested approach of migrating everyone to a 12-column grid and using Susy to create a custom CSS grid to meet our needs specifically, but utilize similar classnames to Foundation, so that the change to the new system would be a much smoother transition.

3. Meet Accessibility Standards

We ran all of our new design patterns across accessibility checks. We made sure we met color contrast standards, had keyboard friendliness, and presented legible text sizes. We documented and trained the team on how to adhere to WCAG AA guidelines.

4. Convert Everything We Can to SVGs

We said goodbye to our old large PNG image sprites and hello to SVGs for all of our non-photographic imagery. We control hover and animation states with CSS and benefited across retina devices for scalability and in performance gains across slower connections.

5. Namespaced BEM for CSS at Scale

With so many engineers working together in the codebase, we needed a standardized set of naming conventions for our classes. The BEM methodology addressed so many concerns we had about variation, but wasn’t quite our cure-all solution. Working across a large ecommerce environment, there were quite a lot of fears about overriding the styles for one component and having the affects of that change go beyond the expectations. Enter our namespaced CSS.

Namespaces add another level of transparency and allows our engineers and designers to easily recognize the breadth of the module in question. We’ve added more namespaces as needed (for example, g- for grid and i- for icon) and this system has allowed us to never have to write an !important.

6. Spec in Class Names, Variables, and Mixins

Once we defined our class naming system, we trained not only the engineering team on it, but also our design and product team. Sharing the same language is so important in web design and allows us all to be stronger teammates when creating a successful product. Our designers deliver specs using our BEM classnames, variables, and Sass mixins to ensure a more efficient handoff and partnership.

7. Always Be Style Guiding!

Design Pattern Library

We use KSS to create a living document of our styles. The guides are available locally to devs as well as on our internal docs for designers, product owners, scrum masters, and everyone else to see and reference.

Code Standards Style Guide

We also documented our best practices for CSS coding standards. It covers everything from leading zeros to declaration property order to selector depth restrictions.

Our CSS should be as elegant as the aesthetic it’s creating.

What’s Next? Embrace Change and Improve.

I look back to the 2013 post on Making Web Development a Team Sport and though much of the theory still holds true, my approach has evolved so much since then. While we always do our best to future proof our code and plan ahead to try to solve for all kinds of scenarios, the truth is our website best practices can always advance.

Now that we have three sites up and running on our shared platform at URBN, we’re able to have a lot of perspective. What we do with perspective is what defines us as web makers. We could accept defeat if we see things that could’ve been done better and keep going with that system, or we can embrace the challenge of tech debt and constantly improve our workflows.

Some things in my pipeline: critical path CSS; updates to our brand override system to cut back on code redundancy; mixin overhauls to allow design specs to be more straightforward. There are performance, team collaboration, and process improvements to be had because of CSS. Just as with other parts of our process and technology stack, CSS is a highly impactful web tool, that when crafted with finesse and nurtured through change, can yield such great results.

How to tell if your web font is loading?

jennlukas — Tue, 14 Nov 2017 11:48:23 -0800

How to ensure your fallback font is not replacing your primary typeface

Some engineers pride themselves on having a “designer’s eye.” They can spot if vertical alignment is off or if line-height isn’t set appropriately for the text size. Other times, we could use some help knowing for sure if a UI element is appearing as the designer call far.

One challenge is knowing if the web font you are calling with @font-face is indeed loading or not. Think you’ve got Helvetica displaying only to discover that the Arial fallback is showing up? Here’s how I ensure that the typeface I want is what is actually appearing.

Let’s say I want to use Open Sans from Google Fonts. The font stack Google suggests is:

font-family: 'Open Sans', sans-serif;

I put that in my styles, I hit save and looks pretty good. But if I take a closer look, it’s loading the sans-serif fallback and not Open Sans. How can I be sure of this when the generic family might be too close to the primary typeface for someone to easily identify? I plug in a more distinct generic family instead, preferably my favorite, fantasy.

font-family: 'Open Sans', fantasy;

Now on save, there’s definitely no mistaking that wonderful, magic that is definitely not Open Sans. It’s a quick way during development to identify our font-face is working as desired. You could also use a tool such as whatfont.

Be sure to set your font stack back to the desired fallback, unless some surprise Comic Sans or Papyrus is up your alley.

BreakTime: Computer Break App Review #1

jennlukas — Tue, 05 Aug 2014 12:01:43 -0700

We’ve all heard it: “sitting is killing us”, “screens will keep you awake at night”, “desks are bad for your health”, “computers will give your robot eyes”, etc, etc. Yet for many of us, our jobs are at a computer and at a desk and until we can code from the beach while doing an inverted pose or with a laptop hammock stand, what are we to do?

Over the next couple of days/weeks, I am going to try a different break strategy every day. Feel free to follow along and leave your thought on the apps as well. First up:

BreakTime

http://breaktimeapp.com/
Cost: $4.99/Free trial available
Also available for iOS
Suggested by: Jeremy Fuksa, Veronica Domeier, Geoff O'Donnell

The Pitch

BreakTime is a simple utility that’s designed to help you remember to take breaks away from your computer. It never forgets a break, running in your dock and / or menu bar (or even in the background).

The Break

Well, the download screen leaves a lot to be desired on this one, but it was recommended by three people so I went for it.

Simple to install and get up and running. Option to display icon in dock which is nice. Presented with basic and advanced options. I went with the default set. You can go into super serious strict break mode by option for the Enforce break option which won’t let you click the “done” button early.

The menu icon will update based on how much time is left till your next break and also provide a larger visual representation of that on click.

Twenty minutes later we were ready for our first break!

I also was interested to see what the sounds were. They were quite minimal which was perfect. A quaint, non-jarring alert to let you know it was starting, and then the BreakTime options are presented on your main screen. You can wait the default two minutes, prompt the break in a minute or more, or select ‘done’ to end the break.

Any secondary displays are dimmed.

Any music playing will still play but clicks on other apps are prevented until selecting 'done’. At the end of two minutes, the break screen stays up and begins to play a low-key alarm alerting you that the break is done. I expected it to end automatically, and could imagine if the break is triggered while I’m away from my desk that sound could be annoying.

I don’t know if the magic reschedule ever happened, which would readjust my break times if I was away for a while as I wasn’t away for a while. But definitely a neat feature.

The Results

By the second break, I switched from 20 minute to 30 minute increments. Twenty was too often for me for a two minute break.

I was getting along nicely with this, but at the third break my demo prompted me to purchase:

BreakTime is a contender: pretty customizable and unobtrusive. And the sound effects are pretty nicely chosen and appropriate. I do wish that it closed on it’s own after the determined two minute break was up.

Tomorrow’s break app: Marinara Timer

Interactions in Responsive Web Design for Hover and Touch Devices

jennlukas — Tue, 29 Jul 2014 12:57:00 -0700

Links and talking points from my talk: “Interactions in Responsive Web”

Why add interactions to our web pages?

Illustrate a change on the page
- Let users know something has changed
- Make changes less jarring
Allow other changes to happen in the background
Appear current
- Use of new technology lets users know you are up-to-date
Add entertainment
- Surprise and delight
- Value in fun factor

Should you add interactions/animations/transitions?

Will the interaction help users understand the changes in the interface?
Will the interaction add personal value or enjoyment to the experience?
How does the interaction affect the page size/performance budget?
Can I optimize the experience by choosing less expensive properties to animate?
How much time will be added to the design/development timeline to create/implement?
How will this effect the cross-device QA/testing time?
If I remove the interaction, can my visitors still access the information in an easy manner, with minimal clicks or confusion?
Do the interaction choices degrade gracefully?
Is the design accessible for touch, mouse, and keyboard users?

Interaction: Simple transitions on :hover & :focus

Easy to add with code such as:

a { transition: color 0.25s linear; }

Sites in use:

http://jasonsantamaria.com/

Pros:

no context lost on touch/non-touch devices
smooth change for users with hover or focus
minimal work to implement

Cons:

multiple functionalities to test/design

Interaction: Surprise and delight hovers

Sites in use:

http://delval.edu/ (since changed)
http://diningataltitude.com/vail-restaurants/ (since changed)

Pros:

Gain fun, user enjoyment with playful interaction
No context lost on touch devices

Cons:

Minimal to potentially average added page weight for functionality

Interaction: Information reveal hover

Sites in use:

Pros:

Show information to users quickly without additional clicks or page loads
Can provide a fun interface for visitors to interact with

Cons:

Different experience for touch/mouse users
Touch users on larger sizes might be confused by experience

Interaction: Destination hover

Sites in use:

Pros:

Can maximize imagery by hiding text till interaction
Can offer shortcuts for reaching a destination

Cons:

Users without hover will not know destination, might be forced to take longer route to content
Visitors might miss links all together
Might require additional JavaScript to remove 300ms delay

Interaction: Navigation menus

Sites in use:

Hovers:

Have become a common convention for dropdown menus
Touch users will have a sub-par experience by having to take a longer route to content

Clicks:

Visitors might not recognize the need for a click
Makes sure touch and mouse users can access content

Interaction: Slideshows

Sites in use:

Pros:

Common interface for serving image and text content
Visitors can use arrow, pagination, and swipe conventions
Lazy load techniques can help solve speed problems

Cons:

Can have a speed impact; add to our performance budget
Interactions can be confusing on smaller screens when content doesn’t fit nicely and movement is rendered at unexpected speeds and directions

Interaction: Site Intros

Sites in use:

Pros:

Can focus attention on specific elements
Adds visual enjoyment and liveliness to page
Adds slickness to otherwise pretty barren splash pages

Cons:

Can be a large speed impact
Can be confusing on smaller screens to follow elements as they animate in

Hover/Touch Global Switcher

CodePen examples:

Global Hover/Touch switcher: http://codepen.io/Jenn/full/cwuJf/
List view hover/touch switcher: http://codepen.io/Jenn/pen/Jdnko

Pros:

Makes sure that there is a way that visitors on any device can get the best experience for them
Allows aesthetic customization for different use cases
Can combine with screen size to optimize for small screen touch vs large screen touch

Cons:

Additional design/development work to craft different experience
Requires user to do extra work to set preferences

Interaction Media Features

Pointer:

Checks for: none, coarse, fine
If multiple input mechanisms: recommended that the UA reports the characteristics of the least capable pointing device
UAs may make the feature match multiple values.

Hover:

Queries whether primary pointing system used on the output device can hover or not.
Values: none, on-demand, hover

CSS Animation Performance

Faster properties:

Transform
- position
- scale
Opacity
Rotation
Some filters

300ms Delay

Mobile browsers wait ~300ms from the time that you tap the button to fire the click event to wait and check for double tap.

Overrides:

iOS: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
Windows: http://msdn.microsoft.com/en-us/library/windows/apps/Hh767313.aspx
Fast Click: https://github.com/ftlabs/fastclick
Tappy: https://github.com/filamentgroup/tappy/

Helpful Links for Successful Web Typography

jennlukas — Mon, 12 May 2014 17:12:00 -0700

Here is a collection of useful links for designers and developers from my presentation The Developer’s Ampersandwich.

Articles/Examples

Where to find info on Web Font Trends (Jenn Lukas/A List Apart Blog)
Disabling Typekit (Jenn Lukas/The Nerdary)
Testing the loading of fonts with screen size media queries (Dave Rupert/CodePen)
Multiple Kits for Mobile Device Fallback Fonts (Jordan Moore/Typekit Blog)
Icon Fonts (on CSS Tricks)
Font Sizing with REM (Jonathan Snook)
Please Stop “Fixing” Font Smoothing
Book: On Web Typography (Jason Santa Maria )

Tools/Browser Extensitions

Easy Color Contrast Testing a look at the Chrome extension and how to use it (A List Apart blog)
45-75 character bookmarklet from Chris Coyier
Type-o-matic Firefox extension from Nicole Sullivan
General Styles Example (in GitHub Starter Files repo)
What Font extension to easily identify a font being used on a web page
ffffallback.com extenstion testing fallback fonts within the browser
Tinytype a table of what fonts are common to which mobile devices
Glyphs App Make your own icon fonts
SymbolSet
IcoMoon Icon Fonts and SVG
FontasticAnother for Icon Fonts and SVG

Free Web Fonts

The League of Movable Type
Adobe Edge Web Fonts
FontSquirrel Can filter fonts by “free”
Google Fonts
Examples of Beautiful Google Font pairings

Are We Sharing Or Speaking?

jennlukas — Mon, 05 May 2014 07:59:00 -0700

I wrote a post about a formula to use for calculating a speaker fee if you are looking to charge one. There’s been great, open dialogue surrounding this topic lately. This is awesome as money is always a tough subject to discuss. I’ve enjoyed reading different responses and takes on the subject. This is always going to boil down to what you feel comfortable with. Web designers, plumbers, singers, we all charge different rates based on many factors, so remember that in the end, you can be informed what others do but ultimately need to find what works for you. There is no one right answer.

In response to speaking fees, two of the more common responses against charging them have been, “conferences are about sharing” and “conferences pay for themselves”. Let’s look at these and ask a few more questions for discussion:

“Don’t conferences pay for themselves?”

I’m assuming the extreme thinking here is that by speaking at a conference you are then greeted with job offers, freelance projects, and millions of Twitter followers. I hope this is true for some of you, but for lots of us, it is not. Let me ask you this loaded question:

Is speaking for free, in hopes to land a job, any different than spec work?

I’m not 100% sure how I feel about spec work in general. But I do know the majority of us are not up there giving product pitches. We are spending time creating content, designing slides, and practicing to try to teach and inform our audiences.

If we are saying the hard work of public speaking has no paid value, are we essentially creating a new spec work situation?

“Aren’t conferences for sharing information, not getting paid?”

What if we altered the language we use to describe speaking at conferences. When you read these statements, do they invoke different ideas of the requirements involved in public speaking:

“I am sharing at an event”
“I am presenting at an event”
“I am performing at an event”
“I am teaching at an event”

Would you pay some of these people, but not all of them? Is there a difference?

Let’s step away from the tech field and look at a stand-up comedian. A stand-up comedian goes on stage and jokes come out of her mouth for 45 minutes. Do we pay her for this time? Is she sharing the jokes? Is she performing? If we don’t like the jokes she is telling, does that change our perception? If her jokes are about her own personal experiences, is she selling herself too much? If she’s only been telling jokes for 6 months do we pay her less than someone that tells jokes for 5 years? If she’s performing locally do we not pay her? If she had to travel far, should we pay her? If she goes on stage and improvs the jokes with no prep, do we leave money out of the equation? If she spent a week or two forming the jokes, crafting them, practicing them, should we pay her for that time?

Are larger comedy performances like a tech conference? Are open mic nights like local meetups?

Here’s how it works for me

When I share through blog posts like this one or record podcasts like the one for ladiesintech.com, those are done on my schedule and are personal projects with myself as the client.

I treat speaking at conferences the same as working for clients. The conference organizers and attendees are my clients.

Again, how you see this or anything in life is going to be personal for you. You can make your own formula for this. Just as there are plenty of ways to code a site navigation, there are a lot of ways to handle your speaking endeavors.

(Thanks to that radical Ethan Marcotte for post feedback)

A Formula for Speaking Fees

jennlukas — Fri, 02 May 2014 12:53:00 -0700

I was on a panel about public speaking recently and the topic of getting paid to speak came up. My answer: I do charge a speaking fee for most conferences I speak at. Ideally every person (full time, self employed) will be paid for speaking, but now that I’m a freelancer, it is imperative for me.

When I speak at a conference, I am committing to spending time away from traditional client work to prep a talk, practice a talk, travel to/from a talk, and give the talk. I’m super into math and formulas and I find that hard numbers allow me to figure a fair speaking fee. So let’s see how that works. If I say yes to an hour long talk, that can potentially break down to these hours:

Email correspondence with conference organizer (info, travel plans, etc): 1 hour
Prepping for talk (info, keynote design, research): 35 hours
Practice: 5 hours
Travel (including waiting at an airport, where I find it hard to do work depending on Internet/length of time): 5-16 hours
Conference (multi-day): 16 hours

That can be a total of 73 hours away from paying client work. Now, let’s break this time down a bit. If it’s a conference I’d be interested in attending, then the 16 hours at the actual conference can be a draw because I can also learn things there, So we’ll take that out of our total hours and now we are at 57 hours. Let’s say you only say yes to places with direct flights, no time zone change. That will save us some time, so let’s chop 7 hours off of our time to get down to a nice even 50 hours.

Let’s do some more easy math and say your freelance hourly rate is $100/hour.

50 hours (talk prep, travel) x $100 (hourly rate) = $5,000 potential money missed from paying clients

If you are comfortable with charging $5,000 a talk. Great! If not, here’s how you can get that lower without selling yourself short.

It takes me a long time to prepare for a talk, so I try to give it more than once. So if I am going to give the talk 5 times this year, then we can lower that number:

35 (total hours prep) / 5 (amount of times I’ll use this talk) = 7

Our new total hours for this talk, will now be:

Email: 1 hour
Prep: 7 hours
Practice: 4 hours
Travel = 8 hours

We now have a total of 20 hours so our new speaker fee can be:

20 (total hours) x $100 (hourly rate = $2,000 speaker fee

Still feeling too high for you? How about only saying yes to speaking in places that you would want to extend into a vacation? With that in mind you can cut the travel hours out of your formula - since you’d want to go there anyway. Now our new total is 12 hours, at 100 bucks an hour, will be a speaking fee of $1200.

Do you think this conference might lead to client leads? Well then maybe you can knock off another 100 or 200, and ask for an even $1000. This formula needs to be tweaked to your liking, but I find when I put numbers breakdowns in front of me, this thing (speaking) that some of us picture as intangible, suddenly becomes more of a product you are offering.

How do you ask for this?

I love when someone emails me, invites me to their conference and says: “And we’ll pay you $2,000!” - I”m like sweet! Perfect! But that doesn’t always happen. So then what? Just because they didn’t mention a speaker fee in the initial email doesn’t mean they don’t have money to give you one. So at this point, you can write back and say “what’s the speaker fee?” - but since I’m not always comfortable with a response like that, since i worry that might be read as I’m only in it for money - when lots of times conferences are a labor of love - I like to respond with thoughtful questions that will fill out my formula. Here is a sample of what I will write back:

How large is the audience?
What is the cost of the conference? How many speakers are there?
How long are the sessions?
Are talks recorded?
What is the speaker fee?
Were you looking for me to speak on a topic I’ve already covered or create a new talk with original material and slides?
Are there pre or post conference events to consider for travel planning?

If they write back and say the audience is 400+ people and the cost is $1000 a ticket and there is no speaker fee, I’ll respectfully reply that I can’t take unpaid days off from client work. This is especially amplified if they want me to create new, original content and/or if they will be recording and releasing videos of my talk on their site. From there, some people have said they understand and are sorry they can’t offer it and sometimes I’ve had people come back and either match what I asked or an offer close to it.

If they write back and say the conference will have 100 attendess and the cost is only $100 a ticket and it’s a place I really want to visit or at a conference I really want to attend, than sometimes I waive the fee, as long as they cover airfare, hotel, and travel expenses (such as cabs to/from the airport - that can be over $100 sometimes, and things like checked bag fees). Sometimes my boyfriend travels with me, and if they provide him a free ticket to the conference and an invite to the speaker dinner - that also is important to me. Conferences are expensive to run. I know that. So if they can’t pay a fee, how they handle the other details can be the deciding factors for me.

Lastly, I limit the amount of non-speaker fee events I’ll speak at a year, between 1-3, such as one local, one national, and one international. That way I have another formula that is easy for me fall back to when I am flattered by an invite, but realistically isn’t a viable event for my career or my accountants liking. And it is super awesome that anyone wants to hear me talk about things, so saying no to those is really hard, but this formula has helped me make smart decisions. Hope these ideas help you.

Also check out:

(Thanks to the wonderfully awesome Chris Coyier for feedback)

Advice on Teaching Beginner Front-end Code

jennlukas — Thu, 13 Feb 2014 19:32:00 -0800

I’ve had the pleasure of teaching Intro to HTML/CSS for Girl Develop It here in Philly since our inaugural class! Sharing my knowledge of front-end code with women who want to learn it has been incredibly rewarding and one of my favorite things to do! GDI has chapters throughout the world and I’ve been asked a few times to share advice to first-time teachers about to head up a class.

Don’t read/recite the slides - use them as a guide but make sure you are brining your expertise to the class. That’s what makes it different than the students reading the slides themselves.
Make sure the students have access to the slides and the materials before class so they can have it locally on their machine - sometimes it’s hard to see the projector if it’s too bright or if the room is long/the student is in back of the room
Encourage questions!
- If people ask questions that are beyond the scope of the course, don’t shoot it down. Be sure to touch on the subject and where they can find more info if they want to seek out more. The pacing of beginner classes can vary greatly, so don’t go too fast, but enable those with a more solid understanding to push themselves further.
Make sure the TA’s feel comfortable helping people out while you continue. There’s a LOT to cover in these the short span of an intro class, so you don’t want to stop the whole class for a how to question about how to copy/paste - but you should stop the class if the question is applicable to everyone.
Take scheduled breaks and let students know at the beginning of class when it will be. This helps ease their minds in regards to things like parking meter refills, lunch, brain timeouts.
Go around the room and ask how people are doing. Some people will not ask for help until pressed. I can’t tell you how many times you can say “any questions?” and everyone will say no. But go around the room and up to someone and say ‘hows it going?“ and questions will start pouring out.
HAVE FUN!! :)

I’m also currently teaching Intro to HTML on Skillshare. Teaching without feedback from being in the same room is a completely different ballgame! Remember that the energy of an in-person class can really add to the experience and use that to keep the class fun and engaging!

Disabling Typekit on Mobile

jennlukas — Thu, 06 Feb 2014 13:11:00 -0800

Edit: Typekit has posted some more info in response on their fantastic blog: http://blog.typekit.com/2014/02/20/using-typekit-web-fonts-on-mobile/

I’m putting some finishing touches on a talk coming up and I was looking into some details when including different web font options on our sites. I use Typekit a lot. I love it. I never really paid too much attention to the Kit settings > Mobile settings options before.

And I started thinking about the pay off between having custom fonts on mobile vs having our sites load faster. Chris Coyier wrote a great summary of some approaches to tackle this: http://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/ and there’s a post on the Typekit blog from Jordan Moore about using multiple kits and loading them based on breakpoint size (since no bandwidth testing was available) http://blog.typekit.com/2013/04/17/fallback-fonts-on-mobile-devices/

In this case, if we are using Typekit, should we just be disabling this mobile support that we have access to and letting fallback fonts be a browser/device safe font (i.e. Droid Sans)? It seems almost too good to be true to have these simple checkboxes, which are enabled by default, in which we can handle all the logic.

I read a bit more, such as in this Typekit blog post: http://blog.typekit.com/2012/11/01/announcing-windows-phone-8-support/, which says:

Following the pattern for our other supported mobile platforms, we’ve also added an option to disable support for Windows Phone in individual kits. You’ll find this option in the Kit Editor under Kit Settings > Mobile Settings. Uncheck the box for Windows Phone and republish your kit to turn off support. This option is useful if you’re building a responsive site that doesn’t require web fonts to be loaded on mobile platforms, or if you encounter issues with Windows Phone.

And I thought that certainly sounds like we can easily disable this. I did a very unofficial quick test to see what would load on mobile using one weight of Proxima Nova with everything enabled as on default which resulted in 32KB weight and 4 requests: http://www.webpagetest.org/result/140206_2N_dfc3ecd2d69159a6d9d148671b6f9477/1/details/

and then unchecked everything and ran it again and still had one Typekit JS request, resulting in 2 requests, 10KB http://www.webpagetest.org/result/140206_FG_22a5a9bfe7302d24e4a1c6479bbcdb81/1/details/

Sure, there are a ton of other things we can do to try to keep our page weights down, so maybe this isn’t the place to start? Here are questions that come to mind:

is there a better way to test this?
the speed index on this iOS test dropped from 3800 > 3000 when the mobile support was disabled , which still seems pretty high
will this work/save us enough to use it?
I only used one font/weight here, what if we disabled many?
should we be sacrificing type design for this?
are performance hits from web fonts on the top/middle/bottom of our list?
what about these mobile devices when connected to wifi? Is it cool that they never get the fonts? Worth the potential savings or no?
how should we be testing our fallback fonts? Is the extra testing/design time worth it?
are y'all disabling fonts through any of these approaches? If so, I’d love to hear about how it’s working out for you!!

So many questions!

Resources for Beginning Responsive Web Design

jennlukas — Thu, 06 Feb 2014 10:04:00 -0800

I occasionally receive questions through the Nerdary or over at my site about web topics. Often someone else has that same question, so thought I’d share some here. Here’s a question I received about getting started with responsive web design:

I built my website portfolio BUT! I need some resources for helping me make it responsive. Any hints or sites for help with this would be much appreciated!

Congrats on the new site! Isn’t HTML awesome? Responsive Web Design (RWD) is a great next step after learning the basics of HTML and CSS and once you know it, will be an integral part of every project!

Like anything out there, you can follow a lot of different paths when learning about RWD. There are great patterns to follow, important thoughts on content strategy for mobile, and ideas on what order to build it.

But if you are looking for practical first and theoretical second, the CSS that goes into RWD is a must know as well, so it’s a great place to start! While some people might throw a list of “200 things you absolutely must know about Responsive Web Design RIGHT NOW OMG!!!”, sometimes learning one thing at a time is the best ;) So I would start here and then move on to some of the deeper details.

The first article written on RWD was run on A List Apart by Ethan Marcotte and was a crazy, game changer: http://alistapart.com/article/responsive-web-design/

Ethan is super awesome and followed that article up with a very east to read and understand book, Responsive Web Design from A Book Apart

Do you like videos? Check out this braindump on responsive web design on CSS Tricks from Chris Coyier.

Best of luck and high fives to you!

Free vs Paid Apps and a Look at Time Tracking: Toggl

jennlukas — Tue, 20 Aug 2013 07:34:02 -0700

Since heading into the freelance word, I’ve been experimenting with new applications and workflows. One of the first solutions I needed was for time tracking.

I’ve used Harvest before and liked it, but in this “experimental” phase, I decided to look into a free option or five to see what the competition is like before I commit.

Free vs Paid Apps

Here’s the thing about the internet: there’s a lot of free in it.

There’s such a plethora of free and paid tools out there, some times it’s hard to decide which ones to “splurge” for and which ones to use the free version. I have no problem paying for quality products, but sometimes free ones are quality, too. This conversation has come up a LOT over the years in the ExpressionEngine community, right? I feel like countless times I read threads saying “Why should I pay for this?” with a lot of great answers about quality. I don’t think this makes anyone cheap, but just economical/curious/excited about different options.

I have paid for many apps, and then a month or two later, I realize it’s not for me or something better comes out, which leaves me with this, “ah shucks, i’m stuck with this now” feeling. No one wants to be the American Gigolo of text editors, but we’ve all Richard Gere’d at least a few: Espresso, Coda, ST2 anyone?

Time Tracking Tools

So my bar is set with Harvest, and right now I am looking to see if there are any other comparable options. I’ve started with Toggl, which has an unlimited free version to use.

You can add clients, set projects to them, and run reports. I’ve been using the web interface so far. Every time you hit continue on a timer, a new entry is made. This could be a pro or con depending on what you are looking for. Besides that, it has been pretty straight forward and a good offering.

They have a desktop app that I haven’t tried yet. Has anyone tried this? Or any other time tracking options? I’m looking for at least one other for comparison before I commit.

Using mousemove and touchstart to Detect Touch Devices

jennlukas — Thu, 13 Jun 2013 04:00:00 -0700

So you know I love hovers. I was recently trying to implement a hover that has the image as the link, and on hover the text of the link appears. The information that is hidden and shown on hover is vital to understanding what the link is and where it goes. Something that without knowing, a user might never want to click on the link. This hover/focus interaction works perfectly fine for keyboard and mouse users, but what about touch?

With touchable desktops coming out and tablets the size of tvs, using media queries with max-device-width isn’t as reliable as it used to be to show the hidden information by default for “mobile sized” devices. This led me to a few different searches for a new solution.

Josh Clark wrote about it the dilemma here: http://globalmoxie.com/blog/desktop-touch-design.shtml and talks and about how we have to design our UIs for touch. Great points, but going back to design wasn’t an option here.

I looked into Modernizr, but there are a slew of issues opened right now (such as https://github.com/Modernizr/Modernizr/issues/548) that investigate how to make touch event detection more reliable without setting off false positives.

In this case, false positives using Modernizr wouldn’t be the worst thing in the world, as that falls back to the Josh Clark approach of designing for touch first. But we tried something else anyway..

Mark Huot and I opened up Codepen and decided to try out a few different tests around using the mousemove function. We figured, hey if there’s a mouse movement, it’s not touch right? This kinda worked, but we quickly found out that clicking on links on our iPad or clicking anywhere on our Android fired off the mousemove function. So that didn’t work. We ended up with a few different functions, until we finally reached this: http://codepen.io/Jenn/full/ALHEf

We style for touch first by default, so the product information shows. Then after the mousemove function fires, a class is applied of ‘hover-on’. With this class we adjust the styles appropriately to set the hover opacity to 0 and then to 1 on hover. Touch devices should never get that class, and therefore, always show the information.

When touchstart occurs and someone clicks on a touch device, it unbinds the function and never receives the class.

The down side, when you first load the page, until you mouse within the document you will see the information and then it will hide once you mouse anywhere. Adding a transition on the opacity will at least ease this so it’s not so jarring. Maybe you might even like it as an indicator to your users that there is more info???

This relies on touchstart running before mousemove, which in our limited tests it has. Please let us know what you find if you can test it out! Thanks!

Check out this Pen!

ExpressionEngine to Tumblr

jennlukas — Thu, 06 Jun 2013 19:43:06 -0700

I’m manually moving my EE posts on jennlukas.com over to Tumblr. True story: I once went from MySpace blogs to EE!

I’ll miss EE and it worked well for my site for a long time but I plan on having more of a static site and then linking off to Tumblr/my blog since I love tumblr so much.

I often get asked how many Tumblrs I have. I’ll say more than 10, less than 30. With my most updated ones being http://fuckyeahhovers.tumblr.com/ and http://sexhobbit.tumblr.com/.

With this in mind, since I’m already in the Tumblr interface adding pictures of Buster Bluth photoshopped into Game of Thrones, it reminds me to post on my personal tumblr or the Nerdary (which is also on this here Tumblr…yes right this second I am tumblring/tumbling/bloggin/what do you call it! ) I never remembered to update my personal site very often. So hopefully this move will help.

I started to look into ways to migrate with less effort, but meh, it’s been interesting to reread all posts and format them properly anyway, plus I only had 35 posts to migrate, most of which are +/- lists which honestly, I probably could’ve let go.

Though, have any of you migrated from EE to Tumblr before with luck? 35 posts just seemed like something to just knock out.

I was going to post this on my new tumblr, but decided to give it a home on the Nerdary, though it’s not too much code samples exactly. I was thinking about writing about the redesign process of my site, but not sure if I should do it on jennlukas.tumblr or the Nerdary…I wouldn’t want to get in the way of all these Laravel posts! :$

Anywhooo let me know if this is something that would not interest you. (This means I will take silence in comments as a go ahead…take that commenting)

Laravel 4 Primer

kennymeyers-deactivated20140207 — Mon, 03 Jun 2013 10:27:00 -0700

Great news! Laravel 4 is out!

Mini-review

Laravel 4 is a different kind of framework than its predecessor, and that comes with its own pluses and minuses. The documentation isn’t fully fleshed out (for example, try finding the URL class in the documentation easily) and the learning curve is much steeper to understand the system. Yet, Laravel 4 is a very fast framework with some very smart design decisions and still a pleasure to use once you get over the initial hump of understanding the hows and whys.

In my use of it, I’ve found 4 to be an excellent framework, yet I’m sad to see the simplicity of the 3 codebase disappear. Laravel 4’s new internal architecture certainly makes it more stable, faster and well tested. In the process it trades off findability and legibility. Composer is a welcome addition. Also, unit testing with the framework is really great.

One need only use it with composer to see how great Laravel 4 is, but as an example of its jekyll/hyde problem, we can talk about the URL class. Not only is it not documented, but try and find class URL in the codebase? You’ll find yourself going down some roads and eventually find yourself at class UrlGenerator. Laravel obscures the setup of these classes behind the Facade. As it heads towards purer object-oriented form, with dependency injection, it loses some simplicity.

I wish Laravel would use the new shortened array syntax and just bump the requirement up to PHP 5.4. Why can’t Laravel be the framework that is forward-looking? Compatability with outdated versions of PHP is what makes PHP programming so frustrating.

On a final note, I was a bit jolted by the new Laravel website’s sponsorships plastered everywhere. It’s not a dealbreaker, but I found it tacky. They’re not very subtle.

With those gripes out of the way, it’s a very fun piece of code. Taylor did a great job and I really look forward to its future.

Community

The Laravel community is outstanding. It’s reached the point in a community lifespan of a bunch of exciting publications and blogs, and we’re almost nearing the “Why I left Laravel” blog posts of a community’s growth.

I highly recommend you go to Laracon EU. Laracon in the US was a really fun conference and it’s a great time to meet other Laravel folks.

There’s a #laravel IRC chatroom on Freenode, which a lot of people visit. Also the Google Plus Community is active.

I’ve tried to put together a list here of great resources.

Websites

Laravel: The website for the framework.
@laravelphp: The twitter account for the framework.
@taylorotwell: The creator of the framework’s twitter account.
Laravel.io: A great site that is being positioned as the Laravel community HUB. You can check out the wiki, read Laravel Weekly and it’s the official home of the forums.
Laravel Podcast: This podcast just started, so no promises on its longevity. The first episode mostly talks about how everyone loves Laravel. I’m excited to see what becomes of it.
Jason Lewis: An excellent community member and prolific patron of the Laravel IRC channel.
Laravel on nettuts: Jeffrey Way is probably the best Laravel writer going right now. He’s also the best screencaster, coincidentally (sorry, Taylor).
Fideloper: Chris Fidao writes about Laravel on his blog. His Laravel 4 Uber-Quick-Start is one of my favorites.
Dayle Rees has some excellent articles on his site as well.
Laracasts: An index of Laravel screencasts. Make sure to submit yours if you have them.
Dries Vints: Writes Laravel weekly and also some great quick tips.
Max Surguy: Another prolific and informative Laravel writer.
Niall O'Brien: I’m running out of adjectives to describe prolific and informative Laravel writers, but he’s one of them.
The Nerdary: While not Laravel-centric, I write about it a lot. I think Mark Huot (another writer on this site) uses it as well, but I’m pretty sure he’s dead.

Articles

Here are some articles to give you a good feel for using 4.

Laravel 4: A Start at a RESTful API
Composer primer: Learn how to use Laravel/PHPs new package manager.
Laravel 4: Learn about Taylor Otwell, Laravel’s creator, approach to building 4.
Testing Laravel Controllers: Great primer by Jeffrey Way. Also a great primer on testing in Laravel in general.
Laravel 4 Uber-Quick-Start: Probably the best quick introduction to Laravel.

Books

There are already two books out for the just-released framework.

Laravel Testing Decoded: Jeffrey Way has written a book on writing tests for Laravel 4. He constantly churns out excellent material, so it’s easy for me to recommend this book. It’s only $15.
Laravel: Code Bright: This is a follow-up to Code Happy. It’s easy to recommend this to support Dayle Rees, because he’s such a great member of the community. However, Dayle’s writing style is very informal and verbose. While I thought the previous book was worth the $10, if Code Bright continues in the same format and casual style of its predecessor, my instincts say $30 is a bit much. For $30, it should have an editor.

Composer Packages

Laravel 4 opens up the world of composer packages. With these you can start rapidly implementing new features without reinventing the wheel. Here are some of my favorites:

Guzzle: HTTP framework. Great for making API, OAUTH, etc. request.
Amazon AWS: Amazon built an official provider for their services. I’m using it in my current project and it plays in Laravel nicely.
Carbon: Carbon makes DateTime fun!
Mockery: A nice little mock object library.
Basset: I’ve not used Basset, but I hear about it a lot. Mr. Lewis just released a screencast on it. Maybe in my next project…

Did I miss something?

There are a ton of active members, blogs and material in the Laravel community. If I missed someone, please put it in the comments so that other readers may enjoy it. Self-promotion is fine! Tell me which articles and materials or people I should look up.

Testing Laravel Controllers

kennymeyers-deactivated20140207 — Thu, 09 May 2013 13:19:22 -0700

Testing Laravel Controllers:

Jeffrey Way is such a prolific writer on the topic of Laravel. I particularly enjoy this excellent article on writing tests for controllers. You should support Jeffrey by signing up for tutsplus and soaking in all his knowledge.

You can also pre-order his book on testing. He’s an excellent instructor.

Laracasts

kennymeyers-deactivated20140207 — Wed, 17 Apr 2013 12:18:00 -0700

Laracasts:

You know what’s great? Laravel. You know why? Because people throw together stuff like Laracasts, a central place for Laravel screencasts.

They don’t make the screencasts there, they just find them so you can click and learn.

Lovely.

Interview with Brandon Kelly, creator of Craft

kennymeyers-deactivated20140207 — Tue, 16 Apr 2013 08:11:00 -0700

Craft has recently gone into beta and it’s definitely worth a look. Here, we interview one of its creators, Brandon Kelly on the philosophy behind Craft and its technical aspects.

Why does the world need another CMS?

Let’s face it: all of the popular CMS’s out there today are a mess. They’ve been mismanaged, taken in directions the code was never meant to go, warped to scratch every last edge case’s itch. They’ve become bland, tangled, bloated, and at worst, practically unusable. Their developers are stretched way too thin and buried under mountains of technical debt. All of this has really put content management in the dark ages for the past few years.

So I felt it’s time to start fresh – wipe the slate clean and build something from the ground up with a clear sense of where we’re taking it.

What do you think differentiates Craft from its competitors like ExpressionEngine or FuelCMS?

Focus. We are very opinionated about what types of features a CMS should be responsible for, versus what should be left to plugins. You won’t ever see a cronjob manager built into Craft, but if someone wants to write that plugin, we’ll do everything we can to make it easier.

There are features which we think the CMS should be responsible for, but which not every site is going to need. Localization is a great example of that. There’s really no clean way to do it with a plugin. It’s such a core part of storing content, affecting all areas of the system, and it’s something you want to make sure other plugins are going to support as well. But few sites are going to need it, and we don’t want to make everyone pay for features (and UI cruft) they don’t need. That’s why we gave Craft its “Packages” concept. Packages enable features that the core is already pre-wired for. So whether you need localization support or not, all content entered into Craft is getting saved on a per-locale basis. Buy the Localize package and suddenly you get control over which locales are available, and which locale your content is getting saved to.

What was the reasoning behind choosing the Yii the framework?

We’re a very small team, and Craft has been a HUGE project. So it’s been vital that we make smart technology decisions every step of the way. Choosing a PHP framework was no different. When we were just getting started a few years ago, we looked at several frameworks that were available at the time to determine which would push us in the right direction as far as possible. Yii fit the bill perfectly. It’s optimized for the code architecture we wanted, it has great internationalization support, it is modular, and the code is clean, consistent, and well documented. As we’ve built out the app, we’ve grown to like it more and more, and we really couldn’t be happier with the decision.

Could you speak to specific featuresets, APIs, etc. in Yii that lead to things like better localization and how it’s optimized for the architecture you wanted?

Sure. Yii comes with a ton of data for practically every locale on the planet – number formats, currency symbols, translations for common things like month names, and so much more. You can easily access all of that data for a particular locale by initializing a new CLocale instance. It also has built-in translation support, which takes all of that data into account.

One of the great things about Yii is that pretty much everything is customizable. Yii realizes that every app is going to be built a little differently, so whenever there’s a possibility for differences, it separates the common functionality from the implementation-specific functionality. Take translation support for example. Some apps might want translations to be defined in the database, others a PHP array, others an XML file, and who knows, others might even be fetching translations from a third party web service. So Yii puts the core translation support in one spot, and lets the app provide a function that returns the translations. This approach has been used everywhere throughout the framework, which has allowed us to build the exact app that we wanted, without resorting to a bunch of framework hacks.

Can you talk a little about about how you decided on the plugin architecture (how it would work, what it would support, how it would interact with the control panel)?

The plugin architecture was actually one of the few things I didn’t have to think much about. After years of writing ExpressionEngine add-ons, I knew exactly what I wanted – plugins should provide additional system components, which work exactly the same as the built-in components.

A key part of the architecture is our service layer. All of the business logic in Craft happens in service classes, which provide APIs that anything else in the system (including other services) can talk to. So there’s only one place in the entire codebase where an entry will actually get written to the DB, even though there are multiple places that deal with saving entries. This is really great for plugins, because they don’t have to reinvent the wheel every time they want to replicate core functionality. Any plugin can call craft()->entries->saveEntry() just like the core does. And of course, plugins can provide their own services too, which makes it easy for plugins to interact with other plugins.

Could you give an example of a service layer in action?

Take that craft()->entries->saveEntry() function I mentioned. craft()->entries is the app’s current EntriesService instance, a class that provides several API functions for managing entries. saveEntry() accepts one argument: an EntryModel instance. That EntryModel should be filled with all of the data needed to represent the entry that’s about to be saved, including its ID if it’s an existing entry. saveEntry() validates that data, and saves it out to the database. (In this case, that’s 4 separate tables: elements, elements_i18n, entries, and entries_i18n. But EntriesService is the only place in the entire app that needs to know that; everything else can just deal with EntryModel’s.) The function will return true or false depending on whether the entry was saved successfully. If it wasn’t, the EntryModel will also be populated with any validation errors that occurred, so whatever called saveEntry() will have an idea of what went wrong. In most cases, those errors are passed back to the user.

saveEntry() will generally get called from the EntriesController’s actionSaveEntry() method. It populates a new EntryModel with post data, and then passes that EntryModel on to craft()->entries->saveEntry(). What happens next depends on the saveEntry() response, and what type of request it is (normal or Ajax). But the beauty is that anything can call saveEntry() – it’s not tied to the controller in any way. If a plugin wants to create a new entry, it can. If we decide that the installer should auto-create a Welcome entry for you, we can add a saveEntry() call to InstallService.

What made you decide to use Twig?

We actually started off writing our own template parser. I wanted something that resembled Django templates, that compiled down to PHP, and was capable of at least some level of template error handling. My first pass at the parser was very simple, but it got us about 80% of the way there. That last 20% proved to be much more difficult, however. It included stuff like string concatenation, object declarations, and precise error handling. It was clear that the only clean way to do those would be to write a proper lexer and parser. We actually started going down that path, and then Paul Burdick pointed us to Twig, which somehow we had completely missed.

Twig was exactly what I wanted. Its syntax is inspired by Django, it compiles templates down to raw PHP, it has a real lexer and parser, it has both syntax and runtime error handling, and it’s super easy to extend. And thanks to the syntax being identical to our home grown templating system, I was able to get Twig up and running with the entire CP converted to it within just a couple hours. Brilliant!

How is Craft going to handle the common problem of modern deployment? Meaning, how can Craft rectify local databases vs production dbs, local configs, etc?

We knew early on that keeping content in sync between multiple servers (dev vs. staging vs. production) would be a problem for Craft just like every other database-storing CMS out there. It doesn’t take any research to know that it’s a very hard problem to solve, so we decided it’s not something we’re going to worry about until some point after 1.0 launches. However we did spend a little time researching sync techniques, and put some code in place that should make our lives much easier down the road.

As far as configs go, Craft config files are just PHP, so you can already have them return one thing or another depending on the current server. We do have more work to do when it comes to what you can configure though. For example we want to make all path/URL settings throughout the CP overridable from config/general.php.

How up-to-date with Twig and Yii can we expect the framework to stay?

We try to keep all of Craft’s dependencies as up-to-date as possible, so long as there aren’t any breaking changes. We haven’t been religious about it to date, but that should change after 1.0 is out once we’ve had a chance to hook Craft up to Composer.

When there are breaking changes (such as the forthcoming Twig 2.0 and Yii 2.0), we’ll shelve it for Craft 2.0.

Can you talk about your build system for different versions of Craft?

That’s something that has changed quite a bit over time, but the gist was always the same – we had files that were package-specific, and the shared files had blocks of code that were package-specific, and the build script was responsible for including/excluding the appropriate files and blocks.

Once we kicked off the private beta, we started seeing something happen that we didn’t expect (but should have): People who had more than one Craft site running would download an update for one of their sites, and upload the same set of files to all of their sites. Inevitably the list of selected packages would vary between the sites and the uploaded files wouldn’t match the packages, and that led to some fun troubleshooting work. So we decided to take a different approach: now everyone gets the exact same set of files, and we’re toggling which features you get right in the code. It’s a much simpler approach, and has actually given us the opportunity to drastically clean up the build script and our web service, as well as paved the way for Craft’s extremely simple in-app package purchasing.

How did you implement the Autoupdate system?

One-click updating was actually the very first thing we started working on. It’s a pretty major bit of functionality, and if we couldn’t do it, I didn’t think it would be worth doing a CMS to begin with.

Here’s a very high-level overview of how it works:

We have a TeamCity server which creates a new Craft build every time we push our work to the Master branch on GitHub.
We have a Craft install on the same server with a custom “Craft Releases” plugin, which we use to cut new releases. It’s able to figure out exactly which files have been changed/added/deleted since the last release by parsing Git commit logs, and it records those along with any other metadata for the release, like the release notes.
Craft’s web service (another Craft plugin called “Elliott”) talks to the Craft Releases plugin to tell the Craft client about any available updates.
When an update request comes in from a client, Elliott will check which build the request says they are currently running, and create a zip of all the files that have changed since then, and respond with that.
Craft then takes that update zip, verifies it, backs up the DB, renames any of the changed files to *.bak, moves the new files into place, runs any pending migrations, deletes the temp files, and clears your caches. And all of that happens in just a matter of seconds!

One of Craft’s neatest features is the free trials for packages, how can you implement this securely using PHP (so that people don’t pirate it)?

We decided our stance on piracy early on: piracy is a fact of life, and nothing we do is going to stop it. So instead of wasting a whole bunch of time trying to prevent it, we’ve simply made it impossible to pirate Craft “accidentally”. Yes, anyone that knows anything about PHP could go into the code, comment a few lines out, and boom, all packages are installed without any annoying CP alerts. But at least none of them will be under the impression that they didn’t do something wrong.

Given the number of people who re-use EE and add-on licenses without realizing that it’s not OK (and strangely lacking the motivation to make sure), I’m expecting that this will be pretty big piracy deterrent in and of itself.

One glance of code shows that Craft uses a singular global namespace (Craft); Some people on Twitter have complained that it’s a poor use of PHP’s namespacing feature because instead of Craft/Plugins/PluginName, you have to use PHP 4 style classnames (namely with underscores). Can you go in-depth about the decision to not support this feature of PHP?

You should be asking the PHP guys what they were smoking when they added namespace support to begin with. It’s a mess!

We might add the option for plugins to live in their own namespace, and forgo the class name prefixes, so developers that actually understand how PHP namespacing works can take advantage of it, without forcing us to explain it to everyone else.

There are a couple new tools and standards in PHP that are gaining significant popularity, does Craft intend to support Composer packages? PSR-0 and PSR-1?

Composer-yes. We might look into strictly following PSR-0 and PSR-1 down the road, but at this point it’s safe to say it would be a 2.0 thing.

Can you speak a bit about how Craft intends to help plugin developer with the distribution and sales of their plugins?

Yup! It’s no big secret that we’re planning a plugin store for Craft. We’re still ironing out many of the details, but one thing that’s for sure is it’s going to be built right into the app, just like packages. And many of our policies for packages will carry over to plugins as well.

The Craft Forecast page is a task list of things to come, many of which are small changes (except for a few). What big feature comes next after 1.0?

The goal for the private beta was to get Craft to a point where it’s pretty much feature-complete for 1.0, and the goal for the public beta is to tie up all the loose ends. The Forecast page is currently just a list of those loose ends, which we’re tackling one-by-one.

Once we get to 1.0, we’ve got a second list just as long as the 1.0 list is now, full of the same sort of things, which just didn’t seem quite important enough to be worth pushing back the 1.0 release. That includes things like section duplication, the ability to create new fields right from within the Field Layout pages, and so forth.

Then there’s the 2.0 list, but it’s too early to start talking about that!

When will Craft hit 1.0?

My best guess is mid-to-late Summer. We shall see!

Our thanks to Brandon Kelly and Brad Bell of Pixel & Tonic for taking the time to answer our questions.

Laravel 4 Update

kennymeyers-deactivated20140207 — Fri, 12 Apr 2013 13:14:25 -0700

Laravel 4 Update:

Taylor Otwell runs through a bunch of new features he’s added to Laravel 4. I highly recommend you watch this screencast as it shows a lot of cool new toys.

Leaflet JS + MapQuest for Maps

jennlukas — Tue, 09 Apr 2013 13:39:27 -0700

I read the A List Apart article: Hack your Maps. It was an interesting scenario that got me thinking about maps.

I’ve really only used Google maps for my mapping needs so today I figured “why not try something new?” and looked into some others. I needed an interactive map, not a static image, so that was one requirement. I looked into a variety of options out there, also read this article on Google maps alternatives from .net magazine.

I came across a lot of paid services or ones that had free accounts but limited usage to low numbers of map views per month or ones with free data that charged for access to their map tile servers. When it comes to the internet, I’ll admit I can be kinda cheap unless it’s a product I know I can’t live without/love to the max so I usually search for free options or free trials and then pay once I know I’m going to use it.

So today I am using Leaflet with MapQuest OSM Tiles, both of which are free and play nicely together. The Leaflet Quick Start Guide is ridiculously easy to follow. Kudos to whomever wrote that copy and directions.

Leaflet also makes it easy to customize your map icons and is even in on all the retina rage, allowing you to easily specify an icon URL for retina displays: http://leafletjs.com/reference.html#icon

Extra bonus, the marker popups are really easy to add styles to and the map seems to play well at different sizes in what I’ve seen so far.

I’m not sure if I would stick with this over Google Maps in the future but it was fun to play with.

Check out this Pen!

Craft CMS Sample Plugin

kennymeyers-deactivated20140207 — Thu, 04 Apr 2013 15:39:00 -0700

Craft CMS Sample Plugin:

Created by the very talented Adrian Macneil, and based on a lot of the samples in the documentation, the Craft sample plugin is a great way to get a look at how Craft plugins are built.

It also is an excellent preview of the Craft API. If you see anything you don’t like make sure to tell the Craft team on their community page.*

Yes, their community page is on Google Plus, but the communities tool of Google Plus is one of the best I’ve used. Give that a try as well.

The Nerdary

CSS for Teams

1. Audit and Combine Our Current Styles

2. Standardize the Grid

3. Meet Accessibility Standards

4. Convert Everything We Can to SVGs

5. Namespaced BEM for CSS at Scale

6. Spec in Class Names, Variables, and Mixins

7. Always Be Style Guiding!

What’s Next? Embrace Change and Improve.

How to tell if your web font is loading?

How to ensure your fallback font is not replacing your primary typeface

BreakTime: Computer Break App Review #1

BreakTime

The Pitch

The Break

The Results

Interactions in Responsive Web Design for Hover and Touch Devices

Why add interactions to our web pages?

Should you add interactions/animations/transitions?

Interaction: Simple transitions on :hover & :focus

Sites in use:

Pros:

Cons:

Interaction: Surprise and delight hovers

Sites in use:

Pros:

Cons:

Interaction: Information reveal hover

Sites in use:

Pros:

Cons:

Interaction: Destination hover

Sites in use:

Pros:

Cons:

Interaction: Navigation menus

Sites in use:

Hovers:

Clicks:

Interaction: Slideshows

Sites in use:

Pros:

Cons:

Interaction: Site Intros

Sites in use:

Pros:

Cons:

Hover/Touch Global Switcher

CodePen examples:

Pros:

Cons:

Interaction Media Features

Pointer:

Hover:

CSS Animation Performance

Faster properties:

Read more:

300ms Delay

Overrides:

Related links:

Helpful Links for Successful Web Typography

Articles/Examples

Tools/Browser Extensitions

Free Web Fonts

Are We Sharing Or Speaking?

“Don’t conferences pay for themselves?”

“Aren’t conferences for sharing information, not getting paid?”

Here’s how it works for me

A Formula for Speaking Fees

How do you ask for this?

Advice on Teaching Beginner Front-end Code

Disabling Typekit on Mobile

Resources for Beginning Responsive Web Design

Free vs Paid Apps and a Look at Time Tracking: Toggl

Free vs Paid Apps

Time Tracking Tools

Using mousemove and touchstart to Detect Touch Devices

ExpressionEngine to Tumblr

Laravel 4 Primer