Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/LoicGoyet/awesome-techniques

List nice techniques for front-end usages
https://github.com/LoicGoyet/awesome-techniques

List: awesome-techniques

Last synced: 16 days ago
JSON representation

List nice techniques for front-end usages

Awesome Lists containing this project

README 

        
# Awesome techniques

List nice techniques for front-end usages



## Rendering

* [Guide to DPI](http://sebastien-gabriel.com/designers-guide-to-dpi/)

* [Loading CSS without blocking render](http://keithclark.co.uk/articles/loading-css-without-blocking-render/)



## Typography

* [The vertical align css property](http://bitsofco.de/the-vertical-align-property/)

* [

sive font-size with min and max](https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html)

* [Responsive font-size with sass maps](https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/)

* [Improved font loading](https://webkit.org/blog/6643/improved-font-loading/)

* [One File, Many Options: Using Variable Fonts on the Web](https://css-tricks.com/one-file-many-options-using-variable-fonts-web/?utm_source=CSS-Weekly&utm_campaign=Issue-300&utm_medium=email)



## Selectors

* [Quantity Ordering with CSS](https://www.smashingmagazine.com/2015/07/quantity-ordering-with-css/)



## Forms

* [AngularJS Form Validation with ngMessages](https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages)

* [Using the fieldset and legend elements](https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/)



## JavaScript features

* [JavaScript Promises for Dummies](https://scotch.io/tutorials/javascript-promises-for-dummies)

* [Using fetch](https://css-tricks.com/using-fetch/)

* [The "this" Keyword](https://scotch.io/courses/10-need-to-know-javascript-concepts/the-this-keyword?utm_content=buffer44d28&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer)

* [ES6 Generators and Iterators: a Developer’s Guide](https://www.sitepoint.com/ecmascript-2015-generators-and-iterators/)



## JavaScript patterns

* [Reducers VS Transducers](http://maksimivanov.com/posts/reducers-vs-transducers)



## React patterns

* [Infinite Scroll in React Using Intersection Observer](https://scotch.io/tutorials/infinite-scroll-in-react-using-intersection-observer)

* [React component as prop: the right way™️](https://www.developerway.com/posts/react-component-as-prop-the-right-way)



## Responsive

* [Mobile touch Keyboard](http://baymard.com/blog/mobile-touch-keyboards)

* [Importing CSS Breakpoints Into JavaScript](https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript)



## Images

* [SVG on the web - A Practical Guide](https://svgontheweb.com/)

* [Placeholders for picture elements](http://daverupert.com/2015/12/intrinsic-placeholders-with-picture/)

* [Responsive images](http://alistapart.com/article/responsive-images-in-practice)

* [The anatomy of responsive images](https://jakearchibald.com/2015/anatomy-of-responsive-images/#varying-size-and-density)

* [SVG fallback & art direction wt ](https://sarasoueidan.com/blog/svg-picture/)

* [Efficient Image Resizing with ImageMagick](https://www.smashingmagazine.com/2015/06/efficient-image-resizing-with-imagemagick/)

* [Using CSS’s object-fit and object-position Properties](https://www.sitepoint.com/using-css-object-fit-object-position-properties/)

* [Punch-Out Avatar](http://adrianroselli.com/2016/06/punch-out-avatar.html)

* [Using CSS Clip Path to Create Interactive Effects](https://css-tricks.com/using-css-clip-path-create-interactive-effects/)

* [feColorMatrix slowly (in french)](https://la-cascade.io/fecolormatrix-en-douceur/)



## Animation, interactions & effects

* [Flip animation in css](https://davidwalsh.name/css-flip)

* [Transition between pages in jQuery](http://miguel-perez.github.io/smoothState.js/index.html)

* [Transition between pages in AngularJs](https://scotch.io/tutorials/animating-angularjs-apps-ngview)

* [Gooey effect](https://css-tricks.com/shape-blobbing-css/)

* [Jank Free, collection of techniques for smooth animations](http://jankfree.org/)

* [Introducing CSS scroll snap point](https://css-tricks.com/introducing-css-scroll-snap-points/)

* [The target trick](https://bitsofco.de/the-target-trick/)

* [Smooth as Butter: Achieving 60 FPS Animations with CSS3](https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108#.ku9vnkit1)

* [Everything You Need to Know About the CSS will-change Property](https://dev.opera.com/articles/css-will-change-property/)

* [Prevent Scroll Chaining With Overscroll Behavior](https://ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior/)



## Colors

* [Mixin colors with sass](http://alistapart.com/article/mixing-color-for-the-web-with-sass)

* [Creating dynamically theme-able websites using CSS currentColor](http://johnm.io/blog/creating-themeable-websites-using-currentcolor/)

* [Building Themes with CSS4 Color Features](https://cloudfour.com/thinks/building-themes-with-css4-color-features/)



## Guidelines & Naming conventions

* [SASS Guidelines](http://sass-guidelin.es/)

* [Using utility classes](http://davidtheclark.com/on-utility-classes/)

* [BEM](https://en.bem.info/method/)

* [Battling BEM: 10 Common Problems And How To Avoid Them](https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/)

* [OOCSS](http://oocss.org/)

* [AMCSSS](http://glenmaddern.com/articles/introducing-am-css)

* [Let's write beautiful CSS comments](https://seesparkbox.com/foundry/lets_write_beautiful_css_comments)



## Architecture

[How to use the module pattern in your SCSS/SASS stylesheets](https://medium.com/@marcmintel/how-to-use-the-module-pattern-in-your-scss-sass-stylesheets-89fe38a6e1f3#.of4c8r7qb)



## The Future

* [Container Queries](http://alistapart.com/article/container-queries-once-more-unto-the-breach)

* [Quoi de neuf dans

ES2020 ?](https://tdd.github.io/pw2017-es2020/#/mainTitle)

* [CSS Scroll Snap: What Is It? Do We Need It?](https://webdesign.tutsplus.com/tutorials/how-to-scroll-snap-using-css--cms-30333)

  

## React

* [useEncapsulation

or Why Your React Components Should Only Use Custom Hooks](https://kyleshevlin.com/use-encapsulation)

  

## SEO

* SEO for Devs from Monica Lent

  * [Lesson 0: Course Introduction](https://vimeo.com/628107778/a6a5b3dfaf)

  * [Lesson 1, Part I: Why Should You Care About SEO?](https://vimeo.com/628141406/c85572092f)

  * [Lesson 1, Part II: How Search Works (The Technical Explanation)](https://vimeo.com/628161349/ba10c02a96)

  * [Lesson 2: Create Your Site Structure](https://vimeo.com/628125526/0948088416)

  * [Lesson 3: Server-side vs Client-side SEO](https://vimeo.com/634513150/912066ba43)

  * [Lesson 4: Keyword Research with Free Tools](https://vimeo.com/634546959/b104791a64)

  * [Lesson 5: Optimize a Blog Post for SEO](https://vimeo.com/634592172/dc6222a81e)

  * [Lesson 6: SEO in the Real World + Course Conclusion](https://vimeo.com/638389438/2c4ee9b572)



## TypeScript

* [Assertion Functions in TypeScript](https://mariusschulz.com/blog/assertion-functions-in-typescript)



## Unclassified

* [Add rules to stylesheets in JavaScript](https://davidwalsh.name/add-rules-stylesheets)

* [Context menu in html and js](http://webdesign.tutsplus.com/tutorials/introducing-the-html5-menu-and-menuitem-elements--cms-22269)

* [Pie charts in SVG and CSS](https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/)

* [Flexbox and Truncated Text](https://css-tricks.com/flexbox-truncated-text/)

* [Detecting AdBlock without an extra HTTP overhead](https://christianheilmann.com/2015/12/25/detecting-adblock-without-an-extra-http-overhead/)

* [Simple react patterns](http://lucasmreis.github.io/blog/simple-react-patterns/)

* [Generating Wireframe Boxes with CSS and HTML5](http://meyerweb.com/eric/thoughts/2017/11/27/generating-wireframe-boxes-with-css-and-html5/)

* [Making svg icon librairies for react app](http://nicolasgallagher.com/making-svg-icon-libraries-for-react-apps/)