Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/ptsurko/awesome-links

Awesome links about front-end
https://github.com/ptsurko/awesome-links

List: awesome-links

Last synced: 16 days ago
JSON representation

Awesome links about front-end

Awesome Lists containing this project

README 

        
# Awesome links about front-end that influenced me and changed the way I think and write code.



# Front-end



## HTML

  * [How browsers work](https://docs.google.com/presentation/d/1kjC_L5C-E2Y_wOVkblJxRr6GBgw1V_FBbFI4jAoh688)

  * [How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)

  * [The Ultimate Guide to CSS for EMAIL clients](https://www.campaignmonitor.com/css/)



## CSS



### General principles:

  * [Media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/)

  * [CSS Guidelines](http://cssguidelin.es)



### A11y

  * [Google Accessibility](https://developers.google.com/web/fundamentals/accessibility/)

  * [ARIA Landmarks Example](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/index.html)

  * [Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/)

  * [Using ARIA](https://w3c.github.io/using-aria/#validation)



### Architectures:

  * [CSS Guidelines Architecture practices](http://cssguidelin.es/#architectural-principles)

  * [SOLID CSS](http://blog.millermedeiros.com/solid-css)



### Methodologies:

  * [BEM]()

  * [OSCSS](http://wiki.github.com/stubbornella/oocss/)

    * [Presentation](http://www.slideshare.net/stubbornella/object-oriented-css/18-TWO_MAIN_PRINCIPLES)

  * Nested components

    * [Nesting components](http://simurai.com/blog/2015/05/11/nesting-components)

    * [Extending styles](https://philipwalton.com/articles/extending-styles/)

    * [Contextual styling](http://csswizardry.com/2015/06/contextual-styling-ui-components-nesting-and-implementation-detail/)



## JavaScript

  * [33 Concepts Every JavaScript Developer Should Know](https://github.com/leonardomso/33-js-concepts)

  * [What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ)

  * [Why Prototypal Inheritance Matters](http://aaditmshah.github.io/why-prototypal-inheritance-matters)

  * [What Every Frontend Developer Should Know About Webpage Rendering](http://frontendbabel.info/articles/webpage-rendering-101/)

  * [Pixels are expensive](https://aerotwist.com/blog/pixels-are-expensive/)

  * [Flip your animations](https://aerotwist.com/blog/flip-your-animations/)

  * [Оптимизируем веб с Виталием Фридманом: скорость загрузки, память, CPU](https://habr.com/company/jugru/blog/426155/)

  * [Оптимизируем веб с Виталием Фридманом, — компрессия, картинки, шрифты, фичи HTTP/2 и Resource Hints](https://habr.com/company/jugru/blog/354890/)



### Functional programming

  * [Functional programming for JavaScript people](https://medium.com/@chetcorcos/functional-programming-for-javascript-people-1915d8775504)

  * [Professor Frisby's most adequate guide to functional programming](https://drboolean.gitbooks.io/mostly-adequate-guide/content/)

  * [ImmutableJS]

    * [Intro to ImmutableJS](https://auth0.com/blog/2016/03/23/intro-to-immutable-js/)

  * Reactive Programming/RxJS

    * [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)

    * [RxJS 5 Operators By Example](https://gist.github.com/btroncone/d6cf141d6f2c00dc6b35)

  * ELM

    * [Elm introduction](http://www.sitepoint.com/functional-reactive-programming-elm-introduction/)



### Frameworks

  * State management

    * [State of React State Management for 2019](https://blog.bitsrc.io/state-of-react-state-management-in-2019-779647206bbc)

    * Change detection/Data binding

      * [Change And Its Detection In JavaScript Frameworks](http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html)

      * [Unidirectional user interface architectures](http://staltz.com/unidirectional-user-interface-architectures.html)

      * [Digest cycle in SPA](http://blog.bguiz.com/post/60397801810/digest-cycles-in-single-page-apps/)

      * [How data binding work in Angular](http://stackoverflow.com/questions/9682092/how-does-data-binding-work-in-angularjs/9693933)

    * Redux

      * [Cartoon intro to Redux](https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6)

      * [The upsides of Redux](http://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux/32920459)

      * [The downsides of Redux](http://stackoverflow.com/a/32916602)

    * [Rematch](https://rematch.gitbooks.io/rematch/content/#getting-started)

      * [Redesigning Redux](https://hackernoon.com/redesigning-redux-b2baee8b8a38)

      * [DVA](https://dvajs.com/)

        * [Ant design pro](https://github.com/ant-design/ant-design-pro)

        * [Hackernews](https://github.com/dvajs/dva-hackernews)

    * React Context API - https://reactjs.org/docs/context.html

    * React Hooks

      * 

    * StateCharts

      * [XState](https://github.com/davidkpiano/xstate)

      * [Patterns for using React with Statechart-based state machines](https://medium.freecodecamp.org/patterns-for-using-react-with-statechart-based-state-machines-33e6ab754605)

    * MobX

      * 

      * [Redux vs MobX](http://www.robinwieruch.de/redux-mobx-confusion/)

      * Examples

        * [MobX] DWatch - https://github.com/Mercateo/dwatch

        * [MobX + Next + Node] SaaS Boilerplate - https://github.com/async-labs/saas

    * [Flux](https://facebook.github.io/flux/docs/overview.html)

      * [Cartoon guide to Flux](https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207)

      * [The evolution of Flux frameworks](https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31)

      * [Flux in Depth. Overview and Components.](http://blog.mgechev.com/2015/05/15/flux-in-depth-overview-components/)

    * Components

      * [Container components](https://medium.com/@learnreact/container-components-c0e67432e005)

      * [Smart and Dumb components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)

      * [Components, components, components in ... Angular 1.5](https://www.youtube.com/watch?v=AMwjDibFxno)

    * Immutability

      *



#### Angular

  * [Angular internals in depth](https://www.smashingmagazine.com/2015/01/angularjs-internals-in-depth/)

  * [Angular internals in depth 2](https://www.smashingmagazine.com/2015/11/angularjs-internals-in-depth-part-2/)

  * [Angular internals slides](http://cvuorinen.github.io/angularjs-internals-slides/#/)

  * [Make your own angular - scopes and digest](http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html)

  * [AngularJS in patterns](https://mgechev.github.io/angularjs-in-patterns/)

  * Transclusion

    * [How transclusion works](http://teropa.info/blog/2015/06/09/transclusion.html)



#### Angular2

  * [Change detection explained](http://blog.thoughtram.io//angular/2016/02/22/angular-2-change-detection-explained.html)

  * Redux  

    * [Comprehensive Introduction to @ngrx/store](https://gist.github.com/btroncone/a6e4347326749f938510)

    * [Building Redux in TypeScript with Angular 2](http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/)



#### React

  * [React Architecture](https://speakerdeck.com/vjeux/oscon-react-architecture)

  * [React’s diff algorithm](http://calendar.perfplanet.com/2013/diff/)

  * [React is Slow, React is Fast: Optimizing React Apps in Practice](https://medium.com/dailyjs/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba)

  * [Function as Child Components](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9)

  * Testing React apps

    * [Eventbrite testing best practives](https://github.com/eventbrite/javascript/blob/master/react/testing.md)

    * [Snapshot testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html)

  * [Recommendations for best practices regarding action-creators, reducers, and selectors](https://github.com/reactjs/redux/issues/1171)

  * [How To Master Advanced React Design Patterns — Compound Components](https://itnext.io/using-advanced-design-patterns-to-create-flexible-and-reusable-react-components-part-1-dd495fa1823)

  * [How To Master Advanced React Design Patterns — Context API](https://itnext.io/using-advanced-design-patterns-to-create-flexible-and-reusable-react-components-part-2-react-3c5662b997ab)

  * [How To Master Advanced React Design Patterns — Render Props](https://itnext.io/using-advanced-design-patterns-to-create-flexible-and-reusable-react-components-part-3-render-d7517dfe72bc)

  * [Writing resilient components](https://overreacted.io/writing-resilient-components/)



### Performance optimizations

  * [Front-End Performance Checklist 2017](https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/)

  * [Jank Free](http://jankfree.org)



### TypeScript

  * [What's new in TypeScript](https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript)



### NodeJS

  * [Advanced Node.js Project Structure](https://blog.risingstack.com/node-js-project-structure-tutorial-node-js-at-scale/)

  * How does NodeJS works

    * [Architecture of NodeJS’ Internal Codebase](https://arenli.com/architecture-of-node-js-internal-codebase-57cd8376b71f)

    * [How does NodeJS Works](https://blog.ghaiklor.com/how-nodejs-works-bfe09efc80ca)

    * [HOW ASYNC I/O WORKS - AND SOMETIMES DOESN'T](http://blog.kgriffs.com/2012/09/18/demystifying-async-io.html)

  * [DevOps 101 (not just) from a Node.js Perspective](https://community.risingstack.com/node-js-devops-101/)

  * [Node.js Best Practices](https://github.com/i0natan/nodebestpractices)

  * [express-rest-es2017-boilerplate](https://github.com/danielfsousa/express-rest-es2017-boilerplate)

  * [express-mongoose-es6-rest-api](https://github.com/KunalKapadia/express-mongoose-es6-rest-api)

  * [sequelize-express-example](https://github.com/sequelize/express-example)

  * [A Guide to Node.js Logging](https://www.twilio.com/blog/guide-node-js-logging)



### Authentication

  * [How to do Twitter authentication with React and RESTful API](https://medium.com/@robince885/how-to-do-twitter-authentication-with-react-and-restful-api-e525f30c62bb)

  * [Sessionless Authentication using JWTs (with Node + Express + Passport JS)](https://blog.usejournal.com/sessionless-authentication-withe-jwts-with-node-express-passport-js-69b059e4b22c)

  * [Stop using JWT for sessions](http://cryto.net/~joepie91/blog/2016/06/13/stop-using-jwt-for-sessions/)

  * [Stop using JWT for sessions, part 2: Why your solution doesn't work](http://cryto.net/~joepie91/blog/2016/06/19/stop-using-jwt-for-sessions-part-2-why-your-solution-doesnt-work/)



# Backend



## Cloud

  * [Cloud fundamentals and best practices from Azure](https://docs.microsoft.com/en-us/azure/architecture/best-practices/api-design)



## REST

  * [Best Practices for Designing a Pragmatic RESTful API](http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api)



### API

  * [Microsoft REST API Guidelines](https://github.com/Microsoft/api-guidelines/blob/master/Guidelines.md)

  * [Microsoft API design](https://docs.microsoft.com/en-us/azure/architecture/best-practices/api-design)

  * [Google API Design Guide](https://cloud.google.com/apis/design/)



## Python

  * [The Hitchhiker’s Guide to Python!](http://python-guide-pt-br.readthedocs.io/en/latest)

  * [A COLLECTION OF PYTHON "MUST READS"](http://jessenoller.com/good-to-great-python-reads)

  * Python 3

    * [10 awesome features of Python that you can't use because you refuse to upgrade to Python 3](http://www.asmeurer.com/python3-presentation/slides.html)

  * Memory management

    * [Python потребляет много памяти или как уменьшить размер объектов?](https://habr.com/ru/post/455722/)

    * [Всё, что нужно знать о сборщике мусора в Python](https://habr.com/ru/post/417215/)

  * [Garbage collection in Python: things you need to know](https://rushter.com/blog/python-garbage-collector/)

  * Advanced python

    * [Advanced python - Artem Golubin](https://rushter.com/blog/tags/advanced-python/)

    * [Python History](http://python-history.blogspot.com/)

    * [Yet another Python internals blog](https://pythoninternal.wordpress.com/)



## Database

  * [Database development mistakes made by application developers](https://stackoverflow.com/questions/621884/database-development-mistakes-made-by-application-developers)

  * [Audit table - Storing created/retired dates for a large amount of different entities](https://dba.stackexchange.com/questions/107354/storing-created-retired-dates-for-a-large-amount-of-different-entities/107575#107575)

  * [How to design a product table for many kinds of product where each product has many parameters](https://stackoverflow.com/questions/695752/how-to-design-a-product-table-for-many-kinds-of-product-where-each-product-has-m)

  * [What are the [dis]advantages of using a key/value table over nullable columns or separate tables?](https://stackoverflow.com/questions/4056093/what-are-the-disadvantages-of-using-a-key-value-table-over-nullable-columns-or)



### PostgreSQL

  * [Better Database Migrations in Postgres](http://www.craigkerstiens.com/2017/09/10/better-postgres-migrations/)

  * Performance

    * [Be careful with CTE in PostgreSQL](https://medium.com/@hakibenita/be-careful-with-cte-in-postgresql-fca5e24d2119)

    * [Advanced Postgres Performance Tips](https://thoughtbot.com/blog/advanced-postgres-performance-tips)



### NoSQL

  *



## Distributed systems

  * [Windows Azure Storage](https://azure.microsoft.com/en-us/blog/sosp-paper-windows-azure-storage-a-highly-available-cloud-storage-service-with-strong-consistency/)

  * BigTable

   * [Bigtable: A Distributed Storage System for Structured Data](https://static.googleusercontent.com/media/research.google.com/en//archive/bigtable-osdi06.pdf)

   * [Key-value stores: BigTable & Dynamo](https://www.slideshare.net/kingherc/bigtable-and-dynamo)

   * [BigTable Model with Cassandra and HBase](http://horicky.blogspot.com/2010/10/bigtable-model-with-cassandra-and-hbase.html)

   * Bloom Filters

   * SSTable



## Monitoring

  * [Measure Anything, Measure Everything](https://codeascraft.com/2011/02/15/measure-anything-measure-everything/)

  * [Prometheus: Monitoring at SoundCloud](https://developers.soundcloud.com/blog/prometheus-monitoring-at-soundcloud)

    - https://github.com/danielfm/prometheus-for-developers

    - https://github.com/infinityworks/prometheus-example-queries



## Logging

  * [Fast and flexible observability with canonical log lines](https://stripe.com/blog/canonical-log-lines)

  * [Logs and Metrics and Graphs, Oh My!](https://grafana.com/blog/2016/01/05/logs-and-metrics-and-graphs-oh-my/)



## System Design

  * [12 factor app](https://12factor.net)

  * [How to build stable systems](https://medium.com/@jlouis666/how-to-build-stable-systems-6fe9dcf32fc4)

  * [System Design Primer](https://github.com/donnemartin/system-design-primer)



## Domain Driven Design

  * [Don’t use DAO, use Repository](https://thinkinginobjects.com/2012/08/26/dont-use-dao-use-repository/)

  * [Guice JPA](https://github.com/google/guice/wiki/JPA)



# Architecture



  * [The boring technology behind a one-person Internet company](https://broadcast.listennotes.com/the-boring-technology-behind-listen-notes-56697c2e347b)

  * [Good enough engineering to start an Internet company](https://broadcast.listennotes.com/good-enough-engineering-to-start-an-internet-company-f26be5b01025)

  * [Stack History: A Timeline of The Top 2019 Unicorn IPO's Tech Stack Evolution](https://stackshare.io/stack-history-timeline-unicorns-ipos-of-2019-tech-stack-evolution)



## Microservices

  * [The Hardest Part About Microservices: Your Data](https://blog.christianposta.com/microservices/the-hardest-part-about-microservices-data/)

    * DB per service + transaction boundary per service

    * domain events + message bus (Kafka) + Debezium to support transaction for DB + service bus



## Job scheduling

  * [We Don’t Run Cron Jobs at Nextdoor](https://engblog.nextdoor.com/we-don-t-run-cron-jobs-at-nextdoor-6f7f9cc62040)



## Big Data

  * [Uber’s Big Data Platform: 100+ Petabytes with Minute Latency](https://eng.uber.com/uber-big-data-platform/)

  * [Data Infrastructure at Airbnb](https://medium.com/airbnb-engineering/data-infrastructure-at-airbnb-8adfb34f169c)



# Tools

  * [Learn Vim Progressively](http://yannesposito.com/Scratch/en/blog/Learn-Vim-Progressively/)

  * [Vim as IDE](http://yannesposito.com/Scratch/en/blog/Vim-as-IDE/)

  * [Working effectively with iTerm2](http://teohm.com/blog/working-effectively-with-iterm2/)



# Processes



## Agile

  * [Agile Team Organisation: Squads, Chapters, Tribes and Guilds](http://www.full-stackagile.com/2016/02/14/team-organisation-squads-chapters-tribes-and-guilds)



## Techniques

  * [You Build It, You Run It/Why Developers Should Do Customer Support](http://johnpwood.net/2010/01/28/know-thy-customer-why-developers-should-do-customer-support)



## Testing

  * [Software testing pyramid](https://watirmelon.com/2012/01/31/introducing-the-software-testing-ice-cream-cone)

  * [Google testing blog](http://googletesting.blogspot.co.uk/)

  *



## Branching and Releasing

  * [Comparing Workflows](https://www.atlassian.com/git/tutorials/comparing-workflows)

  * [Feature toggles](http://martinfowler.com/articles/feature-toggles.html)

  * [Trunk Based Development](http://paulhammant.com/categories.html#Trunk_Based_Development)

    * [Enabling Trunk Based Development with Deployment Pipelines](https://www.thoughtworks.com/insights/blog/enabling-trunk-based-development-deployment-pipelines)

    * [What is Trunk Based Development?](http://paulhammant.com/2013/04/05/what-is-trunk-based-development/)

  * [Blue/Green Deployment](http://martinfowler.com/bliki/BlueGreenDeployment.html)



## [Continuous Delivery](https://www.thoughtworks.com/insights/continuous-delivery)

  * [Continuous Delivery vs Continuous Deployment](https://puppet.com/blog/continuous-delivery-vs-continuous-deployment-what-s-diff)

  * [Architecting for Continuous Delivery](https://www.thoughtworks.com/insights/blog/architecting-continuous-delivery)

  * [Continuous Deployment at Instagram](https://engineering.instagram.com/posts/1125308487520335/continuous-deployment-at-instagram/)

  * [Model everything to fail fast](https://www.thoughtworks.com/insights/blog/model-everything-fail-fast)

  * [Development, Deployment and Collaboration at Etsy](http://www.slideshare.net/mrtazz/development-deployment-and-collaboration-at-etsy)

  *



# Strategy

  * [Focus on outcome not output](https://hbr.org/2012/11/its-not-just-semantics-managing-outcomes)



# AI/ML



## Linear regression

  



## Bias-variance

  * [Machine Learning Crash Course: Part 4 - The Bias-Variance Dilemma](https://ml.berkeley.edu/blog/2017/07/13/tutorial-4/)

  * [Understanding the Bias-Variance Tradeoff](http://scott.fortmann-roe.com/docs/BiasVariance.html)