May The Fourth Be With You: Add Your Twitter Avatar To The Smashing Book #4

If you’ve spent the last few months under a rock, then we’ve got a surprise for you. We are working on two brand new Smashing Books. The first, New Perspectives on Coding1, will cover state-of-the-art techniques, case studies and coding strategies — all neatly packed into a gorgeous printed hardcover (and available as an eBook, of course).

So if you’ve always wanted to leave a trace of yourself to posterity, now you can (well, kind of). From the very first Smashing Book, we’ve reserved space to feature our readers in the book, and our fourth undertaking will be no exception.

Add Your Twitter Avatar To The Book!

A picture says more than a thousand words, and a Twitter avatar says more about one’s personality than a name ever could! So, following our tradition, we welcome you to submit your Twitter avatar for a double-page spread in the (printed and digital) book. Space is very limited, with only 750 slots available, so please be quick!

How Does It Work? Easy!

  1. Type in your Twitter username2, and — voilà — your spot it reserved!
  2. We’ll grab your avatar automatically and will notify you about the status of the submission via email.

Submit Your Avatar Into The Book!3

Presto! And if for some mysterious reason, you happen to feel like a Jedi afterwards, well, why not tweet about it using the hash tag #feellikejedi? No pressure: just sayin’!

What Is The Book About?

We’ve assembled a remarkable lineup of authors for the book. All of them are well-respected designers and developers who will be divulging practical insights, design strategies and hands-on tools as they share new perspectives on Web design today. Here is a quick summary of the book’s theme and table of contents.

Summary

Smashing Book #4: Coding4

What works in theory sometimes doesn’t quite work as expected in practice. In this pragmatic book, well-respected designers and developers analyze their personal experiences, failures and successes from working on common front-end issues, and share the tools they use to tackle these issues effectively. You’ll learn state-of-the-art techniques and strategies to make your workflow more effective.

The book will feature valuable insights into large-scale projects, front-end architecture, maintainable code and responsible responsive Web design. It will also uncover smart front-end strategies, CSS and JavaScript tricks and obscure back-end techniques, and it will explore what it takes to improve performance for faster and more robust websites and Web apps.

Table of Contents

AUTHOR CHAPTER DETAILS
Addy Osmani Rendering Performance Optimization For Mobile
Addy Osmani

Whether it’s on desktop or mobile, users want their web experience to be snappy, smooth and delightful. What this means is that even if the browser is busy rendering the page (i.e drawing it) or loading in content, the user should still be able to scroll around and interact with it without any slow-down. No one likes seeing visual glitchyness.

In this chapter, Addy Osmani, the mastermind behind Yeoman and Devtools, provides a walkthrough on how to find and fix visual jitter in your pages. If you care about providing fast and smooth experiences, you will care about this chapter, too.

Keywords: tools, techniques, strategy, workflow, optimization, rendering.

Harry Roberts Breaking Good Habits: CSS Architecture For Tomorrow
Harry RobertsThe Web is changing. Are you keeping up? We’ve outgrown the methods of yesteryear and it’s now up to us to update the unwritten rules of web development to fit the new landscape. This chapter explores some misconceptions about CSS, encourages a change in attitude in front-end development, explores practical approaches of and lessons learned in object-oriented CSS development, code structure, code management, naming conventions and verbosity of HTML.

You’ll explore a new frame of mind that is better equipped for building more powerful, pragmatic front-ends.

Chapter keywords: CSS, OOCSS, BEM, architecture, strategy, semantics, code structure, front-end, naming conventions, performance.

Nicholas C. Zakas The Roadmap to Maintainable, Clean and Effective Code
Nicholas C. Zakas Code is code no matter where you go, and code has a tendency to get messy as it gets large and old. What if you need to make changes? What if you didn’t anticipate the additional features that would be required? What if the project ends up going in a different direction? Can your code adapt?

We are rarely taught how to deal with messy code. However, someone is going to have to maintain that code. That someone might be you next month or it might be someone else next year, but someone eventually will need to maintain that code. On a large project with many developers, the problem is magnified. How can everyone work in the same code base in such a way that making changes in the future are easy? That’s what this chapter is about.

Chapter keywords: maintenance, architecture, conventions, code style, documentation, components, legacy code, testing, CSS, JavaScript.

