流行っているらしいのでやってみた。 10 Trending projects on GitHub for web developers - 12th March 2021 GitHub その後、Sweetalert2 を見つけたので、追記。// 2021/04/05 お試し See the Pen SweetAlert by YAMADA Nobuko (@e99h2121) on CodePen. See the Pen SweetAlert2 by YAMADA Nobuko (@e99h2121) on CodePen. <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <button type=“button” onclick="basicSample()">やさしいアラート</b

CSS Gridでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にCSS Gridの使い方を学べます。 CSS Grid Cheat Sheet Illustrated in 2021🎖️ by Joy Shaheb 同じ作者のFlexboxのチートシートも翻訳しました。 Flexboxでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridの構造 CSS Gridの各プロパティ（親要素） CSS Gridの各プロパティ（子要素） CSS Gridのショートハンド 終わりに CSS Gridの構造 CSS Gridの知識をリフレッシュしましょう！ 2021年に備えて、C

[レベル: 中級] 動画 SEO に役立つ新しいリソースを Google は公開しました。 YouTube の動画と検索セントラルの技術ドキュメントでベストプラクティスを解説している。 動画 SEO 向け動画 Google 検索の動画を担当しているプロダクト マネージャの Danielle Marshak（ダニエル・マーシャク）氏が、動画 SEO の基本的なベストプラクティスをライトニングトークで解説しています。 次のトピックに触れています。 ウェブで動画を見つけられるようにする 動画構造化データでマークアップする 高品質なサムネイル画像を設定する 動画サイトマップを送信する 動画ファイルに Google がアクセスできるようにする 日本語字幕あり Marshak 氏は（当然）英語で話していますが、日本語字幕を利用できます。 歯車アイコン⚙️から [字幕] を選択し [日本語] を指定しま

Microsoft、文字起こしアプリ「Group Transcrib‪e‬」を公開 2021 3/16 Microsoftは3月上旬、対面での会議や会話のためのリアルタイムのテープ起こしと翻訳を提供する「Group Transcrib‪e‬（グループ転写）」のiOSアプリをリリースしました。会議の参加者がそれぞれのデバイスで使用することができます。 メモを取らずに会議に集中できる優れもの 最先端のAI音声・言語技術を搭載したGroup Transcribeで、会話の参加者は共有セッションを開始し、それぞれが携帯電話のマイクを使用して、リアルタイムで誰が何を言ったかを示す、非常に正確なトランスクリプトをキャプチャできます。 会話の高品質な記録に自信を持つことで、ユーザーはメモを取る必要がなくなり、会話そのものに注意を集中させることができます。トランスクリプトは、共有したり、再配置も簡単に行う

Macのメニューバーにスクリプトやプログラムの出力を表示できるユーティリティ「BitBar」がObjCからGo言語へコードを移植し「xbar」として開発を再開しています。詳細は以下から。 BitBarはロンドンのMat Ryerさんが2014年から開発しているMacのメニューバーにシェルスクリプトやRuby, Python, Swiftで書いたプログラムの出力を表示してくれるオープンソースのユーティリティアプリですが、このBitBarが開発言語をObjective-C(ObjC)からGoへ移行し「xbar*」として開発を再開したそうです。 Keen to share more about the dev progress behind xbar (the BitBar reboot). A few weird bugs to iron out first – Some Catalina l

始めに music21はMITが作ったpythonの音楽情報処理ライブラリです。 musicology(音響学・音楽理論)の研究への利用を目的に作られたそうで、 結構いろいろできるらしいので、勉強がてら触ってみました。 難しいアルゴリズム等の話はほとんどしないので、プログラマでない方も出力結果だけ見て「こんなことができるんだ」と思ってもらえるような記事になればいいな、と思っています。 ちなみに、21というのはMITでの音楽コースに割り当てられた講義番号に由来するそうです。留学したい。 基本的に公式のドキュメントを順に追ってくだけです。ここの内容を実行しながら感想を書く、という記事です。 環境 macOS(10.15.7) python3.8.5 jupyter-notebook Musescore　version-3.4.2.25137 Musescoreというのはフリーの楽譜作成ソフトで

Macを買ったら最初に設定すべき33の項目を、米メディア9to5Macが動画にまとめているので、ご紹介します。普段からMacを使っている方も、知っておくと便利です。 簡単な設定でMacを便利に使おう 9to5Macが取り上げた、新しいMacを便利に使うためのテクニックは、簡単な設定の変更で実現できるものが中心です。 操作関連 ▼1. トラックパッドのスピードを調整する ▼2. 「タップでクリック」を有効にする ▼3. 3本指のドラッグ ▼4. マウスカーソルの移動速度を変える ▼5. 右クリックに相当する副ボタンを設定する ▼6. 指1本でSafariのページ間を移動 ▼7. Apple Watchでロック解除 ▼8. 画面の四隅にカーソルを合わせて機能を呼び出す「ホットコーナー」 ▼9. コントロール間のフォーカス移動をキーボードで操作 システム設定 ▼10. Macの名前を変える ▼1

@shin1x1さんの独立したコアレイヤパターンを JS(TS)でも利用できるといいかなと思い、サンプルコードを作成してみた。 独立したコアレイヤパターンとは？ アーキテクチャパターンのひとつ コアレイヤとアプリケーションレイヤの 2 つのレイヤからなる コアレイヤ コアレイヤロジックやビジネスロジックを実装する 外部の IF(WebAPI や DB の orm など)には依存しない アプリケーションレイヤ コアレイヤと外部の IF の連携を実装する 外部の IF(WebAPI や DB の orm など)に依存する スーパーヒーローがいなくても使えるパターン ゴール サンプルとして、記事に対するファボ(お気に入り)を設定・解除する機能のユースケースを作成する。 サンプルリポジトリ ohnaka0410/Vue-Ts-Independent-Core-Layer-Pattern 実装 ベー

どうも、まさとらん（@0310lan）です！ 今回はJavaScript環境で動くJupyter Notebookのような無料Webサービスをご紹介します。 インタラクティブに動作するJavaScriptを活用したドキュメント作りが可能であり、学習用途はもちろんのことデータ分析・可視化・機械学習・プロトタイプ作りなど、さまざまな用途に活用できるのが特徴です。 JavaScriptを使ったドキュメント作りにご興味ある方はぜひ参考にしてみてください！ ちなみにJavaScriptの基本は、paizaラーニングの「JavaScript入門編」で学ぶことができます。 【 Dnotebook 】 ■「Dnotebook」の使い方 それではさっそくですが、「Dnotebook」をどのように使っていけばいいのか詳しく見ていきましょう。 「Dnotebook」はnpmからインストールしてローカル開発環境で

CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニック はじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー