MODx Revo ускорение

#modx #веб_программирование #оптимизация #revo

                    
Вопрос про ускорение и оптимизацию. Сейчас у меня сайт близится к окончанию на Modx
revo. Но страницы бывает подгружаются по 5-6 секунд, если без кеширования, с кешированием
за 2 сек. Посещения - 0. Ресурсов штук 30. Использовал стандартные снипеты. Но не могу
понять, почему сайт может так тормозить даже без продакшна. Писал сайт на EVO, летает,
даже быстрее того когда на рево включен кэш. Может из-за того что я использовал там
самописные сниппеты? Есть ли какая - нибудь волшебнная кнопка, которая позволит увеличить
скорость сайта в несколько раз? (извиняюсь за детский сад))
Понимаю, нужно продумывать ускорение на месте в каждом случае по разному. Но все
таки ожидаешь от нового движка с новостным сайтом, что он не будет так тупить без особой
нагрузки, даже с учетом мелких допущенных ошибок в коде    

Ответы

Ответ 1

"Использовал стандартные снипеты" - стандартные снппеты ооочень медленные. Хочешь
скорости - используй pdoTools. Ну и pthumb вместо phpthumbof. Для 90% случаев - этого
хватает за глаза, если нет - ищи сниппеты которые тормозят и разбирайся конкретно с ними.


Ответ 2

Есть некоторые проблемы со скоростью, соглашусь и с Vasis.


  стандартные сниппеты ооочень медленные



Мне помог переезд БД на SSD. Значительно ускорилась работа. Требует вложений в хостинг.
Как более дешевый, но трудноватый вариант — установить кеширующий nginx


Ответ 3

В первую очередь проверь, не вызываются ли у тебя сниппеты рекурсивно (getResources
для списка новостей -> getResources в чанке каждой новости и тд). 

После проверь, нет ли у тебя явного указания НЕ КЭШИРОВАТЬ вывод сниппетов ( например:
[[!getResources]] ). Запрещать кэширование можно только в случаях, которые действительно
этого требуют. 

Поменьше используй всяких стандартных сниппетов наподобие [[If]]

Не стреляй из пушки по воробьям :) Если нужна какая-то простая операция от сложного
сниппета (вырожденный пример - использовать getResources для получения и вывода TV
у товара) - вынеси этот функционал в свой сниппет.

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


Ответ 4

Если нужно реальное ускорение, надо забыть про if is then else - т.е. убери всю логику,
сделанную на этом сниппете IF.
На соседнем ресурсе разогрелась нешуточная война двух лагерей, суть в том, что ModX,
встретив такие обертки, сначала обрабатывает все вложенные сниппеты и затем уже проверяет
условие!!
Т.е. как бы это не звучало консервативно, все-таки для очень разных страниц правильнее
использовать разные шаблоны! А не так, как некоторые хвастаются - "У меня ОДИН шаблон
на всё про всё!" )))

Документация для open-source проекта

#документация #php #yii #веб_программирование #opensource

                    
Привет всем!

Написал небольшую библиотеку на PHP. Теперь встал вопрос о создании сайта  для нее.
Сайт я решил делать с использованием Yii Framework. Ну и само собой разумеется, что
на сайте должна быть документация по работе с этой библиотекой: использование, написание
плагинов и прочее.

Вот хотел узнать, есть ли какие-нибудь готовые удобные системы по ведению документации.
Основные требования - это:


хранение всей документации в базе данных, а не в статичных HTML-файлах;
наличие веток или версионности. Например, есть документация для версии библиотеки
1.0. Но в версии 1.1 добавились некоторые возможности, которых нет в 1.0. Мне бы хотелось
не делать копию всей документации, а выбирать статьи, которые относятся только к определенным
версиям;
мультиязычность. Причем желательно, чтобы каждая отдельная статья, а не вся документация,
имела разные переводы. Чтобы в случае отсутствия перевода, показывать оригинал статьи;
подсветка или простое выделение кода.


Заранее спасибо.

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

UPD:

Я думал, что таких систем видимо-невидимо в инете должно быть. А начал искать - не
нашел. Может, у них какое-то название есть специальное и я не так ищу?
    

Ответы

Ответ 1

Better late than never
http://readthedocs.org/

+ Версионность
+ Многоязычность
+ Автобилд
- Все располагается на чужих серверах, можно забрать себе проект с github, но там
вряд ли будет подробнейшая документация по поддержке своего сервера
+ Можно тарнслировать на своем сайте с помощью простого DNS
+ Подсветка кода
+ Поиск


Ответ 2

https://ru.wikipedia.org/wiki/PhpDocumentor - это отличный инструмент.
Он позволит Вам и документацию вести, и подсказки для IDE будут генерироваться, и
поддержка версий есть.

Как реализовать поиск по ключу объекта?

#javascript #jquery #веб_программирование

                    
Есть функция которая ищет value в объекте. Как можно сделать так, чтоб искать можно
было по ключу?

Например сейчас работает так :

когда у функции search('r', items) аргумент rm то выдаст слова где есть r. 

// ["bar", "lorem", "dolor"]

