Welcome to my new series Emacs From Scratch. I’m far from an Emacs expert, so join me in my quest to figure out how to create a useful Emacs setup from nothing1. In this part, we’ll install Emacs, set up sane defaults, packaging and do some basic UI tweaks to build a solid foundation. Table of Contents Install Emacs Remove UI elements Configure the package manager Set sane defaults Become evil Set
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. After five alphas over the last nine months, Bootstrap Icons has officially gone stable with our v1.0.0 release! We’re now over 1,100 icons and are on track to add hundreds more in our upcoming minor releases. This has been a labor of love and I’m thrilled to ship this
今のWebサイト、スマートフォンアプリではテキストではなくアイコンで操作を指示することが増えています。絵の方が分かりやすい場面も多いですが、分かりづらいアイコン（保存のフロッピーアイコンなど）もあります。 その中でも大事なのが統一性です。大量のアイコンが一つのパッケージになっていることで、統一されたデザインが実現できます。今回紹介するCoreUI Iconsはフリーでも1,500、有料版では3,000のアイコンが提供されます。 CoreUI Iconsの使い方 各カテゴリの最初の部分だけ紹介します。まずはブランド。 AppleやAmazonなどもあります。 国旗。 アクセシビリティ。 アラート。 ファシリティ。 ビジネス、マーケティング。 チャット。 顔。 ファイル、ドキュメント、メール。 フード、ドリンク。 手。 イメージ編集。 インタフェース。 メディア、オーディオ、動画。 電話系。
This is my claim: we, as a civilization, forgot how to center things. I mean, we know how to do it. It has never been simpler: display: flex; justify-content: center; /* Horizontal centering */ align-items: center; /* Vertical centering */ (don’t ask why you need to remember four words instead of just horizontal/vertical, it’s still better than before) Or you can use grids if you want: display: gr
Stripe Elementsをカスタマイズしてクレジットカード入力のユーザービリティを向上させる | DevelopersIO
本記事は JP_Stripes Advent Calendar 2019 の15日目の記事です。昨日は中山千春さんによる Stripe入社1年、好きな自社プロダクトについて熱く語ってみる！ でした。Stripe、そしてStripe Connectへの熱さが伝わる素晴らしい記事でした。 Stripe Elementsをカスタマイズし、クレジットカード入力のユーザービリティを向上させる取り組みと実装方法についてご紹介したいと思います。 Stripe Elementsとは？ Stripe Elementsは、Stripeの主にクレジットカード入力に利用できるUIコンポーネントライブラリです。Stripeを使ってスムーズな顧客体験が構築できるように考えられています。 Stripe Elements は、Stripe のフロントエンドチーム、デザインチーム、アナリティクスチームの協力のもとに開発され
Version 1.89 is now available! Read about the new features and fixes from April. January 2020 (version 1.42) Update 1.42.1: The update addresses these issues. Downloads: Windows: x64 | Mac: Intel | Linux: deb rpm tarball snap Welcome to the January 2020 release of Visual Studio Code. There are a number of updates in this version that we hope you will like, some of the key highlights include: Renam
はじめに こんにちは。まとまった休日を使ってターミナルの設定をいじるのが最近の趣味です。 そんなことをしていたらフォント周りで2日くらい溶けた。失われた時間への供養として調べたことのメモを置いておく。 簡単にこの記事をまとめると、 Nerd Fontsの一部であるPowerline Extra Symbolsがかっちょいいので和文フォントでも使ってみたい なんか表示がずれるのでフォントずれの原因であるUnicodeのambiguous widthについて調べてみた 自分の環境では色々試したけど結局上手くいかないので自分でフォントを作るか？ 2019/12/27 追記 以下で区切り文字がピッタリ合わないとひたすら文句を言っている部分があるが、powerline用フォントの表示が「微妙に」ずれるのはambiguous widthかどうかは関係なくターミナルとフォントの相性によるようだ。フォント
ぼくの職場の新人さん向けに、サイト制作（とくに静的サイト）を作るのに便利なサービスをまとめたので記事にしました。 もう少しあるので、あとで加筆修正するかもしれません。 静的サイトジェネレーター『Hugo』『Middleman』などお好みで StaticSiteGen 静的サイトジェネレーターは、結局生成されるのはhtml+css+jsなので、好みの物を使えばいいと思います。 このブログではHugoを利用していて、確かにビルドはめっちゃくちゃ早いですが、スクラッチで制作・開発するなら慣れているRuby+Middlemanのほうがサクっと作れます。そんな感じで使い分けても良いと思います。SPA(Single Page Application)に近いものを作るなら、VueとかReactなどを採用したフレームワークを使えばいいですし。 ホスティング『Netlify』 Netlify: All-in
モチベーション 色んなアイコン使いたい。 AWS アイコン (2018 以降 ver.) 言語アイコン 一般的なサーバーアイコン etc. AWS アイコンのみの構成図サンプルは見つかるが、他はないの？ 細かい定義・仕様はいいから、コードで語れ。 という方向け。 要件 とある商品管理システム。 フロントエンドは、 AWS S3 + CloudFront でホスティングした SPA。 バックエンドは、Python + Flask on EC2。 どこかのレコメンドシステムにも接続しているらしい。 サンプル構成図 サンプルコード コード @startuml title 商品管理システム ' @see https://github.com/awslabs/aws-icons-for-plantuml/tree/v5.0 !includeurl https://raw.githubusercont
完成したポップアップを確認する（デモ） 動作デモ 実際の動作はこちらで確認できます。遷移先のページでブラウザの「戻る」ボタンをクリックしてください。 ソースコードを確認 ポップアップ表示に必要な部分を抜き出したコードがこちらです。 コード全体 <!DOCTYPE html> <html lang="ja"> <head> <meta id="viewport" name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" /> <meta charset="UTF-8"> <title>ブラウザバックでポップアップ表示サンプル | えむ家のメモ帳</title> <!-- anonymousCDN --> <link href="<ディレクトリ>/fontawesome/css/all.css"
【ブログカスタマイズ】「はてなブログ」のアイコンフォントを使いこなす｜グローバルメニューにオススメ - redoブログ
今日は「はてなブログ」でデフォルトで使えるアイコンフォントの表示方法を紹介したいと思います。 実は先日私のTOPページのグローバルメニューに以下の様なアイコンフォントを追加しました。 これが有ると無いとでは見栄えが全然違いますよね。 今回は最も簡単な方法を紹介します。ちなみに”HTML”上でしか適用されませんので注意してください。 アイコンフォントの使い方 アイコンフォントのサイズを変えたい場合 まとめ アイコンフォントの使い方 このアイコンフォントを使う時は、<i>タグを使って、”HTML”上で下記のように記入します。 <i class="クラス名"></i> すると上の様に”クラス名”にあわせて色んなアイコンが表示されます。 例えば <i class="blogicon-home"></i> TOP この様に記述すると、 「 TOP」という感じで表示されます。各自必要に応じて、アイコン
One of the outcomes of the release of Core Web Vitals (and subsequent inclusion in Google's page ranking algorithm) is that we have been paying more attention to unexpected layout shifts and the cumulative layout shift (CLS) score. Some sources of layout shifts have been simple to resolve: pre-allocate the correct space for dynamic elements, use width and height attributes on images and prioritise
Visiteurs depuis le 27/01/2019 : 1399 Connectés : 1 Record de connectés : 21 A list including your operating system, your graphics card, and the version of the SFM. For example, 'Windows 7 Professional, NVIDIA GTX 580, SFM 0.9.5.3.' If applicable, attach screen shots of the bug or the.dmx file that shows the bug. Supporter Comments Sfm Team Sfm For MachineHmmm, let's see. PoC EFI rootkit Morcut –
Announcing Flutter 1.20
Our ongoing vision with Flutter is to provide a portable toolkit for building stunning experiences wherever you might want to paint pixels on the screen. With every release, we continue to push towards ensuring that Flutter is fast, beautiful, productive and open for every platform we support. In Flutter 1.20, which is released today to our stable channel, Flutter has improvements for every one of
SprocketsをやめてWebpackerに移行したのでどうやったか公開する - patorashのブログ
ようやくSprocketsからWebpackerに移行したので、そのためにやったことをまとめておきます。 移行前の状態 Railsのバージョンは6.0系 Sprockets4 CoffeeScript Sass Bootstrap3を使用 yarnは使ってる 筆者（私）はECMAScriptに関してはそこまで詳しくなくて、今後習得していきたいと思っているレベル。 方針 「とにかくWebpackerに移行する」ということを念頭に置き、JavaScriptを完璧にモジュール化する等は目指さない。Webpackerで動けばいい。後でリファクタリングしていくから！ Webpackerをざっくり理解する Webpackerはwebpackの設定などをほとんど意識することなく、いい感じに使えるようにしてくれるやつです。 webpackをざっくり理解する じゃあwebpackって何？となるかと思いますが
Version 1.89 is now available! Read about the new features and fixes from April. April 2020 (version 1.45) Update 1.45.1: The update addresses these issues. Downloads: Windows: x64 | Mac: Intel | Linux: deb rpm tarball snap Welcome to the April 2020 release of Visual Studio Code. There are a number of updates in this version that we hope you will like, some of the key highlights include: Accessibi
LGTMはいやだ - Qiita
はじめに みなさんご存知の通り、QiitaのUIの仕様がいきなり変わりました。 「いいね」ボタンから「LGTM」ボタンに。 twitterでは賛否両論ありましたが、"否"の方が多かった気がします。 そこで、これをいいねボタンに直すchrome拡張を作ります。 大急ぎで作ったので、記事も適当かつ未実装の部分もありますが、ご了承ください。 意外と一筋縄では戻せない twitterや他のQiitaの記事で、同じような試みをされている方がいました。 基本的には、LGTM要素を取得してinnerHTMLでFontawesomeのthumbs-upに変えるだけで良いです。 しかしながら、それだけではクリック後の「✔︎」が表現できません。 今回その辺の仕様をいろいろ調べてみて考えた結果、javascriptだけではなくcssも使っていじる方が良さそうです。 実装 //必須（fontawsomeのcdn）
Vue, Storybook, TypeScript—starting a new project with the best practices in mind (originally published on Medium) I like writing React code. This might be an odd introduction to a story about Vue, but you need to understand my background to understand why I’m here discussing Vue. I like writing React code and I hate reading it. JSX is a neat idea for assembling the pieces together fast, Material-
Font Awesome4.7 フォント一覧
Font Awesomeバージョンアップに関して アイコンフォントのFontAwesomeのバージョンが2018年2月から4.7から5.0.6にアップグレードしました。最新バージョンでは、旧バージョンの各フォントのクラス名、unicodeに互換がないため、旧バージョンで利用したサイトでのメンテナンス用に4.7のフォント一覧を作成しました。 HTMLでの利用 公式サイトでは、iタグを利用していますが、spanなど他の要素でも利用ができます。利用する場合は、下記のコードのアイコンクラス名の部分を変更してください。 <!-- 下記のアイコンクラス名を変更 --> <i class="fa アイコンクラス名" aria-hidden="true"></i> <!-- 利用例 --> <i class="fa fa-address-book-o" aria-hidden="true"></i> CS
アフィリエイトで使えるJINアイコンフォント 追加されたアイコンの多くが、アフィリエイトを意識したものになっています。 アフィリエイトに興味があるあなた、すでにアフィリエイトを始めているあなた、ぜひ使ってみてくださいね。 美容系アイコンフォント お金系アイコンフォント [jin_icon_coin-cover size="48px"] 恋愛系アイコンフォント ガジェット系アイコンフォント ファッション系アイコンフォント おまけ：おもしろアイコンフォント 面白いアイコンフォントもあったので最後にご紹介しますね。 タピオカちゃん。タピ活したら使ってみてくださいねw アイコン使用でわかりやすいブログにしよう 今回は、アフィリエイトで使えるJINオリジナルアイコンフォントをご紹介しました。 アイコンフォント一覧と各アイコンのコードについては、公式サイトの「JINのオリジナルアイコンリスト」ページを
Font Awesomeのアイコンフォントの一覧です。 Free（無償で利用可能）のアイコンのみをリストにまとめました。 Font Awesomeとは Font Awesomeは、Webサイト上で使われるあらゆるアイコンを、フォントとして利用できるようにWebフォントとして作成し、公開してくれているサービス（サイト）です。 アイコンが画像ではなくフォントですので、サイズや色、向きなどをすべてCSS（スタイルシート）で調整することが可能です。 Font Awesomeは、BootstrapやBulmaなどのCSSフレームワークでも採用されています。 Font Awesome アイコンフォントを使うための準備（CDN） 本記事の Font Awesome のバージョンは 5.15.4 になります。 Font Awesome のアイコンを使うには、CDNでCSSを読み込むのが簡単です。 以下のコ
![Font Awesome アイコンフォント一覧 [Free (フリー) のみ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/03280e6ffad54cf247a956ad435102f107e8eab9/height=288;version=1;width=512/https%3A%2F%2Fjohobase.com%2Fjb%2Fwp-content%2Fuploads%2F2021%2F11%2Ffont-awesome-home-page-5-12-1.png)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Emacs From Scratch, Part 1: Foundations
Bootstrap Icons v1.0.0
CoreUI Icons - 1,500種類を超える多彩なアイコン集
Hardest Problem in Computer Science: Centering Things
Visual Studio Code January 2020
Nerd fontとpowerlineとambiguous width - Qiita
平成最終版。僕が静的サイトを作る時に使う便利ツールやサービスまとめ – すきせか
アイコンよりどりみどりの PlantUML 構成図を書く - Qiita
ブラウザの「戻るボタン」を押した時、ポップアップを表示させる※離脱防止【javascript】
How to avoid layout shifts caused by web fonts
Supporter Comments Sfm Team: Sfm For Mac - bondteens
Visual Studio Code April 2020
Vue, Storybook, TypeScript—starting a new project with the best practices in mind
【JIN】94種類追加！独自アイコンフォントをサクッとご紹介｜おいでよ！ブログはじめてさん
Font Awesome アイコンフォント一覧 [Free (フリー) のみ]