С тегами:

web

Любые посты за всё время, сначала свежие, с любым рейтингом
Найти посты
сбросить
загрузка...
26
Легкий способ увидеть сохраненный пароль в браузере
16 Комментариев в Web-технологии  

Не претендую на уникальность, просто надеюсь кому-то поможет:)


Данная инструкция справедлива для всех браузеров на движке хрома.

Итак:

1. Жмем правой кнопкой мыши на поле с интересующим нас паролем

2. Выбираем пункт "Посмотреть код элемента."

Легкий способ увидеть сохраненный пароль в браузере web, пароль, говнокод, pikaweb

Выбираем вкладку Console

Легкий способ увидеть сохраненный пароль в браузере web, пароль, говнокод, pikaweb

Пишем:

$0.value

или

$0.type = "text"


В первом случае пароль отобразится у вас в консоли, во втором прямо в поле ввода.


Спасибо за внимание, и не забывайте свои пароли!

45
Оптимизация
30 Комментариев в Web-технологии  
Оптимизация
853
Когда пропал твой девелопер
68 Комментариев  

Кратко: был нанят (пусть будет Алексей) делать сайт. Дедлайн - 1-2 месяца. Растянул на 4, а потом пропал с концами и деньгами. бывает... Я вернулся на фл.ру искать нового и вот, только прочитал - последнее сообщение от моего (пусть будет Алексея) горе-девелопера.

Когда пропал твой девелопер web, фриланс, мошенники, горы

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

1439
Выбирайте модули на сайт с умом
36 Комментариев в IT-юмор  
Выбирайте модули на сайт с умом
603
Как меня неудачно хотели кинуть
29 Комментариев  

Когда то давно, во времена студенчества была у нас своя маленькая web-студия. Делали сайты и дизайнили софт-интерфейсы.

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

Проходит пара недель, я благополучно делаю дизайн сайта и наполняю контентом. В назначенный день звонит "заказчик" и просит показать как продвигаются дела. Я соглашаюсь и заливаю страничку на хостинг. Через 2 часа опять звонок с просьбой встретиться обговорить детали...

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

И так, кульминация всей этой темы произошла на следующее утро, когда позвонил разъяренный заказчик и гневно спрашивал где ЕГО сайт!!! Ух сколько тогда я узнал про себя много нового, что я аферист, мошенник и вообще нехороший человек. А сайт его был всё так же на том же месте где и был раньше, т.е. в моем ноутбуке, с которым я был на встрече. Просто у меня на нем был установлен web-сервер и настроен он был таким образом, что когда я в браузере набирал адрес их сайта, то видели они мой север, а на их сайте лежала первая страничка сайта в виде простого html файла. Т.е. когда они увидели результат двухнедельной работы на своем сайте, реально они видели только эту статичную страничку, а когда смотрели на моем ноуте, то видели полнофункциональный сайт. В общем они после нашей встречи прикинули, что сайт рабочий, хороший и уже залит к ним на хостинг, решили просто кинуть нас и меня в частности. Утром ни один пароль от сайта не работал. Панель управления, FTP, MySQL - на всё были изменены пароли. А после того как они залезли на хостинг они увидели там одиноко лежащий файл index.html и несколько изображений.


P.S. через несколько недель у них таки появился свой сайт, только попроще и гораздо дороже.

2839
А вот сейчас обидно было...
172 Комментария  

Моему деду 88 лет. Инженер-строитель. За плечами уже имеется огромный жизненный опыт, а пытливый ум всё ещё остался остр и голоден до новостей и диковин.


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


– Вот такие "книги" - интернет страницы я и создаю! – ну, вполне так достойно, подумалось мне.

– То есть, их вот так, на самом деле, нет?

– Почему нет? Есть! Их можно распечатать на бумагу, если нужно, но хранятся они все в сети...

– Хорошо. Значит ты делаешь несуществующие книги, которые где-то там в сети, но, если про них не спросить – не узнаешь, что они есть?

– Ну не совсем так, они существуют всегда, просто надо знать, что ты ищешь...

– Ага, ладно. А нормальная работа у тебя есть? – спросил меня дедушка.