А было б неплохо если можно было искать и по ключам. Например так : 

если аргументом будет foo, должно выдать: // ["bar", "lorem", "dolor"]

а если аргумент bar то должно выдать: ["amet","ipsum","dolor"]

вся функция :



function search(s, arr) {
  var matches = [];

  for (var i = arr.length; i--;) {
    for (key in arr[i]) {
      if (arr[i].hasOwnProperty(key) && arr[i][key].indexOf(s) > -1)
        matches.push(arr[i][key]);
    }
  }
  return matches;
};

var items = [{
  "foo": "bar",
  "bar": "sit"
}, {
  "foo": "lorem",
  "bar": "ipsum"
}, {
  "foo": "dolor",
  "bar": "amet"
}];

search('r', items); // ["bar", "lorem", "dolor"]



    

Ответы

Ответ 1

Аналогично же:

function search(s, arr) {
  var matches = [];

  for (var i = arr.length; i--;) {
    for (key in arr[i]) {
      if (arr[i].hasOwnProperty(key) && key.indexOf(s) > -1) {
        matches.push(arr[i][key]);
      }
    }
  }
  return matches;
};

var items = [{
  "foo": "bar",
  "bar": "sit"
}, {
  "foo": "lorem",
  "bar": "ipsum"
}, {
  "foo": "dolor",
  "bar": "amet"
}];

search('foo', items);

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

#база_данных #aspnet #aspnet_mvc #http #веб_программирование

                    
Когда создавать подключение к базе данных?


На каждый запрос к базе
На каждый HTTP-запрос
Глобально в рамках домена - от старта приложения до его смерти


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

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

Так что же лучше и в каких случаях стоит применять? Интересно это как по поводу чистого
ADO.NET, так и EF (если под "подключением" мы будем понимать наследника DbContext).
По поводу последнего в туториалах в интернете рассуждают о разнице между п.1 и п.2,
но не п.3. Почему?
    

Ответы

Ответ 1

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

Во первых, DbContext, это Unit of Work(как и ISession в NHibernate)

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

Другими словами, вам нужно выделять DbContext на каждую бизнес-задачу.

Редактирование сайта прямо с хостинга

#cms #веб_программирование #хостинг

Добрый день, коллеги!
Есть вопрос, какие есть способы облегчения жизни веб разработчика в редактировании
закаченного на хостинг сайта на cms. Например нужно доработать новый функционал, с
изменением многих структур, и записей в базе данных? 
у меня два варианта (оба отстойные)


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


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


В общем, матерые веб девелоперы, как осуществлять сие действие по всем правилам этикета
=)    

Ответы

Ответ 1

Сделать копию сайта и базы в подпапке на хостинге, и дорабатывать ее.
Когда все готово, глубокой ночью, перенести из старой базы измененный/добавленный
за это время контент; проверить все еще раз, и поменять "сайты" местами. Если что-то
пойдёт не так, ещё можно будет откатиться назад относительно безболезнено.
Если же совсем всё сложно, надо объявить комендантский час, и запретить на какое-то
время юзерам что-то менять в базе — read only. Заранее спланировать, сколько примерно
времени понадобится, удвоить его, и торжественно объявить всем: такого-то числа с 8
до 16 отключаем горячую воду!


Ответ 2

какие есть способы облегчения жизни веб разработчика 


Работать в той же среде, что и хостинг. То есть - не в Windows (если, конечно, хостинг
не виндовый, но люди, сознательно идущие на это, подобных вопросов не задают).


Ответ 3

Код сайта можно редактировать через различные IDE (типа NetBeans или Eclipse). Создав
специальный проект подключенный к вашему сайту. Любое изменение, которые вы сделаете
в среде разработки будет сохранено на сайте. Среды разработки также поддерживают синхронизацию
с системами контроля версий git и svn. А с базой можно работать со стандартного клиента,
который идет с субд MySql или oracle, подключившись к удаленной базе.

Передача логов по сети

#java #веб_программирование #логирование

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

Ответы

Ответ 1

Зависит от того, чем вы пользуетесь для логирования.


Для Logback, например, существуют SocketAppender и SSLSocketAppender для отправки
событий по сети, SyslogAppender для отправки на Syslog-сервер.

Сервер для логирования через SocketAppender настраивается обычными средствами (XML)
и запускается просто из командной строки:

java ch.qos.logback.classic.net.SimpleSocketServer 6000 \
src/main/java/chapters/appenders/socket/server1.xml

В Log4j 2 реализованы JMSAppender / KafkaAppender / ZeroMQ Appender для прокачки
логов через очереди и аналогичные упомянутым выше SocketAppender и SyslogAppender.

Как организовать разработку приложения

#java #spring #hibernate #maven #веб_программирование

Здравствуйте!

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

Я хочу создать веб-приложение по обмену вещами между пользователями. Приложение пишется
на Java + Spring MVC + Spring Security (для авторизации пользователя) + Hibernate с
использованием сборщика Maven, а в качестве СУБД используется HSQLDB. Для Представления
используется JSP. Сервер приложений - встроенный Jetty, не требующий внешнего веб-контейнера.

Вопросы:


Как сделать так, чтобы проект автоматически собирался и работал на любом ПК с предустановленными
JDK и Maven? Что для этого нужно сделать?
Что сделать, чтобы нужная схема данных автоматически создавалась и заполнялась начальными
данными при первом запуске веб-приложения?
Это должно происходить именно при первом запуске приложения, а не при каждом его
включении.
Расскажите поподробнее про то, как мне организовать доступ к HSQLDB из Hibernate,
учитывая требования (1 и 2) и как хранить/упаковать БД и СУБД исходя из этого.
Требуется также написать скрипт сборки проекта с помощью Maven и показать его исходники
заказчику. Что в данной ситуации будет скриптом сборки? Maven ведь декларативный сборщик.


Спасибо заранее!
    

Ответы

Ответ 1

Для этого достаточно использовать maven в качестве билд-системы. Тогда на любой машине
с установленными maven и jdk можно будет выполнить

mvn package 


и получить артефакт (вероятнее всего вы захотите zip-архив) с вашим продуктом. Вам
скорее всего понадобятся maven-shade-plugin и/или maven-assembly-plugin. 
Автоматическое создание схемы можно доверить Hibernate (используя параметр hibernate.hbm2ddl.auto=update),
но предпочтительнее делать это SQL-скриптом. Если планируются апдейты приложения и
схемы данных, стоит задуматься об использовании средств версионирования схемы БД. Например,
Flyway умеет проверять при старте версию схемы в БД последовательно накатывать необходимые
миграции (SQL-скрипты, обновляющие схему) на БД и заливать исходные данные из XML.  
Файл данных БД можно хранить в директории приложения или за её пределами, например,
в $HOME/.myapplication/ или в /var в Linux (%APPDATA%/myapplication в случае Windows).
Хранение базы данных в отдельной рабочей директории даст ей больше шансов на выживание
при удалении и переустановке вашей программы.
Мавеновский pom.xml и будет скриптом сборки. Декларативным скриптом.




Примерно все это можно получить "из коробки", используя Spring Boot. Просто идете
на страницу http://start.spring.io, жмете Switch to the full version? заполняете форму
и отмечаете флажками пункты:


Web
Security
JPA
HSQLDB


и Generate project в конце.

На выходе у вас будет архив с готовым скелетом приложения c maven-скриптом как раз
под ваши нужды. Нужно будет доработать напильником: заменить Tomcat на Jetty и досыпать
в зависимости Flyway, например.

Веб-сервер для Ruby

#веб_программирование #ruby

Хочу написать минимальное web-приложение на Ruby. Какой HTTP-сервер для этого можно
использовать?

Сервер должен быть:


Простым в установке и использовании. На бессмысленный пердолинг жалко времени.
Поддерживать cgi-скрипты
Сервер должен быть под линукс
Фреймворки не нужны, от сервера мне нужен только запуск скриптов

    

Ответы

Ответ 1

Если обязателен CGI почему бы не взять любой сервер, поддерживающий CGI? Только приложение
вряд ли получится минимальным. Вам придется изрядно поработать и пописать. Если вы
хотите минимальное приложение лучше исходить хотя бы с уровня Rack-приложения - это
такой гем (библиотека по-рубишному), который позволяет взаимодействовать с ruby web-серверами.
Он де факто стандарт в отрасли, все современные сервера ориентируются на него. Если
писать на чистом Rack - у вас будут очень компактные по коду и потреблению памяти Web-приложения
на чистом Ruby.

Тогда с одной стороны вы получите действительно минимальное приложение, не перегруженное
сверх-тяжелыми гемами вроде ActiveSupport, которые разом прибавляют по десятку мегабайт
к процессу. При условии, конечно, что сами избежите соблазна их использования. С другой
стороны вы получаете доступ ко всей современной Web-инфраструктуре Ruby и его Web-серверам.
Плюс вы найдете поддержку сообщества, потому что рубистов, работающих в Web за пределами
Rack очень и очень не много.

Минимальное Rack-приложение

Установите гем rack

gem install rack


Далее создайте файл config.ru

class Hello
  def call(env)
    [200, {'Content-type' => 'text/plain'}, ['Hello world!']]
  end
end

run Hello.new


Запустить сервер можно командой 

rackup


В отчете которой будет сообщено, на каком порту и IP-адресе слушает сервер (все конфигурируется
уже на уровне конфигурационного файла Web-сервера).

Web-cервера

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

Thin - сервер на EventMachine, один мастер-процесс в цикле обходит все соединения
и проверяет их в неблокирующем режиме. Не боится медленных клиентов, просто не дожидаясь
ответа идет опрашивать других, возвращаясь к текущему на следующем цикле. Выгода заключается
еще в том, что он не переключает контекст потоков/процессов, экономя ресурсы при высокой
частоте обращений со стороны клиентов. Однако, со стороны backend у него такая же классика,
как у Unicorn - если ваше приложение задумается (полезет в базу данных или куда-то
по сети) весь процесс встанет и сервер подвиснет. В продакшене не видел, но если отдавать
какую-нибудь статику, наверное не плохо справится.

