Сообщество - Web-технологии
Добавить пост

Web-технологии

227 постов 4 472 подписчика
5

Трудности выбора

Озадачили меня тут выбрать и прицепить к порталу простенькую CMS, чтобы новости там пушить и всякие доки выкладывать. Использовать для этих целей средства центральной ИС на JAVA EE то еще извращение (с дописыванием ненужных блоков сбоку), хотя исторически такой функционал там сделали и даже поддерживается.

Подскажите, что сейчас для этих целей модно-стильно-молодежно, а то в голову один Wordpress лезет.

14

Ищу ментора/наставника Web разработка, JavaScript

Верю в силу Пикабу!!!

Помогите левелапнуться от Junior до Junior+/Middle. Очень нужна помощь.

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

Поэтому ищу наставника. Конечно же не бесплатно.

Видео курсы прошу не предлагать, активно их смотрю.

Заранее большое спасибо.

17

Анимированный прелоадер HTML CSS

Всем привет, новое видео от меня!


Создаем анимированный прелоадер на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Данное решение подойдет под большинство сайтов, где необходим прелоадер. Анимацию можно адаптировать под себя точно также как размер, цвет и форму фигур.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/LYyjVWQ

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-20-Loading-Anim...

Показать полностью 1
15

Простой календарь на JavaScript

Всем привет, новое видео от меня!


Создаем простой календарь на чистом JavaScript HTML/CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Можно использовать в качестве виджета на любом сайте. При необходимости календарь на чистом JS можно стилизовать под себя.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/WNjdMgY

GitHub: https://github.com/CrazyCoding21/CC-JavaScript-39-Simple-Cal...

14

Карточки с градиентом HTML CSS

Всем привет, новое видео от меня!


Создаем карточки с градиентом на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Креативное оформление для карточек на вашем сайте. Можно поменять размер, цвета в градиенте и анимацию.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/oNWLNeP

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-19-Gradient-Bor...

Показать полностью 1
52

Английский для IT. Как учиться программисту. Часть 1

С чего начать?


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


Именно поэтому каждый IT-специалист должен владеть им на хорошем уровне.

Что понадобится изучать/повторять в первую очередь? Основы. Основы, Карл.

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

По аналогии, это как пытаться разобраться в Node, плохо представляя себе JS.

Без выученных основ так же невозможно полноценное устное общение с англоязычной командой/ заказчиком.

Это как пытаться писать код, плохо владея синтаксисом языка программирования.


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


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

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


Одной из таких классификаций является международная система CEFR (Общеевропейские компетенции владения иностранным языком).

Данная система может применяться ко всем европейским языкам.

Так выглядят уровни владения английским языком по шкале CEFR:

A — Элементарное владение (Basic User):

A1 — Уровень выживания (Survival Level — Beginner и Elementary)

A2 — Предпороговый уровень (Waystage — Pre-Intermediate)

B — Самостоятельное владение (Independent User):

B1 — Пороговый уровень (Threshold — Intermediate)

B2 — Пороговый продвинутый уровень (Vantage — Upper-Intermediate)

C — Свободное владение (Proficient User):

C1 — Уровень профессионального владения (Effective Operational Proficiency — Advanced)

C2 — Уровень владения в совершенстве (Mastery — Proficiency)

Существует много онлайн тестов разной степени толковости, ссылки на которые выдает гугл по запросу "тестирование уровня английского языка онлайн".


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


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

Бесплатное изучение английского. В обмен на обучение программированию.

Я вам преподаю английский, вы мне - программирование

Стек - Node.JS + MongoDB.

Что есть: базовые знания JS + Node

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

Могу дать базу, структуру языка, произношение, чтение, перевод, в целом, любой аспект, на ваш выбор. Есть опыт преподавания + опробованная программа классического английского (Oxford)

Формат: онлайн (например, Teamviewer + голосовое общение в мессенджере).

Telegram: t.me/ax_el5 (убрать нижнее подчеркивание)

Показать полностью
28

Эффект неонового свечения текста HTML CSS

Всем привет, новое видео от меня!


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


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/VwpXxwj

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-6-Neon-Text-Eff...

Показать полностью 1
7

Эффект при наведении на шестиугольник HTML CSS

Всем привет, новое видео от меня!

Создаем эффект при наведении на шестиугольник с картинкой на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Можно использовать для оригинальной подачи контента на сайте. Добавить в шестиугольник можно любое изображение.

Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются.

CodePen: https://codepen.io/crazycoding21/pen/MWmYoOR
GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-15-Hexagon-Imag...

https://youtu.be/VA4ZabHQt_M

65

Как без пиратства и покупки платного ПО пользоваться макетами Adobe XD

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


Стандартный метод — открыть в программе Adobe XD — нужна программа купленная за деньги (подписка).

Использовать сервис-конвертор XD2SKETCH.COM — за деньги (подписка или платное разовое использование).

Программу-сервис Avocode — за деньги.
Кроме того, некоторые программы работают только в среде Mac OS (Sketch - только MAC OS или веб-приложение)

И тому подобное.


Чтобы открыть макет Adobe XD бесплатно, можно воспользоваться бесплатной программой-сервисом Photopea — в этом случае видны все параметры объектов макета и даже доступ к CSS значениям реализован удобнее чем в Photoshop. А вот реализация извлечения растровых объектов из макета, для внедрения в вёрстку, немного подкачала, на мой вкус.


Чтобы получить объекты из файла Adobe XD, достаточно открыть его как Zip-архив, например с помощью архиватора 7-Zip. В результате получим несколько папок с ресурсами JSON, XML, и папкой с растровыми объектами: «resources».


Содержащиеся там файлы будут без расширений, но это решается просто переименованием, с добавлением соответствующего расширения. Если есть сомнения в том, какое расширение необходимо, достаточно открыть файл в программе Notepad++ или в другом тактовом редакторе. У файлов формата PNG в первой же строчке будет «‰PNG». У SVG-файлов будет так же видна вся XML структура присущая SVG-файлам.


Итого, файл макета открыт в Photopea — данные CSS доступны для переноса. Папочка с графикой для вставки в вёрстку — готова.

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

Возможно, подход не оригинальный. Но уж чем богаты.

Вероятно есть и более простые методы.

Показать полностью
Мои подписки
Подписывайтесь на интересные вам теги, сообщества,
пользователей — и читайте персональное «Горячее».
Чтобы добавить подписку, нужно авторизоваться.
Отличная работа, все прочитано!