[B! js] sippo_desのブックマーク

そもそもnpmからわからない

はじめにやっぱりwebpackがわからない︵エピソード1︶、エピソード2を公開しているのですが、そもそもnpmからわからない、という人もいると思いますので、今回はnpmに関して説明します。なお、やっぱりwebpackがわからないではViteに関して触れていますが、Node.jsもDenoという新しいランタイム環境が登場しています。ですが、やはりまだ開発現場で使用するには難しいと思いますので、Node.jsを使用するうえでnpmはちゃんと理解しておいた方がいいです。npmとはnpm とはNode.jsのパッケージを管理するシステム、所謂パッケージ管理システムです。アプリケーションを作成する際、便利なパッケージをそのプロジェクトにインストールして、使用することができます。ところで、パッケージとは一体何なのでしょうか？パッケージとはシステム開発ではモジュール、パッケージ、ライブラ

sippo_des 2023/05/03

リンク

gRPCがフロントエンド通信の第一の選択肢になる時代がやってきたかも？ | フューチャー技術ブログ

Go 1.19が8/2に早々にリリースされました。個人的にはGo 1.19よりも楽しみだったのが、サービス間通信とIDL︵インタフェース記述言語︶連載の中でご紹介したgRPCのGo実装の新星、Connectのアップデートでした。そしてそれはやってきました。詳しい内容は↑の記事を見ていただくとして、Connectがその開発元ブログの紹介記事で宣言していたのが次の2つのことでした。 Go1.19が出たらconnect-goは1.0にして以後後方互換性を守るよ connect-webを出すよ前者はまだ0.3だったのですが、connect-webはリリースされました。歴史のあるフロントエンドのコードジェネレータはTypeScript対応が後付けだったりするのですが、TypeScriptがファーストシチズンかつ、ネイティブというコードジェネレータなので、開発はかなりやりやすくなることが期待され

sippo_des 2022/08/20

js

リンク

HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA

ダイアログやハンバーガーメニューといったユーザーインタフェース︵UI︶は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから﹁簡単に作成できる﹂と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ダイアログを表示中に、裏側のコンテンツがスクロールできてしまったダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、

sippo_des 2022/06/24

リンク

センスだけに頼らない！ CSSとJSで作るパーティクル表現のテクニック - ICS MEDIA

パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？　ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても﹁自分にはセンスがないから……﹂と諦めてしまっている人もいるかもしれません。この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb AnimationsAPIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。基本のパーティクル例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。デモを別画面

sippo_des 2022/04/21

リンク

英語面接で5歳児みたいなことしか言えないからカッとなってWebサービス作った【個人開発】 - Qiita

要約﹁英語で意見を言おうとすると5歳児のようになってしまう﹂という課題を解決するEnglisterというサービスを開発した。自分で使ってみたところ、10問程度の問題を解くだけでスラスラと英語で意見を言えるようになった。実装はDeepL APIとNext.jsのAPI routeを使って爆速開発をした。追加(2021/01/18) 記事を公開してから毎日機能追加をしています。2週間前からどれだけ変わったか是非見ていただきたいです。背景にあった課題﹁英語で意見を言おうとすると5歳児のようになってしまう﹂英語にすごい苦手意識があるわけではない。TOEICは840点で、すごく簡単な日常会話なら問題なくできるので、海外旅行で困るということはなかった。しかし、仕事でたまに海外の人とやりとりをするときや外資系企業の英語面接で**﹁ちょっと難しい質問﹂**をされると、途端に5歳児になってしま

sippo_des 2022/01/04

リンク

モダン JavaScript チートシート

Skip to the content. モダン JavaScript チートシート画像クレジット: Ahmad Awais ⚡️ イントロダクション動機このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。このガイドは読者に JavaScript をゼロから教えるものではありません。基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。説明の中で JavaScript の諸概念が使われています。また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2

sippo_des 2021/10/11

リンク

カルーセルUIを実現するJSライブラリまとめ(2024年版) - 導入手間や機能の比較紹介 - ICS MEDIA

いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。基本の作例サンプルを別ウインドウで開くコードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <

sippo_des 2021/09/03

リンク

プログラミングスクールを卒業しました - ksmxxxxxx.hatebu

卒業証書 2021年4月にプログラミングスクールのWebデザイナー向けプログラミングコースを卒業しました。受講していたのはRails プログラマーコースだったのを、途中からメンターさんに相談してWebデザイナー向けにカリキュラム内容をカスタマイズしてもらって、受講してました。受講していたスクールでははじめての試みだったということで、同じデザイナーの人でプログラミング勉強したいと考えている人向けに記事を残すことにしました。プログラミングを勉強しようと思った経緯は以前投稿した記事に書いているので、そちらを参照してください。 ksmxxxxxx.hatena blog.com スクールでやったこと通っていたのはフィヨルドブートキャンプというプログラミングスクールになります。実際に進めたカリキュラムは以下になります。 Linuxの基本 Terminal Debianをインストールファイル操

sippo_des 2021/05/30

リンク

Vue.js UI UX DX Library - Inkline

Configuration file, design tokens, toast notifications and more!Your next Vue.js project deserves the best developer experienceInkline is the intuitive UI Components library for building high-quality, developer-friendly, configurable, and accessible Vue.js Design Systems. More than just a UI LibraryWhile many UI libraries focus solely on UI and UX, they often overlook the most crucial element - th

sippo_des 2021/04/27

リンク

最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説

最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説ページのタイトルと説明文、外部ファイルソーシャルメディア用のHTML アイコンとアドレスバーもう

sippo_des 2021/04/27

リンク

ほぼ独学・未経験者がモダンな技術でポートフォリオを作ってみた【Rails / Nuxt.js / Docker / AWS / Terraform / CircleCI】 - Qiita