Puma - комбинированный вариант, EventMachine и несколько веркеров на backend-стороне.
Не боится медленных клиентов и медленных ответов с сервера.

Это сервера написанные на Ruby. Статику, как правило, стараются отдать быстрым nginx,
динамику передают Ruby-серверу, при необходимости тоже кэшируя страницы.


Ответ 2

В случае если необходимость в поддержке, например php(например когда на сервере несколько
приложений, в том числе использующие php), то возможна связка apache + phusion passenger(необходимо
ограничить количество потоков для passenger, т к иначе быстро съест всю память)

Какова структура папок настоящего “боевого” веб проекта? [закрыт]

#php #javascript #веб_программирование #frontend

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



В /source/ все исходники, а в /build/ всё что скомпилировал Gulp.

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

Хотелось бы услышать мнение более опытных товарищей.

P.S. Может я вообще все неправильно делаю с самого начала?

P.S.S. Заранее спасибо.
    

Ответы

Ответ 1

Структура папок уже определяется самим backend. У меня на проекте, все держится в
папке ../../frontend, а собирается в папку target. Когда начнете прикручивать backend,
структура папок и таски в галпе по несколько раз могут измениться.


Ответ 2

Backend — понятие растяжимое. Если бэкэнд на том же ноде, то тут можно организовать
всё в одной папке (лучше всего, дабы не плодить node_modules). Если имеется в виду
php, то результат сборки (папку build) можно вынести во вне в вашем gulpfile, и там
уже строить бэкэнд.

Начальная страница браузера

#php #javascript #html #css #веб_программирование

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

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

Ответы

Ответ 1

Гуглить, наверное, так: express panel preview.
Хотя меня несколько настораживает, что результаты довольно старые.

В https://habrahabr.ru/post/115705 говорится


Можно просто добавить иконку размером не меньше чем 114*114:



Использовать медиа-запрос с view-mode:

@media screen and (view-mode: minimized) {
  /* some styling of preview */
}

Ответить на http-запрос, содержащий заголовок

X-Purpose: preview


соответствующим содержимым.

Не отправляется письмо через smtp mail - время ожидания операции истекло

#c_sharp #net #веб_программирование #smtp

Написал маленькую прогу на WinForms с опцией отправки сообщения. Собсно код :

   SmtpClient client = new SmtpClient("smtp.mail.ru", 465);
            client.Credentials = new NetworkCredential("vasiliy.aksenov.97@mail.ru",
"11aa11aa");
            client.EnableSsl = true;  
            MailMessage mail = new MailMessage();
            mail.From = new MailAddress("vasiliy.aksenov.97@mail.ru");
            mail.To.Add("vasiliy.aksenov.97@mail.ru");
            mail.Subject = "Получен новый заказ на " + OrderData.clothingTypeRuss;
            mail.Body = "test";
        try
        {
            client.Send(mail);
            MessageBox.Show("Заказ успешно отправлен ", "Отправка");
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message, ex.Source);
        }


не отправляет, пишет что время ожидания превышено. и тоже самое с smtp от gmail.
Может что то в коде не правильно? Хотя по отладке видно что тормозит именно на 
   client.Send(mail); Подскажите как решить проблему?
    

Ответы

Ответ 1

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

Существует два способа соединения по протоколу SMTP c использованием SSL:


Explicit SSL
Implicit SSL


Explicit SSL использует порты  25 (или 587), или же, возможно, порт 2525 (не стандартный)

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

Implicit SSL использует порт 465 и отличается тем, что соединение сразу устанавливается
по TLS/SSL. 

В настоящее время класс SmtpClient поддерживает только Explicit SSL, потому что Implicit
SSL до сих пор не стандартизирован.


Ответ 2

Вот Вам отличный вариант отправки сообщения на почту: 

Стандартные, используемые порты

Некоторые интернет-провайдеры в целях предотвращения рассылки СПАМ закрывают для
доступа 25-й порт, который требуется для работы SMTP-протокола.
Если закрыт 25-й порт.
Если почта у вас не отправляется, вероятно ваш Интернет-провайдер заблокировал 25-й
порт, используемый для работы протокола SMTP.

Это ограничение можно обойти, используя порт 587 (без шифрования или с использованием
TLS-шифрования) или 465 (с использованием SSL-шифрования) обычно не блокируется.

using System.Net;
using System.Net.Mail;
using System.Text;
using System.Windows.Forms;

public class SettingMessage
{
    public static void MessageSend() // можете добавить аргументы
    {
       MailMessage message = new MailMessage();
       SmtpClient client = 
       new SmtpClient("smtp.mail.ru", Convert.ToInt32(0x19)) // сервер,порт
        {
            Credentials = new NetworkCredential("Ваш Email", "Ваш пароль"),
            EnableSsl = true // обязательно!
        };
        message.From = new MailAddress("От кого посылать");
        message.To.Add(new MailAddress("Кому посылать"));
        message.Subject = "Заголовок";
        message.SubjectEncoding = Encoding.UTF8;
        message.Body = "Текст в форме сообщения";
        message.BodyEncoding = Encoding.UTF8; // кодировка 
        string fileName = @"C:\Resume.txt"; // какой-нибудь файл
        Attachment item = new Attachment(fileName); 
        message.Attachments.Add(item);// добавляем файл к сообщению
        client.Send(message); // отправка сообщения
        MessageBox.Show("Сообщение отправлено успешно)))");
    }
}


