Оживлюємо UI: дорожня карта підходів до CSS animations

У житті кожного Front-end розробника настає момент, коли сайт уже наче й готовий, усі елементи на своїх місцях, responsive теж зроблено, але чогось не вистачає. Сайт не здається «живим», йому бракує інтерактивності. Уся динаміка закінчується на додаванні cursor: pointer до посилань / кнопок. Якісний UI сьогодні неможливий без інтерактиву та плавності, особливо якщо врахувати ту велику кількість інструментів, які доступні веброзробникам. Мій комерційний досвід у розробці почався з роботи в компанії, яка спеціалізується на вебанімаціях. Там я вивчив і втілив у життя багато різних підходів до створення якісного UI. Від простих анімацій на CSS до малювання в Canvas і магічної технології WebGL (до речі, я був першим у компанії, хто почав використовувати WebGL в production, і це дало додаткові бонуси в роботі). Завдяки цікавим анімаціям мої сайти потрапляли на awwwards , що теж вважаю гарним досягненням для фронта. Зараз працюю на позиції Software Engineer в Mate academy.

Опубліковано: 24/12/20 @ 11:00
Розділ html та css Читати далі...

Front-end дайджест #35: Hermes, JS-in-CSS і VS Code на стероїдах

У випуску: починаємо використовувати СЅЅ Custom Properties, в черговий раз спрощуємо React додатки разом з Hook'ами, а також дивимося доповіді фронтенд-конференцій за червень/липень (повірте їх було багато)! CSS, CSS in JS і навпаки JS-in-CSS — пишемо CSS на JS разом з Houdini CSS 11 JavaScript Animation Libraries For 2019 — добірка корисних JS-бібліотек для анімацій Статті від CSS Tricks: Restricting a (pseudo) element to its parent's border-box Animating with Clip-Path — анимируем зміна форми об'єкта за допомогою clip-path Color Inputs: A Deep Dive into Cross-Browser Differences — глибокий розбір стильових властивостей color input в різних браузерах Position Sticky and Table Headers — робимо фіксованим заголовок таблиці разом з position sticky Managing Multiple Backgrounds with Custom Properties — приклад застосування CSS Custom Properties для мультибэкграунда Multi-Line Truncation with Pure CSS — виставляємо кількість ліній в тексті на чистому CSS Статті від Smashing Ma

Опубліковано: 20/07/19 @ 07:00
Розділ html та css Блоги Читати далі...

Technical Writing дайджест #2: курси з техрайтингу для новачків і профі, поглиблюємо знання CSS, конференція у Львові

Привіт! Сьогодні у добірці акцент однозначно на освіті для техрайтерів. І з превеликим задоволенням та гордістю повідомляю, що тільки-но у лютому відбулася конференція для техрайтерів, яка зібрала близько 30 представників цієї професії з 5 міст України, як Львів вже знову запрошує на нову конф. І цього разу навіть з іноземними спікерами! Неймовірно тішуся, спостерігаючи як наше ком'юніті зростає у всіх сенсах цього слова! Technical Communication Conference — Тож, починаймо з конфі, яка відбудеться вже 6 квітня. Як казав Барні у серіалі How I met your mother: «Це буде... почекай-почекай... дарно!». Інакше просто неможливо. Адже організатори із SoftServe вже заклали всі складники успіху: чудова локація, актуальні доповіді, українські і іноземні лектори, і навіть інтригуюча рекламна кампанія. Курси для техрайтерів Переходимо до курсів. Цю колекцію ми зібрали у телеграм-спільноті Tech Writers of Ukraine , за що я дуже вдячна моїм неймовірним колегам.

Опубліковано: 23/03/19 @ 11:39
Розділ html та css Читати далі...

Кар'єра в IT: посада HTML coder (верстальник)

Представляємо нову статтю із серії «Кар'єра в IT» . Вона присвячена посади верстальника, чия робота виступає сполучною ланкою між роботою дизайнера і програмістів. HTML coder — це фахівець, який з намальованого дизайнером макета створює web-сторінку, використовуючи HTML/CSS. За даними ДОУ , середньому українському верстальщику 26 років, він має зарплату $300-800 і досвід роботи 1,5 роки. Завдання та обов'язки Основне завдання верстальника — перетворення дизайну у зовнішнє оформлення сайту, тобто з формату PSD (рідше — з Sketch або інших форматів) — в код. Таким чином, він створює HTML-сторінку, яка повинна виглядати в точності як затверджений замовником макет дизайнера, і з якої далі працюють front-end і back-end розробники. Головні інструменти при верстці HTML і CSS, а також JavaScript для створення більш складних елементів, наприклад, слайдерів, анімацій, паралаксів, модальних вікон, реалізації простої логіки (наприклад, валідація форм).

