TOPフォーカスCSS嫌いがあえてフレームワークまでつくった理由。　NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 CSS嫌いがあえてフレームワークまでつくった理由。　NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 2024年4月24日 「NES.css」開発者 ダーシノ SIerでの業務アプリ開発や職業訓練校でのプログラミング講師を経て2015年にさくらインターネット株式会社にフロントエンドエンジニアとしてジョイン。2018年にファミコン風CSSフレームワーク「NES.css」を開発、公開する。人生の目標に「笑って死ぬ」を掲げている。柔道初段。 X ブログ GitHub ファミコン風のデザインのWebページをすぐにつくれる、オープンソースのCSSフレームワーク「NES.css」。フロントエンドエンジニアのダーシノさんが2018年にGitHu

フロントエンドの複雑さに立ち向かう 〜 DDD と Clean Architecture を携えて 〜 さくらのテックランチvol.6 〜ローストチキンのフロントエンドパスタとクリスマスFigmaケーキ〜 https://sakura-tokyo.connpass.com/event/303232/ YouTube配信アーカイブ https://www.youtube.com/watch?v=usmLmI1bj74&t=472s ドメイン駆動設計（Domain-Driven Design）や Clean Architecture をヨイショもディスもせずフラットな立場で評価し、現実解を探りながらフロントエンドの複雑さに立ち向かった半年間の軌跡

持続可能な社内勉強会を開催するためのヒント集 [追記] 月金を避ける（連休作りたい人が欠席になってしまうため）

社内勉強会用 デザイナーとフロントエンドエンジニアの境界をなくし、UI開発を加速させるためのコンポーネント設計入門 ※フロントエンドエンジニア視点 [Keywords] - 共通認識としてのデザインシステム - 共通認識としてのコンポーネント設計

この記事は2020年10月28日に行われたさくらの夕べ Tech Night #3 Onlineにおける発表を文章化したものです。 ダーシノと申します。さくらインターネットでフロントエンドエンジニアをやっています。この記事では、発生したバグをプログラマーに的確に伝えるためのバグ報告の書き方について説明しようと思います。 バグ報告にはコツがある！ プログラマをされている方で、過去にこんなバグ報告をもらった経験はないでしょうか。例えば「動きません」とだけ送られてきたりとか、イラッとした感情も含めた「使えねぇな！」みたいな報告、「アレもコレもソレもおかしいよ」みたいな、いろんなものが書かれた報告もあると思います。バグを残してリリースしてしまったプログラマーとしては非常に申し訳なくて今すぐ対応をしたいのですが、さすがに先ほどのようなバグ報告を受けても、我々プログラマは対応のしようがありません。「申

キャリアアップのためには本業以外も全力で こんにちは。さくらインターネットで、フロントエンドエンジニアをしているダーシノ（@bc_rikko）です。 今は、本業に加えていくつかの会社で副業をしています。OSS活動にも積極的に取り組んでいて、2018年に開発したNES.cssというファミコン風CSSフレームワークは、GitHubのcss-frameworkトピックで4位のスター数を獲得しました。 出典：NES.css - NES-style CSS Framework 今回は、副業やOSS活動といった本業以外でのキャリアの形成について紹介したいと思います。 私は時間ではなく技術を武器に世界と戦っていきたいと考えています。新人の頃に前職の部長に言われて強く心に残っている言葉があります。 「システムエンジニアは、肉体労働者ではなく知的労働者。だから頭を使って仕事をしなさい」 背景などをサクッと省

仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい

How to build accessibility semantics into web patterns and widgets ARIA Authoring Practices Guide (APG) Home Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences. This guide describes how to apply accessibility semantics to common design patterns and widgets. It provides design patterns and functional

masterブランチ、ぶっ壊しました！！ 転職して1ヶ月たたないくらいのできごと。 しかも、masterブランチが変更されると自動デプロイが走って本番環境にリリースされてしまうため、直すまで生きた心地がしなかった。 こんな怖い目にあってほしくないので、ぜひgitを使う前に設定していただきたい。 何をやらかしたか？ コンフリクトをおこしたfeatureブランチをrebaseしてPullRequestを作りたかった。 その際、以下のコマンドを実行してmasterブランチを壊してしまった。 $ git push -f 具体的に何をしたのか？ 1. 開発ブランチをチェックアウトし、最新化する [master]$ git checkout develop [develop]$ git pull --ff ※ コマンド先頭の[]で囲っているのはカレントブランチ 2. featureブランチをrebas

この記事は本番環境でやらかしちゃった人 Advent Calendar 2019 17日目の記事です。 はじめまして、ダーシノ(@bc_rikko)です。 突然ですが、懺悔します。 私は転職して10ヶ月で2回も本番環境をぶっ飛ばしました。お客様をはじめ、関係各位には多大なるご迷惑をおかけしたことを、ここでお詫び申し上げます。 1回目は2015年11月27日、入社27日目のこと。 gitの設定ミスにより壊れたブランチをmasterにforce pushしてしまい、CIが流れて本番環境が壊れた。原因はpush.defaultなのだが、詳しくはすでに記事を書いているのでそちらを読んでほしい。 2回目は翌年9月1日、入社してちょうど10ヶ月たった日のことだ。 またしても本番環境をぶっ飛ばした。しかも、前回より盛大に……。 タイトルにもあるようにrsyncコマンドが原因だ。 当記事では、この「rsy

When working on the web, we all end up coming across situations where the experience for the user seems a bit janky. This happens either when you are dogfooding, or the users actually highlight facing that slowness, or you see that for yourself in your performance metrics or tools. What one’d do in such a […] Introduction You are probably wondering: “What a user centric metric like INP has to do w

I didn’t have anything planned for the Web Performance Calendar this year. That all changed after I read Tim Vereecke’s interesting proposal about a “Frustration Indexâ€� on Day 17. His post got my attention, as a performance analyst, because some things looked familiar to me, while other things confused me. Eventually, it all became a […]

はじめに この記事は前後編に分かれています。 順序だてた解説になっているので最後までお付き合いいただけると幸いです。 後編記事: https://nrslib.com/bottomup-ddd-2/ 順序立っての説明になっておりますので、前編からご覧になることを強くお勧めします。 セミナー情報 こちらの内容のセミナーを不定期で開催しています。 ◆セミナーページ 第一回: https://ddd-community-jp.connpass.com/event/103428/ 第二回: https://ddd-community-jp.connpass.com/event/107106/ 第三回: https://nrs-seminar.connpass.com/event/117283/ ◆あとがき 第一回ボトムアップドメイン駆動設計勉強会を開催しました セミナースライド まえがき この章は

Transcript খ͘͞͸͡ΊΔσβΠφʔͷ৘ใൃ৴ ʙϒϩά΍4/4ͱͷ෇͖߹͍ํʙ ����������ɹ4B$44�4QFDJBM�����#3"/%*/(�41&$*"- ֯ాҁՂ � ͢Έͩ͋΍͔ 8FCσβΠφʔ �ΠϥετϨʔλʔ ����೥ɹϑϦʔϥϯε TQJDBHSBQI ����೥ɹגࣜձࣾΩςϨπϝϯόʔ ࢒೦ͳ͕Β4&0ͱ͔ಡ·ΕΔϥΠςΟ ϯ άͱ͔ανίͱ͔ϑΥϩϫʔΛ૿΍͢ํ ๏ͱ͔͸ϊ΢ϋ΢ܥͷ࿩͸͋Γ·ͤΜɻ ๺͸๺ւಓ ೆ͸ϑΟ Ϧϐϯηϒౡ ༷ʑͳͱ͜ΖʹηϛφʔߨࢣͰݺΜͰ͍͖ͨͩɺ ຊͷࣥචɾ৽ฉࡶࢽ΁ͷܝࡌͳͲͳͲʜ େࡕͰࡉʑ ͱϑϦʔϥϯεΛӦΜͰ͍ͨࢲ ʹ͜ΜͳػձΛӡΜͰ͖ͯ͘ Εͨͷ͸ ʮϒϩάͱ4/4ʯ Ͱͨ͠ 5XJUUFS ����೥͔Β ೔ʑͷؾ͖ͮɺΠϥετɺ ࠂ஌ɺ͍Ζ͍Ζ ϒϩά ����೥͔Β σβΠ ϯ΍Π ϥε

こんにちは！うかつ(@ukaprog)です。 今話題の炎上系プログラミング学習スクール「ウェブカツ！！」の女性割引部員です。 現在卒業試験中。泣いても笑ってもあと40日ちょっとでウェブカツでのプログラミング学習は終了です。10/29強制退部となりました。文末に追記があります。 初心者向けオンラインプログラミング学習 | 【入門】初心者向けプログラミング学習スクール「ウェブカツ!!」 プログラミングスクールウェブカツ 公式ブログにおける著作権侵害問題 【勝手に妄想】ウェブカツ!!の今後の「稼ぎ方」 これまでのウェブカツ ウェブカツ がやろうとしていて、まだうまく回っていないこと 最近のウェブカツ 今後の妄想 余談・中盤まではやさしいよの件 妄想のまとめ あとがき 10月30日追記 「ウェブカツを卒業されてるんですか？ なら、大丈夫ですね。採用で。」 今後確実にそうなっていく。 ゆるい気持ちで

プログラミングスクール運営者(@kazukichi3110)が著作権侵害を推奨している。 ウ◯ブカツというプログラミングスクールらしい。 主にウェブで学習するようなサイトらしい。 画像の転載を正当化するあまり、画像の使い回しなどをしない人間は逆に稼ぎ方を分かってないと 言い切っている。 https://twitter.com/kazukichi3110/status/1185436248246108160 稼ぎ方が分かってないんだよね〜 単純なイラストやら画像なんてありふれててどこでも使い回されてんのに。 まぁ、だからお金が稼げないという。 ちなみにイラストとか図を綺麗にわかりやすく描ける人はうちにめっちゃ募集してるので、この人でも欲しいね笑 さらには、画像の転載程度の場合は、弁護士が相手しないので、 気にする必要がないとも。 https://twitter.com/kazukichi31

9月上旬にGitHubから「You're in! Get started with GitHub Actions beta」というメールが届いた。どうやら以前した利用申請が通り、個人アカウントでGitHub Actionsのベータ版が利用できるようになったらしい。 ちょうどJSライブラリを開発していたので、そのリポジトリでGitHub Actionsを使ってCI（継続的インテグレーション）の設定をしてみたので、その使い方や解説をする。 GitHub Actionsとは 一言でいうと、GitHub上で完結するCI/CDサービス。 いままでCircleCIやTravisCI、Drone CIなど外部のサービスを使っていたところを、GitHub上で実行できるサービスだ。 昔はTerraformなどで使われているHCL（HashiCorp Configration Language）を用いて設定フ

ウェブサイトに貢献このウェブサイトではあなたからの情報提供をお待ちしています。参考資料の追加・修正のリクエストはリポジトリのイシューから専用のテンプレートで行えます。

The Newsletter for Unicorns 🦄 5-minute bite-sized weekly newsletter for design-savvy front-end devs and code-loving UX/UI designers. Filled with the best hand-picked resources. 100% free.