15 jQuery сниппетов для разработчиков


Содержание

Информационный портал по безопасности

10+ полезных jQuery сниппетов на каждый день

Автор: admin от 5-02-2014, 15:20, посмотрело: 2020

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

Плавный скролл к верху страницы

Давайте начнем этот список с очень популярного и полезного сниппета: эти 4 строки кода позволят вашим посетителям плавно проскролить страницу к верху простым нажатием ссылки (с id #top) расположенной внизу страницы.

Дублирование thead в самый низ html таблицы

Для лучшей читаемости таблиц было бы неплохо скопировать шапку таблицы в низ таблицы. Собственно, это и делает следующий сниппет.

Загрузка внешнего контента

Вам нужно добавить определенный внешний контент в div? Так вот это очень просто сделать с jQuery, как показано в нижеприведенном примере.

Колонки одинаковой высоты

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

Табличные полосы (зебра)

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

Частичное обновление страницы

Если вам нужно обновить только часть страницы, то эти 3 строки кода точно помогут. В примере div с id #refresh автоматически обновляется каждые 10 секунд.

Предзагрузка изображений

jQuery упрощает предзагрузку изображений в фоне, так что посетителям не придется ждать целую вечность, когда появятся желаемые изображения. Код готов к использованию, просто отредактируйте список изоборажений в строке 8.

Div по ширине/высоте вьюпорта

Этот удобный фрагмент кода позволяет создавать растянутый по ширине/высоте вьюпорта div. Код также поддерживает изменение размеров окна. Прекрасное решение для модальных диалогов и popup-окон.

Проверка сложности пароля

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

Для начала создадим поля ввода:

И далее немного jQuery кода. Введенный пароль будет проверен с помощью регулярных выражений и на основе этого пользователю будет выведено сообщение насколько сложен его пароль.

Изменение размеров изображения

Вы конечно можете изменять размеры ваших изображений на стороне сервера (например, используя PHP и GD-библиотеку), но иногда полезно делать это на клиентской стороне с помощью jQuery. Вот сниппет для этого.

Автоматическая загрузка контента по скроллу

Некоторые сайты, такие как Twitter загружают контент по скроллу. Это значит, что весь контент динамически подгружается на странице в процессе прокрутки вниз.
Вот пример того, как вы можете сделать этот эффект на вашем сайте.

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

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

Сортировка списка в алфавитном порядке

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

Очередной блог фрилансера

коротко и полезно о веб-разработке

10 отличных jQuery-сниппетов

jQuery вдохнул новую жизнь в JavaScript-программирование. Благодаря этому замечательному инструменту, появилась возможность с легкостью создавать мощные и интерактивные страницы. В сегодняшней статье собраны 10 полезных примеров jQuery-кода, которые обязательно вам пригодятся при разработке клиентской стороны сайта.

Предзагрузка изображений

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

Ссылки target=”blank”

Следующий фрагмент предназначен для того, чтобы все ссылки, имеющие атрибут rel=”external”, открывались в новом табе/окне. Код легко можно изменить, например открывать ссылки только с определенным классом.


Добавление класса тэгу при включенном ява-скрипте

Этот пример состоит всего из одной строчки, но он является самым простым способом определить включен ли ява-скрипт в клиентском браузере. Если ява-скрипт включен, класс hasJs будет добавлен к тегу .

Плавная прокрутка по ссылке

jQuery хорошо известен своей возможностью легко создавать красивые визуальные эффекты. Одним из таких эффектов, является плавная прокрутка страницы, при нажатии на ссылку. Следующий пример демонстрирует пример такой прокрутки страницы, по клику на ссылку с классом topLink.

Изменение прозрачности при наведении

Еще один красивый эффект – очень популярный среди клиентов – эффект затухания элемента при движении мыши. Следующий пример кода, реализует плавное изменение прозрачности картинки при наведении/отведении мыши.

Колонки одинаковой высоты

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

Включаем HTML5-разметку в старых браузерах

HTML5 – это будущее клиентской веб-разработки. К сожалению, некоторые старые браузеры не умеют распознавать новые теги, такие как header и section. Этот пример кода, научит старые браузеры распознавать новые HTML5-тэги.

Еще лучше будет, если вы подключите .js-файл в секции вашей html-страницы.

Проверяем поддерживает ли браузер определенное CSS3-свойство

Ниже представлена простая jQuery-функция, проверяющая, поддерживает ли браузер клиента определенное CSS3-свойство. В этом примере, мы проверяем свойство border-radius, но его конечно, легко можно изменить на любое другое.

Обратите внимание, что при указании свойства, вам нужно опустить дефис, чтобы предотвратить ошибку синтаксиса. Поэтому вместо border-radius, вам нужно написать “borderRadius” или “BorderRadius”.

Получаем параметры url

Получение url-параметров с помощью jQuery – довольно простая задача. Следующий пример это продемонстрирует.

Отключаем клавишу “Enter” в формах

По умолчанию, форма отправляется на сервер при нажатии клавиши “Enter”. Но для некоторых форм, нажатие этой клавиши может вызвать проблемы. Следующий пример кода, поможет вам предотвратить нежелательную отправку формы, путем отключения клавиши “Enter”, с помощью jQuery.

Цукерберг рекомендует:  Html5 - Где вы училисьучитесь верстать сложные элементы сайта

Перевод статьи “10 awesome jQuery snippets”, автор Jean-Baptiste Jung

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

Собираем свою коллекцию сниппетов кода

Для начала небольшая справка: в переводе с английского слово “snippet” означает «фрагмент» или «отрывок». В программировании снипеттом называется небольшой фрагмент кода, пригодный для повторного использования. Любой разработчик (особенно начинающий), рано или поздно, начинает собирать свою «коллекцию» полезных фрагментов кода, которые позволят ему сэкономить время на разработку своих веб-приложений. В этой статье я приведу несколько полезных, на мой взгляд, сниппетов кода на PHP.

Как известно в сети существует довольно много сайтов, на которых представлены различные сниппеты. Как правило они разделены по категориям. Если ознакомиться с такими сайтами подробнее, то можно найти много всего интересного: начиная от фрагментов HTML и CSS кода, заканчивая сниппетами для CMS Joomla и WordPress.

Начать собирать коллекцию полезных для вас сниппетов можно с сайтов на которых уже размещено внушительное количество примеров кода. К таким можно отнести, например, сайты: или http://phpsnips.com/ . Оба сайта существуют уже довольно давно и за это время на них накопились тысячи различных сниппетов. Одни из них очень полезные, другие практически бесполезные. Но среди такого большого количества кода, любой разработчик сможет найти для себя что-нибудь интересное. Важным плюсом указанных сайтов, является то, что весь код находится в свободном доступе и вы можете воспользоваться им совершенно бесплатно.

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

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

Топ 5 сниппетов для JQuery

• 15-12-2020 •

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

Топовые сниппеты для ваших сайтов

See the Pen Top snippets by Aleksandrs (@CoolS2) on CodePen.0

Все 5 сниппетов я добавил в codepen, чтобы вы могли наглядно посмотреть их работу, а теперь разберем их по порядку

1. Прелоадер для сайта

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

Сразу после тега body, вставляем наш блок с анимацией, который будет отображаться перед тем как сайт будет загружен

Сделаем его фиксированным, чтобы при скролле был наш блок с анимацией и 100% на всю ширину и высоту с белым фоном

Когда загрузиться наш js файл, мы запускаем функцию handlePreloader() в которой мы проверяем, есть ли такой блок с классом .preloader и если есть, убираем его через 200 мс с эффектом fadeOut

2. Кнопка для прокрутки страницы вверх


Кнопка, которая и правда часто используется на многих сайтов

Добавим ссылку с классом топ

По нажатию на нашу ссылку с классом топ, анимируем скролл со скоростью slow

3. Сделать все ссылки с параметром Target=”_BLANK”

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

4. Сделать все колонки одной высоты

Если вы работаете с bootstrap, то наверно часто сталкивались с тем, что колонки из-за разной длины текста становились не красивыми. Ладно если вы сами пишите текста для сайта, а что если пишут другие люди? Вы же не будете говорить им сколько должно быть символов, иначе верстка развалится) Вот решение:

