• Где взять ссылки на красивые анимированные лендинги для образца?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Почти вся годнота проскакивает тут:
    www.cssdesignawards.com/wotd-award-winners
    www.awwwards.com/awards-of-the-day
    www.thefwa.com (у них неудобный просмотр)
    Соответственно можете и по месяцам/годам чекнуть.
    Вот несколько примеров, которые я скоро буду пристально изучать:
    https://www.chelseacollective.com/
    www.lempens-design.com

    Не относится к лендингам, но недавно около часа изучал его сайт и работы, очень крутой чувак:
    https://caferati.me/
    Ответ написан
    1 комментарий
  • Где можно посмотреть примеры красиво-удобно оформленных больших таблиц с данными?

    bukinion
    @bukinion
    Классный вопрос)))Сама задача типографическая, а ныне также и RWD-шная.
    Отличная гифка от vis0r вкратце показывает, что именно, и как делать.

    Если же по полочкам, да по ссылочкам, то.
    Прежде чем заниматься графдизайном таблиц, надо, если потребуется, переосмыслить их и привести информацию в понятному и простому виду: определить структуру информации, выбрать способ отображения, избавиться от всех повторов, есть много разных методов оптимизации таблиц — об этом лучше всех написано у Мильчина. Мильчин, — это советская школа еще, в универе по нему учили. Для вас конкретно: Глава 13. Таблицы и выводы. — Мильчин А., Чельцова Л. Справочник издателя и автора : редакционно-издательское оформление издания.

    Типографический аспект верстки можно посмотреть в 15 главе "Типографика. шрифт, верстка, дизайн", Феличи Джеймс, или что говорит "Новая типографика", Я. Чихольд:

    8d61eac53511465a82e76f27435e659d.PNG

    или "О Шрифте", Шпикерман:

    a4f4940a77cd403ba5a253cb1a09c886.PNG

    вот оформление таблиц от Эдварда Тафти:

    a062573f9d6747a5ae52c1c7125dfca3.PNG

    По дизайну и типографике таблиц, в вашем случае, можно попробовать оттолкнуться от Material Design. Там тоже интерактивные таблицы с чекбоксами рассмотрены.

    Еще стоит подумать об адаптивности таблиц: отправная точка, или посмотреть реализации в библиотеке паттернов Бреда Фроста, товарища в скафандре, автора подхода "Atomic Design".
    P.S.
    Только что наткнулся, на jQuery-плагин для таблиц: с адаптивностью! Плюс: сортировка, пагинация, настройка объема вывода строк и т.д.
    Ответ написан
    2 комментария
  • Подойдет ли Яндекс Диск Api для моего проекта?

    evnuh
    @evnuh
    Поиск Гугл помог мне, впусти и ты его в свой дом
    Вы тратите месяц на разработку, потом, наконец-то, появляется первый клиент и говорит:
    - Нет, знаете, я доступен только с 7 до 8 вечера, тогда я вам по почте и отвечу. Если нужно что-то оплатить, присылайте счёт на почту.
    А вы такой:
    -Ну как, я же, я писал, личный кабинет, вам нужно зареги....
    А он:
    - Вы знаете, у меня 30 контрагентов, вы мне как лишняя мозоль, мне от вас всего-то нужен был один лендинг на сайт, за 3000 рублей.
    Ответ написан
    3 комментария
  • Программа для заметок с функционалом html?

    @Penek
    Пользуюсь Evernote-клиентом 3.1 - только такой интерфейс меня устраивает
    Может заинтересует Kustomnote - самостоятельная прога, работающая нашлёпкой на евернот-сервис

    А вообще по под описание попадают записные книжки в стиле вики.
    Например, Scribbleton ( scribbleton.com ) может хранить свой файл заметок в облаке, наверное так же можно и на ФТП
    Ещё есть Wikipack ( wikipackit.com ) с маркдаун-редактором, хоть и онлайн, но может синхронизироваться через дропбокс
    Ответ написан
    Комментировать
  • Зачем нужны таск менеджеры GULP и GRUNT?

    Мне кажется тут не хватает образного примера:

    Вот купили вы стул. До ужаса дешевый, а потому без инструкции по сборке. Помучились час другой, но собрали. И тут выясняется, что ваша подруга купила такой же стул, а собрать ума не хватает, и просит она вас. Вы уже опытный - за пол часа управились. Вы бы и быстрее управились, но все никак не могли найти куда присобачить последний шуруп.
    Потом случилось страшное - почти вся ваша родня узнала о дешевых стульях, и помчалась их покупать, а за советом как собирать их, как вы уже догадались, обращается к вам. Конечно разъезжать из дома в дом по столь неуважительной причине вам не с руки, вот тогда вы написали инструкцию и разослали ее всем по факсу.
    Время шло, город слухами полнился, и вот уже совершенно незнакомые люди обращаются к вам с просьбой какой либо предмет мебели. До поры до времени инструкции спасали, но потом нахлынула толпа бабушек, которым ваши каракули как пергамент на древнеегипетском...
    На этом этапе вы решили уволиться с основной работы и открыть собственное дело по производству роботов-сборщиков (не путайте с роботами-сгибателями). Вам звонят бабушки, а вы им высылаете свои агрегаты, подчас загружая в них инструкцию по строительству дома.

    Вот и сказочке конец, а кто слушал, тот и gulp.

    Простите - пятница.
    Ответ написан
    Комментировать
  • Какая есть хорошая IDE для web-разработки?

    Sublime Text с соответствующим набором плагинов (для ftp например FTP Sync, для html emmet, ну и куча других плагинов на любой вкус и кошелек)
    Ответ написан
    Комментировать
  • Где брать заказы на сайты?

    anna-kl
    @anna-kl
    Все сайты для фриланса перечислили выше, но есть и другие варианты:
    1. Обзвонить или написать письма в разные фирмы у которых плохого качества сайты. И предложить сделать им новые сайты по низким ценам или совсем бесплатно. Только не занимайтесь глобальным спамом, а отнеситесь к каждому клиенту индивидуально - это чувствуется когда читаешь письма. Что вы получите взамен:
    - увеличится количество работ в портфолио,
    - люди которые будут заходить на эти сайты будут видеть логотип\ссылку на автора этих работ и могут к вам через них зайти и сделать заказ (так сказать создадите рекламные площадки),
    - сарафанное радио - через тех кому вы сделали сайты,
    - через какое-то время владельцы этих сайтов к вам вернутся чтобы вы что-то добавили\заменили на сайте тем самым у вас будут постоянные заказы.

    2. Сделать свой личный или профессиональный блог с баннером на портфолио. Этим вы повысите лояльность к себе и читающие вас люди будут заказывать у вас работы.
    Ответ написан
    Комментировать
  • Хочу научиться создавать плагины JQuery - с чего начать?

    unclechu
    @unclechu
    Я считаю, что начать стоит с освоения UMD (по ссылке также имеются примеры jQuery-плагинов), т.к. на сегодняшний день сколько-нибудь сложный фронт-енд как правило не обходится без AMD или CommonJS. Хорошим живым примером будет jQuery UI.
    Ответ написан
    4 комментария
  • Хочу научиться создавать плагины JQuery - с чего начать?

    Вот хорошая заготовка для написания плагина.

    /*
     *  jQuery Boilerplate - v3.3.4
     *  A jump-start for jQuery plugins development.
     *  http://jqueryboilerplate.com
     *
     *  Made by Zeno Rocha
     *  Under MIT License
     */
    // the semi-colon before function invocation is a safety net against concatenated
    // scripts and/or other plugins which may not be closed properly.
    ;(function ( $, window, document, undefined ) {
    
    		// undefined is used here as the undefined global variable in ECMAScript 3 is
    		// mutable (ie. it can be changed by someone else). undefined isn't really being
    		// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
    		// can no longer be modified.
    
    		// window and document are passed through as local variable rather than global
    		// as this (slightly) quickens the resolution process and can be more efficiently
    		// minified (especially when both are regularly referenced in your plugin).
    
    		// Create the defaults once
    		var pluginName = "defaultPluginName",
    				defaults = {
    				propertyName: "value"
    		};
    
    		// The actual plugin constructor
    		function Plugin ( element, options ) {
    				this.element = element;
    				// jQuery has an extend method which merges the contents of two or
    				// more objects, storing the result in the first object. The first object
    				// is generally empty as we don't want to alter the default options for
    				// future instances of the plugin
    				this.settings = $.extend( {}, defaults, options );
    				this._defaults = defaults;
    				this._name = pluginName;
    				this.init();
    		}
    
    		// Avoid Plugin.prototype conflicts
    		$.extend(Plugin.prototype, {
    				init: function () {
    						// Place initialization logic here
    						// You already have access to the DOM element and
    						// the options via the instance, e.g. this.element
    						// and this.settings
    						// you can add more functions like the one below and
    						// call them like so: this.yourOtherFunction(this.element, this.settings).
    						console.log("xD");
    				},
    				yourOtherFunction: function () {
    						// some logic
    				}
    		});
    
    		// A really lightweight plugin wrapper around the constructor,
    		// preventing against multiple instantiations
    		$.fn[ pluginName ] = function ( options ) {
    				this.each(function() {
    						if ( !$.data( this, "plugin_" + pluginName ) ) {
    								$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
    						}
    				});
    
    				// chain jQuery functions
    				return this;
    		};
    
    })( jQuery, window, document );
    Ответ написан
    Комментировать
  • Хочу научиться создавать плагины JQuery - с чего начать?

    dunmaksim
    @dunmaksim
    Технический писатель
    Чтобы создавать свои плагины, Вам нужно:
    - хорошо знать JS и его подводные камни;
    - знать, что такое шаблон "модуль" и уметь писать свои модули;
    - помнить, что jQuery.fn - всего лишь псевдоним для jQuery.prototype; добавляя свою функцию к этому свойству, Вы расширяете прототип функции jQuery, и важно ничего там не сломать;
    - следовать соглашению, по которому любой плагин jQuery на выходе должен вернуть исходный или модифицированный массив переданных на вход элементов (шаблон "цепочка", есть ещё антишаблон, следующий из этого, называемый "крушение поезда")

    Собственно, вот Вам заготовка модуля:
    (function ($){
        "use strict";
        function myFunction(items){
            return $(items).each(function(){
                $(this).text("Hello, jQuery!");
            });
        }
    
        $.fn.hellojQuery = myFunction;
    }(jQuery));
    Ответ написан
    1 комментарий
  • Где найти хороший учебник по JavaScript (типа Дейтл и Дейтл)?

    по JS хорошие книги: "JavaScript. Шаблоны проектирования" Автор: Стоян Стефанов, "JavaScript. Подробное руководство, 6-е издание" Автор: Дэвид Флэнаган.

    Еще добавлю сайт learn.javascript.ru/
    Ответ написан
    1 комментарий
  • С чего начать фрилансить?

    Тут Я уже писала про книги. Если нужно больше литературы то спрашивайте... Я начала с сайта фрилансим без работы ни дня не сидела, заказы были без перебоя. Там Я и месяц не просидела так как меня в компанию на постоянную и красивые проекты взяли в спб, удалёнка, всё отлично...
    Даже не ищите посредника с фриланса или какую то левую контору которая таким занимается, обычно они через третьи руки (если не четвёртые) заказы дают. Языки симейства C знать полезно, но фронт энду они не нужны особо. Js куда важнее.
    Выбирите себе препроцессор (если css в идеале и пишите стили уже не менее 6 мес)
    Почитайте про разные библиотеки js
    Посмотрите что такое mocha (js библиотека для тестирования)
    Ответ написан
    6 комментариев
  • Объясните что такое полиморфизм простыми словами ?

    Deerenaros
    @Deerenaros
    Программист, математик, задрот и даже чуть инженер
    Да ладно, парни. Ну хватит уже, к чему такие сложности? Берём и читаем. Вообще совсем не обязательно читать про архитектуру и абстракции именно по своему языку, хотя javascript в этом плане родился уродом.

    Ок. Полиморфизм ни в коем случае нельзя рассматривать отдельно от других фундаментальных понятий - абстракция, инкапсуляция и наследование. Объект и подобные прилагаются из аксиом (хотя это-то тоже аксиомы).

    Собственно, представим себе рядом стакан, кружку, чайник, кофемашину, велосипед и скейт. Что между ними всеми общего? Ну как минимум то, что они есть. То есть это - объекты, которые были созданы. Но как они были созданы? Скорее всего на заводе производителя по чертежам. Ок, чертежём назовём конструктор. Ну а класс? А что это такое? А его нет в нашей вселенной - эта сущность есть абстракция, что живёт лишь в наших мыслях. В реальном мире её нет и никогда не будет, такова уж физика - ей по барабану, что птицы и млекопитающие имеют дальних родственников - она лишь обеспечивает возможность естесственного отбора. А уж родственников друг другу находим мы, люди.

    С объектами и классами разобрались, а что же там с нашими стаканами и велосипедами. Мы уже поняли, что всё это объект, то есть грубо можно все объекты наследовать от какого-нибудь суперпредка, суперкласса, что и реализовано в некоторых языках. Но что другого общего между скейтом и стаканом, например? Конечно, можно углубляться и считать, что они все из молекул, и они все из твёрдых веществ. Однако это всё бред и СПГС, так что ответ прост - да ничего. То есть это совершенно разные объекты с совершенно разным функционалом. Более того - естесственно компьютерные модели и иерархии будут сильно отличатся от физик и химий. И это нормально, вопрос об адекватностях моделей ставиться лишь когда модель неадекватна, а до тех пор пилить можно что угодно, лишь бы работало.

    Вот. У нас есть супер-предок Object, от которого дефолтно наследуются все объекты. Допустим, то что объекты состоят из атомов и есть то, что наследуют все объекты. Но все дополнения и правки - полиморфизм. Так, из атомов мы слепили колёса и приделали на доску - ок, это скейт. На него можно встать и катиться, а сильно извернувшись и полетать в трёх метрах над землёй, прямо таки излучая своё яркое эго. В то время как стакан - это мы слепили из атомов плотную ёмкость, из которой вода не выливается под действием силы тяжести. И прямое применение стакана - налив воды опрокинуть его над ртом, чтобы вода вытекла прямо в желудок. Так делают настоящие пацаны, не заботясь об икоте или страхе утонуть, так что вот - полиморфизм.

    Однако что с остальным? У нас ещё абстракция, инкапсуляция и наследование. Ок, начнём с наследования, так оно наиболее близко. Вот что у нас общего между стаканом и кружкой? Ну в оба можно налить воду, но у кружки есть ручка чтобы держаться. То есть можно придумать некий общий класс - ёмкость. Однако что это за класс? Можно например за этот класс взять стакан, тогда все ёмкости по дефолту стаканы, а всё остальное - видоизменённые стаканы. Но кому-то больше нравяться кувшины, например некоторые чики насят их на голове, считая что это удобно. Ну и пусть носят, но как-то же решить надо, что главнее и идеальнее. Так вот - недостяжимый идеал и есть главный - это называется абстрактный класс. То есть ёмкость, что невозможно создать, для которого нет полного чертежа. А все чертежи, что дополнили до полного - есть наследованные классы от класса ёмкость.

    Тут мы подошли к абстракции. Вот такое иерархическое наследование приводит нас к, возможно главной, идее ООП. Вот мы взяли и выделили всё, куда можно налить воду в отдельный класс, нарисовали общий чертёж, но специально не доделали его, оставив зазор для будущих творцов, и назвали чертёж - ёмкость. Тысячи лет изобретатили всех миров создают свои ёмкости, одна лучше другой. Для разных людей - по разному, конечно. Но каждый раз группировать молекулы стекла определённым образом - непростая задача. Поэтому ремесленники пошли на хитрость, они создали тайный совет ремесленников мира и решили делиться друг с другом своими наработками. То есть создавать мелкие чертежи и объявлять классом, например, извлистой ручки в форме ленты Мёбиуса, например. Возможно такая ручка удобно только инопланетным существам, но чертёж создан и к нему можно ссылаться при создании своего чертежа. Таким образом мы абстрагируемся от низкоуровневой задачи "формирования ёмкостей посредством перемещения молекул" к "конструированию ёмкости посредством совмещения деталей, элементов". Это и есть абстракция.

    Но мы подошли к последнему пункту - инкапсуляция. Она неразрывна с абстракцией, и по сути благодаря ей она и работает. Инкапсуляция - это своеборазный клей (или синяя изолента), которым склеивают разные чертежи в один. То есть совмещение деталей для создания своей - это и есть инкапсуляция. Причём при совмещении мы можем не описывать детали этого совмещения (то есть члены класса могут быть приватными), таким образом помогая абстрагироваться тем, кто этот чертёж использует. Вот посмотрим на чайник - что это такое? Это стакан (или кружка) к которому снизу (а может внутри по середине?) приклеен нагревательный элемент. Пустив по нему ток, согласно инкапсулированному в нагревательный элемент закону Ома, будет выделяться тепло и нагреваться вода. А кофемашина? Это куда более сложное устройство, с множеством насосов, ёмкостей, шлюзов, измельчителей и чайников. И всё склееное клеем. А может синей изолентой. Это снова инкапсуляция.

    Таким образом, абстракция невозможна без инкапсуляции и наследовании, как невозможен полиморфизм без, собственно, наследования. Ну а полиморфизм невозможен ещё и без инкапсуляции, которая банально бесполезна без наследования и полиморфизма. Вот такие тут треугольники с пирогами. Жаль только про пирог наврали. И про день рожденье.
    Ответ написан
    3 комментария
  • Как максимально быстро разобраться с HTML, CSS, JS?

    StrangeAttractor
    @StrangeAttractor
    Я всегда восхищался сайтом w3schools.com. Много лет назад (когда HTML4 ещё только набирал популярность) изучил по нему HTML, CSS, JS, XML, RDF, OWL, XSLT, позже этот же сайт помог мне быстро въехаться в ASP.Net. Там одновременно и не втирают элементарные вещи подолгу и не обделяют их вниманием (вдруг кто-то таки не знает). Что знаешь можно пропустить в один клик - там подача материала в формате визарда (как при инсталляции программ), кратенько и понятно по каждой атомарной теме, без принудительного прохождения каждой. В последнее время он стал чуть посложнее в плане собственной юзабилити, но и материалов добавилось. В Сети можно найти несколько сайтов-клонов w3schools с темами, которых нет на оригинале.

    Профессионалом там, конечно, не станешь, но чтобы быстро въехать в тему, понять что есть что, к чему, как и где, заложить "скелет" понимания для дальнейшего обтягивания опытом и знаниями с помощью собственной практики и изысканий - ничего лучше я не видел (те же штуки типа codeschool грешат затянутостью и негибкостью, как мне кажется).

    Также настоятельно рекомендую найти хороший редактор с мощным автодополнением и подсветкой. Время, когда всё имело смысл всё держать в голове прошло, как и время справочников-руководств, по сути - гораздо удобнее когда ты начинаешь писать что-то и редактор сразу тебе подсказывает какие есть варианты (со временем оно и запоминается отсюда). В этом плане я не видел ничего лучше (да и такого же, хотя бы), чем продукция JetBrains (в Вашем случае - WebStorm) и VisualStudio (с которой Вы, как я понимаю, уже знакомы), хотя знатоки рассказывают о чудесах EMACS и VIM.

    Ну а дальше - рыскать по Сети в поисках интересных статей, книг, примеров.

    По части JavaScript и jQuery мне не известно ничего лучше, чем творчество Антона Шевчука.

    По Bootstrap я бы сам не отказался от хорошей наводки.
    Ответ написан
    1 комментарий