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

Beta: Front-End Checklist is currently in beta. Some issues are still being fixed. Thanks for your patience. Trusted front-end quality rules for humans and AI agentsThe essential checklist for modern web development, with 350+ rules across launch, review, accessibility, performance, security, privacy, and SEO workflows. Browse the corpus, start with curated checklists, or connect the same standard

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

DOWNLOAD OUR LATEST REPORTDownload our free report on how leaders and design system contributors from enterprise companies like Caterpillar, PayPal, or Weir Group build and grow design systems. Learn key lessons on design system maturity and operations.

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

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. There are a number of ways to accomplish these types of movement! Here’s what we’ll be building: We’ll

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 Fes Japanが今年も帰ってきます！ いよいよVaporモードがリリース目前となったVue.jsは、基盤の成熟を経て深化のフェーズに入ったと言えます。またVize、Verter、Golarといったツールが登場し、新たな潮流も生まれています。 Vue.jsの作者Evan You氏が生み出したViteは、Web開発の体験を一変させました。同氏が立ち上げたVoidZeroでは、OxcをコアとするRolldown、Oxlint、Oxfmtなどツールチェーンの開発を通じ、JavaScriptエコシステムにさらなる変革をもたらそうとしています。さらに2026年3月のVue.js Amsterdamでは、Vite+とVoidという2つのプロダクトが発表され、JavaScriptコミュニティへの影響はますます広がっています。 こうした広がりを受けて、私

LXTOTO Situs Togel Online Terpercaya dan Paling Aman di Indonesia Dalam dunia permainan daring yang semakin berkembang, LXTOTO hadir sebagai salah satu situs togel online terpercaya dan paling aman di Indonesia. Dengan reputasi yang terus meningkat, LXTOTO berhasil menarik perhatian para penggemar togel karena layanan profesional, sistem keamanan berlapis, serta berbagai pilihan pasaran togel dari

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で余白を作って調整

2015-03-05

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