В каждом блоке с классом .row, мы ищем наиболее высокий блок, записываем это в переменную и всем колонком, которые в этом блоке, задаем эту высоту.

5. Легкая анимация на картинки

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

Задаем всем картинкам в блоке .content прозрачность 0.8 и анимацию при наводке мышкой ( если навел, не прозрачная, а если убрал курсор, то снова прозрачность на 0.8

Если остались вопросы, задавайте в комментариях, так же можете посмотреть Как сделать атоскролл к элементу

4 место Делаем красивый интерфейс входящих настроек BotUI с помощью jQuery

Lord_Alfred

Client

Долго не мог собраться начать писать статью, поэтому делая это в последние дни — думаю, получилось скомкано и местами криво. Но надеюсь, что вы простите мне это: чукча писатель, но очень занят своими делами Думаю, многие меня знают по моему ReCaptchaGnizer’у, кучке полезных сниппетов, предложений и шаблонов, которые я публиковал на форуме, а также, что я «какой-то там гриб с горы», который делает дорвеи в промышленных масштабах.

Начну издалека: BotUI — это новый интерфейс настроек проекта, чтобы заменить старые и не очень юзабельные «Входящие настройки» для шаблонов/ботов. Он появился в версии 5.11.0.0 и сейчас практически с каждой новой версий активно дополняется и развивается. Многообещающее нововведение для тех, кто делает шаблоны «на заказ» или для продажи «в несколько рук». Через данный интерфейс можно сделать очень красивые настройки, которые помогут работать с шаблоном не зная самого ZennoPoster. На сколько я слышал — в дальнейшем планируется привести их к такому виду, чтобы клиент вообще мог не запускать ZennoPoster/ZennoBox и работать с шаблоном только из BotUI (поправьте меня, если я не прав, но вроде бы где-то на форуме я читал именно это). Я пишу эту статью и привожу примеры, используя последнюю актуальную версию ZennoPoster 5.12.3.0.

Когда подавал заявку на конкурс, то хотел просто накидать несколько примеров, которые по моему субъективному мнению могут быть полезны (хоть я сам и не использую BotUI, а делаю всё по хардкору). Но в ходе написания статьи я заметил некоторые недоработки со стороны разработчиков, и мне пришла в голову мысль, что используя такой инструмент, как «Конкурсная статья» — я могу обратить на них внимание Мой внутренний перфекционист просто не может оставить бесследно какую-то багу, которую он находит в этом замечательном софте, которым я пользуюсь уже более 2-х лет с огромным удовольствием.

Поэтому я начну с того, что мне бросилось в глаза при написании статьи:

    Почему-то в коде BotUI есть загрузка скрипта гугл аналитики, причем это сделано таким образом, что он никогда не загрузится (из-за неправильно указанного протокола file://). Вот этот фрагмент из кода:

Интерфейс BotUI — это html+css+javascript, которые выполняются во встроенном браузере. За счет того, что можно редактировать внешний вид интерфейса с помощью кнопки «Открыть код» — можно делать там практически всё тоже самое, что сейчас можно сделать на обычных сайтах. Я даже подозреваю, что можно добавить iframe и уведомлять с его помощью клиентов о выходе новой версии шаблона или о чем-то важном.

Собственно, jQuery — это JavaScript библиотека, с помощью которой можно манипулировать HTML-элементами на странице (в нашем случае — кнопками, селектами, текстом и так далее). В моей версии ZennoPoster в интерфейсе BotUI используется jquery version 3.1.1 (можно узнать, посмотрев исходный код интерфейса через вышеуказанную кнопку и найдя «jquery-3.1.1.min.js»).
jQuery — очень популярная и старая библиотека, которая позволяет писать более-менее нормальный код на JS и не парится над тем, как всё будет работать в различных браузерах (но конкретно нам сейчас это не важно, но знать — стоит).
Вся документация по взаимодействию с jQuery находится по адресу: http://api.jquery.com/ — да, она на английском, но можно найти и описание на русском, только скорее всего там будет очень много устаревшей информации. Но базовые принципы и вещи должны и будут работать, но обращаться как к первоисточнику — нужно всегда к оригинальной документации.

Цукерберг рекомендует:  Раскрывающееся меню картинок на jQuery

Как минимум вы должны знать что такое: html, css, селекторы, обработчики и методы.

Если же вы не успели прочитать всё то, что по ссылкам выше, то хотя бы внимательно ознакомьтесь с этим отредактированным изображением, взятым из какой-то статьи (на нем изображена вся суть jQuery):

В целом разработка под web — позволяет совершать ошибки и не особо заботится о том, что их не будет в 100% случаев. Специфика не та, не ракеты запускать
Но всё же, знать как протестировать свой код — нужно и это будет очень полезно. По-моему, самое простое и эффективное тестирование и написание кода под BotUI выглядит следующим образом:

  1. Продумываем в голове / пишем на листочке все переменные, которые мы хотим передавать из настроек в шаблон.
  2. Открываем BotUI, закидываем все нужные элементы, согласно продуманным переменным.
  3. Настраиваем размеры, положение, пишем вспомогательные тексты (описание и хелп).
  4. А вот тут начинается самое интересное: открываем код получившегося шаблона, копируем его и вставляем в пустой созданный *.html файл (в utf-8!).
  5. Открываем созданный *.html файл в редакторе кода (Notepad++ / SublimeText или другой) + браузере (лучше в FireFox, т.к. я подозреваю, что в ZP всё выполняется именно в нём).
  6. Открываем в браузере «Инструменты разработчика» (Ctrl+Shift+I), пишем обработчики jQuery в редакторе кода, обновляем страницу в браузере и смотрим во вкладке «Консоль», чтоб не появилось каких-то ошибок (если появляются — исправляем свой код).
  7. Делаем все нужные эффекты и взаимодействия с элементами, тестируем, копируем код из обычного редактора обратно в окно редактора BotUI в ProjectMaker.
  8. Всё! Мы прекрасны, а наш шаблон ещё прекраснее!)

Суть этого списка простыми словами: гораздо проще и удобнее тестировать html в обычном браузере, а также смотреть какие ошибки там возникают при написании js. Во встроенном редакторе в BotUI можно только чуть-чуть подправить код, постоянно что-то в нём редактировать — не очень удобная затея.

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

При добавлении любого элемента (кнопка, ввод текста, выбор вариантов) в интерфейс — добавляется сам элемент в html представлении и его родительская обёртка, тег div. У тега div всегда присутствует атрибут id, через который можно обращаться к элементу (или самому родительскому тегу div), а также можно задать уникальный идентификатор для самого элемента, используя правую панель «Свойства» -> вкладка «Дополнительно» -> Прочее -> ElementId. Это важное вступление, нужно раз и навсегда запомнить этот способ как обратиться к определенному элементу или его базовому/родительскому тегу.

Ещё одно очень важное отступление — частичное повторение из предыдущих абзацев. Следует запомнить, что весь код, который вы пишите на jQuery необходимо размещать ниже чем загрузка самой библиотеки jquery, но идеальным вариантом будет размещение кода перед закрывающимся тегом

116 инструментов для разработчиков

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

Оригинальный пост был опубликован на портале DailyTekk. И хотя появился он достаточно давно, список по-прежнему актуален. Инструменты разделены на разные категории: платформы для разработки, обучение программированию, багтрекинг, API и прочее. Не все инструменты бесплатные, но за удобство и новые функции приходится платить. Надеемся, вы найдёте что-то полезное для себя.

8 HTML5 и CSS3 сниппетов для разработки и дизайна новых проектов

Будучи веб-разработчиком, нам часто приходится идти на компромисс и пробовать новые системы, фреймворки и онлайн-ресурсы. Один код может оказаться полным завалом, в то время как другой станет “скрепкой” в процессе разработки.

На нашем сайте уже была статья о полезных сниппетах – HTML5 сниппеты для улучшения работы веб-сайта. В этой статье мы расскажем о 8 сниппетах, которые может использовать любой веб-разработчик для создания и разработки новых проектов. Эти блоки кода включают типичный HTML5 код и CSS3 решения для различных макетов веб-сайтов. Вы можете хранить эти сниппеты в текстовом файле (txt file) или программном обеспечении для разработок, такие как Coda, Adobe Dreamweaver или Visual Studio. Но, в любом случае, эти блоки кода станут полезными в развитии практически любого проекта.

Простой готовый HTML5 шаблон страницы

Для начала, мы включили простой HTML5 шаблон веб-страницы. В этом сниппете есть doctype тег, а также дополнительные скрипты хэдера. Шаблон содержит ссылки на внешние страницы styles.css для вашего дизайна, которые могут быть обновлены подо что угодно.

Мы также включили ссылки на 2 скрипта – jQuery и HTML5shiv документ, для того чтобы старые версии Internet Explorer могли распознавать новые элементы HTML5.

Clearfix для CSS Floats

Большинство веб-разработчиков понимают как работают флоуты, но их очистка, добавляет дополнительные правила.


Вам следует скопировать код написанный ниже в любой CSS документ, где вы используете флоуты в макете. Затем, нужно добавить .сlearfix класс на любой контейнер элементов с внутренним флоутом.

CSS сбросы браузера

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

Обычно веб-разработчики хотят удалить заданные значения для того, чтобы каждый браузер отображал веб-страницы одинаково.

Полные CSS3 градиенты

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

Просто скопируйте и вставьте эти свойства в любой CSS селектор, который нуждается в градиентном фоне. Затем вы можете изменить значение цвета на какие угодно, в том числе rgba() синтаксис для прозрачности. У Internet Explorer есть много собственных параметров для формирования градиентов внутри браузера. Но, так как многие из них не поддерживаются в других местах, вы можете удалить их из рабочего кода.

CSS3 трансформации

Эта функция не всегда используется разработчиками из-за отсутствия в ней поддержки старых браузеров. Но CSS transforms изменили то, как разработчики создают пользовательские интерфейсы на веб-сайтах. Благодаря браузер-трансформации, вы можете генерировать пользовательские подсказки и формы с помощью нескольких строк кода.

Вы должны быть осторожны при использовании transform свойств на большом количестве элементах. Это может вызвать ошибки в Internet Explorer и в некоторых старых версиях Firefox.

Уникальная @font-face типография

Существует много учебников, объясняющие как включить пользовательские шрифты используя CSS3. Этот процесс не так прост, как дизайн текста в Photoshop. Используйте этот код, если хотите включить копии ваших собственных шрифтов и загрузить уникальное font-family значение в ваш CSS.

Обратите внимание, что вам нужно настроить font-family функцию на любой нужный элемент, с помощью этого шрифта. Также вам нужно предоставить хотя бы .woff файл, который поддерживается всеми CSS3-браузерами. В идеале вы должны включить следующие копии шрифтов: OTF, TTF, СРВ, WOFF и SVG.

HTML мета тэг для респонсивных макетов

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

Цукерберг рекомендует:  Курсовая - Трансформатор и его применение в радиотехнике

HTML5 для поддержки видео и аудио (embedded media)

К счастью, аудио и видео теги разделяют подобный синтаксис. Мы можем использовать preload атрибут (предварительную загрузку), чтобы начать загрузку данных, прежде чем пользователь кликнул “play”.

Мы уверены, что есть и другие потрясающие сниппеты, которые не были описаны в этой статье. Но мы хотели представить эту коллекцию как очень простой/стартовый набор для веб-разработчиков. Если у вас есть дополнения – напишите в комментариях!

15 отличных сайтов для изучения программирования

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

В этом обзоре мы собрали список сайтов, которые помогают изучать основы программирования.

1. GeekTyper

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

Нажмите клавишу Tab , чтобы отобразить горячие клавиши, активирующие различные эффекты. « Взлом » не является реальным, и все, что вы делаете, ни на что не влияет. Ваши настройки хранятся в кэше браузера.

2. Code Pad

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

При сохранении сниппета нужно настроить режим доступа: публичный, частично приватный или полностью приватный. « Лайк » сниппета будет хранить ссылку в вашей панели, что облегчит поиск в будущем. Также доступна различная статистика: количество просмотров сниппета, лайки, скачивания, комментарии и другое.

3. Code Avengers

С сайтом Code Avengers изучать программирование – весело и легко. Неважно, являетесь ли вы новичком или у вас уже есть опыт – эти курсы помогут вам на каждом шаге вашего пути. Составленные педагогами, они позволяют получить практические навыки программирования, чтобы вы могли обучаться в своем собственном темпе. Можно начать с малого, всего с 30 минут в день, или решиться и пройти весь курс за выходные.

4. Codecadmy

Этот ресурс признан одним из 50 самых лучших сайтов по версии в 2013 году. Интерактивные уроки, расположенные на сайте, помогут любому изучать программирование на позитивной волне.

5. CodeCombat

На сайте обучающиеся могут изучить программирование через многопользовательскую игру-стратегию. С ее помощью ученики весело проводят время и одновременно изучают программирование на языках Python и JavaScript .

6. Treehouse

Изучайте веб-дизайн и веб-разработку с помощью этого интерактивного сайта. На нем есть видео уроки для студентов, помогающие изучать HTML и Ruby .

7. Codeschool

Codeschool учит различным веб-технологиям с помощью скринкастов, задач по программированию и видео уроков таких языков, как JavaScript , Ruby , HTML/CSS и C .

Этот веб-сайт с видео уроками предоставляет собой бесплатные курсы по программированию на таких языках, как C++ , C и Obj-C . Очень скоро появятся уроки и для Java .

9. Learn Java Online


Это бесплатный интерактивный обучающий сайт по Java . Цель этого веб-сайта заключается в том, чтобы предоставить возможность изучать язык Java всем желающим. На сайте представлены уроки базового и продвинутого уровня.

SQLZoo предлагает пошаговые уроки с использованием интерактивных интерпретаторов. С помощью этого сайта желающие могут изучить SQL Server , Oracle , MySQL , DB2 и PostgreSQL .

11. Try Git

Этот сайт позволит вам узнать все самое главное о Git за 15 минут. Интерактивный сайт имеет окно для ввода кода, что позволяет обучающимся запускать свой код в Octobox и сразу наблюдать результаты его работы.

12. W3Schools

Информационный сайт для веб-разработчиков, который содержит ссылки и уроки по CSS , HTML , JQuery , PHP , Java Script и SQL . Ресурс получил свое название от World Wide Web . Он имеет онлайн-редактор, работающий на основе веб-технологий.

13. Coderbyte

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

14. Try.jQuery

Сайт содержит видео, интерактивные задачи в форме консоли, а также позволяет пользователям практиковаться в программировании в самом браузере. Вам потребуется всего три часа, чтобы пройти весь курс. В настоящее время для реализации всех функций сайта используется jQuery 2.0 .

15. Code Learn

Сайт позволяет пользователям изучать Ruby on Rails , создавая приложение прямо в браузере. Он предлагает простой в использовании виртуальный сервер и уроки, которые облегчат изучение Rails . Эти уроки рассчитаны на новичков.

Данная публикация представляет собой перевод статьи « 15 Excellent Sites to Learn Programming » , подготовленной дружной командой проекта Интернет-технологии.ру

ez code

Просто о сложном.

Полезные jQuery сниппеты

jQuery — очень мощный инструмент для front-end разработки.

В этой статье представлены полезные jQuery сниппеты, которые можно применить в своих проектах.

Плавная прокрутка при нажатии на ссылку

Всегда приятно, если на сайте есть кнопка, которая позволяет прокручивать страницу вверх.

С помощью jQuery легко сделать ссылку, при нажатии на которую страница будет прокручена до нужного вам места.

При этом страница будет прокручена плавно, а не просто перепрыгнет вверх.

Изменение размеров изображения с помощью jQuery

Обычно изменять размеры изображения — это обязанность сервера (PHP GD например), но иногда бывает полезно изменить размеры картинки, используя jQuery. Вот код, который позволит это сделать:

Автоматическая загрузка контента при скролле

Некоторые сайты, Facebook например, автоматически подгружают контент, когда пользователь прокручивает страницу вниз. jQuery для динамической загрузки страницы:

Проверка надежности пароля с помощью jQuery

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

Выравнивание div’ов по высоте

Выровнять высоту div’ов с помощью чистого CSS невозможно (ну или очень сложно), на jQuery сделать это гораздо проще. Следующий код автоматически выровняет высоту div элементов по самому высокому.

Делаем IE6 совместимым с PNG

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

Просто добавьте класс .pngfix ко всему, что надо исправить или выберите другой селектор.

Парсинг json с помощью jQuery

Эффективный способ парсить данные JSON и отображать на странице.

Разные цвета строк

В больших списках или таблицах разные цвета строк сильно улучшают читаемость. Немного кода jQuery может решить проблему. Можно использовать любые html элементы td , tr , li , и т.д.

34 бесплатных Open Source сниппетов CSS-кода для разработчиков

Воспользовавшись поиском в Google, вы без труда найдете для себя множество различных полезных и удобных фрагментов CSS2/CSS3-кода. Но что насчет заранее подготовленных веб-интерфейсов на CSS? Существует предостаточно виджетов и отрывков кода, но зачастую довольно сложно найти что-то качественное и подходящее. Нам кажется, Open Source коды, выложенные в интернете, это нечто вроде сокровища для разработчиков, так как позволяют сэкономить много времени при разработке крупных веб-сайтов.

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

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих