｜DMM inside

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

Web Platform Dive into the web platform, at your pace.

<!-- Styles. Can be included in an external stylesheet --> <style> /* CSS variables. Not needed for the effect to work. */ :root { --base: #f7392b; --bg-blend: multiply; --blur: 0px; --fg-blend: lighten; --foreground: #16006f; --opacity: 1; --spacing: 1%; } .img-wrapper { background-color: var(--base); display: flex; flex: 1 1 100%; height: 100%; overflow: hidden; padding: var(--spacing); position

Astro 17 Eleventy 19 Gatsby 60 Hugo 86 Jekyll 104 Next 37 Brunch 0 Docusaurus 0 Gozer 2 Gridsome 5 Hexo 5 Jigsaw 0 Metalsmith 0 Middleman 0 Mkdocs 2 Nuxt 5 Pelican 1 Platframe 0 Remix 1 Sapper 0 Scully 0 Statiq 2 Sveltekit 1 TanStack Start 1 Unibit 0 Vuepress 1 DecapCMS 17 Flotiq 10 Forestry 7 Kontent 5 No CMS 288 Airtable 1 Contentful 4 Cosmic 1 DatoCMS 2 Directus 0 Firebase 0 Ghost 2 GraphCMS 3

Originally posted on my-blog The Old Story Back in the days, HTML components like checkbox were pretty tricky to style the way we wanted to. Often these components stud out of the overall page design which wasn't so good for the user experience. Not to mention that each browser had (and still has) its own appearance for the control thus contributing to the difference in the look and feel across va

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

BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM

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.

以前、社内共有と知見をメモするためにWordPressの設計ガイドラインを書きましたが、Webサイト（ページ）のコーディングガイドが必要となってきたので、改めてまとめてみました。 多くのWebサイトを構築した経験値に基づき、特に企業向けのWebページコーディングを、一から行う前提で記述しています。 はじめに 技術やブラウザサポートの進展にあわせて、よりモダンなフレームワークや開発環境が次々と発表されていますが、普通のWebサイト、特に企業向けのサイトに於いては、新しく革新的な技術や設計よりも、以下の方針が往々にしてマッチします。 担当者が変わっても編集・変更し易い技術選定 拡張・運用していく過程で破綻しない設計 本ガイドは、上記の方針を踏まえたコーディングガイドラインとなります。 本ガイドの最大テーマは、納品物（Webサイトデータ）に一定の品質を担保することです。よって、制作前の決め事・チ

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コミュニティへの影響はますます広がっています。 こうした広がりを受けて、私

A Responsive Accessible Table Painfully slow demonstration of the example table resizing and different media queries kicking in. After writing (again) that it is ok to use tables, and after providing quick examples of responsive tables, I received questions about why I used some of the code I did. I am going to attempt to break it down to give you enough information to make your own responsive, ac