2021/02/21 10選 => 12選に更新 2021/04/12 おまけを追加 2022/01/04 おまけにThe Modern JavaScript Tutorialを追加 こんにちは、WEBエンジニアのhedrallです。 もう一歩踏み込んでプログラミングに関して勉強をしようと思った時、 世の中には学習のためのレポジトリが存在していて、しかも世界的にはものすごい数のStarを獲得しているものも少なくないことを知りました。 今回はピックアップしてご紹介いたします。 [⭐️ 96.6k]: javascript-algorithms プログラミングで使用されるデータ構造や、一般的なアルゴリズムがまとめられており、全てjsで実装が例示されています。 [⭐️ 149k]: developer-roadmap webやinfraなど各分野のエンジニアになるために知っておくべき技術がロード

この文章について これは Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」で基調講演をするにあたって、登壇内容を整理するために書いたものです。登壇内容とは一部に差異があります。 イベント映像 この文章はむちゃくちゃに長いので、登壇映像を見たほうがいいかもしれません。わたしの発表は13:23くらいから30分ちょっとです 登壇資料（内容は同一です） https://speakerdeck.com/ymrl/webenziniatosite-imazhi-tuteokitai-webakusesibiritei https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit?usp=sharing 目的 Web業界で「エンジニア」の肩書で仕事して

Figmaのワイヤーフレーム・フローチャート・プロトタイプ用の素材を紹介します。 Webサイトやスマホアプリで使用されるさまざまなコンポーネントやUI要素、基本的なスタイルが用意されており、短時間で作成できます。 UI Template 日本人クリエイターが制作した、Figmaのワイヤーフレーム用テンプレート。基本的なスタイル、コンポーネント、ワイヤーフレーム用のアセットが用意されており、デザイナー以外のエンジニアやディレクターでも使いやすい素材です。

1.「&」→「\」(windowsは「¥」) 2.「#」→「0」（←数字のゼロ） 3. 数字は「10進数」→「16進数」/ 参考→2進数、8進数、10進数、16進数相互変換ツール 4. 最後のセミコロン「;」は省略。

Slack、便利ですよね。いつも使っているからこそ自分好みにしたいですよね。 私はいつも、サイドバーの色を変な色に変えたりしています。 ですが、どうしても真っ白な背景だけは変えられず、すこし寂しい感じがします。 調べてみたところ背景に(むりやり)画像が設定できるようなので自己責任で設定していきたいと思います。 1.画像を用意する 切り抜きが雑ですが、画像を切り抜きました。ちなみにデフォルトで入っているプレビューのスマート投げ縄でサクッと切り抜けます。 2.画像をBase64へ変換する ターミナルで$ Base64 〇〇.pngとかで変換します。 画像サイズは1MB以下に抑えないとだめっぽいです。1の画像の用意で画像サイズを変える等してください。どうしても高画質がいいのであれば諦めてください。 3.いざSlackへ とりあえずSlack.appのパッケージを表示しましょう。(こういう裏側みる

SSEを自分なりに調べました、間違いなどありましたらご指摘お願いいたします Server-Sent Events とは Server-Sent Events Google翻訳↓ この仕様は、DOMイベントの形式でサーバーからプッシュ通知を受信するためのHTTP接続を開くためのAPIを定義します。 このAPIは、Push SMSなどの他のプッシュ通知スキームと連携するように拡張できるように設計されています。 よくwebsocketと比較される。websocketはブラウザとサーバーで双方向通信できるが、SSEはサーバーからブラウザへの一方向の通信。 SSEのすぐ動かせるサンプル Using server-sent events - Web APIs | MDN ↑のページのコードを参考にさせていただきました <?php header('Content-Type: text/event-str

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマーは図を書くのが嫌いです（たぶん）。少なくともドローソフトウェアを使って書くのは嫌がるでしょう。メンテナンスしづらいですし、コードと図の乖離が発生しがちです。せめてテキストで書いて、自動的に図にしてくれるものであれば、元のテキストを自動生成する方法が選べたり、バージョン管理で差分が取れるようになります。 そんなことを考える方達のためのソフトウェアがKrokiです。様々なテキスト変換ソフトウェアに対応したWeb APIサーバです。 Krokiの使い方 KrokiはBlockDiag、C4、Ditaa、Erd、GraphViz、Mermaid、Nomnoml、PlantUML、SvgBobそしてUMLetなどを一つのサーバで扱えるようにした画像生成サーバです。 例えばこんな感

使いにくいUI、間違いやすいインタラクション、誤解されるデザインパターンを再現したUser Inyerfaceを紹介します。ベルギーの制作会社「Bagaar」による、使いにくい最悪なユーザインターフェイスを楽しむゲームです。 けっこうイラッとするので、心に余裕がある時にお楽しみください。

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 複雑なチャートを描く際に、ExcelやPowerPointを使っていては、後々の更新コストが大きくなります。そこでお勧めなのがGraphvizです。dotファイルを作れば、チャート化する部分は自動で任せられるようになります。 今回紹介するGraphvizOnlineはWeb上でGraphvizを試せるツールです。各自のローカルにインストールする手間がなくなるのでお勧めです。 GraphvizOnlineの使い方 左側にエディタ、右側に生成されたチャートが表示されます。 エンジンを変えることで、同じ内容でも異なった表示になります。 フォーマットは画像の他、SVGも選択できます。 別なファイルでの例。 内容によって最適なエンジンがありそうです。 GraphvizOnlineを社内に一台

原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ

NOTE: 本記事はすでに内容が古く、今読んでも役に立つ度合いはほぼないです。 本記事は、先日社内勉強会のために準備した、Webサービスのリアルタイム通信周りのまとめシリーズ の1つを転載して公開するものです。 まだまだわかっていないことが多いので、ぜひぜひ間違っている点などにご指摘いただければと思い公開します。 ぜひぜひ優しくマサカリをいただけると泣いて喜びます！ 目次 目次 はじめに プロトコルと手法 前世代のやり方であるComet について Polling 系 Streaming 系 過渡期といわれてる手法 将来有望といわれてる手法 Polling メリット デメリット 向いているシーン Long Polling (Comet) Polling の発展版 メリット デメリット LongPolling 自体は双方向通信ではない 接続が閉じられるケース 向いているシーン Server S

CSSの:has()疑似クラスは2023年暮れにFirefoxでもサポートされ、すべての主要ブラウザでサポートされました。今までのCSSでは、要素の存在のあり・なしによって特定の親や要素にスタイルを設定することは不可能でしたが、:has()疑似クラスのおかげで、指定した要素がある場合にのみスタイルを適用できるようになりました。 WebサイトのUIでよく見かけるCSSの:has()疑似クラスの便利な使い方を紹介します。今までは少し面倒なCSS、もしくはJavaScriptが必要でしたが、:has()疑似クラスを用いると簡単に実装できます。

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

HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met

なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで