立体的な表現で見やすいネットワーク図がブラウザ上で作成できる「Isoflow」
ネットワークの構成を視覚的に把握しやすいアイソメトリック図で表現でき、作成した図面を共有して相手に見せることができるオンラインサービスが「Isoflow」です。 Isoflow https://isoflow.io/ まずはお試しですぐに図面の作成画面に行くことができます。「CREATE A DIAGRAM」をクリック。 表示されたキャンバス上の好きな位置のマス目をクリックするとノード部品が設置されます。 ノードが設置されると左側にダイアログが出現するので、Label入力欄で名前を付けます。ノードのアイコンを変更するため「Node icon」をクリック。 アイコン一覧が表示されるので目的のアイコンの絵をクリックして変更します。 さらにノードを増やした後、ノードアイコンをクリック。 ノードのサブメニューが表示されるので「Connect」をクリック。 ノードを接続するためのポインタをマウスで動
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
Iosevkaというフォントが良い
突然ですが、皆さんはどのフォントでコーディングしていますか? monaco、Monospace、MSゴシックなど、等幅フォントを軸に種類は多種多様です そんな中、それらを尻目に私が使っているフォントはIosevkaというフォントです Iosevkaとは? 以下の特徴を持ったフォントです 等幅フォント 日本特有の文字種(㈱や㌕など)に対応 これらもきっちりと等幅を守っている リガチャ機能あり !=や<=など、特定の連続した文字列を合成して別の文字で表す機能 エディタもリガチャに対応している必要あり(VSCodeやAtom、iTerm2は対応しているので、大抵のエディタやIDEは対応していると思います) 特定の文字をプリセットの中から選ぶ事ができる プリセットから選んで、特定の文字のみデザインを変更することも可能 全体的な文字の太さ、デザイン、文字のゆとりも設定することが可能 特に 特定の文字
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
5歳娘「パパ、余分なpropsいっぱい書くんだね！」 - Qiita
新しい記事もよろしくやで！ 5歳娘「パパのReact、めっちゃ遅いね！」 とある平日 娘（5歳）「パパ、今日は何のお仕事してるの？」 ワイ「おお、娘ちゃん」 ワイ「今日はな、ショッピングサイトを作ってんのや」 今日のお仕事内容 ワイ「↓このデザインの通りに、コーディングをせなあかんのや」 娘「なるほどー」 娘「このショッピングサイトで商品を売りたい！っていうお店があったとして」 娘「そのお店の人が、最初にお店の情報を登録するためのページだね！」 ワイ「せやせや」 まずはデザインを眺めてみる ワイ「この店舗登録ページにはなぁ」 ワイ「↑こんな感じの」 ワイ「項目名と入力欄がセットになったパーツが何度も登場するから」 ワイ「そのためのコンポーネントを作ろうかなー、って」 ワイ「そう思ってたとこなんや」 娘「ふーん」 娘「ラベル付きテキストフィールド的なコンポーネントってことだね」 娘「どこまで
【React+TypeScript】Netflixのクローンを作るチュートリアル
【注意！】 2024年4月末にこちらの本の内容を大幅リニューアルしました！ https://note.com/terry10/n/nf0674af97617 ※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です 多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。 こちらのツイートで無料配布について告知しています！ ↓ https://x.com/teriteri_code/status/1783358352447414464 --- React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。 学べる事 - ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用 - React Hooksによるstate管理 - TypeScriptで外
React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog
Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった（Web・モバイル問わず）フロント
ＣＧ制作演習 - 床井浩平氏が初心者向けにBlenderの使い方をまとめた PDF （1,419ページ・288MB）を無料公開！
Blender アセット Blender アドオン プラグイン＆アドオン-Plugin&Addon THE MEGA FLEET - Blender向けの最大級の自動車モデルコレク... 2024-05-02 3D CGI StudioによるBlender向けの最大級の自動車モデルコレクションアドオン『THE MEGA FLEET』がリリースされました！ 続きを読む Blender アドオン プラグイン＆アドオン-Plugin&Addon Step Loop Select Ver1.4 - １列飛ばしで連続面ループ選択... 2024-05-01 KKS氏（@kksabnormal）による１列飛ばしでループ選択を可能にするBlenderアドオン『Step Loop Select Ver1.4』が無料公開されています！ 続きを読む
結婚式のエンドロールを当日作った話
結婚のお礼と報告 でちょこっと書いた結婚式エンドロールをその場で作ってみたのお話 注意事項# 結婚式のエンドロールを自作したりするには結婚式場の協力が必須です。 作り出す前に式場に必ず確認を取りましょう。 PCからそのままプロジェクトにだせばいいじゃん！と思い込むのだめです(自戒) 動機# エンドロールを式場にお願いしようと思ったら高かったので、最近のイケてるサービスとか適当にガッチャンコすれば作れると思った。 今は反省している。 全体の構成# LINE Botに参加者から画像投稿を投げてもらう S3に保存すると同時に投稿者情報をDynamoDBに保存 投稿された画像にDynamoDBの投稿者情報から名前を追記 画像を全部結合して動画化し、事前に生成したエンドロールで必要な部分を結合 式の最後に流してもらう 全体の構成はこんな感じです。 サーバーレスアーキテクチャのお勉強がてら作ろうとした
2020年に泊まった温泉宿で｢部屋｣｢風呂｣｢食事｣が良かったおすすめ宿ランキングを発表する - 温泉ブログ 山と温泉のきろく
お題「#買って良かった2020 」 2020年の温泉旅は、すべて一人旅でした 2017年から毎年、1年間に泊まった宿を振り返って「部屋」「風呂」「食事」というそれぞれの側面において「この宿はすばらしく良かった！」と印象に残っている宿をそれぞれ1位から３位まで紹介する、という記事を更新しています。本稿はその、2020年版です。 過去3回分の記事は下記になります。 毎度のことで申し訳ないですが、食事部門だけ3軒に絞りきれず3位が2軒あり、全部で10軒の宿を紹介しています。 2019年に続いて2020年版で選んだ宿も、すべて1人で宿泊した宿でした。2019年は、たまたまひとり旅で泊まった宿がピックアップされたのですが、2020年はコロナ禍もあってすべての旅がひとり旅だったのです。 今回ご紹介している10軒の宿の中で7軒は、休前日でも1人で宿泊可能な宿で、実際に私も土曜日に宿泊しています。私自身も
ウェブの進化とウェブブラウザ開発の最前線
学部 3, 4 年生向けの特別講義で『ウェブの進化とウェブブラウザ開発の最前線』というタイトルで話をしてきました。 ウェブの進化の歴史を知ることで現在のトレンドについて理解し、またウェブブラウザというグローバルで大規模なソフトウェアの開発の一端を垣間見ることで、ウェブやウェブブラウザの開発に少しでも興味を持ってくれたら良いなぁという気持ちで話をしてきました。 なお歴史観については私の事実誤認も含まれると思うので、間違いを見つけたら教えて下さい :-) 追記 (随時) たくさんの反応を頂きありがとうございます！次回同じような資料を作るときの参考にできるよう、ここにメモしていきます。ウェブは無限に話せる話題があって楽しいですね！ ウェブ以前のハイパーテキストの歴史も取り入れるべきでは？ ありがとうございます！おっしゃるとおりで、ウェブの進化史と言いつつウェブが公開されてからの話しかしていないの
SVGBox | API for Web Icons
API for Web Icons Including icons is harder than it should be. SVGBox allows you to add icons to your project by using simple tags. The idea behind the service is that including icons should be as simple as copy and paste. It's free and icons are delivered over Cloudflare CDN, the same technology that powers CDNJs's 190B+ monthly requests . Explore Iconsets
取り返しのつかない人間が職場に来た
30歳過ぎたあたりで、突然気づいたんだけど 「意識高い系」を見かけなくなったなと気が付く。 なんというか、野球バカは野球する側から見る側になって、オタクはアニメ見ずにVtuberのラジオ聞いてるし、キラキラ系女子は子育てマウントに移行してる みたいな「年取っていく過程で元気がなくなっていってる」という現象は見受けられるんだけど、 相も変わらず、野球バカは野球好きだし、オタクはかわいいアニメの女が好きだし、キラキラ女子はずっと誰かと何かと戦い続けているっていう根底は変わっていない。 けど、どうも大学3年生くらいに雨後のタケノコかってくらい湧いて出てた「意識高い系」がどこにもいない。 若さ特有の自意識に飲み込まれている感覚も、就活を終えて年を取ると同時に消えてしまい、何か特別だと思っていた自分は超ドドド級の凡人だと気づき、 クソみたいな上司に叱られながら「まあ、人生ってこんなもんだよな」とあき
駆け出しエンジニアの皆さんに知ってほしい脆弱性のこと。
セキュリティは難しいです。 ですが、プログラミング初学者の皆さんは必要以上に萎縮せず、どんどんアプリケーションを作り、公開することにチャレンジして欲しいと私は思っています。 一方、事実として、脆弱なアプリケーションが公開されている（サーバ上でアクセス可能な状態になっている）だけで、全く無関係な第三者が被害を被る可能性があることは知っておく必要があります。 それはWordPressを使った単なるWebサイトであったとしても同じです。 また、あなたのアプリケーションが破壊されて困らないものであったり、 個人情報を保持していないものであったとしても、です。 だから、知らなかった、では済まされないこともあります。 この記事では、PHPのソースを例に、 特にプログラミング初学者が生み出しやすいアプリケーションの脆弱性について、 具体的なコードを挙げながら解説します。 なお、本記事のサンプルコードはも
Next.js + Electron がとても簡単になっていた
Next.js + Electron を使えばめちゃくちゃ簡単にデスクトップアプリを作れるという記事です。 デスクトップアプリケーションをWeb技術で作成するElectronを、むちゃくちゃ久々にやってみたら、とても簡単になっていた React のフレームワークである Next.js もバージョン9.xになってから劇的に良くなり続けていて、どんどん触りやすくなっています ちなみに Next.js は非公式な日本語翻訳が進んでいるようです。 9割くらい翻訳が完了しているようですが、気になる方は、このサイトの「翻訳プロジェクトについて」をご覧ください。 セットアップする # npmの場合 $ npx create-next-app --example with-electron-typescript hoge $ cd hoge $ npm run build $ npm run start
GitHubのREADMEをサクッと高品質で書けるサービス作ってみました。 - Qiita
みなさんは GitHub でオープソースソフトウェア(OSS)を開発して公開する時、README をどのように書いているでしょうか？ GitHub が自動で作ってくれる README に含まれるのはタイトルだけですし、OSS 開発初心者の場合、そもそも README に何を含めるべきかわからないという方もいらっしゃるのではないでしょうか？OSS 開発に慣れている方でも、コードを書くのはいいけれど README を書くのは面倒だと思ったことはありませんか？今回はそんな README 難民の方々向けの Web サービスを作ってみました。 LEADYOU - README Generator Web サイトへ 使い方 使い方は簡単です。トップページで GitHub の Public リポジトリの URL を入力してNext Stepボタンを押すと、README に書くべき内容ごとにフィールドが設
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home
Hello! | party.js
Slidev
Games | Interface In Game
