PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
Webサイトの画像を編集してダウンロードできるChrome拡張機能「Download & Edit All Images」 ◆ Download & Edit All Images https://download-and-edit-all-images.pop9.io/ 紹介 「Download & Edit All Images」は、開いたWebサイトの画像を編集したりダウンロードできるChrome拡張機能です。 Webサイトを開いて拡張ボタンをクリックすると、サイト上にある全ての画像がリストアップされます。 あとは編集したい画像を選ぶと このような画像編集画面が開きます。 画像を切り取ったり エフェクトをかけることも可能。 DOWNLOADボタンから編集した画像をダウンロードすることもできます。 簡単な修正のためだけにphotoshopを起動する必要がなくなるので、非常に重宝しそうな
はじめに メディアプレイヤー作っていますか？ 実際に作ろうとすると色々な対応が必要になることに気付かされます。 例えば、 アプリを落としても再生し続ける 電話が掛かってきたら止める イヤホンが抜けたらスピーカーで鳴らないように止める ループ・シャッフル ヘッドホンのボタンを押した時に曲を操作する などなど。 今回はこれらに対応できる、一般的な音楽プレイヤーを作っていきます。 MediaSessionとは 実装していく前に、MediaSessionに関して知っておく必要があります。 と言っても、仕組みを完全に理解する必要はありません。まずは再生できるまでを学習し、必要になったらより詳しい解説を都度見れば良いと思います。 なので詳しい解説は公式ドキュメントにお任せしますが、要するに 色々な所から送られてくるプレイヤーの操作・情報をMediaSessionを使って処理しよう ということです。 例
第1回 初めてのニューラルネットワーク実装、まずは準備をしよう ― 仕組み理解×初実装（前編）：TensorFlow 2＋Keras（tf.keras）入門 機械学習の勉強はここから始めてみよう。ディープラーニングの基盤技術であるニューラルネットワーク（NN）を、知識ゼロの状態から概略を押さえつつ実装してみよう。まずはワークフローを概観して、データ回りの処理から始める。
Enhance your creative works with photos generated completely by AI. Search our gallery of high-quality diverse photos or create unique models by your parameters in real time
MeCabへユーザー辞書を追加する方法
こんにちは、GMOアドマーケティングのS.Rです。 NLP（自然言語処理）は機械学習の中でも人気な分野の一つです。 今回は日本語のNLPで重要な処理である形態素解析のツール「MeCab」へユーザー辞書を追加する方法を紹介します。 1. NLPの基本処理プロセス 日本語を英語へ機械翻訳する例で説明します。 基本処理プロセスは図1の通りです。形態素解析は日本語に関するNLP処理の最初のプロセスです。 図1. 機械翻訳の処理の流れ 2. 形態素解析とは 形態素解析については以下のWikipediaの解説をご覧ください。 形態素解析（けいたいそかいせき、Morphological Analysis）とは、文法的な情報の注記の無い自然言語のテキストデータ（文）から、対象言語の文法や、辞書と呼ばれる単語の品詞等の情報にもとづき、形態素（Morpheme, おおまかにいえば、言語で意味を持つ最小単位）の
HTMLやCSSはブラウザのアップデートによって使えるものが増えたり、より簡単に機能を実装できるようになることがあります。 少し前まではJavaScriptで行わなければならなかったことが、HTMLとCSSだけで行えるようになったりするので、最新情報にキャッチアップすることでより効率的にコーディングを行えるようになります。 今回は、HTMLとCSSの小技やテクニックをご紹介したいと思います。 1. ダークモードの時にスタイルを変える 最近のOSでは、通常のカラースキームと別に「ダークモード」が搭載されるようになりました。 prefers-color-scheme: darkを指定することでダークモードが設定されている場合のスタイルを別で記述することができます。
div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui
Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされたさまざまなデザインが実装できます。 augmented-ui augmented-ui -GitHub augmented-uiは、Webページやアプリのdiv要素をはじめとするあらゆるUI要素にサイバーパンク風のスタイルを与えることができます。 ライセンスはBSD 2-Clause Licenseで、個人でも商用でも無料で利用できます。
Linuxでハードウェア情報を表示するコマンドまとめ
Opensource.comは9月16日(米国時間)、「Linux commands to display your hardware information｜Opensource.com」において、Linuxにおいてハードウェア情報やネットワーク情報を表示するコマンドを紹介した。 Linuxでは、コマンドを使うことでシステムに関するさまざまな情報を得ることが可能。記事ではさまざまなコマンドが取り上げられており、情報を得る際の資料として参考になる。 記事で紹介している主なコマンドの使用例は次のとおり。
GitHub - KaiseiYokoyama/repub_cli: markdown docs to epub3
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。 スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ローディングアニメーション系 7. SVGアニメーション系 8. 便利、面白系スニペ
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 UI interactionsの使い方 すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。 HTML HTMLは、button要素にclassを与えるだけでのシンプルな構成です。
こんにちは。CREの三浦（id:missasan）です。 長らく、たくさんの方から熱いご要望をいただいていた、時間を指定して監視を停止する ダウンタイム という機能をリリースしました！ これまでも Mackerel では、監視ないしは通知を停止するための機能をいくつか持っていましたが、スケジュールされたバッチやメンテナンスなどに対応するためには、LinuxOS なら cron などのような別のスケジューラーの機能と併用していただく必要があり、手間がかかっていました。 この機能のリリースによって、Mackerel上で柔軟なスケジュールを設定いただくことができるようになりました。もちろんAPIからも設定が可能です。 多くのユーザーのみなさんの運用の手間を省くことに直結するような機能が出せることはMackerelチームとしても嬉しいことです。 これ以外にも、実はワークアラウンドで対応している、と
Vue.jsだけで作る基本的なチャットアプリ機能のサンプルコードと概要説明です。 Vue.jsの概要説明とプロジェクト設定はこちら： www.katonobo.com www.katonobo.com Vue.jsで超基本的なチャットアプリ機能を実装しよう Vue.jsのサンプルコード コードの説明 Vue.jsで超基本的なチャットアプリ機能を実装しよう Vue.jsだけで作っています。そのため、メッセージはリロードしたり画面遷移したらデータは消えますので実用レベルではありませんが、むしろ無駄を一切削ぎ落としたコードなのでチャットアプリの基本的なロジックを理解するのに役立つはずです。 今回の機能は、自分のメッセージの送信と相手のメッセージの送信を分けて、自分のメッセージは「赤色」相手のメッセージは「青色」になり順番に表示されるようになっています。 実際の動作はこちらのサイトで確認してくださ
こちらでVue.jsのプロジェクトを作成しておいてください。 今回のレッスンの全体像 今回のレッスンは、Vue.jsとFirebaseを連携させることが目的です。 Vue.jsとFirebaseが連携できれば、Vue.jsで作成した画面から、データをFirebaseに保存したり、引き出したり、消したり出来るようになります。 つまり、皆さんが想像する一般的なウェブサービスを作れます。 Firebaseとは？ Firebaseとは、Googleが提供するモバイル・Webアプリケーション開発プラットフォームです。 様々な便利なサービスを提供してくれていますが、今回はFirestoreと言う、データベースのサービスを利用します。 Firebaseのプロジェクトを作成 まずはFirebaseのアカウントを作成してください。 Firebase アカウントができたら「プロジェクトを追加」をクリックします
ネタ系アプリ「キモツイ」で使用した技術（Vue.js+Firebase+Buefy）の基本的なセッティング方法 - Qiita
構想から半日の爆速でリリースしたネタ全振りWebサービス「キモツイ」の構成技術とその基本的なセッティング部分の解説です。 作ったサイトはこちら キモツイ 「クソツイ」じゃない「キモツイ」だ！ 「キモツイ」は「クソツイ」とは違う新たな概念です。ちょっとキモい感じが漂うツイートを「キモツイ」と私たちは愛を込めて呼びます。 当サイトは、キモいツイートを誰でも投稿・シェアできるサービスです。 お気に入りキモツイには「キモ投票」ができ、100票集まると殿堂入りします。 ぜひお気に入りのキモツイを投稿・シェアしてみてください。 ブログに遊び方書いています。ブログ Vue.js + Firebase + Buefy(Bulma)のお手軽三点セット 気軽な個人開発ではもうおなじみの、フロントは「Vue.js」バックエンドはサーバレスの「Firebase」という構成です。加えてUIも楽したいのでBulmaベ
ども、@kimihom です。 今回は Cache API を使う機会があったので、調査結果と利用のユースケースと共に紹介しよう。サーバーサイドをどんなに高速化するよりも、フロントエンドで そもそもリクエストをさせない 仕組みにすれば、それが最も速いというのを改めて感じた。 Service Worker と Cache API 「Service Worker を使えば、オフラインでもアクセスできるようになる」っていうのがよく聞く話だろう。これを実現するには、Cache API と Service Worker の2つを組み合わせることで実現できる。Service Worker を使うと、ページリクエスト時のイベントを横取りすることができるから、それが実現できる。詳しくは以下の Qiita が参考になる。 ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを
概要 Python FlaskでREST APIの開発に挑戦してみる。 blueprintでURLマッピングを行い、Flask-RESTfulでAPIを実装、 Cerberusでバリデーションをし、SQLAlchemyでDBとやり取りすることにする。 準備 Python + uWSGI + nginx で事前にWebサーバーの立ち上げをしておいた。 また、 pip3 install blueprint Cerberus Flask-RESTful Flask-SQLAlchemy Flask-SQLAlchemy-Session mysqlclient SQLAlchemy marshmallow marshmallow-sqlalchemy app.py uwsgi.ini controller/ + __init__.py + auth.py # APIその1 (URL: /api/a
Search, watch, and cook every single Tasty recipe and video ever - all in one place! News, Politics, Culture, Life, Entertainment, and more. Stories that matter to you. 「コピペできるようになったら神→対応しました」Google、驚異のリアルタイム文字変換の進化2月にβ版がリリースされたGoogle製の音声文字変換（Live Transcribe）アプリ。もともと聴覚障害者のために作られたアクセシビリティ機能だが、精度の高さから文字起こしとしても使えるのではないかと話題だ。来日中のプロダクトマネージャー、ブライアン・ケムラー氏に話を聞いた。
タッチデバイスの「input type=”range”」の挙動を改善してくれるJavaScript「Rangetouch」 | DevelopersIO
タッチデバイスでinput type="range"を使った場合、スライダーのバー部分をタップしてもなんの反応もありません。これをタップした位置へツマミを移動したり値を取得したりと、OSネイティブのスライダーのように挙動を改善してくれるMITライセンスのJSライブラリを紹介します。 デモページ（要タッチデバイス）：https://rangetouch.com/ リポジトリ：RangeTouch - GitHub 使い方 npmなら npm i rangetouch -D CDNから読み込むなら <script src="https://cdn.rangetouch.com/2.0.0/rangetouch.js"></script> です。 input（type="range"）要素が1つなら、次のようにCSSセレクタまたは要素で指定します。（npmの人はimport RangeTouch
Webページ内のコンテンツの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプトを紹介します。マップはページ内リンクにも対応しています。 pagemap pagemap -GitHub pagemapの特徴 pagemapのデモ pagemapの使い方 pagemapの特徴 pagemapはページ全体の構成を取得し、全体を把握できるマップを自動生成するスクリプトです。MITライセンスで、商用プロジェクトでも無料で利用できます。 全体マップは、デフォルトでは右上に表示されます。
以下はMostafa Gaafarによる記事、7 New Exciting JavaScript Features You Need to Knowの日本語訳です。 7 New Exciting JavaScript Features You Need to Know JavaScript ( ECMA Script ) は進化する言語であり、たくさんのproposalやアイデアが出番を待ち受けています。 TC39 (Technical Committee 39) という委員会がJavaScript標準と新機能の定義を担当しています。 そして今年は彼らの活動が活発になっています。 以下は、現在ステージ3にある提案の一部の紹介です。 ステージ3は完成する直前の段階です。 これはつまり、この機能がブラウザやその他のJavaScriptエンジンにすぐに実装されることを表しています。 実際、以下の
wallabagはオープンソースとして公開されているPocketクローンです。PocketやInstapaper、すでにサービスをシャットダウンしてしまったReadabilityなど、後で読む系サービスの代替アプリがOSSとして提供されています。 主な特徴として、完全レスポンシブ、スマフォアプリの用意、ブラウザ拡張対応、PocketやInstapaperからのデータ移行、タグ機能、部分的なハイライト、RSSリーダー対応機能、取得した記事の任意のファイルでのエクスポート（JSONやCSV、ePUBやPDF、txt、HTMLなど）等が挙げられています。 条件付き（スマフォアプリのみ）のようですが、Pocketと同じくオフラインで読めるシステムもあるようです（参照：You can finally read your articles while being offline:wallabag）。P
JavaScriptのモダンなコードとレガシーなコード、適切なコードを適切なブラウザに提供する方法を紹介します。特に、Edge, Safariあたりは注意が必要です。 Modern Script Loading by Jason Miller 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに どうすればよいか オプション 1: 動的にロードする オプション 2: userAgentを利用する オプション 3: 古いブラウザにペナルティを与える オプション 4: 条件付きバンドルを使用する どれを使用すればよいか？ 参考文献 はじめに 適切なコードを適切なブラウザに提供するのは難しい場合があります。この記事でそれを解決するいくつかの方法を紹介します。 モダンなコードをモダンブラウザに提供することはパフォーマンスが向上します
7月29日から、開発者はdocs.microsoft.com/samples（「Browse code samples」というタイトルが冠されている）で、自分のワークフローに関連する最新のコードサンプルを検索できるようになった。Microsoftによると、このサイトで提供されるコードサンプルは、全てGitHubでホストされているという。コードサンプルを実行してバグが見つかったら、サンプルのGitHubリポジトリでイシュー（課題管理）に投稿すれば、コードを管理するチームが目を通すとしている。 docs.microsoft.com/samplesは、以下のようなさまざまな機能を提供する。 関連記事 Windows 10のソースコードは何で書かれている？ 実名制Q＆Aサイト「Quora」で、「Windows 10の開発にどのようなプログラミング言語が使われたのか」という質問に対し、Microso
Webブラウザが示す現在地の位置情報を変更したい 現在地の位置情報を必要とするネットサービスを利用していると、実際の現在地とWebブラウザ上での現在地がずれていることがよくあります。特にPCでは珍しくありません。さらには現在地の取得に失敗することすらあります。 PCの場合、この現象はいつまで経っても直らないことが多く、できることならWebブラウザの設定変更で解決したくなります。 その他にもWebブラウザの現在地を変えたくなることはあります。例えばGoogle検索は、現在地によって検索結果を最適化するので、SEO（検索エンジン最適化）では現在地を変えつつ検索結果を確認したくなることがあります。MEO（Map Engine Optimization：マップ検索エンジン最適化）も同様です。 しかし、Webブラウザを実行しているデバイス（端末）を物理的に移動させながら調査していたら、手間も旅費も掛
:not()セレクタは非常に便利です。例えば、リストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんな時に使用すると簡単に指定することができます。 :not()セレクタは通常一つのclassしか指定できませんが、複数のclassを指定する場合の使い方を紹介します。 CSS :not() with Multiple Classes 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 :not()セレクタとは、特定のclassがない要素を選択する否定疑似クラスです。
ランディングページがどのようにデザインされ、レイアウトされているのか、そしてコピーライティングがどのようにデザインされているのか、その参考資料となるアイデアをまとめたSaaS Pagesを紹介します。 ランディングページのデザインや実装、ヘッダやフッタやナビゲーション、特徴やボタンの目立たせ方など、デザインの引き出しにストックしておきたいですね。 SaaS Pages SaaS Pagesでは、ランディングページに使用されるUIコンポーネントごとにデザインとコピーライティングがまとめられています。 ナビゲーションバー 目標到達のプロセスから遠ざかる方向にナビゲートしない。 分かりやすいCTAボタンがある。 ユーザーエクスペリエンスを向上させるスティッキーバー。 開発者向けのドキュメントなど、特別なリンクを含めたい場合。 Navbar ヒーローヘッダ 独自のセールスポイントを強調する。 「今
Visual Studio Codeでコードを書く時に知っていると便利なショートカットを紹介します。コードを書く時に自分がよく実行する操作のショートカットを覚えておくと、作業効率は格段にアップします。 21 VSCode Shortcuts to Make Coding Faster and More Fun by jsmanifest 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに VSCodeで利用できるショートカットのいくつかを見逃しているかもしれません。すべての人がすべてのショートカットを調べて、より速くコードを作成し、より多くの人に役立つショートカットを見つける時間があるわけではありません。 この記事では、より高速なプログラマーになるためのお気に入りのショートカットをリストアップしました。これらのショートカッ
AWS Chatbot を使って CloudWatch Alarm の通知を Slack に飛ばしてみた - michimani.net
昨年 7 月に beta として登場した AWS Chatbot がついに一般利用可能 (GA) となりました！今回は、 AWS Chatbot を使って CloudWatch Alarm の通知を Slack に飛ばしてみました。CloudWatch Alarm の通知では、 AWS Chatbot がよしなに内容を整形してくれるので、これまで独自に Lambda で整形していた方にはそれらの処理が不要になります。 AWS Chatbot Now Generally Available 目次 AWS Chatbot とは AWS Chatbot の設定 ワークスペースの作成 チャンネルの設定 Slack への招待 CloudWatch Alarm を Slack に通知する まとめ AWS Chatbot とは 詳細はサービスページや AWS ブログを見ていただければわかるのですが、簡単
Webサイト・アプリのページ構成を分析、サイトマップを自動的に作成するオンラインサービス -Visual Sitemaps
指定したWebサイトやWebアプリのページ構成を分析し、サイトマップを高解像度スクリーンショット付きで自動的に生成するオンラインサービスを紹介します。 UI、UX、SEO、およびマーケティングなどの調査もこれなら簡単です。トップのURLを指定し、あとは少し待つだけで、自動的に生成されます。
ブラウザ1つで独自の機械学習モデルを無料で作成できる「Nanonets」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単にブラウザからオリジナルの機械学習モデルを作成・トレーニングすることができるサービスをご紹介します。 画像に写っているモノを特定したり、対象のオブジェクトを検出・抽出するなどさまざまな活用方法があり、トレーニングも数分で完成するので効率よくモデルを構築することができます。 また補足として、Airtableを活用した事例についても合わせて紹介しているので、ご興味ある方はぜひ参考にしてみてください！ なお、paizaラーニングでも機械学習を学べる「Python×AI・機械学習入門編」を公開していますので、合わせてチェックしてみてください。 Python×AI・機械学習入門編について詳しくはこちら 【 Nanonets 】 ■「Nanonets」の使い方 それでは、最初にNanonetsをどのように使っていけば良いのかを見ていきまし
GitHub - givanz/VvvebJs: Drag and drop website builder javascript library. ドラッグ＆ドロップでサイトを作れるようにするJS「VvvebJs」 jQuery+Bootstrap4で出来ていて、レスポンシブなサイトをみたまんま、作れて便利そうです。 Bootstrapの基本コンポーネントも全部そろっており、HTMLコーディングの手間を省けます 関連エントリ JSで3Dレンダリングエンジン「LemonJS」 マガジン形式のグリッドレイアウトを実現する「stratum.js」
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
nginx でリクエストを複製できるモジュール「ngx_http_mirror_module」 - kakakakakku blog
nginx でリクエストを複製できるモジュール「ngx_http_mirror_module」を使うと，簡易的な「Shadow Proxy」を構築することができる．例えば，本番環境のリクエストの一部を開発環境に流せるようになる．この「ngx_http_mirror_module」は nginx 1.13.4 で実装された機能で，2017年8月リリースなので，最近のバージョンだとデフォルトで使えるようになっている．今回は「リクエストの複製」を試すため，Docker Compose を使って検証環境を構築した． nginx.org 検証環境 今回 Docker Compose を使って，nginx と Sinatra を起動する検証環境を構築した．コンテナは計3種類で，以下の構成図にまとめた．基本は Frontend と Backend でリクエストを処理し，今回は Mirror にもリクエス
現在Windows 10ではWindows Subsystem for Linux(以下WSL)とよばれる機能を利用して各種Linuxディストリビューションを使用することができます。 WSL上のLinuxは、ネイティブなLinux環境と同様に使用できる部分が多いのですが、パスの取り扱いなど、やはりWSLならではの違いも存在します。 本日紹介する「ubuntu-wsl」は、そんなWSL上のUbuntu環境のため、Ubuntu開発チームが導入を開始したメタパッケージです。 現在のところubuntu-wslをインストールすることで、WSLを便利に扱うためのユーティリティのコレクション「wslu」をインストールすることができます。 ubuntu-wslのインストール ubuntu-wslメタパッケージは以下のコマンドでインストールできます。 sudo apt update sudo apt ins
はじめに 本記事ではフローチャートと図が簡単に作れるwhimsicalというツールをご紹介します！ whimsicalは簡単に素早くフローチャートが作れるツールです。 Product Huntで2月15日に「Product of the Day」として紹介されています。 Whimsical on Product Hunt 今回の記事では、そんなwhimsicalを少し深掘りし、どういったことが出来るのか、また、実際にwhimsicalを試してみた感想などをご紹介します。 whimsicalとは whimsicalは簡単にフローチャートと図が作れるツールです。 ポストイット風のノートやワイヤーフレーム、マインドマップなども作れるようになる予定ですが、現在はフローチャートと図を作る機能がサポートされています。 ワイヤーフレームに関しては、こちらの記事でも軽くご紹介しているので、ご興味ある方はぜ
imgpush - オープンソースの画像共有サーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ImgurやGyazoなど画像アップロードサイトは多数あります。そうしたサイトを使うことで友人やコミュニティサイトなどで画像共有を簡単に行えますが、コンテンツの公開制限をはじめ、自分で制御できないことに不安を感じる人もいるでしょう。 そこで使ってみたいのがimgpushです。画像を簡単にアップロードできるサーバを手軽に設置できます。 imgpushの使い方 imgpushを立てたら、後はそこにポストするだけです。 $ curl -F 'file=@photo.jpg' http://localhost:5000 {"filename":"Vl0U9.png"} この場合、 http://localhost:5000/Vl0U9.png で画像にアクセスできます。 wとhというパラメ
幅が決まっている固定要素と幅が決まっていない柔軟な可変要素をうまく組み合わせたレイアウトをFlexboxで実装するCSSのテクニックを紹介します。 画像とテキストを並べたり、ナビゲーションだったり、横に並べた際に高さが異なってしまったり、さまざまなレイアウトを解決するテクニックです。 Making width and flexible items play nice together 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 短い答え 詳しく解説 さらに詳しく解説 最終的な答え このテクニックを使った応用技 短い答え flex-shrinkとflex-basisを使用します。 詳しく解説 下記のように、widthが決まっている画像とテキストを並べて配置したいとします。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
Webサイトの画像を編集してダウンロードできるChrome拡張機能「Download & Edit All Images」
ゼロから学ぶメディアプレイヤーの実装 | DevelopersIO
第1回 初めてのニューラルネットワーク実装、まずは準備をしよう ― 仕組み理解×初実装（前編）
Generated Photos | Unique, worry-free model photos
いくつ知ってる？HTML/CSSの便利な小技・テクニックまとめ | Web Design Trends
Webはここまで進化中！コピペもできるHTML／CSS参考スニペット84個まとめ
これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions
ダウンタイム機能をリリースしました ほか - Mackerel お知らせ #mackerelio
Vue.jsで基本的なチャットアプリ機能を実装するためのサンプルコード - かとのぼのマイコード・マイライフ
FirebaseのセッティングとVue.jsプロジェクトに組み込む
Cache API を利用したフロントエンドキャッシュ - ボクココ
Python FlaskでREST APIを作る - Qiita
「コピペできるようになったら神→対応しました」Google、驚異のリアルタイム文字変換の進化
Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap
JavaScriptのエキサイティングな新機能7選 - Qiita
PHPで書かれたオープンソースのPocketクローン・「wallabag」
JavaScriptのモダンなコードとレガシーなコードを適切なブラウザに提供する方法
Microsoftの全コードサンプルを閲覧できるポータルサイトが開設
【Google Chrome】位置情報を変更してPCの現在地を自由自在に設定
CSSの否定疑似クラス「:not()」で、複数のclassを指定する場合の使い方
LinuxとAndroidデバイス間でデータ転送を可能にする「KDE Connect」をMac向けにポートした「KDE Connect for macOS」が公開。
レイアウトやUIコンポーネントなど、最近のランディングページで使用されているアイデアのまとめ -SaaS Pages
VSCodeを使いこなすための一歩、コードを書く時に知っていると便利なショートカットのまとめ
ドラッグ＆ドロップでサイトを作れるようにするJS「VvvebJs」:phpspot開発日誌
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
ubuntu-wsl - WSL上のUbuntuをもっと便利するメタパッケージ | ソフトアンテナ
フローチャートなどが簡単に作れるwhimsical - bagelee（ベーグリー）
Flexboxを使う時に覚えておきたい！固定幅と可変幅を組み合わせたレイアウトを簡単に実装する方法