Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Quick Tips Dirty Tricks From The Dark Corners Of Front-End (Slides, PDF)

You know how it works: you spend hours trying to find a workaround for a problem that you have encountered, just to realize that it doesn’t quite work in, you know, that browser. Finding little techniques and tricks to help you get to results faster can immensely improve your productivity, so you don’t have to waste time on solutions that will never see the light of day.

Further Reading on SmashingMag: Link

I love finding those little useful front-end goodies that make our lives easier. Since technologies emerge and evolve permanently, keeping track on what’s going on is often difficult, especially since specifications change and so does the browser support.

For a replacement talk at SmashingConf4 Oxford5 last week, I’ve decided to collect some of the useful techniques from various articles, conversations and my workshops in a slide deck — and since it proved to be useful for many front-end developers I’ve spoken to after the talk, I’m very privileged to share it with the entire community as well. To the slides.6

So off we go. A few dirty tricks from the dark corners of front-end development7. Beware: the things you’ll find in the deck can not be unseen, and I do no take any responsibility for whatever happens next.

You can also download the entire slide deck on SpeakerDeck8 (PDF). And you’ll find slides from the other SmashingConf talks in an overview of SmashingConf Oxford slides. Happy learning!


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Rob Costello

    March 21, 2016 6:18 pm

    Nice list!

    However, I’ve found that a better solution to the nested links issue (and one that’s standards compliant) is to put an empty link at the start of your item and position it absolutely to cover the whole item. You can apply position: relative to the internal links to make them sit above the covering link.

    • 2

      Vitaly Friedman

      March 21, 2016 10:44 pm

      Good point, Rob — thank you so much for your reply!

      • 3

        The problem with that is what do you put inside that absolutely positioned link? Is it blank? Not the most accessible solution, however I wonder about the accessibility of the object hack too.

  2. 4

    Hi Vitaly,

    Very nice presentation, although, I’ve just tried to figure out how the broken image example works, but I don’t get it working in all browsers… Is there a Github or CodePen available?

    Thanks, Ken

  3. 8

    I’d love it if this were in video form

  4. 9

    Fabio Bracht

    March 28, 2016 5:59 pm

    Is the actual talk available in video anywhere? (Or will it be?)

  5. 10

    So, so, really wonderful list, there are things I even didn’t know could be done!
    Thanks so much for doing it.

  6. 11

    One of the coolest tricks list ever.
    This will change the way i’m looking into my future work.
    BIG Thank.


↑ Back to top