2175
Я люблю свою работу
129 Комментариев в Web-технологии  
Я люблю свою работу
1434
Классика жанра
241 Комментарий в Лига фрилансеров  
Классика жанра фриланс, сайт, сайтостроение, web

И таких вижу каждый день)

3005
Докажи , что программист.
134 Комментария в Лига фрилансеров  
Докажи , что программист.
3746
Ответ моего начальника очень эмоциональному потенциальному заказчику
212 Комментариев  
Ответ моего начальника очень эмоциональному потенциальному заказчику
533
Подборка видеоуроков по дизайну соц.сетей
15 Комментариев в Графический и Веб-дизайн  
Показать полностью 2
29
HTML-пират, верстальщик
8 Комментариев в Web-технологии  

Жена придумала HTML-пирата. Он скачал sublimetext с торента.

Пришлось нарисовать)

HTML-пират, верстальщик сайт верстка, HTML, web, FrontEnd, css, pikaweb
62
Веб-частушки
12 Комментариев в IT-юмор  

Попросили меня на работе сформулировать "минимальные требования для сайта", то есть что наша студия должна делать по умолчанию, начал я серьезно, но потом у меня одна строчка сложилась в рифму и тут Остапа понесло... перед прочтением обязательно включить минус из частушек Бандурина и Вашукова. Не судите строго пишу ради хохмы 

- Чтобы сайт отображался на смартфоне и ПК

Ты воспользуйся Bootstrap-ом – будет жизнь твоя легка…



- Чтобы от модальных окон было больше прока

Закрывать их мы должны – кликнув мимо блока…



- Телефоны и эмейлы – ссылкой оформляй

Атрибуты tel: и mailto: в href ты добавляй…



- Ссылки с сайта нас уводят? – в новой вкладке открывай!

Атрибуту target=”_blank” в ссылке место дай!



- На объект курсор навелся – анимацию вставляй,

в стили свойство pointer срочно добавляй.



- Долго грузится твой сайт – ты ужми картинки,

если скорость не устроит, подключи... прелоудер.



- Долог твой Ajax-запрос? – анимацию вставляй

(хочешь css используй, хочешь гифку запихай)



- Лазая в глубинах сайта, можно заблудиться

Добавлять должны мы кнопку, чтобы возвратиться…



- В адрес сайта ввел херню – тронулся рассудком

То 404 покажи ублюдку



- Если наш заказчик в сайте текст не может изменять,

то ошибок в орфографии ты не должен допускать



- Сайт закончил и клиенту собираешься отдать?

Перед этим размести ты в футер копирайт!

Показать полностью
2658
Гравитационная JS залипалка.
463 Комментария  
Гравитационная JS залипалка. гравитация, залипалка, web, JavaScript

Работаю в сфере web разработки. Сделал для себя залипалку на случай неожиданной скукоты. С уверенностью могу сказать - не рекламы ради, страница не несет в себе никакой коммерческой подоплеки, делал для себя.
Эмуляция гравитации - есть, погрешность в расчетах тоже есть, делалось не ради точности или докторских работ.

Темная энергия - есть кривая реализация.

Кликайте мышкой для создания частиц. Кнопка "do grid" заполняет все равномерной сеткой частиц. Ползунок "Gravity" изменяет гравитационную постоянную. "Reset force" - очистка всех векторов сил.

Залипайте http://quarians.ru/gravity

Физики - извините за формулы, визуально работает.
Коллеги - извините за код, "я прогер - я так вижу".

IE'шники - отстаньте, для души делал, не для вас.

78
Создание Landing page с нуля. 3 видеоурока
37 Комментариев в Графический и Веб-дизайн  

Записал серию видеоуроков по созданию Landing page.
В уроках используется сетка bootstrap , скачать сетку можно тут https://yadi.sk/d/26BnO-LBv6TYR

Первый урок

Второй урок

Показать полностью 1
28
Головоломка ко дню программиста от mail.ru
88 Комментариев в Web-технологии  

Прошел головоломку от mail.ru. Ушло на это 2,5 часа (долговато). Думаю может быть интересна еще кому-нибудь в сообществе.


Ссылка головоломку:

https://puzzle.mail.ru/


