Ресурсы по веб-разработке


КатегорияТемаНазваниеСсылка
ListDesignГалерея диджитального WebGL артаgearaward.com
ListDesignДизайн ресурсы: иллюстрации, мокапы, иконкиinterfacer.xyz
ListDesignПодборка ресурсов по дизайну: градиенты, цвета, иконки, подкасты, учебники, инструментыevernote.design
ListDesignПодборка ресурсов по дизайну: статьи, прототипирование, книги, плагины, цвета, дизайн-системы, иконки, подкасты, блогиdesignerlynx.co
ListDesignПодборка ресурсов по дизайну: шрифты, цвета, книги, стокиdesignresources.party
ListDesignПодборка хороших UX решенийreallygoodux.io
ListImagesБанк-депозитарий живых систем — сканы гербариев, фото и звуки животныхplant.depo.msu.ru
ListImagesИстория России в фотографияхrussiainphoto.ru
ListImagesКоллекции галереи Met — фото картин, скульптур, арт-объектов, сканы книг, чертежиmetmuseum.org
ListImagesОцифрованные фонды Библиотеки им. Н.А. Некрасова: издания 1564–2001 годов, уникальные коллекции книг, журналов и газетelectro.nekrasovka.ru
ListImagesПодборка арт-гифок для залипанияgifmuse.io
ListImagesСканы из древних книг — буквы, растения, птицы, коты, черепа, карикатуры, реклама, чертежиflickr.com
ListImagesФотографии Британской библиотеки — костюмы, музыкальные инструменты, карты, кораблиflickr.com
ListJSПримеры для библиотеки D3 для интерактивных графиков, схем, визуализации данныхbl.ocks.org
ListProductВидео конференций Productcampyoutube.com
ListProductКак не надо запускать продукт или стартап, истории проваловhownottolaunch.com
ListProductМетоды дизайн-мышленияmedialabamsterdam.com
ListProductПодборка ресурсов для продакт-менеджеров — статьи, видео и подкастыproductmanual.co
ListProductФреймворки разработки продуктаproduct-frameworks.com
ListTextСписок текстовых эмотиконовdongerlist.com
ListTextСписок HTML символовtoptal.com
ListWebDevБрутальные сайтыbrutalistwebsites.com
ListWebDevВидео конференций Smashing Magazinevimeo.com
ListWebDevВидео сообщества веб-стандартыyoutube.com
ListWebDevДокументация по языкам программированияdevdocs.io
ListWebDevПодборка бесплатных облачных SaaS, PaaS и IaaS сервисов для разбработчиковgithub.com
ListWebDevПодборка лучших (О_о) веб-страниц — лендинги, страницы цен, чекаута, приложений, продуктовpages.xyz
ListWebDevПодборка ресурсов для запуска проектаresourcecards.com
ListWebDevПоиск по репозиториям Githublibraries.io
ListWebDevСписок каналов на YouTube для фронтендеровgithub.com
ListWebDevСписок ресурсов и тем по веб-разработкеgitlogs.com
ListWebDevСток дизайнерких штукfreebiesbug.com
ListWebDevЧто изучать в веб-разработке в 2019levelup.gitconnected.com
ListWebDevAwesome подборка ресурсов по дизайнуgithub.com
ListWebDevAwesome список технологий по оптимизации перфоманса веб-проектаgithub.com
ListWebDevAwesome cписок awesome списков по технологиямgithub.com
ListWebGLAwesome cписок маст-вотч-видео по CSSgithub.com
Ready To UseAggregatorПоиск по JS плагинамunheap.com
Ready To UseAnimationАнимации CSS-шейповsarasoueidan.com
Ready To UseAnimationАнимация модального окнаvodkabears.github.io
Ready To UseAnimationАнимация модального окнаcodyhouse.co
Ready To UseAnimationАнимация модального окнаtympanus.net
Ready To UseAnimationАнимация отлета элемента в другой элемент на JSminimamente.com
Ready To UseAnimationАнимация отображения чисел на JSinorganik.github.io
Ready To UseAnimationАнимация смены страницtympanus.net
Ready To UseAnimationАнимация смены страницbarbajs.org
Ready To UseAnimationАнимация ховеров на ссылкиcodepen.io
Ready To UseAnimationБиблиотека анимации для работы с CSS, SVG, DOM-атрибутами и JS-объектамиanimejs.com
Ready To UseAnimationБиблиотека анимаций по законам физики на JSdynamicsjs.com
Ready To UseAnimationБотанский разбор правильной анимации для box-shadowtobiasahlin.com
Ready To UseAnimationГенератор кейфреймов для пошаговой CSS анимацииbouncejs.com
Ready To UseAnimationГенератор кейфреймов для пошаговой CSS анимацииcssanimate.com
Ready To UseAnimationКлассическая подборка изингов анимацийeasings.net
Ready To UseAnimationКонструктор CSS-анимацийanimista.net
Ready To UseAnimationКоэффициенты для Безье-изингов анимаций CSScubic-bezier.com
Ready To UseAnimationКросс-браузерная CSS анимация на все случаи жизни (70+ функций)github.com
Ready To UseAnimationМагические (незаезженные) CSS анимацииminimamente.com
Ready To UseAnimationПодборка CSS-анимацийleaverou.github.io
Ready To UseAnimationПодборка CSS-анимаций кнопокtympanus.net
Ready To UseAnimationПодборка CSS-анимаций на ховерianlunn.github.io
Ready To UseAnimationШейк эффект на CSSelrumordelaluz.github.io
Ready To UseAnimationЭффект обфускации и появления текста на JScamwiegert.github.io
Ready To UseAnimationЭффект преломления в горячем воздухеtympanus.net
Ready To UseAnimationVHS эффекты на текстjxnblk.com
Ready To UseColorsГенератор градиента на CSScssgradient.io
Ready To UseColorsГенератор градиента на CSSjxnblk.com
Ready To UseColorsГенератор градиента, комплиментарного изображениюbenhowdle89.github.io
Ready To UseColorsГенератор сумасшедшего волнообразного градиентаcodepen.io
Ready To UseColorsГенератор цветовых палитрpalettable.io
Ready To UseColorsГенератор цветовых палитрcolorbox.io
Ready To UseColorsГотовые цветовые палитрыwebdesignrankings.com
Ready To UseColorsГотовые цветовые палитрыcolorhunt.co
Ready To UseColorsГрадиенты и паттерны чисто на CSS с блендомbennettfeely.com
Ready To UseColorsКак Гугл, но только для цветаpicular.co
Ready To UseColorsПодборка градиентовmrmrs.cc
Ready To UseColorsПодборка градиентовgrabient.com
Ready To UseColorsПодборка градиентовwebgradients.com
Ready To UseColorsЦветовые палитры для аксессабилитиcloudflare.design
Ready To UseCSSГенератор градиента с анимацией на CSSgradient-animator.com
Ready To UseCSSГенератор CSS clip масокbennettfeely.com
Ready To UseCSSГенератор CSS clip-pathbennettfeely.com
Ready To UseCSSПарящий 3D эффект на ховерcodepen.io
Ready To UseCSSПодборка оформления навигации точкамиtympanus.net
Ready To UseCSSПодборка спиннеров на CSSepic-spinners.epicmax.co
Ready To UseCSSПодборка спиннеров на CSStobiasahlin.com
Ready To UseCSSПодборка фулскрин-оверлеевtympanus.net
Ready To UseCSSРекомендуемый дефолтный CSS на ссылкиmrmrs.io
Ready To UseCSSСтилизация нативных HTML-элементовgist.github.com
Ready To UseCSSСтилизация формwtfforms.com
Ready To UseCSSФильтр цвета на картинкуcodepen.io
Ready To UseCSSШпаргалка по выравниванию по центру в CSShowtocenterincss.com
Ready To UseCSSCSS бленд на скроллеcodepen.io
Ready To UseCSSCSS бленд эффекты на картинкиbennettfeely.com
Ready To UseCSSMotion Blur эффект на попап-окноcodepen.io
Ready To UseIconsГенератор иконочного шрифтаfontello.com
Ready To UseIconsГенератор иконочного шрифтаicomoon.io
Ready To UseImagesГенератор абстрактных картинокiterograph.laboiteatortue.com
Ready To UseImagesГенератор глича на картинкуsnorpey.github.io
Ready To UseImagesГенератор пиксельных картpixelmap.amcharts.com
Ready To UseImagesГенератор фавиконокrealfavicongenerator.net
Ready To UseImagesГлич для фото и видеоphotomosh.com
Ready To UseImagesЛенивая загрузка картинок на JScallmecavs.com
Ready To UseImagesОнлайн оптимизатор картинокcompressor.io
Ready To UseImagesОпределение базовых цветов по картинке на JSjariz.github.io
Ready To UseImagesОптимизатор картинок онлайнtinyjpg.com
Ready To UseImagesПодборка SVG фильтров для картинокjorgeatgu.github.io
Ready To UseImagesСервис оптимизации и манимуляций с GIFezgif.com
Ready To UseImagesСкриншот заворачивается в браузерscreely.com
Ready To UseImagesУмный кроп картинок на JS в зависимости от содержанияgithub.com
Ready To UseJSАнимации смены страниц на jQuerygit.blivesta.com
Ready To UseJSАнимация графиков и диаграм и примеры готовых чартовlive.amcharts.com
Ready To UseJSБиблиотека анимаций на JS ($$$)greensock.com
Ready To UseJSБиблиотека для работы с векторной графикойpaperjs.org
Ready To UseJSБиблиотека компьютерного зрения на JStrackingjs.com
Ready To UseJSБиблиотека рисования на JStwo.js.org
Ready To UseJSБиблиотека создания частиц на JSvincentgarreau.com
Ready To UseJSВыделять элементы на странице и направлять фокус вниманияkamranahmed.info
Ready To UseJSВычисление видимости элемента DOM на JSvissense.github.io
Ready To UseJSГенератор переводит картинки в точкиbreathing-halftone.desandro.com
Ready To UseJSДвижок для визуализации красоты: шейпы, цвета, интеграктивptsjs.org
Ready To UseJSДвижок для движения двумерных объектов по законам физикиbrm.io
Ready To UseJSДвижок для управления векторной графикойpaperjs.org
Ready To UseJSИнтерактивные эффекты завязанные на скроллеedull24.github.io
Ready To UseJSКнопки для шеров Бирманаilyabirman.ru
Ready To UseJSЛенивая загрузка картинок на JSgithub.com
Ready To UseJSЛенивая загрузка картинок на JScallmecavs.com
Ready To UseJSНаводишь на текст, под ним показывается картинка или видео или меняется весь фон страницыtympanus.net
Ready To UseJSНастраиваемый прогресс бар на JSusablica.github.io
Ready To UseJSОпределение мобильного браузера на JShgoebl.github.io
Ready To UseJSОпределить, если элемент становится видим или уходит из видимой областиcamwiegert.github.io
Ready To UseJSПеревод Google Spreadsheet в JSONgooglesheetjson.herokuapp.com
Ready To UseJSПлагины для библиотеки D3 для интерактивных графиков, схем, визуализации данныхd3-discovery.net
Ready To UseJSПрелоад страниц при ховере на ссылки для ускоренияinstant.page
Ready To UseJSПрогресс-бар на JSnanobar.jacoborus.codes
Ready To UseJSСделать любой элемент перетаскиваемымdraggabilly.desandro.com
Ready To UseJSСетка для драг-н-дроп блоков на jQuerygridstackjs.com
Ready To UseJSСистема комментирования для статичных сайтовschnack.cool
Ready To UseJSТрясучка элементов на JSjackrugile.com
Ready To UseJSУправлять сложными параллельными анимациями нескольких элементов, завязанных на действия пользователя, например, скролл или движение курсораchristinecha.github.io
Ready To UseJSФильтруй и сортируй плитки в лейаутеisotope.metafizzy.co
Ready To UseJSФреймворк для processinghypeframework.com
Ready To UseJSФреймворк P5 для рисования как в Processingp5js.org
Ready To UseJSФреймворк Sketch для кодинга визуализаций и красотsoulwire.github.io
Ready To UseMusicБибилиотека на JS для создания музыки с машин лернингом от Гуглhello-magenta.glitch.me
Ready To UseMusicБиблиотека создания интерактивной музыки на JStonejs.github.io
Ready To UseMusicВизуализация формы звуковой волны на JSwavesurfer-js.org
Ready To UseMusicКислотный кодинг аудио на стероидахgithub.com
Ready To UseMusicПлеер для аудио, обертка и оформление на JSschillmania.com
Ready To UsePatternsГенератор паттернов в PNGkennethcachia.com
Ready To UsePatternsГенератор паттернов на CSSpatternizer.com
Ready To UsePatternsГенератор паттернов на SVGpatterninja.com
Ready To UsePatternsГенератор паттернов на SVGiros.github.io
Ready To UsePatternsПодборка паттернов на CSSleaverou.github.io
Ready To UsePatternsПодборка паттернов на PNGtoptal.com
Ready To UsePatternsПодборка SVG паттерновheropatterns.com
Ready To UseSVGАнимация для SVG Path на JSmaxwellito.github.io
Ready To UseSVGАнимация для SVG Path на JSlazylinepainter.info
Ready To UseSVGБиблиотека для манипуляций с SVG на JSdmitrybaranovskiy.github.io
Ready To UseSVGБиблиотека для манипуляций с SVG на JSsnapsvg.io
Ready To UseSVGОптимизатор SVGjakearchibald.github.io
Ready To UseSVGФильтры SVG для видеоcodepen.io
Ready To UseSVGЭффект моушен блюр на SVGtympanus.net
Ready To UseTextВыравнивание шрифта под контейнер на JSfont-to-width.com
Ready To UseTextГенератор космического движения надписиspacetypegenerator.com
Ready To UseTextИзменяемый размер шрифта под контейнер на JSfittextjs.com
Ready To UseTextИзменяемый размер шрифта под контейнер на JSsimplefocus.com
Ready To UseTextИнструмент тестирования и настройки веб-шрифтовtypetester.org
Ready To UseTextКалькулятор золотого сечения в типографикеgrtcalculator.com
Ready To UseTextКернинг для отображения букв на JSkernjs.com
Ready To UseTextКислотные эффекты на текстblotter.js.org
Ready To UseTextПарсер и модификатор шрифтов на JSopentype.js.org
Ready To UseTextПлагин для веб типографики на JSletteringjs.com
Ready To UseTextПлагин для веб типографики на JStypejs.org
Ready To UseTextПодбор шрифтовых пар на AIfontjoy.com
Ready To UseTextПодборка анимаций текста на anime.jstobiasahlin.com
Ready To UseTextПодборки шрифтовых пар Google Fontsfemmebot.github.io
Ready To UseTextПодмена букв символами на JSpluminjs.com
Ready To UseTextПримеры использования подобранных и настроенных шрифтов и шрифтовых пар из Google Fontstobiasahlin.com
Ready To UseTextРасстановка переносовquittance.ru
Ready To UseTextРасстановка переносов на JSmnater.github.io
Ready To UseTextТестирование веб-шрифтовwebfont-test.com
Ready To UseTextТипограф Муравьеваmdash.ru
Ready To UseTextЭффекты смены текстаtympanus.net
Ready To UseTextCSS для продвинутой типографики отображения шрифтовutility-opentype.kennethormandy.com
Ready To UseWebDevГенератор и просмотр мета-тегов страницыmetatags.io
Ready To UseWebDevДизайн-блоки на бутстрапеfroala.com
Ready To UseWebDevИзмеритель перфоманса веб-проекта от Гуглweb.dev
Ready To UseWebDevКак быстро загружается сайт на мобильныхtestmysite.withgoogle.com
Ready To UseWebDevОпределение технологий сайтаwhatruns.com
Ready To UseWebDevОпределитель технологий сайтаwappalyzer.com
Ready To UseWebDevСервис определения CMSitrack.ru
RefDesignЛучшие дизайны мейловreallygoodemails.com
RefDesignПримеры неординарного дизайнаhoverstat.es
RefDesignПримеры стайлгайдовstyleguides.io
RefDesignФакты о дизайнеdesignfacts.org
RefMusicПриложение синтезатора звука кодомnaivesound.com
RefMusicСеквенсер на JSjxnblk.com
RefTextАнимация текста с разделением на буквыgreensock.com
RefTextСмена формы при вводеkennethcachia.com
RefWebDevГугл экспериментыexperiments.withgoogle.com
RefWebDevЕсли бы Луна была одним пикселемjoshworth.com
RefWebDevИнфографика об истории философииdenizcemonduygu.com
RefWebDevОпределитель настроенияthymia.world
RefWebDevОтмазка-запаскаcopout.me
RefWebDevПроект музыкального лейблаfilesrec.com
RefWebDevРандомный неведомый артrandom.kexit.it
RefWebDevРуки WTFhands.wtf
RefWebDevСтраницы перезагрузки операционных системtherestartpage.com
RefWebDevФил Зэт Щитfeel.thatsh.it
RefWebGLГодный WebGLyuichiroharai.com
RefWebGLЖидкая штука на WebGLyuichiroharai.com
RefWebGLЗалипательный калейдоскопmyshards.com
RefWebGLКод дудлыcodedoodl.es
RefWebGLЛава лампаcodepen.io
RefWebGLНеведомое отражение водыyuichiroharai.com
RefWebGLОхренительный WebGLcabbi.bo
RefWebGLПортфолио Du Haihangduhaihang.com
RefWebGLРадужная лужаiridescentpuddle.com
StockAggregatorПодборка сервисов фото, видео, иконок, цветовthestocks.im
StockAggregatorПодборка сервисов фото, видео, иконок, цветовallthefreestock.com
StockAggregatorПоиск картинокfoter.com
StockAggregatorПоиск картинокeverystockphoto.com
StockAggregatorПоиск картинокcanweimage.com
StockAggregatorПоиск материалов с лицензией Creative Commonsccsearch.creativecommons.org
StockAggregatorПриложение для поиска фото на фотостокахzoommyapp.com
StockAggregatorСток фотоphotopin.com
StockAggregatorСток фотоimagefinder.co
StockAggregatorСток фотоstocksnap.io
StockIconsГотовые SVG иконкиsvgicons.sparkk.fr
StockIconsИконки шрифтомfontawesome.com
StockIconsИконочный шрифтwebhostinghub.com
StockIconsОригинальные эмоджиemojione.com
StockIconsСток иконокuseiconic.com
StockIconsСток иконокfeathericons.com
StockIconsСток иконокiconstore.co
StockIconsСток иконокflaticon.com
StockIconsСток иконокicomoon.io
StockIconsСток иконокiconmonstr.com
StockIconsСток иконокicons8.com
StockIconsСток иконокlinearicons.com
StockIconsСток иконок материал дизайнаmaterial.io
StockMusicАрхив из 16000 бесплатных звуков производства BBC для некоммерческого использованияbbcsfx.acropolis.org.uk
StockMusicБиблиотека аудиозаписей на цилиндрахcylinders.library.ucsb.edu
StockMusicСток музыкиtunepocket.com
StockMusicСток музыкиicons8.com
StockMusicСток музыкиfreepd.com
StockMusicСток музыкиfreemusicarchive.org
StockPhotosБесплатные стоковые фотоrgbstock.com
StockPhotosИзображения картcommons.wikimedia.org
StockPhotosКоллекция пейзажей с Google Earthearthview.withgoogle.com
StockPhotosСток винтажных фотоnos.twnsnd.co
StockPhotosСток текстурflickr.com
StockPhotosСток фотоrealisticshots.com
StockPhotosСток фотоfreenaturestock.com
StockPhotosСток фотоbigfoto.com
StockPhotosСток фотоpixabay.com
StockPhotosСток фотоimages.superfamous.com
StockPhotosСток фотоreshot.com
StockPhotosСток фотоlifeofpix.com
StockPhotosСток фотоcupcake.nilssonlee.se
StockPhotosСток фотоjaymantri.com
StockPhotosСток фотоgetrefe.tumblr.com
StockPhotosСток фотоsplitshire.com
StockPhotosСток фотоstokpic.com
StockPhotosСток фотоstreetwill.co
StockPhotosСток фотоjeshoots.com
StockPhotosСток фотоpicography.co
StockPhotosСток фотоgratisography.com
StockPhotosСток фотоphotos.icons8.com
StockPhotosСток фотоlittlevisuals.co
StockPhotosСток фотоpicjumbo.com
StockPhotosСток фото едыfoodiesfeed.com
StockPhotosСток фото тревелbucketlistly.blog
StockPhotosФото Владимира Кудиноваgoo.gl
StockPhotosФото из Гугл Стритвью9-eyes.com
StockPhotosФото США 1935—1945photogrammar.yale.edu
StockVideoСток видеоcoverr.co
StockVideoСток видеоmazwai.com
StockVideoСток видеоvimeo.com
StockVideoСток видеоpixabay.com
StockVideoСток видеоsplitshire.com
StockVideoСток видеоvidevo.net
StockVideoСток видеоvideos.pexels.com
StockVideoСток видеоsplashbase.co
StockVideoСток видеоlifeofvids.com
TutorialCSSВизуальный гид по CSScssreference.io
TutorialCSSИзучение CSS Разметкиru.learnlayout.com
TutorialCSSЛейауты на CSSbook.mixu.net
TutorialCSSТуториал по CSS блендcss-tricks.com
TutorialDesignМетоды визуализацииvisual-literacy.org
TutorialJSВведение в jQueryjqfundamentals.com
TutorialJSМануал Правильный путь JSjstherightway.org
TutorialJSПовторное введение в JSdeveloper.mozilla.org
TutorialJSПодборка статей и видео для изучения JSsuperherojs.com
TutorialJSСкринкаст по Node.JSlearn.javascript.ru
TutorialJSСовременный учебник Javascriptlearn.javascript.ru
TutorialJSУчебник по процессингуhello.processing.org
TutorialSVGАнимация SVG Pathblog.teamtreehouse.com
TutorialSVGПрактическое руководство о SVG в вебеsvgontheweb.com
TutorialWebDevВведение в аналитикуsegment.com
TutorialWebDevВведение в WebGL на Three.jsdavidscottlyons.com
TutorialWebDevВведение по видео-технологиямgithub.com
TutorialWebDevГид по элементам для gethead.info
TutorialWebDevКак применять анимацию в зависимости от действийtobiasahlin.com
TutorialWebDevКниги для разработчиковdevfreebooks.github.io
TutorialWebDevНастройка и оптимизация Nginxgithub.com
TutorialWebDevОтветы на вопросы по Гитуfirstaidgit.io
TutorialWebDevРуководства Амперкиwiki.amperka.ru
TutorialWebDevЧеклист запуска проекта на WordPresscapsicummediaworks.com
TutorialWebDevPHP. Правильный путьgetjump.github.io

О подборке

Несколько лет назад в спецпроектах «Афиши» мы начали копить ссылки на тулы и библиотеки, которые пригождались в разработке. Работало это несколькими способами:

  • находили удачный ход и пробовали его применить
  • или придумывали штуку и искали эффект
  • или собирали proof of concept из чего придется (как например эта страничка)

Качали насмотренность, ускоряли разработку, боролись с вот этим «так нельзя, так не получится».

Ссылки кочевали из сервиса в сервис, продолжали собираться в чатиках, использовались в сайт-проектах. Наконец, собрал их тут в одном месте — просто ссылки, которые работают до сих пор + коротие аннотации.

Тулы в основном про фронтенд и разную дичь: компьютерное зрение, генерация звуков, оформление кнопок и ссылок, анимации переходов, кислотные референсы, фотостоки и подборки всего на свете. Значительная часть этих веб-кирпичиков использовалась на боевых проектах.

Категории

  • List — список годноты
  • Ready To Use — готовый к использованию код или тул
  • Ref — референс, дичь, чей-то сайд-проект, кайфец
  • Stock — стоки
  • Tutorial — годная статья

Темы
SVG, Animation, Text, WebGL и так далее — выделены особо в узкие темы.

CSS, JS, WebDev — обобщенные темы, не вошедшие в темы выше. Design, Colors, Icons, Images, Music, Patterns, Photos, Video — дребедень по темам. Aggregator — агрегаторы и метапоиск. Product — продуктовые штуки, касающиеся разработки.

Утаскивайте себе гугл-табличкой, тыкайте все подряд (лучше на компе, а не телефоне) и смотрите, что умеет веб.

Читайте рассылки

Moscow Coding School, CSS Animation Weekly, TLDR, Codepen, Panda

Поделиться
Отправить