diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..34ec65f --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,425 @@ +Attribution-ShareAlike 4.0 International + +======================================================================= + +Creative Commons Corporation ("Creative Commons") is not a law firm and +does not provide legal services or legal advice. Distribution of +Creative Commons public licenses does not create a lawyer-client or +other relationship. Creative Commons makes its licenses and related +information available on an "as-is" basis. Creative Commons gives no +warranties regarding its licenses, any material licensed under their +terms and conditions, or any related information. Creative Commons +disclaims all liability for damages resulting from their use to the +fullest extent possible. + +Using Creative Commons Public Licenses + +Creative Commons public licenses provide a standard set of terms and +conditions that creators and other rights holders may use to share +original works of authorship and other material subject to copyright +and certain other rights specified in the public license below. The +following considerations are for informational purposes only, are not +exhaustive, and do not form part of our licenses. + + Considerations for licensors: Our public licenses are + intended for use by those authorized to give the public + permission to use material in ways otherwise restricted by + copyright and certain other rights. Our licenses are + irrevocable. Licensors should read and understand the terms + and conditions of the license they choose before applying it. + Licensors should also secure all rights necessary before + applying our licenses so that the public can reuse the + material as expected. Licensors should clearly mark any + material not subject to the license. This includes other CC- + licensed material, or material used under an exception or + limitation to copyright. More considerations for licensors: + wiki.creativecommons.org/Considerations_for_licensors + + Considerations for the public: By using one of our public + licenses, a licensor grants the public permission to use the + licensed material under specified terms and conditions. If + the licensor's permission is not necessary for any reason--for + example, because of any applicable exception or limitation to + copyright--then that use is not regulated by the license. Our + licenses grant only permissions under copyright and certain + other rights that a licensor has authority to grant. Use of + the licensed material may still be restricted for other + reasons, including because others have copyright or other + rights in the material. A licensor may make special requests, + such as asking that all changes be marked or described. + Although not required by our licenses, you are encouraged to + respect those requests where reasonable. More_considerations + for the public: + wiki.creativecommons.org/Considerations_for_licensees + +======================================================================= + +Creative Commons Attribution-ShareAlike 4.0 International Public +License + +By exercising the Licensed Rights (defined below), You accept and agree +to be bound by the terms and conditions of this Creative Commons +Attribution-ShareAlike 4.0 International Public License ("Public +License"). To the extent this Public License may be interpreted as a +contract, You are granted the Licensed Rights in consideration of Your +acceptance of these terms and conditions, and the Licensor grants You +such rights in consideration of benefits the Licensor receives from +making the Licensed Material available under these terms and +conditions. + + +Section 1 -- Definitions. + + a. Adapted Material means material subject to Copyright and Similar + Rights that is derived from or based upon the Licensed Material + and in which the Licensed Material is translated, altered, + arranged, transformed, or otherwise modified in a manner requiring + permission under the Copyright and Similar Rights held by the + Licensor. For purposes of this Public License, where the Licensed + Material is a musical work, performance, or sound recording, + Adapted Material is always produced where the Licensed Material is + synched in timed relation with a moving image. + + b. Adapter's License means the license You apply to Your Copyright + and Similar Rights in Your contributions to Adapted Material in + accordance with the terms and conditions of this Public License. + + c. BY-SA Compatible License means a license listed at + creativecommons.org/compatiblelicenses, approved by Creative + Commons as essentially the equivalent of this Public License. + + d. Copyright and Similar Rights means copyright and/or similar rights + closely related to copyright including, without limitation, + performance, broadcast, sound recording, and Sui Generis Database + Rights, without regard to how the rights are labeled or + categorized. For purposes of this Public License, the rights + specified in Section 2(b)(1)-(2) are not Copyright and Similar + Rights. + + e. Effective Technological Measures means those measures that, in the + absence of proper authority, may not be circumvented under laws + fulfilling obligations under Article 11 of the WIPO Copyright + Treaty adopted on December 20, 1996, and/or similar international + agreements. + + f. Exceptions and Limitations means fair use, fair dealing, and/or + any other exception or limitation to Copyright and Similar Rights + that applies to Your use of the Licensed Material. + + g. License Elements means the license attributes listed in the name + of a Creative Commons Public License. The License Elements of this + Public License are Attribution and ShareAlike. + + h. Licensed Material means the artistic or literary work, database, + or other material to which the Licensor applied this Public + License. + + i. Licensed Rights means the rights granted to You subject to the + terms and conditions of this Public License, which are limited to + all Copyright and Similar Rights that apply to Your use of the + Licensed Material and that the Licensor has authority to license. + + j. Licensor means the individual(s) or entity(ies) granting rights + under this Public License. + + k. Share means to provide material to the public by any means or + process that requires permission under the Licensed Rights, such + as reproduction, public display, public performance, distribution, + dissemination, communication, or importation, and to make material + available to the public including in ways that members of the + public may access the material from a place and at a time + individually chosen by them. + + l. Sui Generis Database Rights means rights other than copyright + resulting from Directive 96/9/EC of the European Parliament and of + the Council of 11 March 1996 on the legal protection of databases, + as amended and/or succeeded, as well as other essentially + equivalent rights anywhere in the world. + + m. You means the individual or entity exercising the Licensed Rights + under this Public License. Your has a corresponding meaning. + + +Section 2 -- Scope. + + a. License grant. + + 1. Subject to the terms and conditions of this Public License, + the Licensor hereby grants You a worldwide, royalty-free, + non-sublicensable, non-exclusive, irrevocable license to + exercise the Licensed Rights in the Licensed Material to: + + a. reproduce and Share the Licensed Material, in whole or + in part; and + + b. produce, reproduce, and Share Adapted Material. + + 2. Exceptions and Limitations. For the avoidance of doubt, where + Exceptions and Limitations apply to Your use, this Public + License does not apply, and You do not need to comply with + its terms and conditions. + + 3. Term. The term of this Public License is specified in Section + 6(a). + + 4. Media and formats; technical modifications allowed. The + Licensor authorizes You to exercise the Licensed Rights in + all media and formats whether now known or hereafter created, + and to make technical modifications necessary to do so. The + Licensor waives and/or agrees not to assert any right or + authority to forbid You from making technical modifications + necessary to exercise the Licensed Rights, including + technical modifications necessary to circumvent Effective + Technological Measures. For purposes of this Public License, + simply making modifications authorized by this Section 2(a) + (4) never produces Adapted Material. + + 5. Downstream recipients. + + a. Offer from the Licensor -- Licensed Material. Every + recipient of the Licensed Material automatically + receives an offer from the Licensor to exercise the + Licensed Rights under the terms and conditions of this + Public License. + + b. Additional offer from the Licensor -- Adapted Material. + Every recipient of Adapted Material from You + automatically receives an offer from the Licensor to + exercise the Licensed Rights in the Adapted Material + under the conditions of the Adapter's License You apply. + + c. No downstream restrictions. You may not offer or impose + any additional or different terms or conditions on, or + apply any Effective Technological Measures to, the + Licensed Material if doing so restricts exercise of the + Licensed Rights by any recipient of the Licensed + Material. + + 6. No endorsement. Nothing in this Public License constitutes or + may be construed as permission to assert or imply that You + are, or that Your use of the Licensed Material is, connected + with, or sponsored, endorsed, or granted official status by, + the Licensor or others designated to receive attribution as + provided in Section 3(a)(1)(A)(i). + + b. Other rights. + + 1. Moral rights, such as the right of integrity, are not + licensed under this Public License, nor are publicity, + privacy, and/or other similar personality rights; however, to + the extent possible, the Licensor waives and/or agrees not to + assert any such rights held by the Licensor to the limited + extent necessary to allow You to exercise the Licensed + Rights, but not otherwise. + + 2. Patent and trademark rights are not licensed under this + Public License. + + 3. To the extent possible, the Licensor waives any right to + collect royalties from You for the exercise of the Licensed + Rights, whether directly or through a collecting society + under any voluntary or waivable statutory or compulsory + licensing scheme. In all other cases the Licensor expressly + reserves any right to collect such royalties. + + +Section 3 -- License Conditions. + +Your exercise of the Licensed Rights is expressly made subject to the +following conditions. + + a. Attribution. + + 1. If You Share the Licensed Material (including in modified + form), You must: + + a. retain the following if it is supplied by the Licensor + with the Licensed Material: + + i. identification of the creator(s) of the Licensed + Material and any others designated to receive + attribution, in any reasonable manner requested by + the Licensor (including by pseudonym if + designated); + + ii. a copyright notice; + + iii. a notice that refers to this Public License; + + iv. a notice that refers to the disclaimer of + warranties; + + v. a URI or hyperlink to the Licensed Material to the + extent reasonably practicable; + + b. indicate if You modified the Licensed Material and + retain an indication of any previous modifications; and + + c. indicate the Licensed Material is licensed under this + Public License, and include the text of, or the URI or + hyperlink to, this Public License. + + 2. You may satisfy the conditions in Section 3(a)(1) in any + reasonable manner based on the medium, means, and context in + which You Share the Licensed Material. For example, it may be + reasonable to satisfy the conditions by providing a URI or + hyperlink to a resource that includes the required + information. + + 3. If requested by the Licensor, You must remove any of the + information required by Section 3(a)(1)(A) to the extent + reasonably practicable. + + b. ShareAlike. + + In addition to the conditions in Section 3(a), if You Share + Adapted Material You produce, the following conditions also apply. + + 1. The Adapter's License You apply must be a Creative Commons + license with the same License Elements, this version or + later, or a BY-SA Compatible License. + + 2. You must include the text of, or the URI or hyperlink to, the + Adapter's License You apply. You may satisfy this condition + in any reasonable manner based on the medium, means, and + context in which You Share Adapted Material. + + 3. You may not offer or impose any additional or different terms + or conditions on, or apply any Effective Technological + Measures to, Adapted Material that restrict exercise of the + rights granted under the Adapter's License You apply. + + +Section 4 -- Sui Generis Database Rights. + +Where the Licensed Rights include Sui Generis Database Rights that +apply to Your use of the Licensed Material: + + a. for the avoidance of doubt, Section 2(a)(1) grants You the right + to extract, reuse, reproduce, and Share all or a substantial + portion of the contents of the database; + + b. if You include all or a substantial portion of the database + contents in a database in which You have Sui Generis Database + Rights, then the database in which You have Sui Generis Database + Rights (but not its individual contents) is Adapted Material, + + including for purposes of Section 3(b); and + c. You must comply with the conditions in Section 3(a) if You Share + all or a substantial portion of the contents of the database. + +For the avoidance of doubt, this Section 4 supplements and does not +replace Your obligations under this Public License where the Licensed +Rights include other Copyright and Similar Rights. + + +Section 5 -- Disclaimer of Warranties and Limitation of Liability. + + a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE + EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS + AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF + ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, + IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, + WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR + PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, + ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT + KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT + ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. + + b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE + TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, + NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, + INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, + COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR + USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN + ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR + DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR + IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. + + c. The disclaimer of warranties and limitation of liability provided + above shall be interpreted in a manner that, to the extent + possible, most closely approximates an absolute disclaimer and + waiver of all liability. + + +Section 6 -- Term and Termination. + + a. This Public License applies for the term of the Copyright and + Similar Rights licensed here. However, if You fail to comply with + this Public License, then Your rights under this Public License + terminate automatically. + + b. Where Your right to use the Licensed Material has terminated under + Section 6(a), it reinstates: + + 1. automatically as of the date the violation is cured, provided + it is cured within 30 days of Your discovery of the + violation; or + + 2. upon express reinstatement by the Licensor. + + For the avoidance of doubt, this Section 6(b) does not affect any + right the Licensor may have to seek remedies for Your violations + of this Public License. + + c. For the avoidance of doubt, the Licensor may also offer the + Licensed Material under separate terms or conditions or stop + distributing the Licensed Material at any time; however, doing so + will not terminate this Public License. + + d. Sections 1, 5, 6, 7, and 8 survive termination of this Public + License. + + +Section 7 -- Other Terms and Conditions. + + a. The Licensor shall not be bound by any additional or different + terms or conditions communicated by You unless expressly agreed. + + b. Any arrangements, understandings, or agreements regarding the + Licensed Material not stated herein are separate from and + independent of the terms and conditions of this Public License. + + +Section 8 -- Interpretation. + + a. For the avoidance of doubt, this Public License does not, and + shall not be interpreted to, reduce, limit, restrict, or impose + conditions on any use of the Licensed Material that could lawfully + be made without permission under this Public License. + + b. To the extent possible, if any provision of this Public License is + deemed unenforceable, it shall be automatically reformed to the + minimum extent necessary to make it enforceable. If the provision + cannot be reformed, it shall be severed from this Public License + without affecting the enforceability of the remaining terms and + conditions. + + c. No term or condition of this Public License will be waived and no + failure to comply consented to unless expressly agreed to by the + Licensor. + + d. Nothing in this Public License constitutes or may be interpreted + as a limitation upon, or waiver of, any privileges and immunities + that apply to the Licensor or You, including from the legal + processes of any jurisdiction or authority. + + +======================================================================= + +Creative Commons is not a party to its public licenses. +Notwithstanding, Creative Commons may elect to apply one of its public +licenses to material it publishes and in those instances will be +considered the "Licensor." Except for the limited purpose of indicating +that material is shared under a Creative Commons public license or as +otherwise permitted by the Creative Commons policies published at +creativecommons.org/policies, Creative Commons does not authorize the +use of the trademark "Creative Commons" or any other trademark or logo +of Creative Commons without its prior written consent including, +without limitation, in connection with any unauthorized modifications +to any of its public licenses or any other arrangements, +understandings, or agreements concerning use of licensed material. For +the avoidance of doubt, this paragraph does not form part of the public +licenses. + +Creative Commons may be contacted at creativecommons.org. diff --git a/README.md b/README.md index 710aef7..72f1f59 100755 --- a/README.md +++ b/README.md @@ -1,123 +1,197 @@ -Frontend WhiteList — это список полезных ресурсов для разработчиков интерфейсов. + +#Frontend WhiteList +Frontend WhiteList — это список полезных и интересных авторских статей, переводов, докладов и ресурсов на русском языке для разработчиков интерфейсов. + +##Задачи +1. Составить список полезных ресурсов для разработчиков интерфейсов +2. Продвинуть в массы имена авторов, которые делают отрасль лучше ##Содержание -* [HTML](README.md#html) +* [Верстка](README.md#Верстка) + * [О позиционировании](README.md#О-позиционировании) + * [О мобильных устройствах](README.md#О-мобильных-устройствах) + * [HTML Советы](README.md#html-cоветы) * [CSS](README.md#css) - * [Визуализация](README.md#Визуализация) - * [Методологии](README.md#Методологии) + * [О свойствах](README.md#О-свойствах) + * [Об организации](README.md#Об-организации) * [JavaScript](README.md#javascript) - * [Основы](README.md#Основы) - * [Советы](README.md#javascript-Советы) - * [Библиотеки и фреймворки](README.md#Библиотеки-и-фреймворки) + * [Об основах](README.md#Об-основах) + * [JavaScript Советы](README.md#javascript-Советы) + * [Руководства по библиотекам и фреймворкам](README.md#Руководства-по-библиотекам-и-фреймворкам) + * [О библиотеках и фреймворках](README.md#О-библиотеках-и-фреймворках) +* [Анимация](README.md#Анимация) + * [CSS-анимации](README.md#css-анимации) + * [JavaScript-анимации](README.md#javascript-анимации) + * [SVG-анимации](README.md#svg-анимации) + * [Руководства по созданию анимаций](README.md#Руководства-по-созданию-анимаций) * [Инструменты](README.md#Инструменты) -* [Верстка](README.md#Верстка) * [Accessibility](README.md#accessibility) +* [Браузеры](README.md#Браузеры) * [Оптимизация скорости загрузки](README.md#Оптимизация-скорости-загрузки) -* [О разработке](README.md#О-разработке) +* [Разработка](README.md#Разработка) + * [О жизни](README.md#О жизни) + * [О коде](README.md#О коде) + * [О готовых решениях](README.md#О-готовых-решениях) +* [User Experience](README.md#user-experience) +* [Progressive Enhancement и Graceful degradation](README.md#progressive-enhancement-и-graceful-degradation) * [Книги](README.md#Книги) -##HTML +##Верстка +* [Валидация форм на HTML и CSS. Chris Coyier. Перевод Алёны Батицкой](https://medium.com/russian/валидация-форм-на-html-и-css-c34c982d42a0#.885w45m0k) +* [Типографика восток. Роман Прудников (Видео :movie_camera:)](https://www.youtube.com/watch?v=9YQzHmIVYag) +* [input. Артём Кувалдин (Видео :movie_camera:)](https://www.youtube.com/watch?time_continue=20&v=2uo74fpwCN4) +* [Слова, часто используемые в CSS-классах. Юлия Бухвалова](https://github.com/yoksel/common-words) +* [Методическое пособие для начинающих. Стас Мельников](https://www.gitbook.com/book/melnik909/tutorial-for-beginner-front-end-developer/details) + +####О мобильных устройствах +* [Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса. Артём Курбатов](https://habrahabr.ru/company/yandex/blog/307064/) +* [Вёрстка для мобильных устройств. Артём Кувалдин и Олег Мохов (Видео :movie_camera:)](https://www.youtube.com/watch?v=cmt2A_kT8Fs) + +####О позиционировании +* [Центрирование в CSS: полное руководство. Chris Coyier. Перевод Натальи Фадеевой](http://frontender.info/centering-css-complete-guide/) +* [Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки. Дмитрий Дудин](http://html5.by/blog/flexbox/) +* [Можно вообще всё. Раскладка по гриду. Вадим Макеев (Видео :movie_camera:)](https://www.youtube.com/watch?v=hAFcdRrhwQM) + +####HTML Cоветы +* [FrontendLab: Признаки хорошей верстки. Роман Братченко (Видео :movie_camera:)](https://www.youtube.com/watch?v=lXgoTAhuEfo) +* [Распространенные ошибки начинающего HTML-верстальщика. Стас Мельников](https://habrahabr.ru/post/307210/) +* [Краш-тест вёрстки](https://isqua.ru/blog/2016/06/19/crash-test-viorstki/) ##CSS -* [Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки](http://html5.by/blog/flexbox/) -* [Свойство background-clip и его применения](http://css-live.ru/articles-css/background-clip-use-cases.html) -* [МОЖНО ВООБЩЕ ВСЁ. РАСКЛАДКА ПО ГРИДУ - Вадим Макеев](https://www.youtube.com/watch?v=hAFcdRrhwQM) -* [Основные правила и принципы написания CSS](https://github.com/iamstarkov/CSS-Guidelines/blob/master/README%20Russian.md) - -###Визуализация -* [Свойства вызывающие перерисовку](http://csstriggers.com/) -* [Руководство по CSS Animation](http://css.yoksel.ru/css-animation/) -* [Всё, что вам нужно знать о CSS-свойстве will-change](https://dev.opera.com/articles/ru/css-will-change-property/) -* [Производительность визуализации](https://developers.google.com/web/fundamentals/performance/rendering/) -* [CSS-маски для hover-эффекта](https://habrahabr.ru/post/164409/) -* [Intermediate CSS3 Hover Effects. Пошаговый туториал](https://habrahabr.ru/post/274003/) -* [Как сделать Инстаграм в браузере](https://www.youtube.com/watch?v=RJnYkbm66ZI) -* [Аппаратное ускорение](https://vimeo.com/97907079#at=3) -* [Веб-анимация на JS и CSS](https://vimeo.com/141266409) -* [Анимируем объекты с использованием физики в JavaScript](https://www.youtube.com/watch?time_continue=6&v=UH3tKb7B5xA) - -###Методологии -* [Как работать с CSS-препроцессорами и БЭМ](http://nicothin.github.io/idiomatic-pre-CSS/) -* [Организация кода для CSS препроцессоров](http://frontender.info/organizing-your-css-code-for-preprocessors/) -* [Битва архитектур](http://css-live.ru/articles/bitva-arxitektur.html) +* ["Сколько весят селекторы?". Юлия Бухвалова](http://css.yoksel.ru/specifity/) + +####О свойствах +* [Свойство background-clip и его применения. Ana Tudor. Перевод css-live.ru](http://css-live.ru/articles-css/background-clip-use-cases.html) +* [Как я научился любить скучные мелочи CSS. Peter Gaston. Перевод Веб-стандарты](http://web-standards.ru/articles/boring-bits-of-css/) +* [Кружевные орнаменты на CSS. Марина Кузнецова](https://habrahabr.ru/post/315216/) + +####Об организации +* [Основные правила и принципы написания CSS. Гарри Робертс. Перевод Владимира Старкова](https://github.com/iamstarkov/CSS-Guidelines/blob/master/README%20Russian.md) +* [Как работать с CSS-препроцессорами и БЭМ. Николай Громов](http://nicothin.github.io/idiomatic-pre-CSS/) +* [Организация кода для CSS препроцессоров. Brian Rinaldi. Перевод Руслана Каймакова](http://frontender.info/organizing-your-css-code-for-preprocessors/) +* [Битва архитектур. Mariano Miguel. Перевод css-live.ru](http://css-live.ru/articles/bitva-arxitektur.html) * [Способы организации CSS-кода](https://habrahabr.ru/post/256109/) -* [«Пишем БЭМ правильно» — Игорь Зенич, iDeus](https://www.youtube.com/watch?v=hTmxbJF2Tts) -* [А вы верите в систематизацию, или методологии верстки?](https://www.youtube.com/watch?v=P4ag4JSNWTM) +* [«Пишем БЭМ правильно». Игорь Зенич (Видео :movie_camera:)](https://www.youtube.com/watch?v=hTmxbJF2Tts) +* [А вы верите в систематизацию, или методологии верстки? Елизавета Селиванова и Ирина Левина](https://www.youtube.com/watch?v=P4ag4JSNWTM) +* [BEMup для начинающих 09.12.2016. Владимир Гриненко. (Видео :movie_camera:)](https://www.youtube.com/watch?v=Ai-yt0b8iKE&feature=youtu.be) ##JavaScript - -* [Цена использования фреймворков](https://habrahabr.ru/company/mailru/blog/273613/) - -###Основы -* [Современный учебник JavaScript](https://learn.javascript.ru) +* [4 вида утечек памяти в JavaScript и как с ними бороться. Андрей Алексеев](https://habrahabr.ru/post/309318/) +* [S.O.L.I.D-ый JavaScript. Алексей Охрименко (Видео :movie_camera:)](https://www.youtube.com/watch?v=wi3wPzReKZQ) +* [Классическое программирование для фронтендеров. Игорь Алексеенко (Видео :movie_camera:)](https://www.youtube.com/watch?v=b2AhDtFfSSU) +* [Функциональное программирование в браузере. Никита Прокопов](http://tonsky.me/talks/2015-codefest/) +* [Делаем свой JavaScript чистым. Jack Franklin. Перевод prgssr.ru](http://prgssr.ru/development/delaem-svoj-javascript-chistym.html) + +####Об основах +* [Современный учебник JavaScript. Илья Кантор](https://learn.javascript.ru) * [Сводная таблица с результатами работы условий](http://dorey.github.io/JavaScript-Equality-Table/) * [Область видимости в JavaScript и «поднятие» переменных и объявлений функций](https://habrahabr.ru/post/127482/) -* [Как работают замыкания (под капотом) в JavaScript](http://habrahabr.ru/company/hexlet/blog/266443/) -* [Асинхронность в JavaScript: Пособие для тех, кто хочет разобраться](https://habrahabr.ru/company/wrike/blog/302896/) -* [Делаем свой JavaScript чистым](http://prgssr.ru/development/delaem-svoj-javascript-chistym.html) +* [Как работают замыкания (под капотом) в JavaScript. Hexlet](http://habrahabr.ru/company/hexlet/blog/266443/) +* [Асинхронность в JavaScript: Пособие для тех, кто хочет разобраться. Wrike](https://habrahabr.ru/company/wrike/blog/302896/) +* [Техники работы с DOM: родительские, дочерние и соседние элементы. Louis Lazaris. Перевод prgssr.ru](http://prgssr.ru/development/tehniki-raboty-s-dom-roditelskie-dochernie-i-sosednie-elementy.html) +* [Фронтенд. DOM, Events. Артем Мезин (Видео :movie_camera:)](https://www.youtube.com/watch?v=b9q2j0RyKPw) + +####JavaScript Советы +* [Плохой код #1. Евгений Бовыкин](http://jsraccoon.ru/exercise-bad-code-one) +* [8 правил хорошего JavaScript-кода. Антон Супрун](http://popel-studio.com/blog/article/8-pravil-horoshego-javascript-koda.html) + +####Руководства по библиотекам и фреймворкам +* [Handlebars. Руководство к действию. Олег Лазарев](https://habrahabr.ru/post/273581/) +* [Правила хорошего тона при написании плагина на jQuery. Валерий Чупурнов](https://habrahabr.ru/post/277603/) +* [Руководство по Flux в картинках. Lin Clark. Перевод Анастасии Абакумовой](https://medium.com/russian/руководство-по-flux-в-картинках-d59c03562ea#.q6688j1wk) +* [Redux в картинках. Lin Clark. Перевод Анастасии Абакумовой](https://medium.com/russian/a-cartoon-intro-to-redux-e2108896f7e6#.gukbw0jvz) + +####О библиотеках и фреймворках +* [Цена использования фреймворков. Paul Lewis. Перевод Mail.Ru Group](https://habrahabr.ru/company/mailru/blog/273613/) +* [Жизнь после js-фреймворков. Андрей Ваганов (Видео :movie_camera:)](https://www.youtube.com/watch?v=-W7kFbCXVqw) + +##Анимация +* [Производительность визуализации](https://developers.google.com/web/fundamentals/performance/rendering/) +* [Аппаратное ускорение. Александр Завьялов (Видео :movie_camera:)](https://vimeo.com/97907079#at=3) +* [Веб-анимация на JS и CSS. Александр Завьялов (Видео :movie_camera:)](https://vimeo.com/141266409) -###JavaScript Советы -* [Плохой код #1](http://jsraccoon.ru/exercise-bad-code-one) -* [8 правил хорошего JavaScript-кода](http://popel-studio.com/blog/article/8-pravil-horoshego-javascript-koda.html) -* [Техники работы с DOM: родительские, дочерние и соседние элементы](http://prgssr.ru/development/tehniki-raboty-s-dom-roditelskie-dochernie-i-sosednie-elementy.html) -* [4 вида утечек памяти в JavaScript и как с ними бороться](https://habrahabr.ru/post/309318/) +####CSS-анимации +* [CSS Triggers. Таблица со свойствами и процессами, происходящими при изменении свойств](http://csstriggers.com/) +* [Руководство по CSS Animation. Юлия Бухвалова](http://css.yoksel.ru/css-animation/) +* [Всё, что вам нужно знать о CSS-свойстве will-change. Sara Soueidan. Перевод Opera Software](https://dev.opera.com/articles/ru/css-will-change-property/) -###Библиотеки и фреймворки -* [Handlebars. Руководство к действию](https://habrahabr.ru/post/273581/) -* [Правила хорошего тона при написании плагина на jQuery](https://habrahabr.ru/post/277603/) +####JavaScript-анимации +* [Анимируем объекты с использованием физики в JavaScript. Елена Иванова (Видео :movie_camera:)](https://www.youtube.com/watch?v=UH3tKb7B5xA) + +####SVG-анимации +* [Как сделать Инстаграм в браузере. Дмитрий Дудин (Видео :movie_camera:)](https://www.youtube.com/watch?v=RJnYkbm66ZI) + +####Руководства по созданию анимаций +* [CSS-маски для hover-эффекта](https://habrahabr.ru/post/164409/) +* [Intermediate CSS3 Hover Effects. Пошаговый туториал](https://habrahabr.ru/post/274003/) ##Инструменты -* [Автоматизация для фронтендеров](https://www.youtube.com/watch?v=y9ERi0PhHEo) -* [Bower: зачем фронтенду нужен менеджер пакетов](http://nano.sapegin.ru/all/bower) -* [Введение в пакетный менеджер NPM для начинающих](http://prgssr.ru/development/vvedenie-v-paketnyj-menedzher-npm-dlya-nachinayushih.html) -* [Автоматизация регрессионного тестирования CSS](http://prgssr.ru/development/avtomatizaciya-regressionnogo-testirovaniya-css-2016.html) +* [Автоматизация для фронтендеров. Роберт Харитонов (Видео :movie_camera:)](https://www.youtube.com/watch?v=y9ERi0PhHEo) +* [Bower: зачем фронтенду нужен менеджер пакетов. Артём Сапегин](http://nano.sapegin.ru/all/bower) +* [Введение в пакетный менеджер NPM для начинающих. Peter Dierx. Перевод prgssr.ru](http://prgssr.ru/development/vvedenie-v-paketnyj-menedzher-npm-dlya-nachinayushih.html) +* [Автоматизация регрессионного тестирования CSS. Garris Shipon. Перевод prgssr.ru](http://prgssr.ru/development/avtomatizaciya-regressionnogo-testirovaniya-css-2016.html) * [Перевод книги "Pro Git"](https://git-scm.com/book/ru/v1) -* [Модульная сборка БЭМ-проектов. И никаких bem-tools - Владимир Гриненко](https://www.youtube.com/watch?time_continue=9&v=mHVgZZTJLdk) -* [Тимофей Чаптыков. Автоматизация хранения графики](https://vk.com/videos-74443939?section=album_2&z=video-74443939_171854381%2Fclub74443939%2Fpl_-74443939_2) -* [Cистемы сборки фронтенда. Gulp](https://www.youtube.com/watch?time_continue=5&v=MfnTJh-pQWM) -* [Роман Сальников, 2GIS | Суперсилы Chrome Dev Tools](https://vimeo.com/107580454) - -##Верстка -* [Центрирование в CSS: полное руководство](http://frontender.info/centering-css-complete-guide/) -* [Как я научился любить скучные мелочи CSS](http://web-standards.ru/articles/boring-bits-of-css/) -* [Валидация форм на HTML и CSS](https://medium.com/russian/валидация-форм-на-html-и-css-c34c982d42a0#.885w45m0k) -* [Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса](https://habrahabr.ru/company/yandex/blog/307064/) -* [Веб-дизайн. Лекция Виталия Фридмана](https://www.youtube.com/watch?v=ri2XWgIt59U) -* [Вёрстка для мобильных устройств - Артём Кувалдин, Олег Мохов](https://www.youtube.com/watch?v=cmt2A_kT8Fs) -* [Типографика восток - Роман Прудников](https://www.youtube.com/watch?v=9YQzHmIVYag) -* [input, Артём Кувалдин, Яндекс | FrontendFellows #1](https://www.youtube.com/watch?time_continue=20&v=2uo74fpwCN4) -* [FrontendLab: Признаки хорошей верстки - Роман Братченко](https://www.youtube.com/watch?v=lXgoTAhuEfo) +* [Модульная сборка БЭМ-проектов. И никаких bem-tools. Владимир Гриненко (Видео :movie_camera:)](https://www.youtube.com/watch?time_continue=9&v=mHVgZZTJLdk) +* [Автоматизация хранения графики. Тимофей Чаптыков (Видео :movie_camera:)](https://www.youtube.com/watch?v=tJmI8p6Ms_M) +* [Cистемы сборки фронтенда. Gulp (Видео :movie_camera:)](https://www.youtube.com/watch?time_continue=5&v=MfnTJh-pQWM) +* [Суперсилы Chrome Dev Tools. Роман Сальников (Видео :movie_camera:)](https://vimeo.com/107580454) +* [Стек технологий JavaScript с нуля. Jonathan Verrecchia. Перевод от UsulPro](https://github.com/UsulPro/js-stack-from-scratch) ##Accessibility -* [Недоступный веб: как мы развели такой бардак](https://habrahabr.ru/post/309076/) -* [Браузеры наши меньшие, или Нам нужно серьёзно поговорить](https://habrahabr.ru/company/oleg-bunin/blog/310210/) -* [Альтернативный текст для изображений](http://prgssr.ru/development/alternativnyj-tekst-dlya-izobrazhenij.html) +* [Недоступный веб: как мы развели такой бардак. Mischa Andrews. Перевод Алексей Уколов](https://habrahabr.ru/post/309076/) +* [Браузеры наши меньшие, или Нам нужно серьёзно поговорить. Вадим Макеев](https://habrahabr.ru/company/oleg-bunin/blog/310210/) +* [Альтернативный текст для изображений. Ire Aderinokun. Перевод prgssr.ru](http://prgssr.ru/development/alternativnyj-tekst-dlya-izobrazhenij.html) * [Дизайн государственных систем](http://gov.design/blog/2016/11/08/accessibility.html) +##Браузеры +* [Модель отображения. Основы. Олег Мохов (Видео :movie_camera:)](https://www.youtube.com/watch?v=LVqg3N7QYVU) +* [Модель отображения. Тонкости. Олег Мохов (Видео :movie_camera:)](https://www.youtube.com/watch?v=_FYV-EjTkfw) +* [Модель отображения. Браузеры. Олег Мохов (Видео :movie_camera:)](https://www.youtube.com/watch?v=OGmzplOuRas) +* [WebAPIs. Сергей Гоголев, Максим Воронцов, Олег Семичев (Видео :movie_camera:)](https://www.youtube.com/watch?v=OGmzplOuRas) +* [Принципы работы современных веб-браузеров. Tali Garsiel и Paul Irish. Перевод html5rocks.com](https://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/) +* [Фронтенд. Хранение данных.Иван Чашкин (Видео :movie_camera:)](https://www.youtube.com/watch?v=BvwHEb5oEJM) + ##Оптимизация скорости загрузки -* [Условная загрузка для адаптивного веб-дизайна](https://habrahabr.ru/post/218497/) -* [Критический путь рендеринга веб-страниц](https://habrahabr.ru/post/262239/) -* [Клиентская точка отказа: SPOF за счет внешних JS-библиотек](https://habrahabr.ru/post/265627/) -* [Представляем RAIL: модель оценки производительности сайта](https://habrahabr.ru/post/308026/) -* [В погоне за производительностью, Денис Мишунов](https://www.youtube.com/watch?v=egiLQun-FxI) -* [Производительный client-side – Роман Парадеев](https://www.youtube.com/watch?v=kmhg-cV5Vkg) -* [Верстка. Вид снизу - Марина Широчкина](https://www.youtube.com/watch?v=9HYHxky799o) -* [Жесточайшая оптимизация загрузки веб-страниц](https://www.youtube.com/watch?v=KItf0Zrx87c) -* [Фронтенд. Сетевое взаимодействие](https://www.youtube.com/watch?v=feEs6aymPj4) -* [Загрузка главной страницы. Павел Минеев](https://www.youtube.com/watch?time_continue=32&v=k5rbC0mBK9A) -* [Оптимизация фронтенда - Олег Мохов](https://www.youtube.com/watch?v=Vn1jyRdEbjg) - -##О разработке +* [Условная загрузка для адаптивного веб-дизайна. Андрей Голуменов](https://habrahabr.ru/post/218497/) +* [Критический путь рендеринга веб-страниц. Николай Лавлинский](https://habrahabr.ru/post/262239/) +* [Клиентская точка отказа: SPOF за счет внешних JS-библиотек Николай Лавлинский](https://habrahabr.ru/post/265627/) +* [Представляем RAIL: модель оценки производительности сайта. Paul Irish и Paul Lewis. Перевод Николай Мациевский](https://habrahabr.ru/post/308026/) +* [В погоне за производительностью. Денис Мишунов (Видео :movie_camera:)](https://www.youtube.com/watch?v=egiLQun-FxI) +* [Производительный client-side. Роман Парадеев (Видео :movie_camera:)](https://www.youtube.com/watch?v=kmhg-cV5Vkg) +* [Верстка. Вид снизу. Марина Широчкина (Видео :movie_camera:)](https://www.youtube.com/watch?v=9HYHxky799o) +* [Жесточайшая оптимизация загрузки веб-страниц. Дмитрий Дудин (Видео :movie_camera:)](https://www.youtube.com/watch?v=KItf0Zrx87c) +* [Фронтенд. Сетевое взаимодействие. Артем Мезин и Егор Дыдыкин (Видео :movie_camera:)](https://www.youtube.com/watch?v=feEs6aymPj4) +* [Загрузка главной страницы. Павел Минеев (Видео :movie_camera:)](https://www.youtube.com/watch?time_continue=32&v=k5rbC0mBK9A) +* [Оптимизация фронтенда. Олег Мохов (Видео :movie_camera:)](https://www.youtube.com/watch?v=Vn1jyRdEbjg) +* [Improving Smashing Mag's Performance. Виталий Фридман (Видео :movie_camera:)](https://www.youtube.com/watch?v=ri2XWgIt59U) + +##Разработка +* [Словарь терминов по фронтенду. Вадим Макеев и Ольга Алексашенко](https://github.com/web-standards-ru/dictionary) +* [О чём должен помнить веб-дизайнер. Николай Громов и Андрей Алексеев](https://github.com/nicothin/web-design) + +####О жизни +* [36. Вадим Макишвили (Видео :movie_camera:)](https://vimeo.com/108327741) +* [Как я перестал верить технологиям. Алексей Симоненко (Видео :movie_camera:)](https://www.youtube.com/watch?v=p5g4giWmcvE) +* ["Старикам здесь не место?". Олег Мохов и Алексей Симоненко (Видео :movie_camera:)](https://youtu.be/ISmD4Lik5oY?list=PLMBnwIwFEFHekmHQcApwkIzEfG8UJ_f-7) +* [Ошибка. Осознание, примирение, извлечение пользы. Вадим Макишвили (Видео :movie_camera:)](https://www.youtube.com/watch?v=4srVRott8uU&index=1&list=PLMBnwIwFEFHdZyRHzgiIkMwJpCidILXTN) +* [Заметки о собеседованиях для веб-разработчиков. Артём Сапегин](http://nano.sapegin.ru/all/coding-interview) + +####О коде +* [Принципы и приёмы написания эффективного кода. Александр Завьялов (Видео :movie_camera:)](https://www.youtube.com/watch?v=A__0VgwlBR0) +* [Типичные ошибки начинающего верстальщика. Олег Мохов (Видео :movie_camera:)](https://www.youtube.com/watch?v=d4b3CiwSi9c) + +####О готовых решениях * [Не учите фреймворки, учите архитектуру](https://habrahabr.ru/post/253297/) -* [О jQuery и Bootstrap: расставляем точки над «i»](http://frontender.info/whats-wrong-with-jquery-and-bootstrap/) -* [NPM и left-pad: мы разучились программировать?](https://habrahabr.ru/post/280099/) -* [Словарь терминов по фронтенду](https://github.com/web-standards-ru/dictionary) -* [Вадим Макишвили, Яндекс | 36](https://vimeo.com/108327741) -* [Идеологии разработки веб интерфейсов - Сергей Горобцов](https://www.youtube.com/watch?v=i1DzrxGlO_g) -* [Как я перестал верить технологиям. Алексей Симоненко](https://www.youtube.com/watch?v=p5g4giWmcvE) -* [Принципы и приёмы написания эффективного кода - Александр Завьялов](https://www.youtube.com/watch?v=A__0VgwlBR0) -* [Типичные ошибки начинающего верстальщика](https://www.youtube.com/watch?v=d4b3CiwSi9c) +* [О jQuery и Bootstrap: расставляем точки над «i». Андрей Романов](http://frontender.info/whats-wrong-with-jquery-and-bootstrap/) +* [NPM и left-pad: мы разучились программировать?. David Haney. Перевод Анатолий Ализар](https://habrahabr.ru/post/280099/) + +##User Experience +* [UX-мифы. Zoltán Gócza и Zoltán Kollin. Перевод Ринат Рехимкулов и Петр Андрианов](http://ru.uxmyths.com/) +* [Как отравить мобильного пользователя. Martin Michálek. Перевод prgssr.ru](http://prgssr.ru/development/kak-otravit-polzovatelya-s-mobilnym.html) +##Progressive Enhancement и Graceful degradation +* [Идеологии разработки веб интерфейсов. Сергей Горобцов (Видео :movie_camera:)](https://www.youtube.com/watch?v=i1DzrxGlO_g) +* [Улучшение формы комментариев. Michael Scharnagl. Перевод Анны Кухаревой, редактура Вадима Макеева, Юли Бухваловой и Алексея Симоненко](https://medium.com/web-standards/улучшение-формы-комментариев-7b2ad80f0340#.gn04dxtf9) ##Книги * [Реактивные веб-сайты. Клиентская оптимизация в алгоритмах и примерах](http://www.ozon.ru/context/detail/id/5322041/) @@ -129,4 +203,10 @@ Frontend WhiteList — это список полезных ресурсов д * [Выразительный JavaScript](http://habrahabr.ru/post/240219/) * [Паттерны для масштабируемых JavaScript-приложений](http://largescalejs.ru/) -Редакторы [Стас Мельников](https://stas-melnikov.ru) и [Артем Андреев](https://github.com/grachpower) +##Как помочь проекту +1. Предложить ресурс с указанием автора(по возможности) в задачах или сделать пулреквест +2. Поделиться ссылкой с друзьями и коллегами + +--- + +Главные редакторы: [Стас Мельников](https://stas-melnikov.ru) и [Артем Андреев](https://github.com/grachpower). [Все редакторы](https://github.com/melnik909/frontend-whitelist/graphs/contributors). Распространяется по лицензии [CC-BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/deed.ru).