【はじめに】 フロントエンドエンジニアの 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?

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

日本最大級の 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 ベースの新しいリアクティビティシステムにより、一段とパフォーマンスが向上し、さらなる進化が期待されていま

俺の話を聞け!! LT大会#7 結論markuplintというHTMLのLinter作った

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

追記： 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

Fast native apps with icons, illustrations and photos

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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外

この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplate master ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っている frontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っている デフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っている はじめに​ 最近の JavaScript について​ 僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。