Опубліковано: 03/11/16 @ 08:00
Розділ html та css Читати далі...

17 вересня, Харків — KharkivCSS

17 вересня в Fabrika.space пройде конференція KharkivCSS . Будуть порушені тільки найцікавіші теми: сучасні стандарти, технології, архітектурні підходи та методології. Мета конференції — за один день розглянути все що стосується верстки. Початківці дізнаються, на що слід в першу чергу звернути увагу, з чого почати і що є актуальним на сьогоднішній день.
Розробники з досвідом зможуть покращити свої знання та отримають багато корисних порад від кращих front-end розробників України.
А ті, хто уникають верстки, дізнаються, наскільки вона може бути простою і, одночасно, захоплюючою.

Опубліковано: 19/07/16 @ 05:36
Розділ html та css Читати далі...

Frontend дайджест #16: Реактивні Redux, PostCSS в Facebook, React-Router від TJ

У випуску: опен-сорсный CI на Node.js, вчимося ставити питання у Дена Абрамова, чекаємо Typescript 2.0 і Webpack 2.x. Почитати Як працюють в флексбоксе z-index і автоотступы. Asking Good Questions — задаємо правильні питання, поради від Дена Абрамова. Як ми розробляємо новий фронтенд Tinkoff.ru . Pixel Density, Demystified — як щільність пікселів змінила світ. Bootstrap 4: A Visual Guide — порівнюємо бутстрапы. Recreating the Twitter Heart Animation (with One Element, No Images, and No JavaScript) . Writing for all people: how to use alternative text well — як правильно використовувати alt-теги. requestAnimationFrame Scheduling For Nerds . Flex Layout Attribute — декларативне опис розкладки з допомогою HTML-атрибутів. Autofill : чого не знають веб-розробники, хоча повинні знати. Дуже простий алгоритм підбору кольору, який працює. Improving CSS quality at Facebook and beyond — PostCSS в Facebook. The Progress of Web Apps — веб-додатки з'являться в Windows Store.

Опубліковано: 15/07/16 @ 09:59
Розділ html та css Читати далі...

Як ми запустили свій pet -проект : перший успіх

Всім привіт . У цей важкий і неспокійний час , поки одні готують трактор, інші пробують себе в політиці , а решта підкорюють жіночі серця , ми , програмісти подрібніше , продовжуємо працювати, в тому числі і над своїми власними проектами . Цей пост - розповідь про нашому домашньому проекті. Ми створювали його паралельно з основною роботою , буквально на колінах , а через 2 місяці успішно запустили на кікстартера . Ідея Все почалося близько двох років тому, коли мені подарували arduino ( апаратно- програмна платформа для швидкого прототипування ) . Ще в студентські роки мені хотілося спорудити якесь робочий пристрій і запрограмувати його , але мене завжди лякали всі ці паяльники, вольти -ампер і складність мікросхем . Та й часу якось особливо і не було, бо дівчата , алкоголь, доту і робота. З Ардуїнов ж моя мрія збулася : я міг створювати примітивні пристрої , просто займаючись улюбленою справою - програмуванням.

Опубліковано: 16/02/15 @ 11:09
Розділ html та css Читати далі...

Дайджест: проблеми рекрутингу, CSS- каламбури , що означає « робити», війна дронів

Новини Фонд BrainBasket запустив сайт про IT -освіті Open IT .Українські ІТ- інтегратори заснували Асоціацію digital Ukraine . Опублікований Рейтинг найвпливовіших персон уанету .Вийшло дослідження Ukraine Dealbook IT and Internet Market 2012-14 .Odesk закриває акаунти користувачів в Криму і заморожує кошти . Нові версії Go 1.4 QEMU 2.2.0Ruby 2.2.0Rails 4.2Qt 5.4PostgreSQL 9.4Fedora 21 Розробка R language for programmers . The Worst Programming Language Ever . A Formula for the Number of Days in Each Month . Howto Що значить " зробити " і що означає" робити ".Секрети найму : Рекомендації співробітників . Як " айтішників " переїхати в Америку : 6 Лайфхак від Олександра Пацая з Parallels . А також 10 best countries to live for software engineers . How to Send Email Like a Startup . Why Side Projects Should Be Stupid .Paul Graham : How to Be an Expert in a Changing World . Війна Інтелігенція у бліндажі .