ほぼ独学・未経験者がモダンな技術でポートフォリオを作ってみた︻Rails / Nuxt.js / Docker / AWS / Terraform / CircleCI︼Rails AWS CircleCI TerraformNuxtはじめにこんにちは! akiと申します！当記事はほぼ独学・未経験者がモダンな技術でポートフォリオ︵以下PF︶を作ってみたので、ご紹介させて頂きたいと思います。昨今、未経験者がモダンな技術を使用して作成した、PFの作成記事も多く存在するので、何番煎じかにはなってしまいますが、この記事も同じ初学者の方の参考になれば幸いです。自己紹介私は22歳・高卒で、現在(2021年3月時点︶も工場で製造の仕事を続けております。そんな私ですが﹁Webエンジニア﹂という職種に興味を持ち、2020年4月よりプログラミング学習を開始しました。今回紹介するPFの作成期間は約3ヶ

sippo_des 2021/03/25

リンク

2021年にJavaScriptやNode.jsを勉強し始めたので、読んで良かった資料をまとめる

2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。個人的なリンク集ですが、﹁これも読むと良いよ﹂というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39で策定されている Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsの各バージョンでのECMAScriptサポート状況 JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript 二十年の歴史についての回 JavaScript チュートリアル | MDN JavaScri

sippo_des 2021/03/22

リンク

Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ〜ショッピングクーポンの事例紹介

今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。そこで、graphql-anywhereのfilterメソッドを用いることで、クエリ結果をfragmentへ変換します。以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー

sippo_des 2021/01/10

リンク

プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法

プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法 2020年でJavaScript学ぶならきっとブラウザ向けJSガン無視していきなり初手node.js︵ただし暫く何も足さない︶がいいんじゃないかというメモ - min.t (ミント) Node.js を教えることについて、自分は賛成なんですが、その学習パスが整理されてないなと思っていたのと、学習パスがなぜ整理されていないかについて書きます。はじめに問題意識として、今のプログラミングスクールや独学勢が RubyonRails に偏っていて、 Node.js の人間としては、歯がゆく感じているんですが、実際 Node.js を教えるとしても問題も多いと認識しています。歴史の話は、当時の実情や政治を省いて結果だけを書きます。具体的には第一次ブラウザ戦争、第二次ブラウザ戦争を言及しませ

sippo_des 2020/11/14

リンク

社内でフロントエンドのパフォーマンスチューニングコンテストを開催した

フロントエンド/Node.js エンジニアの mizchi です。plaid では新しい分析エンジンのフロントエンド側の技術的な仕様を考えたり、それを実装したりしています。趣味として社内の他のプロダクトのパフォーマンスを勝手に測って、貼り付けていくこともあります。 plaid のエンジニア組織には「組」という制度があって、メインとなるプロダクト以外にも、そのテーマで会社横断で活動するグループがあ

sippo_des 2020/10/01

リンク

TypeScript学習ロードマップ - Qiita

TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の1つです。JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSというメタ言語でラッピングすることで扱いやすくするものです。 altJSで他に有名なのはcoffeeScriptなどでしょうか。 TypeScriptはtypeと名乗っている通り、静的型付けを特徴としています。また、jsと互換性があり、jsの上位互換︵スーパセッ

sippo_des 2020/08/19

リンク

コーポレートサイトを誰にも気づかれず静的化したときの技術選択について - Hatena Developer Blog

こんにちは〜。チーフエンジニアのid:cockscombです。最近、同僚のid:yashigani_wとともに、はてなのコーポレートサイトを静的サイトとして再構築しました。ちょっとした仕事ではありますが、経験によって得られた暗黙知を形式知へ昇華するため、ここに紹介します。はてなのコーポレートサイトとはサイトを静的化するメリットどのようにサイトの静的化を進めたか 1. 静的ファイルをNext.jsで生成 2. 運用を自動化したい 3. ホスティングサービスを選択する 4. 動的なコンテンツを表示するリリースと振り返りホスティングサービスに関する補足はてなのコーポレートサイトとは弊社のコーポレートサイトは一般的なそれと同様に、株式会社としての﹁はてな﹂に関心を持っていただいた方々とコミュニケーションするための窓口です。会社情報を提供したり、あるいはプレスリリースなどの情報を公開

sippo_des 2020/07/22

きづかれずに。

リンク

PyTorch／TensorFlow／Keras／scikit-learnライブラリ内蔵のデータセット一覧

PyTorch／TensorFlow／Keras／scikit-learnライブラリ内蔵のデータセット一覧：AI・機械学習のデータセット辞典機械学習やディープラーニング用の主要ライブラリが提供する「画像／音声／テキストなどのデータセット」の名前とリンクを表にまとめ、典型的な使い方を簡単に紹介する。連載目次本連載「AI・機械学習のデータセット辞典」では、ここまで主に、scikit-learnやKeras／TensorFlow（tf.keras）、TensorFlow Datasets、PyTorchといった主要なPythonライブラリに共通的に含まれる代表的なデータセットを紹介し、各ライブラリでの典型的な実装コード例を示してきた。しかし、これらの全ライブラリに共通的に含まれているデータセットはまれで非常に少ない。よってこれからは、個々のライブラリに1つしか含まれていないようなこまごまと

sippo_des 2020/07/22

リンク

2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita

以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。もちろんVueとAngularにも多くのフォロアーがついています。さらにはSvelte、Next

sippo_des 2020/07/04

リンク

Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap

サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから。 VS Codeで開いたら、「Install」をクリック Snipsnapの使い方 Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。設定利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイル

sippo_des 2020/06/23

リンク

はてなブックマーク

タグ

関連タグで絞り込む (95)

jsに関するsippo_desのブックマーク (55)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス