1 / 25

Maximizing ECMA6 & CSS3: A Brief Overview of Cutting-Edge Client APIs

Explore the smattering of client-side APIs, ECMA6 features like Constants, Arrow Operator, Spread, and more, along with CSS3 modules such as Animations, Transforms, and Webfonts. Check compatibility and create dynamic web experiences with these cutting-edge technologies. For a comprehensive guide and resources, visit the provided links. Keep learning and stay ahead in the ever-evolving world of web development!

robertochoa
Download Presentation

Maximizing ECMA6 & CSS3: A Brief Overview of Cutting-Edge Client APIs

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. cutting-edge client APIs

  2. A smattering of client-side APIs • Per your request… brief overview of • ECMA6 • CSS3

  3. ECMA6 • Excellent review of features athttp://es6-features.org/#Constants • Not nearly as widely supported yet as CSS3 • Check availability of features at https://kangax.github.io/compat-table/es6/

  4. Constants • http://es6-features.org/#Constants

  5. Arrow operator for closure • http://es6-features.org/#StatementBodies

  6. Default parameter values • http://es6-features.org/#DefaultParameterValues

  7. Spread • http://es6-features.org/#SpreadOperator

  8. Computed object properties • http://es6-features.org/#ComputedPropertyNames

  9. Promises • http://es6-features.org/#PromiseUsage

  10. Number formatting • http://es6-features.org/#NumberFormatting

  11. String templates • http://es6-features.org/#StringInterpolation

  12. OO Classes • http://es6-features.org/#ClassDefinition

  13. Typed variables • http://es6-features.org/#TypedArrays

  14. CSS3 • CSS3 = a family of W3C-standardized modules https://mdn.mozillademos.org/files/3623/CSS_Modules_and_Snapshots.png

  15. Overview of the cooler, fairly well- supported features • Features • Animations and Transitions • 3D transforms • Calculating lengths with calc() • More powerful selectors • Generated content (including counters) • Gradients • Webfonts • Media queries • CSS columns • To see if your intended API is supported:http://caniuse.com/

  16. Animations and Transitions • http://projects.lukehaas.me/css-loaders/ • See also http://red-team-design.com/stylish-css3-progress-bars/

  17. 3D transforms • http://www.developerdrive.com/demo/3d_elements/transforming_elements_in_3d_using_css3.html

  18. Calculating lengths with calc() • https://css-tricks.com/a-couple-of-use-cases-for-calc/

  19. More powerful selectors • https://perishablepress.com/awesome-new-css3-selectors/

  20. Generated content • https://dev.opera.com/articles/css-generated-content-techniques/

  21. Gradients • http://www.impressivewebs.com/demo-files/animated-css3-gradient-buttons/

  22. Webfonts • https://www.google.com/fonts

  23. Media queries • http://www.webdesignerwall.com/demo/media-queries/

  24. CSS columns • http://red-team-design.com/wp-content/uploads/2011/01/multi-column-css3.html

  25. Much more to come • Hopefully implementing a "cool feature" with has interested you in all the APIs out there • My parting advice:Always be learning something • It helps to keep life fresh and contributes to a healthy career.

More Related