【はじめに】 フロントエンドエンジニアの kalbeekatz です。話の背景となる自分の経歴から紹介させてください。 Web制作会社でマークアップエンジニアとして HTML/CSS/JavaScript（主に jQuery）で静的な Web サイトの構築をしていました（2年間）。 その後、株式会社ニジボックスに転職し、フロントエンドエンジニアとして上記に加え、React で動的な Web サービスを構築してきました（2年半）。 この5年間を通して自分がマークアップエンジニアからフロントエンドエンジニアになるまでを振り返り、それぞれの違いや求められること、やりがい、道のりなどをまとめました。 これからエンジニアを目指す方、マークアップ以外のエンジニアリングに興味を持っている方などの参考になれば幸いです。 マークアップエンジニアとフロントエンドエンジニアの違い 「マークアップエンジニア」「フ

Your JavaScript seems to be desactivated. Please enable your JavaScript to use all functionnalities of the Front-End Checklist. The Front-End Checklist 🗂 The Front-End Checklist Application is perfect for modern websites and meticulous developers!

Simple designs or Pro. Pika has got you covered.Create something as basic as a screenshot with a browser frame or as complex as a marketing image with text, shapes and patterns. Pika gives you all screenshot editing options you'll need

The repository of publicly available design systems and pattern librariesStart Exploring SystemsWhy Adele?

Introduction Loading indicators improve UX (user experience) in any application—web or mobile. These animations provide feedback to the user that an action is being carried out and a result will return shortly. In web applications, there are two major events that need loaders: Network requests like navigating to a different page or an AJAX request. When a heavy computation is running. This article

Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not. Th

AVAILABLE NOW: Front-End Developer Handbook 2019 Front-End Developer Handbook 2018 Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and wha

最近気が付いたのだけど、CSS Loader は読み込んだスタイルシートのプロパティ値に引用符で括られた文字列を発見すると1、その中にある U+0080 以上の文字（簡単にいうと半角英数記号以外の文字2）を問答無用で 16 進エスケープしてしまうようだ。たとえば、 p::after { font-family: "☺️" } このようなスタイル指定があったとして、これを CSS Loader を通して処理するとこうなる。 p::after { content: "\263A\FE0F" } まあ、場合によっては冗長だったり無駄な処理であるものの、まともなブラウザならちゃんと解釈してよしなに扱ってくれるので、エスケープされることそのものは特に問題ではない。ちょっと困るのは、どうも文字列が空白を含む場合の処理があまりよろしくないことだ。 p::after { font-family: " ☺️

日本最大級の Vue.js カンファレンス、Vue Fes Japan が今年も帰ってきます！ Vue Fes Japan は 2018 年に始まり、文字通り「Fes = お祭り」のように、Vue.js を共に盛り上げ、共に学び、そして何より共に楽しむことを目的に誕生しました。 前回の Vue Fes Japan 2024 は、国内外から約 750 名もの参加者にお集まりいただき、コミュニティの熱意を改めて感じることができる素晴らしいイベントとなりました。 昨年 9 月には最新安定版である Vue 3.5 がリリースされ、現在では週間 640 万ダウンロードを超えるほど成長しています。さらに開発中の Vue 3.6 では、実験的な Vapor プロジェクトや alien-signals ベースの新しいリアクティビティシステムにより、一段とパフォーマンスが向上し、さらなる進化が期待されていま

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

//variable declaration for the global repeated animations const gear = $("#gear1, #gear2, #gear3"); ... //animation that's repeated for all of the sections function revolve() { let tl = new TimelineMax(); tl.add("begin"); tl.to(gear, 4, { transformOrigin: "50% 50%", rotation: 360, ease: Linear.easeNone }, "begin"); ... return tl; } const repeat = new TimelineMax({repeat:-1}); repeat.add(revolve())

追記： IE以外の主要ブラウザでは scroll-margin-top が利用できる。 固定ヘッダーがあるサイトだと、ページ内リンクをクリックしたときに対象の要素が固定ヘッダーと被ってしまうことがある。 固定ヘッダーがあるサイトの例としてVue.jsとかBootstrapのドキュメントを見ると、この問題は起こらないようになっていた。調べてみるとそれぞれ同じようなやり方で問題を回避している。 メジャーな手法なのかなと思ってググったらHash Tag Links That Don’t Headbutt The Browser Windowというドンピシャな記事があった。すでに不要になった古いハックとかにも言及していて冗長だったので、メモ代わりにこの記事に書き直しておく。 ページ内リンクへの移動時のスクロール位置は、対象の要素の座標の上端になる。なので単にpadding-topで余白を作って調整

There are two ways of using SVG in HTML via <use>: with external source and without it. “The use element takes nodes from within the SVG document, and duplicates them somewhere else” – MDN. In the first case, the SVG graphics insertion (duplication) usually looks like this: The good: the file sprite.svg will be cached by the browser. The bad: this technique does not work in IE11 and below (luckily

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

2021/3/16 初めて記事を書いてから３年以上経過してしまったので、 内容を見直ししました。 関係者が10名以下の小〜中規模案件の開発・保守が多い弊社のCSS・JavaScript規約（にしたい）です。 長くなってしまったコーディング規約もようやく最後です。 ↓関連 環境構成編 HTML編 CSS、JavaScript は数年で書き方が変わってしまうので、 定期的に規約の見直しができると理想ですね。 小〜中規模サイトのフロントエンド・コーディング規約　CSS編 ディレクトリ構成 CSSに関するファイルの一般的な例を示します。 ルート ├ src ... 作業ディレクトリ │　├ scss │　│　├ lib ... 外部ライブラリなど │　│　├ sprite ... spritesmith などで生成したファイル │　│　├ foundation (base) ... 変数や mix