階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
オリジナルのJavaScriptライブラリを公開します！ ライブラリの作り方よりかは、実際に公開する手順やCI/CDについて解説します。 【技術】 ・ JavaScript ・ Node.js ・ npm/yarn ・ Mocha ・ Chai ・ Git/GitHub ・ GitHub Actions
書きかけです。時間なく、駄文を撒き散らしながら加筆・修正していきます。 Pythonには大変お世話になっております。 Pythonは科学計算が得意で、データ解析もできる。単独開発なので、Pythonはなくてはならない言語。 Pythonの良いところ 1. 科学(統計, AI etc)ライブラリの豊富さ Pythonの悪いところ 1. 遅い, 遅い, 遅い... CPythonは遅い 遅いのは、サービス運用にとって採用されない要因になるかと。大規模運用に関して早いは重要。 (ただ、CPythonは高速化より、Pythonの可能性を広げる事に注力しているものと思われますので、別の高速化の手立てを用いられるのが最良かと） 言語速度が早いとなると、運用システム規模が単純に減らせられる。例えば、現在使っているシステムでVPS100台が1/4の25台になれば、VPS使用量コストは1/4。管理負担も1/
TL;DR React は単なる UI ライブラリにとどまらず Routing, Bundling, Server Technologies までを統合した技術になろうとしている React Server Components はパフォーマンスだけでなく、「PHP, Ruby on Rails のシンプルなサーバサイド HTML 描画の世界に戻しつつ、サーバサイドとクライアントサイドの実装を同じ技術でシームレスに実装できるようにする」ことができる それにより、開発者から見た複雑さを下げられ、かつエンドユーザは良いパフォーマンス・良い体験を得られる React Server Comonents （以下、RSC）について、インターネット上の記事では主にパフォーマンスについて語られることが多い印象です。しかし、RSC のもう1つ重要な点として、RSC は我々の Web アプリケーション開発の体験
2020年2月27日、「ホットペッパービューティーコスメ」のWeb版が公開された。リクルートテクノロジーズが同サービスを開発するにあたり採用したのは、ReactとNext.jsと最新版のAMP（Accelerated Mobile Pages）である。この結果、ページの内容が表示されるまで0.2秒、画像が出るまで0.8秒、解析用のJavaScript等を含めた全てのリソースがダウンロードされるまでの時間は1.2秒以内を達成した。リクルートテクノロジーズが、これらの組み合わせを採用した背景、および開発における苦労や工夫した点などについて、同サービス開発に従事したエンジニアリング室 アプリケーションソリューショングループ グループマネジャーの古川陽介氏、メンバーの可児潤也氏、渡邉礁太郎氏に話を聞いた。 React×Next.js×AMP――この組み合わせを採用した背景 「ホットペッパービューテ
プログラム上達に必要なものは？ モチベーションでしょうか？あるいはセンスでしょうか？ 『プログラム未経験者大歓迎』の求人に募集してきた方々は、少なくとも自分で学習するモチベーションはなかったはずですし、センスについては未知数です。そんな方々にプログラム上達してもらうためには何を与えればよいでしょう？ Webサイトには解説記事は溢れていますし、少しお金を出せば詳しく解説してある本もたくさんあります。それらを読む様に口を酸っぱくして言い続ければいいでしょうか？気分が乗らない学校の宿題にようやく手をつけた子供に「宿題をやったのか？」と確認するおかあさんのようになっていないでしょうか？ 意見は色々あると思いますが、わたしは、「丁度よいサイズの課題」を用意することがよいのではないかと思っています。 「丁度よいサイズの課題」とは、業務で役に立つ可能性が高く、そこそこ頑張れば解決でき、達成感が得られ、挫
はじめに 仕事で少しSVGを扱うことがあったので、免許証ジェネレータを作ってみました。 制作工数: 2日間(20時間程度) 作ったもの 免許証ジェネレータ 🥳 パラメータを設定して↓のような免許証を生成できます。 使い方 下部のタブから画像やテキスト等を設定して「変更を反映」を押下します。 「画像を保存」からローカルに画像を保存できます。 ソースコード 雑ですが↓に置いています。 免許証ジェネレータの作り方 定数を設定しようと考えましたが、めんどくさくなってマジックナンバーだらけになりました😿 SVGコードのベストプラクティス的なものがよくわかっていないので今後勉強しようと思います。 技術 JavaScriptとHTMLだけです。 JavaScriptでSVGを生成して、HTML要素にappendします。 描画メソッドを作る 線、枠、文字、画像を描画するメソッドを作成します。 座標、大
【人類待望】年の瀬なので「ｳﾙﾄﾗｿｳｯ ＼ﾊｧｲ／」を練習するアプリを作った【ちょうど欲しかった】 - Qiita
本記事はクソアプリ Advent Calendar 2020の20日目の記事です。 19日目はampersandさんによるブラウザに弾幕を流して匿名チャットできるやつを作ったでした。 はじめに 年の瀬ですね。一年の締めくくりや大掃除をしている方も多いのではないでしょうか。 ところで、みなさんは年末には何を聴いて年を越しますか？ そうですね、「ultra soul」です。 そんな全人類の願望がこれです。 「ｳﾙﾄﾗｿｳｯ ＼ﾊｧｲ／」で年越ししたい。 しかし、そのタイミングはシビアで、残念ながらチャンスは年に一度しか来ないのです。 そこで、私は来たる12月31日に向けて、「ｳﾙﾄﾗｿｳｯ ＼ﾊｧｲ／」を練習するためのアプリを作りました。 ｳﾙﾄﾗｿｳｯ ＼ﾊｧｲ／を練習するアプリ 使い方 ページに表示されている時刻を見ながら、タイミングを合わせて「再生する」ボタンをクリック。 格好いい稲葉さ
RN Features 2021年12月号 - React Native アドベントカレンダー 2021, ニュースレター React Native Now, React Native で Liquid Swipe を実装するための4つの技術 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native アドベントカレンダー 2021 M1 Mac + Xcode 12.5.1でReact Native 0.65 アプリのビルド時に出たエラーと対応 React Native で Liquid Swipe を実装するための4つの技術 React Navigation (V6)の設計方針に関するTips ニュースレター React Native Now React Native Advent Calendar 2021 に記事を投稿しました React Native で Liquid Swipe を実装するための4つの技術 JavaScript製フルスタックフレームワーク Redwood.js SVGRを使ってsvgファイルをReactコンポーネント
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
オリジナルのJavaScriptライブラリを公開しよう
Pythonの高速化技術。JavaScript,C++にも負けてない - Qiita
React Server Components は Web アプリ開発にどのような変化をもたらすか
快適なUXの裏には泥臭さがあった？ 新サービス開発に「React×Next.js×AMP」採用のワケ
新人Web系職業プログラマーのための「丁度よいサイズの課題集」 - Qiita
【JavaScript】免許証ジェネレータを作ってみた【SVG】 - Qiita