Ответ 3

Проблема была в порте.

            SmtpClient client = new SmtpClient("smtp.mail.ru", 2525);


так работает

Подскажите, как сделать затемнение фона? (полупрозрачным цветом)

#html #css #веб_программирование #веб_дизайн

Сейчас на многих сайтах используется такое затемнение, но я не нашел, как его сделать.
Например у header есть картинка на фоне, а поверх нее текст. Но чтобы текст читался,
поверх картинки накладывается полупрозрачный черный например фон. Как его сделать?
Для header имеются такие свойства:

header {
    height: 538px;
    width: 100%;
    background: url(../img/header-bg.png) no-repeat center center;
    background-size: cover;
}

    

Ответы

Ответ 1

например:



header {
  position: relative;
  background: url(https://amazingcarousel.com/wp-content/uploads/amazingcarousel/3/images/lightbox/golden-wheat-field-lightbox.jpg)
center no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}

header:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 2;
}

.inner {
  position: relative;
  z-index: 3;
  color: #fff;
  text-align: center;
  padding: 50px;  
}

  

    
Lorem ipsum dolor.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi.
  



Ответ 2

Это ответ на ваш вопрос:

background: linear-gradient( rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.5) ), url('/img/back/home-back.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: top;


Ответ 3

Наложить полупрозрачный блок c rgba бэкграундом (где 4й параметр прозрачность) и
с абсолютным позиционированием.
HTML:







CSS:

.header{
position: relative;
}
.cover{
background: rgba(0, 0, 0, 0.8);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.content{
position: relative;
z-index: 2;
}


Ответ 4

Добавляешь черную заливку фона и opacity: значение от 0 до 1; для этого фона . Пример:
полупрозрачность opacity: 0.5;


Ответ 5

Можно сделать с помощью псевдоэлемента. Код будет примерно такой:



header {
    height: 538px;
    width: 100%;
    background: url(../img/header-bg.png) no-repeat center center;
    background-size: cover;
    position: relative;
}
header:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 0.5;
    z-index: 1;
}
.content{
    position: relative;
    color: white;
    z-index: 2;
}

  

    тут контент
  



Ответ 6

RGBA();

например, background-color: rgba(0, 0, 0, 0.5);

Изменение вида продуктов через javascript

#javascript #ajax #веб_программирование #django

Задача заключается в следующем.
Нужно сделать кнопку, которая переключает вид товаров на сайте(кубиками или списком).
Из моих идей:


Через ajax посылать запрос, а в ответ получать страницу с товарами в требуемом стиле
Через js редактировать html код товаров(какой-то костыль, кажется)
Другая страница в требуемом формате(самый худший вариант, как понимаете)






Прошу помочь с этой задачей. Как ее лучше решить? Может есть более простой способ?
    

Ответы

Ответ 1

В данном случае стоит просто манипулировать стилями:



var products = document.getElementById('products');

document.getElementById('grid').addEventListener('click', function(){
  products.classList.add('grid');
});

document.getElementById('list').addEventListener('click', function(){
  products.classList.remove('grid');
});
.product {
  background: #CCC;
  width: 100%;
  height: 50px;
  border: 1px solid #FFF;
  box-sizing: border-box;
  float: left;
}
.grid .product {
  width: 50%;
}




  

  

  

  

  

  

  

  

  

  




Ответ 2

А в чем, собственно, заключается костыльность второго варианта?

Ставите две кнопки, которые будут переключать стили у блоков товара. И делаете количество
выдаваемых единиц кратное количеству столбцов при изменении на "сетку". Насколько я
знаю, таким способом пользуются все популярные торговые площадки.

Как получить список загруженных изображений?

#javascript #html #jquery #веб_программирование

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



$('.product_images_button').click(function() {
  $('.product_images').click()
});

function readURL(input) {
  var reader = new FileReader();

  reader.onload = function(e) {
    $('.blah').last().attr('src', e.target.result).css('width', '150px').css('opacity',
'0.9');
  }

  reader.readAsDataURL(input.files[0]);
  $('.media_preview_wrap').append('');
  $(".product_images").val("");
}

$(".product_images").change(function() {
  readURL(this);
});

$(document).on('click', '.blah', function() {
  $(this).remove()
})

$('#id_submit').click(function() {
  var data = {
    }
  console.log(data)
});



  

    

      
    
  






    

Ответы

Ответ 1


  

    

      

        
        
      
    
  
  

  









PS Лучше воспользоваться готовыми библиотеками.


Ответ 2

При клике на кнопку, перебираем все классы .blah и добавляем в массив значение src
каждого. Независимо от того, сколько и чего до этого там было удалено... на месте собрали
что есть - отправили.

(в этом сниппете зависает с добавлением картинки), Здесь работает - JsFiddle демо



$('.product_images_button').click(function() {
  $('.product_images').click()
});

function readURL(input) {
  var reader = new FileReader();

  reader.onload = function(e) {
    $('.blah').last().attr('src', e.target.result).css('width', '150px').css('opacity',
'0.9');
  }

  reader.readAsDataURL(input.files[0]);
  $('.media_preview_wrap').append('');
  $(".product_images").val("");
}

$(".product_images").change(function() {
  readURL(this);
});

$(document).on('click', '.blah', function() {
  $(this).remove()
})

/* До этого ничего не трогал */

$('#id_submit').click(function() {
  if( $(".blah").length == 0 ) { return; } // Если ничего не загружали

  var data = [];
  $(".blah").each(function(){
    data.push( $(this).attr('src') ); 
  });
  console.log(data);
});
.blah {width: 80px; margin: 5px; box-shadow: 1px 1px 3px #333;}



  

    

      
      
    
  
  
  
  






P.s. можно еще вне клика создать переменную, которая будет хранить предыдущий массив
картинок. А при клике, после сбора новых данных - сравнить текущий собранный с предыдущим.
Если изменений нет - лишний раз не обращаться к серверу.

Лицензия на иконку

#лицензирование #веб_программирование #html

Здравствуйте, наткнулся на такую вот иконку



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

Ответы

Ответ 1

Ну хоть один вопрос не от студентов на сессии и не от школьников)
На страничке, что вы указали написанно - "License -> Free for personal use only".
Если вы её напечатаете себе на футболку - это будет часный юз. Если на блоге на своем
опубликуете - тоже.
Если же это будет основа для лого - то это уже не будет "для личного использования".
Даже если вы не будете продавать "тыренное", а стырите лично для себя - это ведь все
равно будет незаконно.
P.S. Если вы планируете зарабатывать на этом денежку, то думаю пару баксов на лого
у вас найдется. Ну по крайней мере с первой прибыли)