Описание:

Для прохождения игры вам понадобятся знания web-технологий, информатики, любой текстовый и графический редактор.


Головоломка состоит из 25 уровней. На каждом уровне необходимо выяснить секретное слово и ввести его в поле ввода. Кодовое слово может быть ответом на загадку или спрятано где-то на странице (очень часто — в исходном коде страницы).


Количество попыток неограничено. Для выхода из игры наберите quit в поле ответа. Вы можете продолжить законченную игру позже.


И пусть удача всегда будет с вами!

132
Вдохновение для Web-дизайна
8 Комментариев  

Решил поделиться сервисами, в которых я ищу вдохновение перед тем, как начать рисовать дизайн сайта. Многие из них очевидны, другие возможно нет. Хотелось бы, что бы и вы поделились своими источниками вдохновения.


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


1. https://www.behance.net/

Вдохновение для Web-дизайна web, web-дизайнер, веб-дизайн, сайтостроение, вдохновение, сайт, длиннопост

2. https://dribbble.com/

Вдохновение для Web-дизайна web, web-дизайнер, веб-дизайн, сайтостроение, вдохновение, сайт, длиннопост

3. http://pinterest.com/

Вдохновение для Web-дизайна web, web-дизайнер, веб-дизайн, сайтостроение, вдохновение, сайт, длиннопост
Показать полностью 5
376
7 Русскоязычных каналов YouTube по веб-дизайну
27 Комментариев в Графический и Веб-дизайн  

Идея данного темы появилась после просмотра поста  @COSMOBATHuK

Который выложил полезный материал с подборкой каналов по фотошопу за что ему огромное спасибо. Жаль, что все они были англоязычные. Скорее всего потому что в русскоязычном сегменте не так много действительно качественного контента в этой теме.

Я решил сделать нечто похожее, с подборкой которой время от времени пользуюсь сам.

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

1. Loftblog

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

Смотреть канал ->

2. Данил Фимушкин


На своем канале Данил делает уклон именно в веб-дизайн. Он рассказывает о различных фишках в дизайне, разбирает сайты на ошибки. Так же представлено большое количество уроков по Adobe Muse


Показать полностью 5
89
[Must know] Что нужно знать web-разработчику в 2016?
45 Комментариев в Web-технологии  

Недавно наткнулся на одно видео, где была информация о том, что нужно знать web-разработчику в 2016-2017 году. Решил поделиться с вами. Видео в самом конце (на инглише). Ниже текстовая сокращенная версия с моими комментариями (в виде цитат).

Для тех кто не любит видео-формат или не может в инглиш.


TL; DW (краткий пересказ):

В видео есть 3 ветки:

1) Не зависимо от того back-end или front-end

2) Front end

3) Back end


Первая ветка. Включает в себя такие вещи:

- FTP и работа с хостингом (залить, выгрузить, работа с cPanel и т.д.)

- Терминал (командная строка)

- SSH

- Основы GitHub

- Как происходить связь между клиентом(юзером) и сервером

- RESTful


Вторая ветка. Начнем с основ для фронта:


- Текстовый редактор

Автор выделил 3: Atom, Sublime, Brackets.

Я бы еще добавил Emmet. Emmet не текстовый редактор, а плагин, который ускорит вашу верстку в разы. Но придется потратить немного времени на то чтобы разобраться


Большой разницы при выборе редактора нет. Так что особо заморачиваться не стоит.

- HTML

- CSS

- JS

В видео автор утверждает, что jQuery учить необязательно и можно сосредоточиться на родном JS и дальше уйти во фреймворки.

Я все-таки не соглашусь. jQuery все еще остается самой популярной библиотекой на JS (jQuery не фреймворк). При этом jQuery очень легкая в изучении и имеет просто тонны документации (и горы мусорных обучалок на Youtube).

Дальше идет продвинутый фронт:


1)ES6/ES2015 (Babel)

Как и любой язык JS (ECMA-Script) не стоит на месте. Если руки чешуться уже писать на ES6 (ибо var, let, const и еще много фич) то Babel (преобразователь ES6 в ES5) в помощь.


2)CSS инструменты.

-Препроцессоры (SASS/LESS/Stylus)

-CSS фреймворки (Bootstrap/Foundation)

-Адаптивный дизайн в CSS


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


Самые банальные примеры использования препроцессоров. Переменные. Загнали цвета в переменные. И если вдруг, дизигнеру придет в голову сделать серый-черным. Вы просто меняете значение переменной. И вуаля у вас во всем проекте серый стал черным. Функции. Использовать функции можно очень разнообразно. Но начнем с простого. Чтобы не писать все префиксы для box-shadow, transition и других CSS3 фич можно использовать функции (mixin). Пишеться функция, которая принимает значение, например: "transition: all .4s ease" и выдает это же значение, только с бразуерными префиксами.


Еще стоит отметить, что есть SASS, а есть SCSS. Разница? Только в синтаксисе. В SASS нет скобок "{}". Совсем нет. И это многих смущало посему появился SCSS.Тот же SASS только со скобками и более приближенным к CSS синтаксисом. Отличие не только в скобках, но это основное.

3)Интсрументы сборки


-Таск ранеры

Gulp и Grunt. Самые популярные. Каждый выберет то что любит больше. Лично я фанат Gulp.

Что такое таск ранеры? Это такая полезная вещь, которая позволяет настроить автоматизированные задания (таски). Простые примеры: компиляция SASS|LESS в CSS сразу после того, как файл SASS|LESS был сохранен. Т.е. ctrl+s - упаковнный CSS. Можно пойти еще дальше и сразу сделать минимизированный CSS. Т.е. пишется еще таск и после упаковки с SASS|LESS идет следующий таск который минимизирует CSS. Такая же история с JS и даже HTML (Jade). Кроме того можно написать таски на тесты (Mocha|Karma). Штука классная, но нужно посвятить время.


-Управление зависимостями

Browserify и Webpack. Webpack ваш выбор. Он популярнее. Его любят больше. Я даже видео по нему запилил.

Да, Webpack - классная штука. Такая же история как с тасками. Потратил время на обучение, попробовал повторить туториалы, написал свое, оптимизировал, доволен как слон. Потом опять переписал или дописал. И опять доволен как слон. (2 последних шага повторяются время от времени)


-Bower, Yeoman

Пакетные менеджеры. Глянуть можно. Сейчас не такие полезные как раньше. Yeoman все еще вещь, если есть много мелких проектов, которым нужен одинаковый boilerplate.


4)MV* фреймоврки

Если пишеться SPA (Single Page Application), т.е. вовлекаются сотни, тысячи строк кода на JS, то нужен фреймворк, чтобы их организовать. Знакомиться стоит с четырьмя:


-React


-Angular

Angular 2 как бы вышел. Многие недовольны резким смещением от Angular1 к Angular2. Многие сидят на Angular1. Многие не уверенны лучше ли Angular2.

Angular2 в концепции очень сильно отличается от Angular1. Кроме того, в Angular2 нет обратной совместимости с Angular1. т.е проект написанный на Angular1 нельзя просто "обновить" до Angular2. Мигрировать можно. Просто крайне муторно. Мне самому пока не доводилось.

-Ember

Используется для больших приложений и работы с большим объемом данных.


-Vue

Для маленьких и легких приложений. Но и React для таких приложений тоже хорош.


Также стоит отметить Polymer и Aurelia. Но они не должны входить в основу вашего набора разработчика.


Если хочется сосредоточиться на изучении одного, несомненно, - это React. В мире React за последний год случилось много всего. Сузим это до:


-Mobx

Самый простой способ начать написание React-приложения. Используется для маленьких приложений.


-Flux

Далее рекомендую выучить Flux. Зная Flux проще разобраться в Redux, Relay. Множество этих микрофреймворков под React берут основу именно у Flux.


-Redux

Стоит использовать, если ваше приложение набирает размер и имеет сложные взаимодействия с данными.


-Relay

Для, ну очень, больших приложений. Если бы нужно было сделать Gmail на React ябы делал это на Relay.


-create-react-app

Простой способ развернуть React-приложение.


Если хочется чего-то интересного:

-Closurescript

-Elm

Они оба и фреймворк и язык. Оба основанны на концепте функционального программирования.