Tim Kadlec The Culture of Performance
Tim KadlecThe Web has a serious weight problem and the users are the ones who suffer as a result. The impact of improved web performance is no minor detail: by caring a lot about how fast our websites and applications are, we can explore new markets, gain increased revenue, improved business metrics and better user satisfaction. But how do we bake performance into the design process? We must make performance part of the discussion from the very beginning of the process, and we must be concrete about it.

Chapter keywords: performance budget, optimization, speed, efficiency, mobile, latency, loading, rendering

Paul Tero How To Fix The Web: Obscure Back-end Techniques And Terminal Secrets
Paul Tero Imagine that you wake up one morning, groggily reach for your laptop and fire it up. You’ve just finished developing a brand new website and last night you were proudly clicking through the product list. The browser window is still open, the Widget 3000 is still sparkling in its AJAXy newness. You grin like a new parent and expectantly click on “more details.” And nothing happens. You click again, still nothing. You press “Refresh” and get that annoying swirling icon and then the page goes blank. Help! The Internet is gone!

This chapter starts with the worst case scenario and works inwards, exploring the infrastructure of the Internet and the make-up of a Web server, imparting lots of little tips and commands along the way, opening up a new perspective on how websites can stop working and be fixed.

Chapter keywords: back-end, DNS, servers, networking, infrastructure, SSH, firewalls, DOS, hacks, debugging, backup, Apache, security.

Aaron Gustafson Building Adaptive Interfaces
Aaron Gustafson To create truly exceptional designs, we must not only reduce the friction inherent in completing a task, but we must reconcile aesthetics with usability by designing adaptive interfaces. Smartly built interfaces offer a continuum of experience. So what if we architect our interfaces to adapt to the capabilities of our user’s devices in order to ensure a positive experience, even if it’s not an identical one?

In this chapter, Aaron explores the layers of a typical Web experience and breaks down the development process into manageable steps that enable accessible, functional and empathetic interfaces. He also describes his own process and various techniques that help him to achieve this very goal in daily routine.

Chapter keywords: adaptive interface, progressive enhancement, empathy, layer cake, constraints, lazy loading, UI Construction Flow, JavaScript, adaptive components, patterns, style tiles

Mat Marquis Robust, Responsible, Responsive Web Design (Filament Group’s Case-Study)
Mat Marquis Responsive Web design is starting to get a reputation, and not the kind of reputation that it rightfully deserves. The most common death knell we’ve heard ringing out—lately, anyway—is that every page of a responsive site is fated to weigh in at a couple dozen megabytes and there isn’t a single thing that any of us can do about it.

There are good solution though. We can’t blame responsive Web design for mistakes that we, developers, have been making. This is on us, and you don’t see any carpenters writing blog posts about how hammers are a failed methodology because of the time they dropped one on their foot. We can do better than blaming our tools for our mistakes. This chapter is about exactly that: tools, techniques, lessons learned and practical tips to manage responsible responsive designs in real-life projects.

Chapter keywords: Responsive Web design, responsive images, conditional loading, progressive enhancement, optimization, CSS, JavaScript, workflow, optimization, case-study.

Andy Hume Real-Life Responsive Web Design (The Guardian’s Case-Study)
Andy Hume Ensuring good cross device and cross browser experiences has always been a thing, but browsers adoption of media quieries solved a key problem and let us jump forward very fast. This chapter looks at some lessons from implementing on Guardian and discussions with others like BBC, Boston Globe. In a world where the number and diversity of browsing platforms is increasing every day these orgs understand the value of having one platform and codebase for delivering their web products.

Chapter keywords: Responsive Web design, optimization, performance, RESS, case-study.

Christian Heilmann Vanilla Web Diet
Christian Heilmann When we go out and use our mobile devices or wireless that is available in cafes and hotels things don’t look as bright as they do on our incredibly fast connections at home. There, the larger part of our time is consumed looking at spinning animations telling us something is loading and many a time we are being told that “the connection is wonky” and that we should try again.

That’s a sign of the Web being broken. It’s time to fix it. Let’s try to take a break in our drive to be cool and new and innovative the whole time and check out what we are doing — analyze our eating habits so to say. Christian Heilmann calls this the “Vanilla Web Diet,” much like people start calling using JavaScript without any libraries “Vanilla JavaScript.” This chapter explores some of the fundamental ideas and thoughts that you can apply to slim down your next app or existing solution.