Авторизация на сайте: ключевые моменты

#веб_программирование #авторизация

Понимаю, что по теме авторизации на просторах интернета море информации, но всё таки
решусь задать один вопрос. Без каких ключевых моментов нельзя обойтись, делая регистрацию
на своём сайте? Авторизация через сессии. Задавая этот вопрос, рассчитываю на ответ
примерно вот в таком виде:


Пароль в базе данных хранить в зашифрованном виде.
При авторизации сохранять время логина, IP и т. д.
Проверка залогинен/нет должна проводиться не только как isset($_SESSION['username']),
а.. А кстати, как это делать?


P.S. Нет, меня не забанили в поисковых системах, но я хочу услышать на словах, что
нужно делать, а не разбираться в тоннах чужого кода, гадая, зачем же он нужен.. 
Спасибо.^^
UPD: тем не менее кто может вкратце дать ответ на вопрос, как же начинающему, но,
я надеюсь, перспективному проекту реализовать авторизацию на сайте?
UPD: вопрос закрыт, в связи с отсутствием новых записей. Надеюсь кто-нибудь подчеркнет
из всех этих дискуссий нечто полезное для себя)    

Ответы

Ответ 1

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


Авторизация с помощью сессий не годится, так как она не будет работать, если сайт
физически находится на нескольких серверах (сам не знаю, но так сказал @BOPOH). Соответственно
если мы рассчитываем, что наш сайт будут любить тысячи людей, надо сразу выбирать другой
способ.
Исходя из первого, начинаем искать другую реализацию. Так вариантов много, были предложены
варианты с БД и memcache.(опять же ВОРОН'ом). Я для себя решил, что сейчас буду делать
через базу данных, просто потому, что для меня на данный момент это проще(я же только
начинаю постигать азы вебдева).
Как же сделать авторизацию через бд? Очевидно, алгоритм, упрощённый до минимума таков:
Пользователь вводит логин и пароль, пароль сравнивается с паролем на сервере, если
они одинаковы, в специальную таблицу заносятся данные о текущем логине. Пока точно
не знаю, какие именно данные понадобятся, но я так думаю что это будут: IP-адрес пользователя,
время логина, уникальный ключ данной сессии(отныне употреблять это слово я буду в значении
"процесс пребывания пользователя на сайте в залогиненном состоянии", $_SESSION тут
уже не при чём). Этот же ключ будет заноситься в cookies. Далее при загрузке каждой
страницы браузер будет обращаться к серверу по этому ключу, и оттуда возвращать данные
о логине.
Теперь о безопасности. Естественно, в базе данных не может храниться сам пароль,
а должен храниться только его хеш, то есть зашифрованная неким алгоритмом(лучше без
возможности дешифровки) строка. Самый распространённый пример - функция md5(). Только
желательно использовать её в таком виде: md5($pass.$salt), так как существует куча
сайтов-дешифровщиков обычных md5-строк. Далее со слов @avp: ключ должен перевычисляться
независимо сервером и клиентом при каждом обмене. И сервер сравнивает присланный клиентом
ключ с ожидаемым. Также для важной информации хэш пароля пересылать по сети нельзя.
И еще, желательно как-то проверять, что сервер с которого Вы получили картинку на экран
- это не подстава. Решение о необходимости использования этих советов, а также способы
реализации оставлю за вами, уважаемые rодеры. Для себя выберу первые два пункта(мой
и первый пункт @avp).


Дополняйте меня)