Опубліковано: 26/12/14 @ 07:38
Розділ html та css Читати далі...

Які сайти піднялися / опустилися в Google в 2014 році?

Спонсор поста - PropellerAds - рекламна
мережу для RU, SE, AU , FI , NO, DK , FR, GB, UA , US сайтів Чим Google відрізняється від Яндекса ? Чи не нове питання, але все не так вже й складно. Яндекс любить трастові та/або узкотематічние сайти, а Google в кінцевому підсумкуволіє хороші . Ситуація, в общем-то, хрінова . Оскільки ніякої визначеності немає. Чогось там гарантовано лише лідерам не за обсягами інформації, а по цінності цієї інформації , типу woman.ru (сильний форум) або banki.ru . На сьогодні тільки лише в G. може бути така ситуація, що величезний трастовий портал з купою оптимізованих (але без перебору ) статей йде в попу. Ось як виглядає графік kakprosto.ru з semrush : Таких прикладів багато. Щось схоже у fb.ru , з тією лише різницею, що у нього в G. завжди було не дуже . За джерелами трафіку зараз кращий аналізатор це similarweb - http://www.similarweb.com/website/fb.ru Але це не означає, що G. цілеспрямовано мочить сайти з різношерстої інфою (робити йому нічого) .

Опубліковано: 14/12/14 @ 01:11
Розділ html та css Пошуковики Читати далі...

Дайджест: інтерв'ю із засновником WhatsApp , архітектура CSS, чим хороша 60 -годинний робочий тиждень

Добрий день , шановні читачі. Новини GitHub представив Atom - новий редактор коду. Поки що йде бета -тестування . ВКонтакте виклав у відкритий доступ код KPHP . Розкрито особистість творця Bitcoin Сатоши Накамото . StackOverflow запустився на португальській мові і розповідає , чому одного англійського мало. Стівен Вольфрам розповів про свій новий мова програмування. Історія James Iry's history of programming languages ??( illustrated with pictures and large fonts ) . Інтерактивна інфографіка про історію компанії EPAM . Яків Файн про розробку сьогодні і 20 років тому . Інструменти 10 tools to help open source cities maintain transparency . Sublimall - плагін для синхронізації налаштувань SublimeText на всіх пристроях.   Visual Programming Languages ?? (великий список з скріншот ) . Методологія Complaint - Driven Development . Архітектура CSS і Культ карго CSS . Як почати займатися opensource - розробкою . HR Ігор Кононученко : як я найняв Юру Богданова .

Опубліковано: 07/03/14 @ 11:25
Розділ html та css Інтерв'ю Читати далі...

Дайджест: статистика HTML5 , Андрій Хорс про формальності , " алкочувствітельний " Git

Добрий день, шановні читачі. НовиниОдин з головних лобістів податкових пільг для IT-галузі - молодший син президента країни Віктор Янукович - покинув профільний парламентський комітет . Аналітика Як розробники використовують HTML5 - аналітика і інфографіка . Хроніка одного троллінгу: «Чи потрібні білоруським програмістам європейські цінності »та деталі до портрета «будіміровского айтішника» . Погляди Про перспективи JavaScript . Програмування як мистецтво і думки про вічне . Система STEPS : двадцять тисяч рядків коду, які змінять програмування, операційні системи та інтернет - альтернативний підхід до архітектурі ПЗ від Алана Кея. Інтерв'юАндрій Хорс: «Не можна довіряти людям, які не знають Сашу Грей » ТеоріяЯк навчитися не спізнюватися . Практика Doppio - браузеронезавісімая JVM, написана на Coffeescript Нові версіїРеліз http-сервера nginx 1.4.0 Цікаве Інноваційний маніпулятор від Thalmic Labs.
Як роблять планшети на китайських заводах.

Опубліковано: 26/04/13 @ 08:33
Розділ html та css Читати далі...

Maxymiser запустив курси по JavaScript / HTML / CSS