Юнит тестирование

-Mocha

-Jasmine

-Karma

-Enzyme

Enzyme - кассная вещь для использования вместе с предыдущими тремя. Под React.


Все учить не надо. Придя на продвинутый уровень с базовыми знаниями HTML-CSS-JS, сперва выучите CSS фреймворки и препроцессоры. Далее выберите JS фреймворк (React) и учите понемногу что-то новое.


Третья ветка. Back-end.


Есть скриптовые языки, функциональные языки, высокопроизводительные языки.


Если вы новичок, то учите скриптовые языки. В скобках выделены фреймворки под эти скриптовые языки.


-NodeJS (express^, hapi^)

-Python (django, flask^)

-Ruby (Ruby on Rails, Sinatra)

-PHP (Laravel, Symphony2, Lumen^)


Фреймоврки с ^ - микрофреймворки. Меньше, легче в изучении.


Если бы мне сказали выделить один, то я бы выделил все-таки NodeJS. Почему? Скорее всего вы уже знаете немного JS и он крут.


Если ищете что-то на уровень выше, или просто хотите бросить себе вызов, то не выбирайте второй скриптовый язык. Посмотрите на функциональные языки или высокопроизводительные языки:


Функциональные:

-Elixir

-Scala

-Haskell

-Clojure


Высокопроизводительные:

-Go

-Rust

-Java

-C#


Если выделять, то:

NodeJS - Haskell - Go/Rust. Я бы начинал так. Я выделил Java и C# другим цветом потому что они не для новичков. Да, там много возможностей работы, но новичкам, я бы рекомендовал начать со скриптового языка.


Что знать (вне зависимости от языка):

-Юнит/Функциональное тестирование

-RESTful API принципы. Как его написать.

-Защита

-Авторизация (OAUTH2, JSON Web Token)

-SOA (Services Oriented Architecture) / Microservies

-Развретывание приложения (Flightplan: nodejs / Fabric: python / Capistrano: Ruby)

-Websocket

-ORM/ Data structure


Работа с данными (базы данных):

-MySQL, PostgreSQL (реляционные)

-Redis (сессия, кеширование)

-MongoDB, Couchbase, RethinkDB (noSQL базы данных)

-Solr, Elastic Search (базы данных под поисковые системы)


Кеширование

-Nginx

-Apache

-Redis

-In-memory


Далее идет DevOps


Веб-платформы:

-Digital Ocean

-Amazon Web Services

-Azure

-Rackspace

-Heroku


Упралвение сервером:

-Linux

-Docker

-Ansible

-Salt

-Chef

-Puppet


Docker - это то, что вы абсолютно точно захотите знать. Если вы решили изучть одну технологию как DevOps учите Docker. Немного знакомы с Docker? Выучите его хорошо.

- Большой масштаб (Kubernetes, Mesos)

- Малый масштаб (Docker Swarm)

- С графическим интерфейсом (Rancher, Docker Cloud, Docker Datacenter/Universal Control Plane)


Продолжительное тестирование и разработка:

-Jenkins (на собственном железе)

-SemaphoreCI

-CircleCI

-Codeship


Vagrant. Стоит иметь ввиду. Но сейчас - Docker это вещь.


Вот краткий обзор технологий, которые должен знать веб-разработчик в 2016-2017 году.


Я лично не по всем пунктам согласен с автором. Но у меня нет настолько обширного и глубокого опыта, чтобы спорить о том насколько Docker крут или нет, или почему Flux отстой Redux рулит и т.п. А согласны ли вы с ним или есть возражения?

Делимся мнениями в комментариях.


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

Показать полностью 1
42
Web и все все все: Красивый Preloader на CSS3.
14 Комментариев в TECHNO BROTHER  

Красивый Preloader на CSS3. Часть 1

Ссылки из урока:

1. Демо: http://master-css.com/demo/preloaderC...

2. Архив-заготовка: http://master-css.com/zip/startlight.rar

3. Источник: https://ihatetomatoes.net/create-css3...

Красивый Preloader на CSS3. Часть 2



Пожалуйста, войдите в аккаунт или зарегистрируйтесь