Получи случайную криптовалюту за регистрацию!

Чумак о фрилансе / Веб разработка

Логотип телеграм канала @chumak_freelance — Чумак о фрилансе / Веб разработка Ч
Логотип телеграм канала @chumak_freelance — Чумак о фрилансе / Веб разработка
Адрес канала: @chumak_freelance
Категории: Технологии
Язык: Русский
Количество подписчиков: 320
Описание канала:

Вдохновение на каждый день 🌴
Разработка сайтов 💻
Веб дизайн 🎨
Новости мира программирования 🌍
Фриланс 👨‍💻
По сотрудничеству и рекламе: @vladislavchumak ⚙️

Рейтинги и Отзывы

4.33

3 отзыва

Оценить канал chumak_freelance и оставить отзыв — могут только зарегестрированные пользователи. Все отзывы проходят модерацию.

5 звезд

2

4 звезд

0

3 звезд

1

2 звезд

0

1 звезд

0


Последние сообщения 2

2021-05-03 09:17:07 Минификация кода веб-страниц.

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

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

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

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

Сокращение HTML-кода.
Минификация HTML-кода не столь эффективна по отношению к сокращению CSS и JavaScript по двум причинам:
- HTML-код, как правило, составляет незначительную часть от общего объёма кода веб-страницы.
- HTML-код динамических сайтов формируется на сервере и отдаётся браузеру при запросах.

Поэтому предварительно минифицированные HTML-файлы могут применяться только на статичных веб-страницах. Но ведь PageSpeed Insights при наличии несокращенного кода на проверенной странице синим по белому пишет «Сократите код HTML». И действительно, есть выход даже для динамических сайтов: это расширения для CMS.

Минификация HTML онлайн.
Предварительная минификация HTML-кода на динамических сайтах не применяется, т. к. он формируется на сервере (например, посредством PHP). Но если появится необходимость сократить HTML-код (например, для статичного сайта), то существует неплохой онлайн-сервис HTML Compressor, позволяющий также сокращать код CSS и JS. Он позволяет установить степень сокращения HTML-кода, определяющая необходимость удаления переносов строк, кавычек для значений атрибутов и прочее.

К минусам сервиса можно отнести отсутствие возможности передавать файл для оптимизации кода, а также отсутствие продвинутых параметров оптимизации CSS-кода (автоматическое совмещение свойств для одинаковых селекторов).

Сокращение CSS-кода.
Объём CSS-кода, как правило, составляет куда большую часть веса веб-страницы, чем HTML, поэтому не следует игнорировать замечание сервиса PageSpeed Insights «Сократите CSS» и пренебрегать возможностью использовать сокращенный код в CSS-файлах для ускорения загрузки веб-страниц сайта.

Минификация CSS онлайн.
Чтобы качественно сократить CSS-код рекомендуем применять специализированный онлайн-сервис CSS Resizer, который позволяет:
- сократить CSS по указанному URL-адресу, в загруженном файле или введённом тексте
- задавать степень сокращения CSS-кода, определяющую совмещение свойств для одинаковых селекторов, удаление переносов строк и т. п.
- автоматически преобразовывать цвета RGB в HEX
- сохранять сокращенный CSS-код в файл

Сокращение JS-кода.
Минификация кода JavaScript не менее актуальна, чем для CSS: во многих случаях JS-код занимает наибольший объём памяти по сравнению с CSS и HTML вместе взятыми, т. к. на сайтах применяются JS-скрипты CSS-фреймворков, а также JS-библиотеки и плагины.

Минификация JS онлайн.
Сократить JavaScript онлайн можно с помощью рассмотренного на примере минификации HTML-кодасервиса HTML Compressor, который минифицирует JS-код не хуже прочих.
Но для разнообразия можно рассмотреть другой узконаправленный онлайн-сервис JSCompress.

К плюсам сервиса можно отнести возможность отправлять код для минификации в файле, к минусам — отсутствие возможности редактировать сокращенный сервисом код в окне вывода.
113 views06:17
Открыть/Комментировать
2021-05-02 18:00:04 7 плагинов Figma, которые сэкономят время и ускорят рабочий процесс проектирования!

RenameIt.
Держи файлы Figma организованными - пакетное переименование слоев и фреймов через плагин Rename It. Плагин умеет переименовать несколько слоев одновременно.

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

Component Cloner.
С помощью плагина Component Cloner можно делать самостоятельные клоны экземпляров компонентов с мастерами или просто сделать клон компонента.

Component Replacer.
Плагин Component Replacer поможет заменить выделенное компонентами или экземплярами.

Stark.
Stark: убедись, что цвета, изображения и типографика работают рука об руку, обеспечивая отличную читаемость, четкость и контрастность. Можно выбрать один слой и Stark скажет, соответствуют ли цвета правилам контрастной доступности WCAG 2.0.

Palette.
Плагин позволяет экспериментировать с цветовой палитрой. Они генерируются автоматически с использованием машинного интеллекта.

Find and Replace.
С плагином Find and Replace можно найти и заменить тексты на странице. Можно искать объекты на странице либо по текстовому содержимому, либо по названию слоя.
122 views15:00
Открыть/Комментировать
2021-05-02 09:00:04 Tech.craftwork.design.

Пришло время отобразить бизнес, науку и криптовалюту по-современному. Примени эти иллюстрации в своём следующем дизайн-проекте.
120 views06:00
Открыть/Комментировать
2021-05-01 18:00:11 20 полезных фразовых глаголов на английском, которые связаны с технологиями.

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

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

Log in/on – авторизоваться. Обычно, мы вводим имя пользователя и пароль, чтобы начать работу с компьютером или программой.
— What is the user name and password that you use to log on?
— It has 1.7 million registered customers who log in to play games and socialize.

Log out/off – выйти из программы или системы.
— The program lets you shut down, restart, or log off Windows at specific times and dates.
— Always log out when you’re done checking your email.

Key in/put in – вводить данные в компьютер, телефон или другой прибор с помощью клавиатуры или сенсорного экрана.
— I gave my name and she keyed it into her computer.
— Key in the password to access the web page.

Back up – делать резервную копию информации на компьютере.
— Be sure you back up your files before you change systems.
— My computer backs everything up in the cloud.

Set up – устанавливать новую компьютерную программу или приложение, или подключать компьютер.
— It takes a few minutes to set up the program.

Boot up – начинать работу, запускать компьютерную систему.
— Wait a second, my computer is booting up.
Shut down – прекращать работу, выключать (ся).
— Later that day, the server shut down completely.
— I don’t know what happened, it just shut itself down and now it’s restarting.

Go down – поломаться, перестать работать.
— The battery should prevent the computer system from going down in the event of a power cut.
— I was about to finish the report when suddenly the computer went down.

Print out – распечатывать что-либо с помощью принтера.
— Should I print out that graph now?

Plug in – подключать оборудование к сети или к другому электрическому оборудованию.
— The keyboard plugs in at the back of the computer.
— Then I realized I hadn’t plugged the printer in.

Go online – заходить в сеть, использовать интернет.
— You have to go online to be able to use this application.

Go offline – выходить из сети, не работать в сети.
— The hope is that the worst of the insecure servers will go offline over the next few years.
— The app will go offline on November 30, 2017, though users with version 3.0 of app installed on their phone will still be able to make animated movies.

Pull down – выбирать что-то из меню с выпадающим списком.
— Click on the file menu and pull down to “Save As…”
Scroll up – листать или прокручивать мышкой вверх.
— Scroll up and read that part again.

Scroll down – листать вниз.
— If you scroll down to the bottom, you will see the exercises.

Wipe out – удалять данные с компьютера.
A virus got into my computer and wiped out the hard disk.

Pop up – всплывать, появляться.
— The words «Hard disk failure — program aborted» popped up on the screen.