Компанія Maxymiser запустила ІТ-академію в своєму Дніпропетровському офісі по напрямку JavaScript/HTML/CSS . Перша група у складі 40 студентів розпочала навчання 7 листопада, повідомили у HR-відділі. «Ми стартували поки з однієї групи і лише у напрямку JavaScript/HTML/CSS, і вже час покаже, як швидко ми будемо розширюватися», - сказано в повідомленні. Двогодинні заняття будуть проходити по середах і суботах в офісі компанії «Maxymiser» за адресою вул. Барикадна, 1-а. Курс Maxymiser Academy включає в себе вивчення роботи чистого JavaScript, HTML і CSS. Крім того, будуть розглянуті питання, які стосуються пошуку помилок, організації коду, оптимізації та налагодження. Набір в першу групу закритий, але заявки приймаються на наступну групу, яка буде стартувати в лютому-березні. Реєстрація проходить через email hr@maxymiser.com , у відповідь прийде тестове завдання. «Попит на актуальне освіта в сфері ІТ-технологій набагато перевищує пропозицію.

Опубліковано: 14/11/12 @ 08:40
Розділ html та css javascript Читати далі...

16 листопада, Вінниця - Speakers ' Corner : Використання сучасний технологій та фреймворків з JavaScript і HTML5 для розробки прототипу додатку всього за кілька годин

Якщо Ви стежите за трендами в веб - розробці , Вам цікаві нові і випробувані можливості JavaScript і HTML5 , ви живете або тимчасово перебуваєте у Вінниці - то у нас чудові новини саме для Вас! Юрій Сильвестров і Михайло Валків представляють свій нашумілий доповідь на тему « Використання сучасний технологій та фреймворків з JavaScript і HTML5 для розробки прототипу додатку всього за кілька годин » у вівторок 16 листопада всім бажаючим в рамках чергового заходу серії Ciklum Speakers ' Corner . У доповіді будуть детально розглянуті такі поняття як : • MVC в JavaScript
• jQuery і плагіни jQuery
• AngularJS
• RequireJS
• Модулі та AMD
• Twitter Bootstrap
• Простір імен JavaScript
• Чуйний веб - дизайн ( Responsive design ) • аспектно- орієнтоване програмування Запрошуємо всіх бажаючих прийняти участь у сесії і задати всі питання . Участь безкоштовно за умови обов'язковій реєстрації тут - > goo.

Опубліковано: 12/11/12 @ 08:39
Розділ html та css javascript Читати далі...

jQuery - плагін для стилізації елементів html - форм ( input [ type = checkbox ] , input [ type = radio ] , input [ type = file ] , select )

У даному плагіні я об'єднав 3 своїх попередніх jQuery - плагина, плюс додав можливість стилізації полів для відправки файлів . Таким чином , він дозволяє стилізувати за допомогою CSS наступні html - елементи : список, що розкривається ( окремий плагін ) . прапорець ( окремий плагін ) ; перемикач ( окремий плагін ) ; поле для вибору файлу ; Демонстрація роботи плагіна Живі приклади можна подивитися на окремої сторінки . Варто зауважити, що при оформленні елементів форм я не використовував жодного зображення .

Опубліковано: 09/10/12 @ 11:18
Розділ html та css javascript Читати далі...

Дайджест : компанії йдуть до Дніпропетровська, Qt куплений, типізація розробників, CSS Blending

Добрий день, шановні читачі. Минулий тиждень ознаменувався підвищеною увагою вітчизняних IT-компаній до Дніпропетровська: там відкрилися офіси відразу двох гравців ринку - SoftServe і DataArt . Також варто згадати 79-сторінкову брошуру під назвою Exploring Ukraine. IT Outsourcing Industry , яку випустила асоціація Hi-Tech Initiative. Любителям цифр і статистики має сподобатися. Новини Випущений Sqitch 0.80 , простий засіб управління змінами в базах даних; закони Німеччини викладені на Github з обіцянкою подальших оновлень; компанія Digia купує Qt у Nokia представлений Jython 2.5.3rc1 , імплементація Python для запуску на Java- машині. Практика In-app-proxy - код для емуляції системи покупок з додатків в AppStore; плагін Zen Coding 0.8 для редактора Sublime Text 2.

Опубліковано: 10/08/12 @ 08:12
Розділ html та css Блоги Читати далі...

Приклад верстки пошукової форми для сайту на HTML5 та CSS3

Після публікації вчорашньої статті з верстці пошукової форми мене розкритикували, мовляв верстка відстій , є ж сучасні HTML5 та CSS3 . Я, звичайно , розумію , останні стандарти це круто і все таке. Але справа в тому, що верстаю я, як правило , під замовлення , а там в більшості випадків важлива повна ідентичність в різних браузерах, що не дозволяє використовувати останні технології. Тому я орієнтуюся в першу чергу на кросбраузерність і пошукову форму за звичкою зверстав "по- старому". Загалом , цим постом виправляю ситуацію ( на догоду незадоволеним минулого статтею =) і пропоную свій варіант верстки тієї ж самої пошукової форми, але вже з використанням технологій HTML5 та CSS3 .

Опубліковано: 19/07/12 @ 09:09
Розділ html та css Пошуковики Читати далі...

Почастішали зломи сайтів

Участілісь зломи сайтов Почастішали зломи сайтів Злом сайтів і розсилка з їх допомогою спаму стала не такою вже великою рідкістю на просторах інтернету. Також злом сайтів може проводитися для того щоб з їх допомогою переправляти користувачів на сторонні ресурси - для цього на зламаному сайті поширюються різні посилання, зацікавившись якими користувач виявляється зовсім не там, куди очікував потрапити. І основна проблема полягає в тому, що часто навіть самі власники сайтів або майстра, чиєю професійним обов'язком є ??створення сайтів , не можуть визначити, що їхній сайт був зламаний. Дізнаються вони про це лише за те, що в пошуковій системі Google з'являється позначка про те, що сайт може містити шкідливі програми. Причому, самі віруси навіть досвідчені веб-майстри далеко не завжди можуть виявити або знешкодити. Тому подібну позначку Google вони розцінюють, як помилку пошукового робота, про що і повідомляють Google у своїй претензії.

Опубліковано: 14/06/12 @ 08:57
Розділ html та css Безпека Читати далі...

jQuery - скрипт для стилізації селект ( тег select ) html -форм

Одна з найнеприємніших (і я б навіть сказав жахливих) речей в веб-розробки - це верстка html-форм. На жаль, не існує єдиного стандарту відображення елементів форм, незалежно від браузера та операційної системи, так само, як і немає можливості довільно оформити деякі з цих елементів, використовуючи каскадні таблиці стилів. Не піддаються повної стилізації наступні елементи html-форм: розкривається ; прапорець ; перемикач . поле для відправки файлу . Як вже зрозуміло з заголовка поста, тут мова піде тільки про селект. Існує немало готових рішень у вигляді jQuery-плагінів для стилізації розкривних списків. Але я (з огляду на те, що жоден з плагінів мене не влаштував з тих чи інших причин) вирішив піти шляхом винаходу свого колеса і написав власний jQuery-скрипт (не плагін), яким і ділюся в даній статті. Відразу хочу помітити, що даний скрипт не підходить для всіх можливих випадків застосування селек (читайте недоліки).

Опубліковано: 02/04/12 @ 05:28
Розділ html та css javascript Читати далі...

Елегантна форма авторизації з використанням CSS3

Продовжую ділитися версткою елементів інтерфейсу для сайтів. Як і в своїй попередній статті , я взяв цікавий приклад з сайту PremiumPixels.com і зверстав його, використовуючи CSS3 . На цей раз це форма авторизації . У дизайні цієї форми використовуються приємні ніжні кольори , тому виглядає вона дійсно елегантно. Дивлячись на подібну красу , у мене завжди виникає думка про те , як же здорово бути дизайнером і вміти витворяти такі речі. Я для себе вже знайшов застосування цієї форми. Якщо і вам вона теж сподобалася, то ви також можете використовувати її на своїх сайтах. Далі в статті, пройшовши за відповідними посиланнями , ви знайдете необхідний вихідний код.

Опубліковано: 23/01/12 @ 07:17
Розділ html та css Читати далі...

Красиві 3D -кнопки за допомогою CSS3

Чудова технологія CSS3 дозволяє в ряді випадків при оформленні сайту відмовитися від використання зображень, які замінює чистий CSS- код. Наприклад , подібним чином можна вчинити з будь-якими кнопками, використовуваними на сайті. Є один чудовий дизайнерський англомовний блог PremiumPixels.com , автор якого безкоштовно ділиться гарними елементами інтерфейсу для сайтів. Мені дуже подобається стиль цього дизайнера, він малює обалденно . Я вже неодноразово використовував на своїх блогах його полезняшкі , і однією з цих полезняшек став набір красивих 3D -кнопок . За допомогою CSS3 я " намалював " практично копії цих кнопок , кодом яких і поділюся в даній статті.

Опубліковано: 02/01/12 @ 02:19
Розділ html та css Блоги Читати далі...

1 2