Chapter keywords: optimization, performance, speed, strategy, browsers, quality of code.

Addy Osmani Harry Roberts Nicholas C. Zakas Tim Kadlec Paul Tero Aaron Gustafson Mat Marquis Andy Hume Christian Heilmann
Authors of the “New Perspective on Coding”5, a book about state-of-the-art techniques, strategies and workflow for Web developers.

6
7
A tasty early preview of Anna Shuvalova’s beautiful illustrations for The Smashing Book #4: namely, for Christian Heilmann’s chapter “Vanilla Web Diet” on the left, and Mat Marquis’ chapter “Robust, Responsive, Responsive Web Design” on the right. (Large view8)

Technical Details

Smashing Book #4: Coding
11

Footnotes

  1. 1 https://shop.smashingmagazine.com/smashing-book-4.html?pk_campaign=front-page-shop&pk_kwd=sb4-virtual-product
  2. 2 http://www.smashed.by/jedi
  3. 3 http://www.smashed.by/jedi
  4. 4 https://shop.smashingmagazine.com/smashing-book-4.html?pk_campaign=front-page-shop&pk_kwd=sb4-virtual-product
  5. 5 https://shop.smashingmagazine.com/smashing-book-4.html
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2013/07/large-view-opt.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2013/07/chris-vanilla-web-diet-large.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2013/07/large-view-opt.png
  9. 9 https://shop.smashingmagazine.com/smashing-book-4.html?pk_campaign=front-page-shop&pk_kwd=sb4-virtual-product
  10. 10 https://shop.smashingmagazine.com/smashing-book-4.html?pk_campaign=front-page-shop&pk_kwd=sb4-virtual-product
  11. 11 https://shop.smashingmagazine.com/smashing-book-4.html?pk_campaign=front-page-shop&pk_kwd=sb4-virtual-product

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Wow, awesome! Submitted!

    1
  2. 2

    That’s quite the boys club of authors! Not concerned about getting the female demographic in there as well?

    7
    • 3

      Kelvin Castelino

      July 16, 2013 8:09 am

      Depends on what you looking for in the book! The author or the knowledge it shares! I am looking for the latter, so no issues if the author is a male or female!

      2
  3. 4

    @blossomingmind has been submitted ; )

    0
  4. 5

    I can’t wait for this book!

    0
  5. 6

    Carlos Koulatsi

    July 10, 2013 9:16 pm

    Submitted!

    0
  6. 7

    YAY! Just submitted my avatar! Hope to be featured! I’m already a year subscriber to the PDFs but will buy the hard copy also if I make it!! So excited!!!

    0
  7. 8

    Will definitely order this book when it comes out :)

    0
  8. 9

    Dodi Putra Artawan

    July 11, 2013 11:56 am

    I’m already bought this book. Also bought another series. Can’t wait for my avatar. HERE!!! @blidodi

    0
  9. 10

    Fernando Agüero

    July 11, 2013 1:45 pm

    Great idea the avatars thing! I’m just notifying the company to buy the book ASAP :D

    1
  10. 11

    Prafulla Kotecha

    July 11, 2013 4:09 pm

    What’s the second book?

    0
    • 12

      Markus Seyfferth

      July 14, 2013 2:02 am

      Hey Prafulla,

      The name of the second book is “New Perspectives on Design” and it will feature state-of-the-art-techniques, case-studies as well as tips and strategies for professional Web designers.

      If you order both books, you will get a beaaauuuutiful slipcase on top! :)

      0
  11. 13

    Can’t submit. It says “Sorry, but this form is limited to one submission per user.” But I’ve never submitted anything before!

    0
    • 14

      Markus Seyfferth

      July 14, 2013 2:06 am

      Hi Piotr,

      Sorry about this! I am afraid we have to handle it manually. May we use your Twitter avatar (@ping_ling) or would you prefer to have your gravatar in the book?

      Best,
      Markus

      1
  12. 15

    Looking forward to this. Your passion and expertise secrete through every publication. You are what 98% of what the web is not. Honest, solid, curated, actionable content.

    Can’t say enough. You guys Rock!!

    1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top