Матвей Земсков

Заметки веб-мастера

Вторник, 10 февраля 2015 14:25

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

Оцените материал
(1 Голосовать)

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

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

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

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

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

Joomla

Код из приведенных выше сниппетов будет работать и в свежей версии CMS Joomla (на момент написания статьи – 3.3).

jQuery

  • Ссылка для возврата к началу страницы

    JavaScript

    		// Возврат к началу страницы
    		$(document).ready(function(){ 
    		  $('.top').click(function() {  
    			 $(document).scrollTo(0,500);  
    		  });
    		}); 
    
    		// Создаем ссылку с классом .top
    		<a href="#" class="top">К началу страницы</a>
    	

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

  • Выравнивание блоков (div) по высоте

    JavaScript

    		var maxHeight = 0;
    
    		$("div").each(function(){
    		   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    		});
    
    		$("div").height(maxHeight);
    	

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

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

    JavaScript

    		var loading = false;
    		$(window).scroll(function(){
    				if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
    						if(loading == false){
    								loading = true;
    								$('#loadingbar').css("display","block");
    								$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
    										$('body').append(loaded);
    										$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
    										$('#loadingbar').css("display","none");
    										loading = false;
    								});
    						}
    				}
    		});
    
    		$(document).ready(function() {
    				$('#loaded_max').val(50);
    		});
    	

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

  • Периодическое обновление содержимого части страницы

    JavaScript

    		setInterval(function() {
    		$("#refresh").load(location.href+" #refresh>*","");
    		}, 10000); // интервал обновления страницы (время в миллисекундах)
    	

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

  • Загрузка стороннего контента на страницу

    JavaScript

    		$("#content").load("somefile.html", function(response, status, xhr) {
    		  // обработка ошибок
    		  if(status == "error") {
    			$("#content").html("Произошла ошибка: " + xhr.status + " " + xhr.statusText);
    		  }
    		});
    	

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

CSS

  • Превращаем цветное изображение в черно-белое с помощью CSS

    CSS

    		img.desaturate { filter: grayscale(100%);
    		-webkit-filter: grayscale(100%);
    		-moz-filter: grayscale(100%);
    		-ms-filter: grayscale(100%);
    		-o-filter: grayscale(100%);
    		}
    	

    Замечательная возможность создать черно-белое изображение без использования графических редакторов.

  • Используем свой цвет выделения текста

    CSS

    		::selection { background: #e2eae2; }
    		::-moz-selection { background: #e2eae2; }
    		::-webkit-selection { background: #e2eae2; }
    	

    Эта возможность придает вашему сайту немного индивидуальности. Позволяет изменять значение свойств CSS: color, background и background-color.

  • Вертикально отцентрированный контент

    CSS

    	.container {
    		min-height: 6.5em;
    		display: table-cell;
    		vertical-align: middle;
    	}
    	

    Порой бывает очень нужно выровнять содержимое внутри блока по высоте. Но как известно, такое «поведение» возможно только внутри ячеек таблицы. Поэтому просто «превращаем» блок в ячейку таблицы с помощью CSS. Также полезная возможность

  • Шаблон для создания CSS3 градиента

    CSS

    	#colorbox {
    		background: #629721;
    		background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
    		background-image: -webkit-linear-gradient(top, #83b842, #629721);
    		background-image: -moz-linear-gradient(top, #83b842, #629721);
    		background-image: -ms-linear-gradient(top, #83b842, #629721);
    		background-image: -o-linear-gradient(top, #83b842, #629721);
    		background-image: linear-gradient(top, #83b842, #629721);
    	}
    	

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

  • CSS шаблон для оформления цитат

    CSS

    	blockquote {
    		background: #f9f9f9;
    		border-left: 10px solid #ccc;
    		margin: 1.5em 10px;
    		padding: .5em 10px;
    		quotes: "\201C""\201D""\2018""\2019";
    	}
    	blockquote:before {
    		color: #ccc;
    		content: open-quote;
    		font-size: 4em;
    		line-height: .1em;
    		margin-right: .25em;
    		vertical-align: -.4em;
    	}
    	blockquote p {
    		display: inline;
    	}
    	

    Приведенный CSS-код поможет аккуратно оформить цитаты на странице: перед текстом цитаты добавляются крупные кавычки.

PHP

  • Способ проверки типа загружаемого посетителем файла

    PHP

    	 
    		// размещаем в массиве разрешенные для загрузки форматы файлов
    		$extension = array("application/pdf", "image/jpeg", "image/png", "image/gif");
    
    		if(isset($_POST['submit'])){
    				exec("file -i ".$_FILES['inputName']['tmp_name'], $output);
    				$type = explode(':', (string)$output[0]);
    		}
    
    		// Проводим проверку загружаемого файла
    		if (isset($_FILES['inputName']) &&
    					$_FILES['inputName']['error'] == UPLOAD_ERR_OK  &&
    					$_FILES['inputName']['size'] <= 10000000 &&
    					in_array(trim($type[1]), $extension)){
    					var_dump($_FILES['inputName']['tmp_name']);
    		}else{
    			die("Запрещенный формат файла");
    		}
    	

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

  • Как завершить PHP-сессии по истечении определенного времени

    PHP

    	if (isset($_SESSION['LAST_ACTIVITY']) && (time() - $_SESSION['LAST_ACTIVITY'] > 1800)) {
    		// последний запрос был ранее чем 30 минут назад
    		session_unset();     // очищаем массив переменные в $_SESSION 
    		session_destroy();   // удаляем данные из $_SESSION
    	}
    	$_SESSION['LAST_ACTIVITY'] = time(); // обновляем данные о последнем времени активности
    
    	/*
    	Вы также можете использовать дополнительную метку времени для перииодической генерации идентификатора сессии, чтобы предотвратить атаки, связанные с фиксацией сессий 
    	*/
    	if (!isset($_SESSION['CREATED'])) {
    		$_SESSION['CREATED'] = time();
    	} else if (time() - $_SESSION['CREATED'] > 1800) {
    		// сессия стартовала более 30 минут назад
    		session_regenerate_id(true);    // аннулируем старый идентификатор сессии 
    		$_SESSION['CREATED'] = time();  // обновляем время создания сессии
    	}
    
    	//обратите внимание, что параметр session.gc_maxlifetime(php.ini) должен быть равен показателю времени жизни сессии, указанную в скрипте (в данном примере 1800)
    	

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

  • Генерируем csv-файл из PHP массива

    PHP

    	function generateCsv($data, $delimiter = ',', $enclosure = '"') {
    	   $handle = fopen('php://temp', 'r+');
    	   foreach ($data as $line) {
    			   fputcsv($handle, $line, $delimiter, $enclosure);
    	   }
    	   rewind($handle);
    	   while (!feof($handle)) {
    			   $contents .= fread($handle, 8192);
    	   }
    	   fclose($handle);
    	   return $contents;
    	}
    	

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

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

Прочитано 5343 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх