Tuesday, August 14, 2018

Smashing Newsletter #212: Detecting Auto-Fill, :visited and Dark Side Of HTTPS

While many of you might be taking a well-deserved vacation this summer, before long the final quarter of 2018 will be here! At Smashing, we're looking forward to the upcoming releases.Issue #212 Tue, Aug 14, 2018 View in the browser ๐Ÿ’จ

Smashing Newsletter

Dear Friend,

While many of you might be taking a well-deserved vacation this summer, before long the final quarter of 2018 will be here! At Smashing, we're looking forward to releasing the Smashing Book 6, seeing some of you at our SmashingConfs in New York and Freiburg, and getting our Smashing Print Magazine pilot issue into your hands!

I thought I might use this intro to encourage any of you who might have thought about writing an article for SmashingMag, but haven't taken the plunge yet. I often have conversations with potential authors who worry that they don't have a "big idea" for a groundbreaking new technique, and so wouldn't have anything to write about. However, our most popular articles are often guides to gettting started in a particular topic. There is so much to learn if you want to be a web professional today; everyone is a beginner at something. Articles such as my "Getting Started With CSS Layout," or Sarah Drasner's "Replacing jQuery With Vue.js" have been very popular, and have helped many people understand these subjects better.

Have a look at our guide to writing for Smashing Magazine, and send us an outline for your idea. We can then help you to shape it into something that will make a great article.

Looking forward to reading your ideas!

Rachel (@rachelandrew)


Table of Contents

1. Serving Dynamic Resources With The Network Information API
2. Revisiting The :visited State For Links
3. A Curated Collection Of Job Interview Questions
4. What Creative Work Teaches Us
5. Detecting Auto-Filled Fields In JavaScript
6. The Dark Side Of HTTPS
7. SmashingConf New York Is Coming
8. Rethinking The Web Browser
9. Inside Polyhedra
10. Upcoming In Smashing Membership
11. Upcoming Workshops With Vitaly Friedman
12. New On Smashing Job Board
13. Popular Articles This Month

1. Serving Dynamic Resources With The Network Information API

Browsing the web on a 2G connection can be a cumbersome undertaking. Now how cool would it be if we could determine a user's connection speed and dynamically adjust the content we serve to cater for a snappier experience? Well, actually, we can (thanks to the Network Information API)! Dean Hume built a demo that shows how to do it. The API is currently supported in Chrome and Samsung browsers, but Dean's code uses progressive enhancement to take this into account. (cm)

Dynamic Resources With The Network Information API


2. Revisiting The :visited State For Links

If you have a number of links on a page, sometimes you might want to indicate that some of them have been visited by a user, while others haven't. That's what we'd usually use :visited for, yet (for privacy reasons) browsers strictly limit which styles you can apply using this pseudo-class and how they can be used. So, if you do want to style visited links differently, how would you do it?

Pushing The Limits With CSS Blend Modes

Well, there are some techniques. You could style visited links with SVG by filling in the color of the SVG icon on :visited. Or you could use CSS blend-mode using a shade of gray as the background to achieve semi-transparency. Or use double tags and hide the duplicate from screen readers. Or, if you feel experimental, show and hide things with border-color. There are quirky options out there, and CSSWG is committed to finding a solution. If you choose to use :visited, be cautious as it might not work reliably in the future, and you're potentially exposing customer's data. (vf)


From our sponsor

Build Your Bot Expertise on Discover.bot

Join bot developers and enthusiasts of all skill levels to learn and build a community resource. Find trade tips, read industry trends, and gain insights on tools, platforms and frameworks for your first or your fiftieth bot build. Read more.

two awesome developers discussing some stuff

3. A Curated Collection Of Job Interview Questions

Job interviews can be daunting, and sometimes even the most seasoned expert forgets things under pressure. "30 Seconds of Interviews" helps you review questions that are commonly encountered so that you can better prepare for that next big opportunity. Also a fantastic resource to brush up your coding knowledge. (cm)

30 Seconds Of Interviews


4. What Creative Work Teaches Us

How do other creatives tackle their projects? And what does creative work teach us? In his podcast Design Notes, Liam Spradlin gathers guests from unique creative fields — from game and fashion design to architecture and artificial intelligence — to talk about what inspires and unites them in their practice. (cm)

Design Notes


5. Detecting Auto-Filled Fields In JavaScript

When a browser autofills a form field, it adds some styling to highlight which fields it has edited. However, sometimes the browser's default styling might clash with your site's design. To prevent this, Tommy Brunn shares a hack that will give you more control over the styling: You can start an animation in response to autofilling, listen for the start of that animation with JavaScript, and then run your corresponding functions to change the styling. Clever! (cm)

Detecting Auto-Filled Fields In JavaScript


From our sponsor

The Ultimate Guide To Growing Any Web Business

For only $1.99, "Making Websites Win" is a book on how to apply customer-centric methodologies that doubled the sales of many leading websites. With a foreword by Google's Avinash Kaushik.

Ad


6. The Dark Side Of HTTPS

"The drive to force every site on the web to HTTPS has pushed the web further away from the next billion users." Inspired by experiencing first-hand what it means to browse the web with geosynchronous-satellite internet access in rural Uganda, Eric Meyer published a thought-provoking post about how securing websites made the web less accessible for many people. A good reminder. (cm)

Securing Web Sites Made Them Less Accessible


7. SmashingConf New York, Oct 23-24.

SmashingConf is a friendly, inclusive event which is focused on real-world problems and solutions. It's focused on front-end and UX, but it covers everything web, be it interface design or machine learning. That means a packed bundle of diverse, actionable insights for your work.

What's the atmosphere like? Well, take a look at the conference showreel, videos from previous events, and photos. 2 days, 1 track, 14 speakers, 300 attendees and a bunch of hands-on workshops.

SmashingConf NY with Tim Kadlec and Debbie Millman
Get your tickets to SmashingConf New York 2018. Oh, need to convince your Boss? We've got your back (PDF).

We're putting our heart and soul into crafting personal, inclusive and valuable events for all of us to become better professionals. We hope it will be a quite... smashing event, and we'd love to see you there! Not convinced yet? Check speakers and topics. Or just head straight to the tickets ↬. (vf)


8. Rethinking The Web Browser

If someone asked you to design a new web browser, what would it look like? For their Bachelor's thesis, Julius Sohn and Julius Gehrig wanted to answer exactly this question. After doing extensive research on the history of browsers, lots of prototyping, and tinkering, Refresh was born — a concept for a fresh browser designed for touchscreen devices. Cool and convenient. (cm)

Refresh


From our sponsor

Online Masters in Information Design and Strategy

Ad

Earn your master's degree online.

9. Inside Polyhedra

Mathematicians and artists have always been fascinated by the beauty of geometric shapes like prisms, pyramids, and other polyhedra. To explore different kinds of polyhedra and their relationships to each other, Nat Alison built the Polyhedra Viewer. The resource visualizes 120 interactive solids that you can twist, turn, and manipulate to inspect their underlying structure. Web animation at its best. (cm)

Polyhedra Viewer


10. Upcoming In Smashing Membership

Smashing Membership helps us to keep the site alive and go ad-free. Each member makes a difference, and gets valuable content from it, too!

Coming up next:

  • ๐ŸŽช We'll be releasing the SmashingConf Toronto videos, with live interactive sessions on everything from designing live to auditing third-party scripts live.
  • ๐Ÿ“บ Smashing TV: Webinar on how to set up a proper product roadmap with C. Todd Lombardo.

We are very grateful for the kind and generous support of 1,043 members! You can become one of us, too! ;-)


11. Upcoming Workshops With Vitaly Friedman

๐Ÿ‡ฉ๐Ÿ‡ช Freiburg, SmashingConf, Sept. 10 – 11, 2018
๐Ÿ‡บ๐Ÿ‡ธ New York, SmashingConf NY, Oct. 23 – 24, 2018

A Workshop with Vitaly Friedman with some happy attendees

Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the costs — we'll find a fair price for sure. Get in touch — it's that easy!


12. New On Smashing Job Board

  • UI/UX Specialist / Creative Coder at MBition GmbH (Berlin, Germany)
    "Do you have the drive to create something new? Do you want to be the engine for new ideas and innovations, drive plans and projects and put them on the road?"
  • Account Manager at BuySellAds (Remote)
    "We help connect great brands with hard to reach audiences. When Google Cloud wants to reach developers, we do the heavy lifting."
  • UX Designer/Frontend Dev at CrowdTwist, Inc. (NYC)
    "You will be designing and developing different projects as we continue to grow and enhance our platform, collaborating closely with various organizations."

13. Most Popular Articles This Month

  • Web Performance For Third-Party Scripts (Videos)
    Talks from this year's SmashingConfs that will help you to assess the third-party scripts you might be considering adding to websites. Taking business goals into account, UX as well as performance, you can make good decisions about what to include and how to do it.
  • Attracting Users To Evaluate Your Product
    Do you know what a "froto" is? Do you know how you can get users to evaluate your product? This first part of an upcoming series will help you understand and map out problems users have and which solutions they need.
  • Everything You Need To Know About Alignment In Flexbox
    Rachel Andrew sheds light on the alignment properties in Flexbox while sharing some tips on how alignment on both the main and cross axis works.

This newsletter issue was written and researched by Cosima Mielke, Iris Ljeลกnjanin, Vitaly Friedman, Markus Seyfferth and Christiane Rosenberger.


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.
Follow us on Twitter Join us on Facebook



No comments:

Post a Comment