Ответ 2

(я же только начинаю постигать азы вебдева)

Если вы начинающий WEB-разработчик, советую не заморачиваться с всеми возможными
session handler'ами..
Используйте стандартную работу сессий (через куки).
В случае, если куки будут отключены, то PHP сам изменить поведение сэссия (через
GET параметр).
Непосредственно по поводу вашего вопроса:
 1. С точки зрения безопасности, лучше пароль хранить зашифрованным. Но при таком
подходе, если пользователь забудет пароль, вы не сможете ему напомнить его старый пароль.
вам прийдется генерировать новый. 
 2. При авторизации сохраняйте любую нужную вам информацию.. Это может быть не только
время и ip, а также и referer (т.е. с какого сайта пользователь пришел к вам на сайт)
Тут никаких ограничений, лишь ваш полет фантазий ))
 3. Для большинства случаев, вполне хватает проверки 
if(isset($_SESSION['is_auth']) and  $_SESSION['is_auth'])...

Со временем, когда вы "подрастете" в плане программирования, можно будет заглянуть
как сделана аутентификация у "больших".. К примеру Security Component в Symfony

Язык программирования для написания высокопроизводительных Web-приложений [закрыт]

#веб_программирование

        
             
                
                    
                        
                            Закрыт. Этот вопрос не по теме. Ответы на него в данный
момент не принимаются.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Хотите улучшить этот вопрос? Переформулируйте вопрос,
чтобы он соответствовал тематике «Stack Overflow на русском».
                        
                        Закрыт 4 года назад.
                                                                                
           
                
        
Помогите с выбором языка, который бы обеспечивал наибольшую производительность Web-приложений.
Стоит сказать, что С/C++ наверное не очень для этого подходят.  Суть в том что я хочу
найти ЯП очень хорошо подходящий для веб но значительно превосходящий по производительности
PHP,Python, Ruby и т д.    

Ответы

Ответ 1

Честно говоря, вы дали мало информации по вашей проблеме, поэтому сложно сразу дать
какое-то абсолютно правильное решение. Но вообще генерация большого количества изображений
по какому-то алгоритму - задача сама по себе достаточно ресурсоемкая (к этому можно
еще добавить то, что если алгоритм этой генерации реализован через ж..эммм..не лучшим
образом, то она может стать на n порядков более требовательной в плане ресурсов)
Вполне возможно, что для этих задач имеет смысл задействовать GPU, используя OpenGL
или DirectX - один только процессор с такими проблемами справляется неважно. 
Что касается языков, то из используемых в вебе ЯП вполне приличная производительность
у C#  - как показывает практика, в некоторых аспектах он даже обгоняет C++. (впрочем,
не уверен, что в работе с изображениями это будет иметь весомое значение)
Еще добавлю, что, наверное, стоит рассмотреть вариант с написанием библиотеки на
C/C++, которая будет выполнять работу с изображениями, и подключать ее из вашег оприложения.
Понятия не имею, как там с этим в Питоне (не знаком с ним вовсе), но в том же Шарпе
это вполне себе возможно

Структура папок сайта. Как грамотней?

#mvc #веб_программирование

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

/css
/js
/images
/includes
index.php
page1.php
page2.php
page3.php


PHP-файлы просто связаны между собой ссылками (в меню сайта), в нужные места этих
файлов подключаются файлы из папки includes, которые выводят какие-то данные из базы.
Как вариант - создать папку template для шаблонов, тогда туда буду передаваться данные
из файлов папки includes и уже в главные файлы будут делаться не php-вставки, а вставляться
шаблоны. То есть, получается, что index.php, page1.php, page2.php, page3.php это просто
файлы с html-разметкой и php-вставками (или шаблонами). Есть еще какие-то, более грамотные
варианты разделения?
    

Ответы

Ответ 1

В идеале любой сайт должен иметь такую структуру:
app (корневая папка)
--core
--components
--models
--other code-related stuff
--templates
--public - именно эта папка смотрит "наружу"
----assets
----images
----js
----css
----index.php
--logs

Здесь главное - не названия папок, а то, что наружу смотрит всего одна папка и один
исполняемый файл, в результате сайт у вас оказывается наименее уязвимым. И не забывайте
применять intval() и подобные операции к приходящим айдишникам.
update: Еще одна вещь, которую необходимо отметить - если заливаются какие-то файлы,
то надо их хранить вне публичной директории, либо (если, например, это пользовательские
изображения, которые должны показываться) фильтровать их по расширению и быть уверенным,
что сервер не может исполнять файлы с таким расширением. Буквально на этой неделе сталкивался
с тем, что так сломали самопис (а в свое время так уронили тысячи сайтов на вордпрессе).

Как контроллеры MVC вызывают несколько разных сущностей (компонентов, элементов, модулей)?

#веб_программирование #mvc #проектирование #php

Не первый год программирую, но не могу понять одну простую вещь: как контроллеры
MVC формируют многофункциональные страницы. Например, на странице на этом сайте есть
верхний тулбар, меню справа, меню футреа, основной контент и т.д.
Мне гораздо легче дается понимание HMVC, то есть компонентного подхода. Там все просто:
в шаблоне вызываем нужный компонент, и он уже работает как замкнутая система со своим
внутренним MVC.
Буду признателен, если кто-то сможет втолковать идею. Сколько статей не прочитал,
так и не понял этого.    

Ответы

Ответ 1

Класическое mvc это когда представление по событию модели берет из неё положенное
интерфейсом, диспатчит контроллеру, а контроллер меняет модель. Стоит заострить внимание,
что контроллер не меняет представление вообще ( хотя в классике это ДОПУСКАЕТСЯ ),
а модель меняет так, что решение меняться или нет остается за моделью. И такая модель
называется "активной" и при ней контроллер "тонким", что является единственно верным
вариантом. ВСЁ!
Остальное это неправильно и ложно. Но чья-то глупость распространилась так, что даже
гуру не верят в первоисточник, хотя wiki и "gof" об это говорят прямо (и причиной такой
mvc-ериси, как я считаю, стало опускание из контекста статьи контроллера).
Обновление
Контроллер служит связующим звеном между представлением и модель. Но дело в том,
что в wiki и всяких статейках приводятся (если и правильные реализации) минимальные
примеры, которые в жизни не существуют. И ещё уясните одну маленькую и ускользающую
от всех деталь - представление не имеет ссылку на модель, представление имеет ссылку
на реализацию интерфейса. То есть, по ооп, структура строится на интерфейсах, модель
это абстракция, а не живой объект. И когда все слюнями плюются и говорят, что представление
имея ссылку на модель, нарушает концепцию о разделении логики от отображения, то просто
говорящие не углублялись в mvc сильно, а используют навязываемые фраймворки, которые
делают люди, но их концепцию обожествляют и выставляют эталоном.


Ответ 2

MVC была разработана в 1979 году, когда дела шли немного по-другому (меня тогда еще
не было на этом свете, но, подозреваю, каждое окно ограничивалось ровно одной функцией),
и предназначалась она не для веба. MVC используют просто потому, что она позволяет
избавиться от загаживания кода, следуя простому паттерну, и многие вещи делаются в
обход парадигмы, например, каждый виджет (например, меню страниц) должен был бы получить
данные от контроллера, но наверняка подтягивает их сам из модели. Скажем так, это нестрогое MVC.
HMVC и мне импонирует больше MVC.
"предназначалась она не для веба" = не то чтобы она плохо подходит вебу, просто когда
концепция была озвучена, никто и не думал, подойдет ли это для php-фреймворка.


Ответ 3

Ну, насколько я понимаю: при заходе на страничку контроллер получает набор инструкций,
(вывести меню, вывести контент и т.д.), он посылает эти инструкции по своим модулям,
те, в свою очередь, обрабатывают инстукции, из вьювок берут инфу о том, КАК нужно вывести,
и выводят каждый по отдельности.
Но чаще всего все пишут так: контроллер получает функции, и контроллер САМ работает
с модулями и вьюхами, т.е. модуль выступает в роли класса определенной сущности, где
с помощью методов контроллер получает необходимую инфу, сам загружает вьюху и сам их
соединяет.

С#: сравнение файла на веб-ресурсе и локальный файл

#c_sharp #веб_программирование #файлы #сравнение

Есть веб-сайт, на нем ссылка для скачивая файла "А". Есть локальная версия файла
А. Как можно их сравнить, чтобы не скачивать файл с интернета?

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

Как-то это можно реализовать?
    

Ответы

Ответ 1

Может это поможет? Сравнивать даты.
Наткнулся на просторах Интернета.
http://www.cyberforum.ru/windows-forms/thread1346241.html


Ответ 2

Только через Head запрос, сервер выдаст информацию о файле в виде заголовка, ну и
остальное от сервера зависит, и нужно по ответ Athari проверить заголовки


Ответ 3

Проверьте, поддерживает ли веб-сервер кэширование для файлов. Для этого используются
заголовки типа "ETag", "Cache-Control" и другие. Например, если сервер при скачивании
файла указывает "ETag", то вы можете запомнить эту строчку и при повторном запросе
указать её в заголовке "If-None-Match". Если файл на сервере не изменился, то сервер
вернёт вам соответствующий HTTP код (304 Not Modified) с пустым телом ответа, то есть
будут скачаны только HTTP заголовки, но не сам файл.

См. HTTP ETag.


Ответ 4

Есть элегантное решение с помощью bash однострочника   

diff myFile <(ssh myHost 'cat myFile')


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

diff <(ssh myHost1 'cat myFile') <(ssh myHost2 'cat myFile')


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

P.S. Вместо cat можно написать md5sum, а diff заменить на if , чтобы сравнить хэши,
совсем избавившись от траффика. Правда в таком случае будет непонятно чем конкретно
файлы отличаются.