• Что интересного есть в вашем стандартном шаблоне?

    bukinion
    @bukinion
    Начал бы с того, что подобные сниппеты идеально хранить, шарить и даже командно работать в Gist (от GitHub), у Gist, кстати есть приложение на Хром (работает и оффлайново, что плюс), он легко встраивается в Sublime, и даже есть в Web Storm. Воркфло изрядно ускоряется с этим.

    подсветка полей... в приведенных примерах для полноты не хватает select, кто-то забывает button)) Главное, что бы при переписывании нативного outline для :focus, для него находилась замена. Прежде всего потому что будет страдать accessibility.

    более полный перенос слов:
    @mixin word-wrap() {
          -ms-word-break: break-all;
          word-break: break-all;
          word-break:     break-word;
          -webkit-hyphens: auto;
          -moz-hyphens:    auto;
          hyphens:         auto;
    }


    последнее не просто ломает слова, в случае неумещающихся, а именно натуральный, браузером, перенос слов, необходимо только:

    <html lang="ru"></html>

    Добавить язык.

    Или наоборот в случае когда на необходима только одна строчка текста:

    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    Вообще типографику люблю, поэтому есть и такое еще:

    .like-inline:after {
    	content: '\A';
    	white-space: pre;
    }


    Это на случай, если нам надо сделать перенос строки после каждого инлайнового элемента. Типовой пример, есть у нас список определений, а мы хотим после каждого, определения, делать разрыв, т.е. термин, что бы был с новой строки.

    dl
         dt Артикул
         dd 1729110 
         dt Рост
         dd 164


    Или нужно ряд ссылок оформить как список.

    Класс для инлайн-блоков (что-то их недоиспользуют, а они намного круче float):

    .ib {
         display: inline-block;
         vertical-align: top;
         zoom: 1;
         *display: inline;
    }
    Ответ написан
    Комментировать
  • Что изучать: Ruby или Node.js?

    MarcusAurelius
    @MarcusAurelius Куратор тега Node.js
    автор Impress Application Server для Node.js
    Берите ноду, на ней тоже уже все есть готовое в NPM, не меньше, чем на RoR, но не подсядьте только на "все из коробки", главное определиться для со стеком технологий и адхитектурой, это важнее, чем язык, сейчас разрабатывают больше даже на фреймворках, нежели на языках. Определитке задачи для себя, что Вы хотите решать на ноде, что писать, для чего использовать: обычные сайты или CMS, SPA-сайты сайты или SPA-приложения, Rich-приложения, адаптированные под мобильные или будете заниматься только backend и работать в команде с кем-то, кто будет писать frontend. Нужно выбирать все в комплексе, СУБД, фреймворк для браузера, серверную ОС, варианты хостинга. Я рекомендую такой стек: CentOS, Node.js, MongoDB / PostgreSQL, React. Какие ссылки советую:
    1. Моя статья на Хабре - habrahabr.ru/post/204958
    2. Мой ответ на вопрос по фреймворкам для ноды тут на Тостере - Подсоветуйте фреймворк для node?
    3. Видео-уроки по node.js - learn.javascript.ru/nodejs-screencast
    4. Про Impress - habrahabr.ru/post/247543
    5. Разнообразные ответы по поводу выбора языка - Актуальный язык программирования
    Ответ написан
    1 комментарий
  • Что интересного есть в вашем стандартном шаблоне?

    @bogomazov_vadim
    Не знаю насколько интересно, но может кому пригодится. Частями найдено на просторах интернета, использую в своем template + normalize.
    Заменяем длинный текст placeholder многоточием:
    input[placeholder]          {text-overflow:ellipsis;}
    input::-moz-placeholder     {text-overflow:ellipsis;} 
    input:-moz-placeholder      {text-overflow:ellipsis;} 
    input:-ms-input-placeholder {text-overflow:ellipsis;}

    Скрываем placeholder при фокусе:
    :focus::-webkit-input-placeholder {color: transparent}
    :focus::-moz-placeholder          {color: transparent}
    :focus:-moz-placeholder           {color: transparent}
    :focus:-ms-input-placeholder      {color: transparent}

    Курсор для label + отмена раздражающего выделения при клике:
    label {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    Только вертикальный ресайз для textarea (horizontal часто ломает диз):
    textarea {
    	resize: vertical;
    }

    Убираем дефолтный курсив у address:
    address {
    	font-style: normal;
    }

    Убираем подсветку полей:
    input:focus,
    textarea:focus {
    		outline: none;
    }

    Адаптивные img:
    img {
    	height: auto;
    	max-width: 100%;
    	width: auto\9;
    }

    Адаптивные видео:
    .video {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    .video iframe,  
    .video object,  
    .video embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    Перенос слов:
    .break-word {
            word-wrap: break-word;
    }

    Обнуляем списки глобально, т.к. часто используется для навигации и проч., в области контента можно задать другие стили.
    ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }

    Нумерованный список с подпунктами:
    ol {
    	counter-reset: list1;
    
    	li:before {
    		counter-increment: list1;
    		content: counter(list1) '. ';
    	}
    
    	ol {
    		counter-reset: list2;
    
    		li:before {
    			counter-increment: list2;
    			content: counter(list1) '.' counter(list2) '. ';
    		}
    
    		ol {
    			counter-reset: list3;
    
    			li:before {
    				counter-increment: list3;
    				content: counter(list1) '.' counter(list2) '.' counter(list3) '. ';
    			}
    		}
    	}
    }


    update дополнительно стили для печати

    P.S. Что-то конечно юзается не всегда, по желанию лишнее удалить, замечаниям и критике буду рад.
    Ответ написан
    5 комментариев
  • Есть ли возможность в MacOs создать ярлык для Launchpad, чтобы открывалась веб-страница?

    DevMan
    @DevMan
    Для лаунчпада не в курсе, а на дашборде можно замутить wbclip (если окошко небольшое).
    Можно сделать ярлык на рабочем столе.

    Ну а для некоторых сайтов я пользуюсь fluidapp.com и получаю отдельное "приложение".
    Ответ написан
    2 комментария
  • Каким должен быть собственный проект для устройства на работу?

    5angel
    @5angel
    Фронтенд-лид
    Свои проекты показывать можно и нужно. А лучше всего – не просто показать, а рассказать о том, как шла разработка, с какими проблемами вы столкнулись и как их решали. Если вы таким образом хотите повысить свои шансы на получение работы, то проект должен показать, что вы хорошо владеет предметом как с теоретической, так и с практической точки зрения. Я говорю здесь даже не о Ruby, интересные вещь можно написать на любом языке.

    На что нужно обратить внимание:
    Архитектура. Грамотно спроектированная система – залог успеха всего предприятия.
    Производительность. Здесь можно показать как алгоритмическую подготовку и умение работать с базами данных, так и знание особенностей конкретного языка.
    Тестирование и документация. Покрытие тестами и описание функционала, начиная от основных модулей и заканчивая отдельными функциями – тот идеал, которого стараются (но не могут) достигнуть во всех уважающих свою разработку компаниях.

    Если у коллег есть какие-либо дополнения, прошу (:
    Ответ написан
    11 комментариев
  • Как определить свой уровень программирования?

    Мне нравится простая аналогия которая ближе к бизнесу чем к технологиям. Например есть задача — сварить борщ. Профессионал уточнит несколько нюансов: с пампушками или свекольник, капуста квашенная или свежая. Парню с небольшим, но опытом понадобится рецепт: сварить мясо, сделать заправку и т.д. Новичок учится и ему нужно описывать весь процесс: набрать кастрюлю воды, поставить на плиту, etc.
    Ответ написан
    Комментировать
  • Есть ли сайт содержащий список видео для бэкграунда?

    laska
    @laska
    PHP/JS разработчик
    Во многих случаях дешевле будет снять самому. Свитер, макбук и диван есть у всех)
    Ответ написан
    4 комментария
  • Как правильно научиться PHP, чтобы потом не жалеть?

    miraage
    @miraage
    Старый прогер
    Ответ написан
    Комментировать
  • Как автоматически обнаружить и почистить свойства css, которые не используются?

    Sanasol
    @Sanasol Куратор тега JavaScript
    нельзя просто так взять и загуглить ошибку
    Для FF такое есть. ЗАпускаешь и начинаешь гулять по всем страницам сайта, и оно смотрит какие стили используются, а какие нет.

    https://addons.mozilla.org/ru/firefox/addon/dust-m...
    Ответ написан
    Комментировать
  • Как узнать, что у пользователя прервалась связь websocket?

    @Fenomen51
    После таких идей потом возникают непонятные нагрузки.. потом захочется пинговать с частотой 10 раз в секунду, потом передавать поточно кучу другого хлама.
    В то время как хорошо бы задаться вопросом, на фига узнавать об этом?
    Если Вы ему ничего не посылаете, зачем Вам знать тут ли он, если посылаете и он не ответил, то зачем ещё чего-то пинговать?
    Ответ написан
    Комментировать
  • У какого JS игрового движка наибольшая плавность работы?

    @Elizavetta
    Matroid: gamedev/js-разработка
    А чем хорош Quintos, почему его выбрали?
    Основные движки здесь html5gameengine.com
    Конечно, в список могут не входить новинки, зато включены уже проверенные варианты.
    Ответ написан
    Комментировать
  • В чем же сила Node.js ?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Сила в том что все знают JS. Кто может писать на PHP/Ruby/Python? Те кто пишут на PHP/Ruby/Python соответственно (и скажем по 10%-15% от количества каждых кто может писать хотя бы на двух из трех языков. Кто может писать на JS? Все фронтэндеры + добрых каких 60%-70% от всех этих php/ruby/python/java/c# разработчиков...

    Что это дает? ОГРОМНЕЙШЕЕ комьюнити... большая часть быдло конечно но засчет огромнейшего количества разработчиков инструментарий начал просто очень быстро развиваться. Кому нужен инструмент написанный на Ruby если его можно написать на JS и его сможет поддерживать на порядок больше людей?

    Вопрос производительности по началу стоял как основная фишка языка. Все кричали наконец-то, V8 на сервере, асинхронность! Самый быстрый интерпритируемый язык на планете и все такое. Но на деле все чуть сложнее. JS реально быстрый. По сравнению с тем же Ruby он в разы быстрее! Но по большому счету на это адекватным людям плевать с высокой колокольни, так как js нифига не асиинхронный. JS работает в один поток. Причем в этом же потоке работает и сборщик мусора. Если он начнет все чистить - все замрет. Обычно это не сильно большая проблема но как-то забавно. Асинхронное в JS только работа с IO которая на плюсах/си реализована...

    Революционности так же нету. JS на сервере не новая идея и практиковался еще лет за 5 до. Просто это была очень удачная реализация да ктому же если бы не V8 то так же все было бы не так круто.

    Что до сравнения с PHP и т.д. - это инструменты для разных сфер. PHP - разработка web-сайтов. node.js - демоны, инструменты разработки, шины данных, доставка данных и т.д. Для всего остального PHP подходит больше. Есть правда пара интересных проектов главная цель которой устранить дублирование кода на сервере и на клиенте.... но подходят эти наработки пока только для очень простых проектов (хотя все относительно).

    Если вас прям плющит от нового, быстрого, современного, с клевым дизайном и тоже где повлиял гугл - golang.
    Ответ написан
    11 комментариев
  • Ценится ли IT-специалист, который умеет все?

    SADKO
    @SADKO
    aka -=SADKO=-
    Ничего не ценится в сферическом вакууме.
    Тут важен контекст конкретных реалий работодателя.
    А широкий кругозор если где и ценится, то в управлении и предпринимательской деятельности.
    Я сам аццкий многостаночник, к сожалению сравнительно не давно начал понимать, как этим правильно пользоваться :-) Да, иногда полезна способность самостоятельно склепать не то что прототип, а то и вовсе продукт. Но куда полезней способность адекватно понимать и оценивать различных специалистов, организуя их работу, а так-же осуществлять эффективную коммуникацию там, где специалисты на это не способны.
    Это куда выгодней и круче чем делать всё самому, ибо и сделается больше, и сделается лучше (специалист в подходящей ситуации всегда лучше), и всегда понятно почему, кому и за что деньги платятся...
    Ответ написан
    1 комментарий
  • Хочу научиться создавать плагины 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 комментарий
  • Linux: прицепить обратно консоль к процессу?

    3vi1_0n3
    @3vi1_0n3
    Вопросу 3 года уже, тем не менее:
    reptyr is a utility for taking an existing running program and
    attaching it to a new terminal, and is particularly useful for moving
    a long-running process into a GNU screen session.
    Ответ написан
    1 комментарий
  • Nginx redirect from http to https?

    @metajiji
    Согласно официальной документации рекомендуют использовать такую конструкцию:
    server {
            listen 80;
            server_name example.com;
            return 301 https://$server_name$request_uri;  # enforce https
    #        rewrite ^(.*) https://www.example.com$uri permanent;
    }
    Ответ написан
    6 комментариев
  • 1 папка и 10 000 картинок или 10 000 папок и по одной картинке в каждой?

    хорошая практика, применяющаяся много где, например у Microsoft
    вычисляем md5 у файла - 2274facdbca56499fe397344c633e25a
    файл кладем в папку avatars/227/4fa/cdb/2274facdbca56499fe397344c633e25a.jpg
    Ответ написан
    9 комментариев
  • Как получить данные из сессии без session_start()?

    ScorpLeX
    @ScorpLeX
    Сессии хранятся в файлах, можно открыть как файл и распарсить с помощью session_decode, но нужно будет все равно сделать session_start перед session_decode, обнулив сессию перед этим например.

    PS вообще это бред, используйте базу, что бы хранить данные.
    Ответ написан
    Комментировать
  • Выбор CMS для начинающей студии в условиях современного рынка?

    @edogs
    У Вас в топике нет самого главного — на какую ЦА Вы нацелились.
    Разработчиков, дизайнеров, верстальщиков… персонал — можно найти под любую цмс.
    Неправильно выбрать цмс, а потом ходить и спрашивать «не надо ли Вам сайт на ВП».
    Правильно решить какая ЦА Вам интересна, а потом прийти сюда и спросить «какая цмс подходит для этой ЦА».
    Битрикс подходит для средне-крупных белых заказчиков, юр.лиц. И не важно визитка это или крупный ИМ. Так же учтите, что за счет партнерки битрикса есть возможность получать до 40% от цены цмс купленной клиентов практически сразу.
    Неткат для мелко-средних белых заказчиков. Тем кому нужен «бренд» по разным причинам, но за битрикс оплачивать не хочется. На откатах тут опять же не заработаешь:)
    Джумла, как и ВордПресс для одноразовых клиентов или клиентов которым нужны одноразовые сайты.
    Друпел он вообще не для клиентов, он для разработчиков:) Просто зачастую быстрее (и дешевле) написать решение с нуля, чем делать его на друпеле.
    Про модх ничего не скажем, как-то мимо нас прошел.

    Мы бы для начинающей студии выбрали бы битрикс и ВП, из соображений ВП — для создания объема портфолио и битрикс для создания серьезного имиджа. Соответственно окучивали бы две ЦА — средние фирмы в локальном городе для битрикса и мелких заказчиков на фрилансе для ВП. Но если Вам не интересна ни та, ни другая аудитория — то и инструменты надо выбирать другие.
    Ответ написан
    1 комментарий