ここのところ雑にWebサービスをリリースする機会が減って最近はFlutterでネイティブアプリばかり書いてるのでWebの最新に追いつけてない。 最近の流行りのWebサービス開発について自分の必要そうな範囲でちょっと調べてみる。 自分の場合、フロントエンドはTypeScript+(Vue or Nuxt)でやって、サーバーサイドはRailsで書いちゃうことがまだ多い。 これでもなんとかなるけど、もうどうせならJSで一気通貫でフロントエンドとサーバーサイドを書ければ楽なのにと思いつつある。 パッと思いつくのはTypeScriptでフロントエンドをNext,Nuxtあたりでやって、バックエンドAPIをexpressとかサーバーレスAPIを適当に書くとかだけど、今だともっと良い方法ありそう。 本当はDartでサーバーサイド、FlutterでwebまでいければDart統一時代になって願ったり叶ったり
35歳から Python で競プロを始めて2年が経ちましたが、やっと AtCoder で橙になることができました！ ふぁぼ、コメントもたくさん頂きありがとうございました。 競プロを始めて2年、なんとか橙になることができました。 pic.twitter.com/r0GwrNogHi — きり (@kiri8128) October 31, 2020 RTA 途中経過 最初のRatedから青まで：3か月（Rated 7回） 青から黄色まで：7か月（Rated 17回） 黄色から橙まで：1年3か月（Rated 24回） －－－－－ 橙はだいぶ遠い存在という印象だったので、達成できて嬉しいです。 まだまだ上を目指していきたいと思いますが、ひとまずの区切りとしてこれまでにやったことなどを書いておきます。 スペック 某京都大学というところで9年ほど *1 数学（代数学・代数幾何学）などをやっていた *
なぜ？ 日本のキャッシュレス決済手数料が高い理由
先日、もんじゃ焼きで有名な東京のある商店街を訪れたとき、お店の総合案内所でクレジットカードが支払いに使えるかを聞いたところ「こちらの地図にある店ではすべて使えますが、できれば現金払いでお願いします」といわれるという、少しショックな出来事があった。 店側の気持ちは分からないでもないが、「本当は受けたくないけど、しょうがないので……」という気持ちが透けて見えて正直微妙な気持ちだ。 少し前にPayPayの取り扱いを止めた加盟店が「『汗をかかずに儲かるシステム』への小さな抵抗」という掲示を出したことが話題となったが、売上の2％（正確には1.98％）を手数料として徴収されることに抵抗があるというのには理解できる部分があるが、それまでさんざんシステムを利用していてその利用料を支払うことが許せないというのはサービスへのタダ乗りでしかない。あくまでビジネスなので、使いたければその対価を払うというギブ・アン
エンジニア同士の情報共有を目的としたコミュニティ「ふわふわエンジニアタイム」が主催する「Markup Meetup」。3回目の今回は、フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有する場として開催されました。ここで登壇したのは、株式会社ゆめみの佐々木祥晶氏。導入事例を交えながら「Three.js」の魅力、メリット・デメリットを語りました。 株式会社ゆめみ所属・新人フロントエンドエンジニア 佐々木祥晶氏：それでは発表いたします。題目は、「Three.js の魅力を語る」です。 目次ですね。最初に軽く自己紹介をして、本編で「『Three.js』とは何ぞや？」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。 では、軽く自己紹介を。初めまして、佐々木祥
ぼくのかんがえたさいきょうのGAS開発手法2023
前提clasp の制約、Script API の考え方、Google Drive の考え方に素直に従うその条件下である程度モダンな開発環境での開発を目指す 可能ならコードは VCS で管理する（pull-req など）ドキュメントベースで共同作業に向いた手法で開発を進める特にカジュアルに始めやすい Google Apps Script は悪い意味での属人化まっしぐらになりやすい。これが長期間の業務に影響しないような、ワンショットのものなら別にそれでもよいが、これが誰かに引き継がなければいけないような状況が生まれると一気に地獄みが増してしまうので、そうなってしまう前により良い開発手法を考えておきたい。 考慮したことGAS は素朴に作ると Script 本体の構造がそれを利用する container （例えば Spreadsheet）のデータ構造などと密結合になってしまう。この状態のままコード
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
【日々更新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）
Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
淡路 @mizuiro0522 自社の後輩に「JavaScriptをジャバスクと略する人がいる」と話したら「なんで？」という顔をしたのを覚えています。ちなみに私は略さず「JavaScript」と言います。 2022-05-31 23:33:55
VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
Next.js 2022年度リクルート エンジニアコース新人研修講義資料 - Speaker Deck
2022年度リクルート エンジニアコース新人研修の講義資料です
書評『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』 - uhyo/blog
皆さんこんにちは。今回は、2022年7月25発売の『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたびTypeScript入門書を出版したこともあり、それを過去の話として葬り去るべく技術書を読んでいくことにしました。せっかくなので、読んだ技術書の感想等を紹介します。 おことわり: この記事では、「筆者」とはこの書評を書いた人を指し、『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を書いた人たちのことは「著者ら」と呼びます。また、この記事の内容はすべて筆者の個人的な見解であり、本の内容や本を読んで得られる知識について何らかの保証をするものではありません。 筆者について筆者
はじめに みなさんこんにちは。Sansan事業部プロダクト開発部のiOSエンジニア荒川です。 以前はRDBMSの記事*1を寄稿し、好評いただいたこともあり、定期的に車輪の再発明系の記事を書いていこうと思います。 さて本日はタイトルの通り、VimやEmacsに代表されるターミナルで動作するインラインテキストエディタをGoで開発してみました。 ソースコードは以下のリポジトリに置いているため、ぜひ参考にしてください。 github.com 完成品 文字だけだとイメージも湧きにくいので、まずは完成品をお見せします。 最低限エディタの動きは出来ている、というレベルの完成度ですね🙏 特徴 1000行インラインエディタ 文字入力/挿入/削除 画面スクロール キーボードショートカット ファイル読み込み/保存 Goのコードハイライト機能 実装の方針 今回はただ開発するだけではなく、いくつかのこだわりポイン
追記 Cloudflare Workers向けのWebフレームワークを作っているので、そちらを是非チェックしてみてください！ honojs/hono: Ultrafast web framework for Cloudflare Workers. Fast, but not only fast. Cloudflare Workers が面白い。面白いので、いくつか簡単なアプリを作ってみた。例えば、そのひとつが Slack Bot で「yusukebe++」とかやるとインクリメントされるやつ。 今回は Cloudflare Workers の面白さについて解説する。より興味のある方がいれば、上記のコードを参考にしてもらうといいだろう。 Cloudflare Workers とは？ Cloudflare の CDN エッジでスクリプトが動くのが Cloudflare Workers。いわゆる
はじめにリアルタイム声質変換アプリケーション、Realtime Yukarinを開発し、 OSS（オープンソースソフトウェア）として公開しました。 ここで言う声質変換とは、「誰でも好きな声になれる」技術のことを指します。 好きな声になれる声質変換は夢があって流行りそうなのですが、まだ全然普及していないと思います。 それは現時点で、声質変換を実際にリアルタイムで使えるフリーな仕組みが無いためだと考えました。 そこで、自由に使えるリアルタイム声質変換アプリケーションを作り、ソースコードと合わせて公開しました。 声質変換とは声を変える方法で有名なのは、声の高さや音色を変える手法、いわゆるボイスチェンジャーです。 既存のボイスチェンジャーは、元の声を起点として、変換パラメータを自分で調整する必要があります。 一方ここでの声質変換は、元の声と好きな声を用いて機械学習し、変換パラメータを自動で調整しま
この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ
まとめ async/await 構文は、Promise で書ける処理のうち特定のケースしか表現できない 特定のケースとは、ある非同期処理の前処理と後処理がそれぞれ 1 個ずつの場合のみである async/await 構文は初心者に非同期処理を導入する際に適しているが、非同期処理を逐次処理として書けるという幻想を与えるので、どこかで知識をアップデートする機会を設けるべきである この記事はなに？ 少しバズったのでまとめておこうかと。 「async/await があれば Promise なんて難しいものは要らない！」とか言ってるウブな子に、複数の API に並列にリクエストを投げて一つ以上成功した時だけ先に進む、みたいな問題を与えて愛でてみたい。— Yuta Okamoto (@okapies) 2020年12月11日 async/await は Promise のネストを手続き的なコードに見え
概要 最近、pythonでUI部分も含めたWebアプリ作成ツールがいろいろ出てきているので、知っている限りでまとめてみようと思います。 mesop FastUI Taipy ReactPy Solara Reflex Flet Streamlit Dash Panel NiceGUI Gradio 各ツールの紹介 Mesop Google製 ページ毎に関数を作ってデコレートするような感じで書く LLM関係のデモがいくつか用意されており、LLMアプリ作るのに良さそう Cloud RunとかHugging Face spacesにデプロイできる FastUI FastAPIのエンドポイントを定義する関数内にUIを定義する感じで書く Taipy 書き方としてはマークダウンっぽいテンプレート用いてUIを作成する感じ DAGツールを簡単に作れるScenarioという機能がある ReactPy その名
はじめに 今回の記事では、学習・開発でPythonを使うプログラマーが必ず確認するべきGitHubリポジトリを10個紹介する。本記事の対象は主に以下の通り。 実務でPythonを使っているプログラマー Pythonの情報収集に困っている人 Pythonの学習・開発の効率をアップさせたい人 Pythonのフレームワーク・ライブラリを確認しておきたい初心者 Pythonは1991年にリリースされてから今年で30年以上も経過している歴史のあるプログラミング言語なので、情報量が非常に多くどのように開発を進めればよいかわからない人も少なくないだろう。 そこで、本記事では個人の独断と偏見で学習・開発でPythonを使うなら必ず確認するべきGitHubリポジトリを紹介する。Pythonで実装できるプロダクトは多岐に渡るので、本記事では分野ごとに確認するべきGitHubリポジトリを紹介する。 必見 awe
【速報】大手DEX「Balancer」に致命的なバグ。大部分は救出もTVLの4%が依然としてリスク下に
最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。 開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは、クリーンで最適化されたJavaScriptのコード記述にも、2021年のJavaScriptの面接準備にも役立ちます。 これは新しいシリーズで、2021年版のJavaScriptコーディングチートシートです。 1. 複数の条件を持つif 配列に複数の値を格納し、includ
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
フロントエンドエンジニアの方が個人開発をしてみたいと思える発表にします。 # 個人開発の目的 - 学習か、リリースか # ツールやフレームワーク ランニングコストを抑えるためのサービス選定 # 楽しさとメリット - ものづくりの楽しさ - 視野が広がる - デザイン、PM…
こんにちは、エンジニアのtarr [https://github.com/tarr1124]です。 KARTE Blocksは既存のサイトにタグを一行入れるだけで、そのサイトを簡単に書き換えたり、ABテストなどで最適化したりできます。 これは、サイトを読み込むときにタグによってBlocks内で設定された内容を反映させているのですが、既存のサイトの挙動に手を加えている以上、一定のリスクが存在します
Firebase + Spreadsheet で Slack Bot を作ったら社内用語辞典の運用が3倍楽しくなった話
最近作った Slack Bot が好評だったのでまとめてみました！ どこの Slack ワークスペースでも導入できるように詳細に設定方法も記載しています。 🛠 作ったもの tell-me-bot（社内では tell-me-paccho）という、社内用語辞典をいい感じに管理してくれる Slack Bot を作りました。 社内ではもともと Spreadsheet で社内用語を管理していたのですが、メンテナンスする人が限られ、あまり積極的には利用されていない状況でした。 そんな時に@しかじろうさんのこちらの記事を発見して、これはおもしろいアイデアだと思い、Firebase + Bolt（TypeScript）にて作ってみました（アイデアをくれた@しかじろうさんに感謝🙏）。元記事の機能を参考に+αの機能も色々実装しています。 構成 Cloud Functions for Firebase で
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
2024年8月31日で、動くWebサイトの一般公開が終了します！引き続き閲覧されたい方は書籍をご購入ください。動くWebデザインアイディア帳 / 動くWebデザインアイディア帳 - 実践編 News 2024.03.27Gmailにおける特典受け取りについて2024.01.185-1-1、5-1-2 グローバルナビゲーション ドロップダウンメニュー（上・左）に関するCSSコード不備のお詫び2023.08.305-1-3、5-1-4 グローバルナビゲーション ドロップダウンメニュー（写真付 上・左ナビ）に関するコード不備のお詫び2022.10.195-1-7 「グローバルナビゲーション-スクロールするとハンバーガーメニューに変化-」に関するコード不備のお詫び Gmailにおける特典受け取りについて 【お知らせとお詫び】 2024年2月にGmailのガイドラインが変更となった影響で、特典受け取
JavaScriptのメモリリークを検出するフレームワーク「MemLab」、メタがオープンソースで公開 メタ（旧Facebook）は、JavaScriptアプリケーションのメモリリークを検出するフレームワーク「MemLab」をオープンソースとして公開したと発表しました。 We’ve open-sourced MemLab. #MemLab is a JavaScript memory testing framework that automates leak detection and makes it easier to root-cause memory leaks. 1/2 https://t.co/vo6Gzv56ud — Engineering at Meta (@fb_engineering) September 12, 2022 Metaが展開しているFacebook、Fac
stepney141: GitHub上のOSS、ミクロ経済学の学部初級教科書になんで公共財として載ってないのか不思議でならないくらい公共財してる stepney141: OSSはもともと、知識を公共財であると認識した上で「知識のフリーライダーを増やすことが知識の発展に繋がる」という思想だったわけだけど、知識を提供する側が悪意を持つ側に回ることを想定していなかったのではないか stepney141: オープンソースの定義を考えたブルース・ペレンスはこういうことを言っているわけだけど、現実には Babel の開発者が寄付を訴えたり、今回の colors.js/faker.js のように開発者が実力行使に出たりしているわけなんだよな "共産主義がうまくいっていない世の中で、オープンソースがごの一見共産主義的な戦略で成功している。それはなぜだろうか? それは、普通の(物質的な)商品と(デジタルなデ
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
セキュリティエンジニアにセキュリティ技術情報収集のやり方を聞いてみた - ラック・セキュリティごった煮ブログ
こんにちは、かすたーど先生です。 セキュリティ業界を目指している学生さんとお話しする機会がたまにあるのですが、「セキュリティエンジニアの方は、どうやってセキュリティ技術に関する情報収集しているんですか？」と聞かれることがよくあります。 情報収集の方法って、学生さんももちろん、セキュリティエンジニアの方同士も「他の人はどうやっているんだろう？」と思っているネタなのではと思いまして、今回ブログのテーマにすることにしました。 ということで、私と同じデジタルペンテスト部に所属している一部のセキュリティエンジニア約30名に協力してもらい、セキュリティ技術の情報収集に関するアンケートを実施しました。結果をご紹介します。 １：セキュリティ技術の情報収集は何を使って実施していますか（複数回答可） 1位：Twitter 2位：ニュース系サイト 3位：書籍・ブログ（同数） 4位：脆弱性情報データベース 5位：
We create beautiful expressions through programming and deliver the best possible experiences.
これは MIERUNE AdventCalendar 2023 24日目の記事です! 昨日は@northprintさんによるSvelteKitでURLクエリパラメーターの操作をするでした。 はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはコチラ 使用するデータ 今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版（ShapeFile）を使用します。 データについての詳細は製品仕様書に記載されています。 この記事のように、データの加工利用には以下の出典が必要となります。 コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国（又は府省等）が作成したかのような態様で公表・利用してはいけません。（コンテンツを編集・
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
概要 JavaScript/TypeScriptを書く中で、自分自身の気づき、他の方から頂いたアドバイスをメモとして残してきました。 その中で、使用頻度が高そうで、知っていれば誰でも簡単に実践できる物を抜粋して記事にしました。 ですので、主にJavaScript/TypeScriptの使用歴が浅い(プログラミングの歴が浅い)方向けに少しでも参考になれば幸いと考えています。 (※JS/TSに限った事では無いものも含まれます。また、こちらに記載した記法が必ずしも優れていると言うわけではありません。本記事はあくまでも、JS・TSを利用した際にこんな記法もあるよという紹介が主要点です。) 早期returnを利用する 条件を満たす場合に直ぐに return することで、コードのネストを減らし、コードの見通しを良くするテクニックです。 簡単な例としまして下記のコードが、 const checkNumb
ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
同性婚・近親婚・複婚（重婚）に関するチュートリアル - INVISIBLE Dojo. ーQUIET & COLORFUL PLACE-
これが話題ですね。 岸田氏、同性婚「認めるまで至っていない」 マイケル・サンデルも言ってるが、同性婚を認めるなら重婚・近親婚も認めないと論理矛盾するんだよ。婚姻を「一緒に暮らす仲良しさんを自由に決める制度」として再定義するなら。そこまで考えてそうな奴が少ない。2021/09/18 20:30 b.hatena.ne.jp ブクマが多数ついた https://b.hatena.ne.jp/entry/s/b.hatena.ne.jp/entry/4708502633297017378/comment/flatfive これについて、過去の蓄積があるので語ろう マイケル・サンデルが同性婚と近親婚の関係をどう論じてるかは知らない。ただ「国は（それらの是非の判断を含め）結婚制度全般から手を引く」可能性を語っている m-dojo.hatenadiary.com サンデルとは別に、日本の複数の法哲学者
パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？ ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freestone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。 ニュ
はじめに 今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。 対象者 エンジニア初心者 モダンフロント技術を学びたい人 ロードマップ Developer Roadmaps エンジニア向けの学習ロードマップが整理されています。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。 TypeScript typescriptlang 公式が提供している学習サービス。 基本文法から実践的な内容まで学ぶことができる。英語が苦手でなければここで一通り学ぶべき。 サバイバルTypeScript 実務で使えるTypeScriptの実装方法を学ぶことができる。応用的な内容も多いが、解説が丁
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のモダンなWebサービス開発の構成について調べるメモ
35歳で競プロを始めて橙になるまでにやったこと - Kiri8128の日記
必要なのはJavaScriptの基本的な知識だけ 3Dアニメーション制作をお手軽にする「Three.js」の魅力
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
htmxとは何なのか？ その背景にある思想について - Qiita
JavaScriptを「ジャバスク」と略す人がいたが、考えたらJSと略すのではないか？
Goで作るテキストエディタ - Sansan Tech Blog
Cloudflare Workers 面白い - ゆーすけべー日記
リアルタイム声質変換ライブラリ「Realtime Yukarin」を公開しました
Web制作を変える！2021年の便利オンラインツール・ベスト100選
async/await は Promise を置き換えない - Okapies' Archive
PythonでWebアプリ作れるやつのまとめ(12選)
【必見】Pythonプログラマーが必ず確認するべきGitHubリポジトリ 10選
仮想通貨の相続に関する税は110%になるので、相続放棄をするしかない – DeFIRE 〜デファイア〜
2021年に知っておきたいJavaScript最適化技術34選 - Qiita
AWSが落ちてもGCPに逃がすことで落ちないシステムを作る技術
動くWebデザインアイデア帳 | 動くWebデザインアイディア帳
JavaScriptのメモリリークを検出するフレームワーク「MemLab」、メタがオープンソースで公開
OSSで共有地の悲劇が起こることにどう対処するか - 西尾泰和の外部脳
three.jsで流体シミュレーション(stable fluids) | mofu
Three.jsで新宿駅構内図を3Dで可視化してみる - Qiita
Webサービスを作るときのテンプレートを作った - hiroppy's site
【JS・TS】コーディングTips集 - Qiita
Promiseをthrowするのはなぜ天才的デザインなのか - Qiita
俺の webpack.config.js-20200503 - mizchi's blog
センスだけに頼らない！ CSSとJSで作るパーティクル表現のテクニック - ICS MEDIA
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ
【2024年最新】モダンフロント学習教材まとめ - Qiita