Menu Search
Jump to the content X X
Smashing Conf New York

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 New York, dedicated to smart front-end techniques and design patterns.

Web Development Reading List #139: jQuery 3, Web Payment API, And ES6 Tricks

Finding our passion is a big challenge for all of us as human beings. At some point in life, we try to figure out what our purpose in this world is, what our future will look like. And for some of us, the answers we find to these questions are constantly changing.

The constant search to find answers lets us stay curious, creative, vital — and if that’s missing, we need to find our passion again1 by exploring what things we like in our world, what makes us happy. Searching takes time, and we should invest that time — maybe by cutting down watching TV by an hour a week.

Further Reading on SmashingMag

News Link

Generic Link

HTML & SVG Link

Jason Grigsby shares how to build forms that support cross-browser autofill and how to take advantage of new features such as scanning credit cards.13

Jason Grigsby shares how to build forms that support cross-browser autofill14 and how to take advantage of new features such as scanning credit cards.

Accessibility Link

  • Frend181715 is a dependency-free collection of accessible, modern front-end components. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment.
An accessible accordion component from Frend.16

An accessible accordion component from Frend181715. Each component in the collection is compliant, keyboard navigable, and properly interpreted by assistive technologies. (Image credit: Frend181715)

JavaScript Link

  • JavaScript variable hoisting can confuse people19, and this is actually the reason why many coding conventions have a rule that all variables need to be defined at the top of a function. ES6’s let and const however, will change this simply by working as one would expect it.
  • A great step towards element queries and better control over modules in our front-ends is coming to browsers now with the new Resize Observer API20 that observes changes to an element’s size. This, together with the Houdini21 project, could serve well for a custom element query polyfill. No browser supports this yet, but all vendors consider it22 and see it as a useful addition.
  • Dr. Axel Rauschmayer shares six great ES6 tricks23. How to make function parameters mandatory, for example.

CSS / Sass Link

  • The will-change property is still widely unknown and people don’t know exactly when and how to use it properly. Fortunately, the W3C took the effort to write up how to use will-change well24.

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation25 or share this resource with other people. You can learn more about the costs of the project here26. It’s available via email, RSS and online.

Thanks and all the best,
Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2015/05/rekindling-your-passion-for-web-design/
  2. 2 https://www.smashingmagazine.com/2016/09/how-to-scale-react-applications/
  3. 3 https://www.smashingmagazine.com/2016/04/consider-react-native-mobile-app/
  4. 4 https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
  5. 5 https://www.smashingmagazine.com/2015/05/client-rendered-accessibility/
  6. 6 https://blog.jquery.com/2016/05/20/jquery-3-0-release-candidate-released/
  7. 7 https://trac.webkit.org/changeset/200686
  8. 8 http://www.slashgeek.net/2016/05/17/cloudflare-is-ruining-the-internet-for-me/
  9. 9 https://html.spec.whatwg.org/multipage/forms.html#enabling-client-side-automatic-filling-of-form-controls
  10. 10 http://blog.cloudfour.com/autofill-what-web-devs-should-know-but-dont/
  11. 11 https://w3c.github.io/browser-payment-api/specs/paymentrequest.html
  12. 12 https://stackoverflow.com/questions/19959887/safari-autofill-trigger-password-suggestions-in-devise-registration-form/29594874
  13. 13 http://blog.cloudfour.com/autofill-what-web-devs-should-know-but-dont/
  14. 14 http://blog.cloudfour.com/autofill-what-web-devs-should-know-but-dont/
  15. 15 http://frend.co/
  16. 16 http://frend.co/
  17. 17 http://frend.co/
  18. 18 http://frend.co/
  19. 19 http://bytearcher.com/articles/variable-hoisting-explained/
  20. 20 https://wicg.github.io/ResizeObserver/
  21. 21 https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/
  22. 22 https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/iHXS9S66bAw/BM1mV5BQAAAJ
  23. 23 http://www.2ality.com/2016/05/six-nifty-es6-tricks.html
  24. 24 https://drafts.csswg.org/css-will-change/#using
  25. 25 https://wdrl.info/donate
  26. 26 https://wdrl.info/costs/

↑ Back to top Tweet itShare on Facebook

is a freelance front-end developer and architect and cares about sustainable front-end experiences and ethical choices in life. He curates the WDRL, a weekly handcrafted web development newsletter that thousands of developers love, subscribe to, and donate for.

  1. 1

    Good one!!

    0
  2. 2

    Really cool new stuff. I like your column!

    PAtrick

    1
  3. 3

    Well .. yet another API to achieve payment via browser. The Working Draft reads so utterly complicated though, that I dont know why anyone would want to bother themselves with it.

    But we well see. Also whether my fears of a “credit card-centric API” are just that, and not turning into reality. Don’t forget: Europe is NOT CC centered, but ruled by wireless bank transfers (eg. Sofortüberweisung, Lastschrift = direct debit and payment on invoice).

    cu, w0lf.

    0

↑ Back to top