All-in-one color tool for creators

こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての

It's time to ditch Google Analytics Google Analytics is frustrating to use, difficult to understand, slow to load and privacy-invasive. That's why we built Plausible Analytics, a simple but powerful, lightweight (< 1 KB), open source and privacy-friendly alternative. Here's what makes Plausible a great Google Analytics alternative and why over 12,000 paying subscribers trust us with their website

Build an optimized, secure, and frontend-independent application for multi-platform deployment.

概要 職業ソフトウェアエンジニアを目指す方々にオススメしたい書籍トップ10です 以下の観点から選定しました 10年後でも変わらない、流行にとらわれず長く役に立つ、ソフトウェアエンジニアリングにおいて普遍的な知識 特定のプログラミング言語やプラットフォームやツールに精通するのではなく、現代のソフトウェア開発の哲学・文化の全体像が把握できることを優先 200～300ページくらいで初心者でも読破できる 400～500ページくらいの本もあるが、それらは辞書的に使うのがいい あえて10冊に絞り込んだので、ここに含められなかった書籍も当然あります CI/CDやDevOpsに関する本も入れたかった… デザインパターンに関する本も入れたかった… DDDやClean Architectureなどシステム設計に関する本は意図的に入れていない 真・プログラミングスクールに通うくらいならこの本を読め10選を書きま

youkoseki.com 2021年だから人類はHTMLを手打ちしろ 新しい年だ。人並に新しいことを始めようなどと考える人もいるだろう。しかし、なにを始めればいいのか？　僭越ながら一つ提案をさせてもらえるなら、私はこう言いたい。HTMLを手打ちしろ。ハイパーテキストマークアップランゲージを学べ。なぜなら、個人がコツコツとタグを手打ちしたウェブページには暖かみがあるからだ。 私は中学一年生のとき、はじめてパーソナルコンピュータを買ってもらった。中学受験がうまくいったら買ってもらえるという約束で、受験には失敗したのだが、買ってもらったのだ。中学時代、ほとんどずっとパソコンと向かいあっていたが、CONFIG.SYSとAUTOEXEC.BATを書き換えてメモリ残量の上下に一喜一憂していた記憶しかない。あとA列車で行こう4や、ルナティックドーンのようなアートディンクのPCゲーム。Windows 3

TL;DRクラウドネイティブな時代のビジネスではWebサービス活用は必須Webサービスをセキュアに利用していくには管理やセキュリティ面での工数・コストが増えるこの工数・コストを下げることこそがWebサービス活用推進ひいてはビジネスの加速に繋がる工数・コストを下げる為に導入するWebサービスにSAML/SSOは必須ログインをSAML/SSOに限定出来ることまでがマストWebサービス利用におけるセキュリティ面で一番重要なのがID周り個々のWebサービスのセキュリティ対策よりもID管理に特化したシステムに任せた方がよっぽどセキュア（餅は餅屋）Webサービス導入時には値が張ってもSAML/SSO出来るプランで契約するSAML/SSOが出来ないことによるデメリット（工数・コスト）の方が、SAML/SSOを有効にできるプランにアップグレードする費用に勝るB2BのWebサービスを提供する企業は全プランに

GDG DevFest 2020 LT大会 https://tokyo.gdgjapan.org/devfest2020/schedule/1/127

Intro Web の https 化が進み、それに伴って https を前提とする API も増えてきた。 そうした API を用いた開発をローカルで行う場合、 localhost という特別なホストを用いることもできるが、それだけでは間に合わないケースも少なからずある。 localhost を https にするという方法もあるが、そのように紹介されている方法には、いくつか注意すべき点もある。 この辺りの話を、直近 1 ヶ月で 3 回くらいしたので、筆者が普段使っている方法や注意点についてまとめる。 特に推奨するつもりはない。 Update chrome の --host-rules について追記 localhost での開発の注意点 例として https://example.com にデプロイする予定の ServiceWorker を用いたアプリがあったとする。 開発をローカルで行う

Performance comparison of a wide spectrum of web application frameworks and platforms using community-contributed test implementations.

2017年3月、ChromeにつづきFirefoxがJavaのサポートを終了しました。 2019年1月現在、Javaが使えるブラウザはIE11と、Waterfoxだけになりました。お絵かき掲示板は使えなくなってしまうのでしょうか。 ブラウザだけで動作するPaintBBS NEO お絵描きしぃ掲示板 PaintBBS (©2000-2004しぃちゃん) をhtml5化するプロジェクトです。 お絵かき掲示板を絶滅の危機から救った人々…というタイトルで書き始めたので、強調しますが、funigeさん功績を抜きにして2019年のお絵かき掲示板は語れない…と思います。 Javaが使えなくなるからお絵かき掲示板はもう終り…と誰もが考えていたちょうどその頃に、funigeさんが開発したHTML5版しぃお絵かき掲示板 PaintBBS NEOの配布がはじまりました。 HTML5、javaScriptで作成さ

Intro Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。 State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。 冷静に考えればふざけてるとして思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、 Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。 そんな Cookie が今どう使われ、 3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。 Cookie のユースケース Web にある API の中でも Cookie はいくつかの点で特異な挙動をする 一度保存すれば、次から自動で送る

なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介

目次 Crash/Deprecation/Intervention Reporting Crash Reporting Deprecation Reporting Intervention Reporting ブラウザがWebページを表示する際に発生したエラーを、任意のエンドポイントにレポートさせる「Reporting API」という仕様があります。今回紹介する機能もchromeでいくつか実際に使用できます。 例えば、以前紹介した Deprecation Reporting もこの仕様によって定義されていました。 asnokaze.hatenablog.com 他にもTLS証明書エラーや名前解決エラーといった、ネットワークエラーを通知するNetwork Error Loggingといった仕様もReporting APIを利用しています。 asnokaze.hatenablog.com Cr

ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image