Задать вопрос
  • Как происходит доработка верстки на фрилансе?

    Stalker_RED
    @Stalker_RED
    Расскажите как вообще происходит предоставление исполнителю доступа к коду в готовом проекте, который уже на хостинге.


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

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

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

    Или тебе дают ФТП-доступ к уже запущенному проекту. Ты пытаешься у себя поднять копию, но оно не работает, потому что там же уже серверный код, а не просто верстка, и оно хочет БД, и еще 100500 зависимостей, которые ты не умеешь разруливать, потому что ты верстальщик же, а не админ и совсем не программист. Тогда ты призываешь какого-то шамана, который научит тебя великому колдунству - внедрить проверку прям на живом сайте, типа "если есть такая-то кука - подключить такую-то css-ку". И ты фигачишь прям по живому, непрерывно подергиваясь, и проклиная всю индустрию.
    При этом тешишь себя надеждой, что ты ввязался в этот кошмар в последний раз, и в следующий раз заказы без гита идут лесом, ну в крайнем случае пусть будет архив, хотя сколько-сколько вы предлагаете за добавление двух пунктов в меню?
    Ответ написан
    Комментировать
  • Как сделать при нажатии кнопки вывод всех новостей AJAX?

    Pro-gressive
    @Pro-gressive Автор вопроса
    Под каждым "custom" добавить еще "custom", без параметра limit, но с параметром from. Каждый новый тег помещаем в скрытый div-контейнер, рядом кнопку для показа.
    Пример для первой вкладки, нужна jquery

    {custom category="1,2,3" template="shortstory" order="title" sort="desc" limit="15"}
    <br />
    <button onclick="$(this).next('div').show()">Показать все</button>
    <div style="display:none">
    {custom category="1,2,3" template="shortstory" order="title" sort="desc" from="15"}
    </div>


    сделал вот так ну при этом надо что бы кнопка исчезала если отобразились все новости, и и больше не чего показывать!
    Ответ написан
    2 комментария
  • Как узнать во что упирается closure-compiler?

    kotomyava
    @kotomyava
    Системный администратор
    Нет переводов сообщений для локали ru_RU.
    Ответ написан
    7 комментариев
  • Как правильно сделать валидацию формы на javascript?

    AngReload
    @AngReload
    Кратко о себе
    Ответ написан
    Комментировать
  • Полёт пули в игре html5+js?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    ArtC, выкладываю демонстрацию. Покликайте левой кнопкой мышки по листу с сеткой.

    код реализации цикла расчета и отображения пуль
    (function(exports) {
    	console.log("Billets");
    	"use strict";
    
    	/**
    	 * в данном модуле для векторных расчетов используется модуль Vector
    	 * его код доступен по ссылке https://game.lastuniverse.ru/gun.2d.01/js/vector.js
    	 * в этом модуле его функционал доступен через глобальную переменную window.libs.Vector
    	 */
    	// создаем сокращенную ссылку на функционал модуля vector.js
    	const Vector = window.libs.Vector;
    
    
    	/**
    	 * в данном модуле для отрисовки на canvas-е сетки, а также для масштабирования
    	 * используется специальная прослойка. В вашем случае вы будете просто сами рисовать через
    	 * 2d контекст canvas-а полученный с помощью ctx = canvas.getContext("2d");
    	 * здесь же я использую специальные врапперы, таким образом чтобы код 
    	 * представленный далее можно было использовать на обычном контексте canvas-а
    	 */
    	// создаем врапер на контекст канваса canvas.getContext("2d")
    	let ctx = window.libs.ctx;
    	// в вашем случае будет както так
    	// ctx = canvas.getContext("2d");
    
    
    	/**
    	 * Функция перерисовки сетки. В вашем случае это будет функция рисующая 
    	 * через ctx какой то фон на канвасе
    	 */
    	function redraw() {
    		window.libs.sheet.planedReDraw();
    		window.libs.sheet.reDraw();	
    		// в вашем случае будет както так:
    		// ctx.fillStyle="#1b1b1b"; // устанавливаем цвет фона
    		// ctx.fillRect(0,0,canvas.width,canvas.height); // зарисовываем канвас этим цветом
    
    	}
    
    
    	/**
    	 * для того чтобы интерфейс мог иметь доступ к параметрам пули и менять их
    	 * экспортируем объект с настройками и функциями данного модуля. 
    	 * В других модулях будет доступен как window.libs.bullets
    	 * в вашем случае в этом нет необходимости
    	 */
    	exports.bullets = {};
    
    	
    	/**
    	 * Настройки симуляции
    	 * settings.speed 		- скорость новых пуль
    	 * settings.size 		- размер новых пуль
    	 * settings.distance	- радиус жизни пуль
    	 */
    	const settings = {
    		speed: 10,
    		size: 10,
    		distance: 200
    	};
    	// экспортируем для интерфейса объект с настройками пуль. 
    	// В вашем случае в этом нет необходимости
    	exports.bullets.settings = settings;
    	
    
    
    
    
    
    	/**
    	 * Приготовления завершены, начинаем создавать пули !!!!
    	 */
    
    
    
    
    
    	
    	/**
    	 * массив с пулями. каждая пуля описывается объектом, содержащим ключи:
    	 * @key {object} loc 		объект {x: ..., y: ...} содержащий текущие координаты пули
    	 * @key {object} emitter 	объект {x: ..., y: ...} содержащий координаты из которых стартовала пуля
    	 * @key {object} direction 	нормализованный вектор/объект {x: ..., y: ...} содержащий направление полета пули (нормализованный - значит его длинна равна 1)
    	 * @key {number} distance	радиус жизни пули
    	 * @key {number} speed 		скорость пули
    	 * @key {number} size 		размер пули
    	 */
    	let bullets = [];
    
    	
    	/**
    	 * Обработчик собития click по рабочему пространству листа (canvas-а)
    	 * @param  {object} event 	имитация стандартного эвента события click (в вашем случае при использовании этого кода будет не имитация)
    	 */
    	function mouseclick(event){
    		add_bullet(
    			{ x: 0, y: 0 }, // летит из центра
    			{ x: event.clientX, y: event.clientY }, // по направлению к курсору мышки
    			settings.distance, // c радиусом жизни пули указанным в настройках
    			settings.speed, // со скоростью указанной в настройках
    			settings.size // с размером указанным в настройках
    		);
    	}
    	// экспортируем обработчик события click по листу. Будет вызван при клике на листе
    	exports.bullets.mouseclick = mouseclick;
    	// в вашем случае вместо этого вы сделаете так:
    	// canvas.addEventListener("click", mouseclick);
    
    
    	/**
    	 * функция добавления новой пули
    	 * @param {object} emitter 		объект {x: ..., y: ...} содержащий координаты из которых стартует пуля
    	 * @param {object} direction 	        не нормализованный вектор/объект {x: ..., y: ...} содержащий направление полета пули
    	 * @param {number} distance		радиус жизни пули
    	 * @param {number} speed     	скорость пули
    	 * @param {number} size 		размер пули
    	 */
    	function add_bullet(emitter, direction, distance, speed, size) {
    		
    		// заносим в массив с пулями новую пулю
    		bullets.push({
    			emitter: emitter,
    			loc: emitter,
    			direction: new Vector(direction.x, direction.y).normalize(),
    			distance: distance,
    			speed: speed,
    			size: size
    		});
    	}
    
    	/**
    	 * функция расчета следующей позиции пули
    	 * @param  {object} bullet 	объект, содержащий параметры пули: loc, emitter, direction, speed, size
    	 */
    	function calc_bullet(bullet) {
    		
    		// преобразуем координаты в объект класса Vector
    		const loc = new Vector(bullet.loc.x, bullet.loc.y);
    		
    		// рассчитываем вектор приращения в направлении движения пули для ее скорости
    		const vector = bullet.direction.multiply(bullet.speed);
    
    		// добавляем к координатам пули значение вектора с приращениями
    		bullet.loc = loc.add(vector).toLocate();
    	}
    
    	/**
    	 * функция расчета следующей позиции всех пуль.
    	 * также функция следит за удалением пуль при их
    	 * отлете на расстояние превышающее радиус жизни пули
    	 */
    	function calc_all_bullets() {
    		
    		// прокручиваем в цикле все пули
    		bullets.forEach(bullet=>{
    			
    			// расчитываем новые координаты очередной пули
    			calc_bullet(bullet);
    
    			// рассчитываем расстояние пули от точки старта
    			const distance = Math.sqrt( Math.pow(bullet.emitter.x-bullet.loc.x, 2) + Math.pow(bullet.emitter.y-bullet.loc.y, 2) );
    
    			// если дистанция болше чем дистанция жизни этой пули, запоминаем что ее надо удалить
    			if( distance > bullet.distance ){
    				bullet.toDelete = true;
    			}
    		});
    
    		// удаляем помеченые для удаления пули
    		bullets = bullets.filter(bullet=> !bullet.toDelete);
    	}
    
    	/**
    	 * функция отрисовки пули
    	 */
    	function draw_bullet(bullet) {
    		ctx.beginPath();
    		ctx.strokeStyle = "#fff";
    		ctx.fillStyle = "#f00";
    		ctx.arc( bullet.loc.x, bullet.loc.y, bullet.size, 0, Math.PI*2, false );
    		ctx.closePath();
    		ctx.fill();
    		ctx.stroke();		
    	}
    
    	/**
    	 * функция отрисовки всех имеющихся пуль
    	 */
    	function draw_all_bullets() {
    		
    		// прокручиваем в цикле все пули
    		bullets.forEach(bullet=>{
    			
    			// отрисовываем очередную пулю
    			draw_bullet(bullet)
    
    		});
    	}
    
    
    	/**
    	 * функция содержащая действия цикла игровой симуляции
    	 */
    	function play(){
    
    		// следующую строку в вашем случае нужно удалить
    		if(!ctx) ctx = window.libs.ctx;
    
    		// расчитываем новые координаты всех пуль
    		calc_all_bullets();
    
    		// перерисовыаем фон на листе (на канвасе)
    		redraw();
    
    		// перерисовыаем все пули
    		draw_all_bullets();
    
    		// панируем запуск следующей итерации игрового цикла через 20 милисекунд
    		setTimeout(play,20);
    	}
    
    
    	/**
    	 * запускаем функцию игрового цикла.
    	 */
    	play();
    
    })(this.libs=this.libs||{});



    PS: Так же Вы можете дополнительно посмотреть как реализованы векторные вычисления на плоскости canvas-a (вычисление расстояний, скоростей, направлений а также масштабирования) в этом ответе
    Ответ написан
    2 комментария
  • В какой программе открывать файлы psd для верстки?

    Для psd-файлов можно использовать фотошоп с расширением CSS hat.
    Либо сторонние программы тип: avocode, figma, zeplin. Мне больше по душе avocode, либо верстать с фотошопа.
    Если сидишь под виндой, а макет скинули в скетче, то используй figma.
    Ответ написан
    Комментировать
  • К чему относится анимация scrollTo?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Без JS вовсе: якорь и scroll-behavior smooth https://developer.mozilla.org/ru/docs/Web/CSS/scro...
    Ответ написан
    3 комментария
  • К чему относится анимация scrollTo?

    Enroller
    @Enroller
    Немного авантюрист
    window.scrollTo({
        top: 1000,
        behavior: "smooth" // плавно
    });
    Ответ написан
    Комментировать
  • Как отключить код jquery $('.slider_picasso').on('wheel', (function(e) {...}?

    Enroller
    @Enroller
    Немного авантюрист
    Почему бы вам не добавить ветвление ?

    $('.slider_picasso').on('wheel', (function(e) {
    
    if (window.innerWidth > 1024){
    
                    e.preventDefault();
    
                    if (e.originalEvent.deltaY < 0) {
                        $(this).slick('slickNext');
                    } else {
                        $(this).slick('slickPrev');
                    }
    
    } else{
    return;
    }
                }));


    Будет считываться при каждом whell...
    Ответ написан
    Комментировать
  • Над чем нужно работать, что улучшать?

    @spaceatmoon
    Ну вот чисто взгляд со стороны.

    1. Научитесь оформлять проекты через markdown. Сейчас такое описание проекта тяжело читать, я осилил 5 слов, потенциальный работодатель вообще не посмотрел бы.
    2. Группируйте файлы проекта по типу и смыслу. Сейчас это каша и трудно понять мне как простому не фронтендеру где логика, а где фреймфорк.
    3. Так как вы пишите все еще говнокод, то приучайтесь над сложными участками кода писать комментарии где выражена суть исполнения функции.
    4. Не знаю как во фронтенде сейчас, но бекендеры не любят когда мешают логику и шаблоны.
    5. Научитесь раставлять скобки, прочитайте как оформлять код в js
    spoiler
    componentDidMount() {
        this.getTicketData("ticket.json");
          } // И так везде

    6. Это что?
    spoiler
    newArr = [...newArr, ...arr0, ...arr1, ...arr2, ...arr3];

    7. Это плохая практика. Код должен быт абстрагирован от данных. Нужно заменить на объект и проверять есть ли в объекте нужные данные или вернуть дефолтное значение.
    spoiler
    const getStopsNumber = (stop) =>{
          switch (stop) {
            case 3:
              return "3 пересадки"
            case 2:
              return "2 пересадки"
            case 1:
              return "1 пересадка"
            case 0:
              return "без пересадок"
            default:
              return
          }
        }


    Пока хватит.
    Ответ написан
    5 комментариев
  • Над чем нужно работать, что улучшать?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Не любитель реакта, поэтому про него не буду говорить. А вот CSS покритикую:
    - Стоит прикрутить какой-нибудь препроцессор, поиспользовать вложенность (структура лучше будет видна) и вынести в человеко-понятные константы все, что выносится - цвета, размеры и.т.д. Там достаточно повторений.
    - Стоит поделить все на отдельные файлы-компоненты.
    - Стоит получше подумать над общим разбиением CSS на компоненты. Есть конечно разные подходы, но отдельные кнопки, или группа из нескольких кнопок, или чекбоксы - это универсальные штуки на весь проект. Какой смысл их привязывать к какому-то сайдбару или калькулятору?
    - Про адаптивность вы сами написали.
    - Стили для :focus отсутствуют. Клавиатурой не получится пользоваться.
    - Еще мне кажется, что у сайдбара отступ внизу должен быть (дизайн не видел, но имхо есть). И что cursor: pointer у кнопок должен быть.

    З.Ы.: Еще есть мысль, что вариант "все" там не нужен. "Все" должны показываться при отсутствии фильтров. Но без анализа ЦА не буду утверждать, может там к к такому варианту люди привыкли.
    Ответ написан
    3 комментария
  • Можно ли подключить к одному HTML два CSS?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Хоть двадцать два. Правила CSS разбираются и применяются в порядке приоритета, внутри одного приоритета - в порядке следования.
    Ответ написан
    Комментировать
  • Какой игровой движок посоветуете новичку для android?

    lxsmkv
    @lxsmkv
    Test automation engineer
    Почитайте документацию каждого проекта. Какая вам покажется наиболее вменяемой и полной - тот проект и выбирайте. Скачайте на компьютер - повозитесь с каждым из них. Какой вам покажется наиболее интуитивно понятным - тот и выбирайте. В каком вы быстрее всего сделаете общий набросок - тот вам и подходит.

    В вопросах выбора лучше опираться на свое впечатление. Ведь вам потом работать с этим. А плюсы и минусы вы и так уже определили.

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

    В этом видео делают краткий обзор движков с примерами сделаных на них игр.
    Ответ написан
    Комментировать
  • Как отключить bind клавишу Dell g3?

    Ezhyg
    @Ezhyg
    В биосе переключи режим.
    Ответ написан
    Комментировать
  • Как вытащить из строки определенную часть?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Можно достать последовательность подходящих символов, расположенную в конце строки:

    str.match(/\w+$/)[0]

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

    str.split(/\W/).pop()

    Или, удалить максимально длинную последовательность символов, оканчивающуюся неподходящим символом:

    str.replace(/.*\W/, '')

    Или (дикий вариант), ищем максимальный индекс мусорного символа, вырезаем кусок строки, начиная со следующего (если нигде ничего не найдено, везде -1, с единицей это 0, т.е., начало строки) и до конца:

    str.slice(1 + Math.max(...[...'@/'].map(n => str.lastIndexOf(n))))

    Или (тоже дикий вариант), перебираем строку, добавляем символы в результат, если символ мусорный - сбрасываем результат:

    [...str].reduce((acc, n) => '@/'.includes(n) ? '' : acc + n, '')
    Ответ написан
    2 комментария
  • Как правильно передать значения input из одного блока в другой?

    bubandos
    @bubandos
    bash'у, javascript'ую, php'лю, css'аю, html'каю
    jsfiddle.net/anton4ept/7u0vtx3s
    как вариант
    Ответ написан
    Комментировать