Filter out – фильтровать, удалять ненужные или нежелательные сообщения электронной почты.
— Gmail filters out all the spam in my account.

Sign up – регистрироваться в приложении или на сайте.
— You can sign up for a very useful fortnightly newsletter that covers all types of charitable fundraising.
— Then sign up for any number of free online photo albums.

Power up – подзарядить, подключить питание.
— Simply power up your laptop and continue working.
— Never move a computer while it is powered up.
132 views15:00
Открыть/Комментировать
2021-05-01 09:00:14 Хитрости в Figma, о которых ты, возможно, не слышал.

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

2. Перетаскивай объекты за пределы кадра, удерживая их внутри.
Удерживай клавишу пробела при перетаскивании объекта за пределы рамки, чтобы он оставался внутри контейнера. Можно отключить «clip contents» для кадра, содержащего объект, чтобы его можно было видеть, когда он находится вне контейнера - также можно нажать CMD (CTRL) + Y, чтобы отобразить контуры.

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

4. Дублируй последнее действие.
CMD + D помогает продублировать предыдущее действие. Также с помощью этой комбинации клавиш можно дублировать объекты, кадры и все остальное.

5. CMD + / разблокировать все объекты.
CMD + / имеет массу полезных быстрых действий, которые сэкономят массу времени в рабочем процессе. Например, быстрая разблокировка всех объектов и изменение шрифтов.

6. Легко вставляй изображения внутри форм-заполнителей.
CMD + Shift + K помогает заменить заливку фигур или рамок на изображения.

7. Content Reel + Unsplash.
С помощью Content Reel можно вставлять аватары, lorem ipsum, имена, адреса и многое другое в свой дизайн одним щелчком мыши. Unsplash - это бесплатная библиотека высококачественной графики.

8. Исправить высоту строки.
Если высота строки выглядит шаткой и у тебя нет определенного значения, просто введи «auto» в поле line-height, и оно автоматически отрегулируется.
131 views06:00
Открыть/Комментировать
2021-04-30 18:00:41 Lab.streamlinehq.com.

80 векторных иллюстраций.
Они идеально подходят для использования в презентациях, приложениях или веб-сайтах (можно использовать в коммерческих и личных проектах).
136 views15:00
Открыть/Комментировать
2021-04-30 09:02:07 15 потрясающих сайтов-генераторов кнопок CSS.

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

css3buttongenerator.com
bestcssbuttongenerator.com
cssbuttoncreator.com
cssportal.com
Loading.io
fromdev.com
html-code-generator.com
cssgenerators.net
buttonoptimizer.com
dextronet.com
sciweavers.org

Кнопки переключения (Flip Switch).
cssportal.com
proto.io
html-code-generator.com
bun.js.
145 views06:02
Открыть/Комментировать
2021-04-29 18:00:06 Эффект Рестофф. Как сделать отдельные элементы интерфейса более запоминающимися.

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

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

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

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

Выделенные элементы влияют на пользователей, пробуждая в них эмоции.

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

Отображение текущего и завершенного шагов путем изменения формы / цвета / типа кругов.

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

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

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

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

Выбирай с умом.

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

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

Поддержание баланса – ключ к созданию чистых интерфейсов с правильным акцентом на соответствующих элементах. Но помни, что когда ты используешь слишком много отличительных элементов, в конечном итоге получишь беспорядочный интерфейс, который создаст слишком большую когнитивную нагрузку на пользователя. Важно не переборщить! ;-)
152 views15:00
Открыть/Комментировать
2021-04-29 13:25:50 Чат для общения

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

Ссылка для вступления: https://t.me/chumak_dev
151 views10:25
Открыть/Комментировать
2021-04-29 09:00:06 Storyset.com.

Бесплатные иллюстрации, которые можно настроить по своему вкусу. Результат доступен для скачивания в формате png или svg. Настраивай анимируй и загружай иллюстрации, чтобы создать невероятные веб-страницы, приложения или презентации!
161 views06:00
Открыть/Комментировать