JetBrains Mono — 開発者向けの新しい書体 | Post Blog
私たちは1年前に非常に野心的な目標を打ち立てました。それは、誰もがより快適にコードを書けるようにするフォントを作ることでした。 そしてついにその目標を達成しました！ 他の等幅フォントの何が問題なのでしょうか？ 私たち開発者は一日の大部分をコードを見て過ごします。 そのため、画面上のテキストを見やすくするために常に最適なフォントを探していても不思議ではありません。 しかし、多くの一般的なフォントのロジックでは、コードを読む場合と書籍を読む場合の違いが考慮されているとは限りません。 私たちの目はさまざまな方法でコードを追います。コードを横方向に読むのと同じくらい縦に読む必要があることもしばしばです。これは文章に沿って常に同じ方向に目を走らせる読書とは対照的なものです。 そのため、私たちはJetBrains Monoを作るにあたって、何よりもまず長時間コーディングを行う際に目の疲れを引き起こす可
A Complete Guide to Data Attributes | CSS-Tricks
Introduction HTML elements can have attributes on them that are used for anything from accessibility information to stylistic control. <!-- We can use the `class` for styling in CSS, and we've also make this into a landmark region --> <div class="names" role="region" aria-label="Names"></div> What is discouraged is making up your own attributes, or repurposing existing attributes for unrelated fun
2019年までに見直しておきたい
CSS・JavaScriptの手法 - Speaker Deck
Frontend Conference Fukuoka 2018で発表した資料です。 https://frontend-conf.fukuoka.jp/ 各リンク先を確認する場合は、以下のpdfを参照ください http://tonkotsuboy.github.io/slides/181204_frontend_fukuoka/181208_frontendconffukuoka.pdf はてなブックマーク http://b.hatena.ne.jp/entry/s/speakerdeck.com/tonkotsuboy_com/2019nian-madenijian-zhi-siteokitai-cssjavascriptfalseshou-fa ご意見やご感想はTwitter ( https://twitter.com/tonkotsuboy_com ) までお寄せください。 #fec
コーディング速度を上げる！Webサービス・ジェネレーターなどの便利ツール7 - Design Color
1. Font-familyの選定「Font-familyメーカー」 Windows・Mac・iOSの標準フォントの一覧が見れて、ドラッグ＆ドロップで自分で組み合わせて好きなFont-fammilyが作れるWebサービスです！ 全部に共通してインストールされてるのはどれだろうとか、このOSではこっちのフォントで代用しよう…なんてあれこれ考えながらFont-familyを考えることができます。 有名サイトで使われているFont-familyが見れたり、特にこだわりが無い時はサルワカさんの「おすすめ」が見れたりと、かゆいところに手が届く便利サイト！ Font-familyメーカー：標準フォント一覧からサクッと指定 2. 画像の縦横比計算「web計。」 昔からお世話になってる縦横比を計算してくれるWebサービス。サムネイルのサイズを計算する時など、本当に時短になって助かってます。黄金比や白銀比、
ブラウザー上でスタイルガイドが作れるFrontifyを試してみた
2015年9月24日 便利ツール 巷ではgulpやGruntなどを使ったスタイルガイド生成ツールが多く存在します。しかし、CSSのコメントに書き込んだりするのはWeb制作者でないと難しい部分もありますし、そもそもファイルを作るのがめんどうだったり…と、なかなかスタイルガイドを作る気になれない人もいるんじゃないかと思います。今回は非Web制作者でも簡単にスタイルガイドが作れちゃうFrontify Style Guideを紹介します！ ↑私が10年以上利用している会計ソフト！ スタイルガイドとは？ Webサイトを一人で制作、運営している場合、そのサイトに必要な画像やロゴ、配色パターンなどはすべて自分が把握できているものです。しかしチームを組んで運営していく場合は、コーディング規約と同様、デザインのルールをひとつにまとめておくといいでしょう。そのルール集がスタイルガイドです。スタイルガイドを作る
フロントエンド開発が捗る JSON Serverについて
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 どもです。 今回は、新規プロダクトの開発の際に、非常に重宝する「JSON Server」についてのご紹介できればと。 真新しいものでもないのですが、よく利用してせっかくなのでまとめさせていただきます。 何か参考になればと。 とある事業で、新規プロダクト制作が立ち上がって、フロントエンド開発を行っていくにも「サーバー側が出来てないよぉ。」 と、言って制作できないところが発生する場面は多々あるかと思います。 そもそも、新規プロダクトで、サーバー側が出来上がっている状態というのは、なかなかない状態かと思います。 そんなときに非常に便利なのが「JSON Server」となります。 「JSON Server」で、仮にAPIを作成しておけばサーバー開発が終えてなくてもガツガツ、フロン
git-ftpでサイトを更新 | Coding Methodology | CFニュース | CODING FACTORY - コーディング専門サービス
Gitを利用してサイト制作を進めていくとき、SourcetreeなどのGitクライアントアプリを使用することもあるかと思います。ただ、制作中にあまり多くのアプリケーションを起動していると、それぞれを閉じたり開いたりするのにも手間がかかりますし、PCの動作が重くなることもあります。今回はそんな手間を省き、かつ軽快にGit管理とFTPアップロードを同時に行える「git-ftp」をご紹介します。 Gitコマンド 1.インストール まずはgit-ftpをインストールします。 Git-ftp(Github) https://github.com/git-ftp/git-ftp 上記URLにアクセスし、リポジトリをクローンします。 クローンするためのhttpsもしくはsshのURLをコピーして、使用するPCのコマンドラインツールを開きます。macの場合はTeminalを、Windowsの場合はgit
CSS ファイル簡単生成。APBCSS ファイルジェネレーターツール「APB CLI」の使い方。
どもです。 皆さん 日々、CSSを記述されているでしょうか？ その際、どのアーキテクチャで構築されているでしょうか。 当方は、ゲームパーツを大量に制作するのもあって、やはり「APBCSS」のアーキテクチャが重宝しております。 という事で、「APBCSS」の推奨するファイルをコマンド1発で生成出来るジェネレートツール、 「apb-cli」の使い方となります。 APB CLI インストール npm https://www.npmjs.com/package/@atomic-package/apb-cli github https://github.com/atomic-package/apb-cli インストールは、npmコマンド でグローバルにインストールする。 $ npm install -g @atomic-package/apb-cli これで、インストール完了。 apbコマンドが使用
フロントエンドにおける「表示系バグのデバッグ効率化」を考えるのに役立つツールやTipsまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 画面の表示系のデバッグって、面倒で大変ですよね。 今回は、フロントエンドの開発での、表示系のデバッグを効率化するために普段使っているツールや手法をご紹介したいと思います。 便利な検証環境/ツールを用意する Macで開発している場合、IEでの表示確認を都度実機で確認するのはとても面倒です。また、都度FTPアップしないと修正の確認ができないのも、とても不便です。 まずはそれらを解決するツールを2つご紹介します ModernIE（with VirtualBox） https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/#downloads ModernIEは、Microsoftが公式に提供しているIEテスト用の仮想マシンです。 MacでもIEブラウザを動かして検証することがで
FlexboxやFloatでレイアウトが崩れてしまう原因がすぐに見つかるChromeの機能拡張- Pesticide
CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利です。 ページ上のすべての要素に、要素ごとに異なるカラーのアウトラインをつけ、親子関係も一目で分かる便利なChromeの機能拡張を紹介します。 Pesticide Pesticide -GitHub 以前当ブログで紹介したことがありますが、バージョンアップされており、更に便利になっています。 Pesticideは、2つの方法で利用できます。 Chromeの機能拡張（Pesticide for Chrome） スタイルシートファイル（外部CSS・CDNで利用可） 外部スタイルシートとしても提供されているので、ローカル環境でブラウザを問わず利用することもできます。 簡単なのでC
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ
新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ
![新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c81495bec5cb3ed860ace323c97fffb85ea3e62c/height=288;version=1;width=512/http%3A%2F%2Fhtml-coding.co.jp%2Fogp_img.jpg)
The Essential Meta Tags For Social Media | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! These days, almost every website encourages visitors to share its pages on social media. We’ve all seen the ubiquitous Facebook and Twitter icons, among others, just begging to be clicked. This comes as no surprise as sharing via social media, the internet incarnation of word-of-mouth, is on
Create a WYSIWYG Editor With the contentEditable Attribute | Envato Tuts+
WYSIWYG editors are quite popular. You might also have used one at some point. There are a lot of libraries available to help you set up your own editor. Although they're quick to set up, there are also downsides of using these libraries. To begin with, they are bloated. Most of them have fancy features that you might not use. Moreover, customizing the appearance of those editors can be a headache
最近のoverflow: scroll事情 - console.lealog();
もちろんモバイル情報です。 iOS4やらAndroid2.x時代にはまったく使い物にならなかったこの指定、 最近はどうなの？っていう。 overflow: scroll 対象をiOS5以上、Android4以上とするのであれば十分に使えるものだと思います。 ただスクロールすれば良いだけであれば、jsなしに実現できる時代きた！すばらC！ -webkit-overflow-scrolling: touch 勘の良い人ならお気づきでしょうが、コレも使いたいですよね。 スクロールできる部分で慣性スクロールができるようになるやつです。 .carousel { overflow: scroll; -webkit-overflow-scrolling: touch; } みたいな。 ただこいつは、まだ要注意です・・。 手元で再現したバグなので、すべてのケースに当てはまるわけではないと思いますが、 一応こ
Androidでoverflowした要素をスクロール可能にするjQueryプラグイン - Qiita
iOSでもoverflowを設定すると慣性スクロールが効かなくなるので有用かもしれませんが、 よほどでなければUAを判定してAndroidだけ適応するほうがいいと思います。 仕組み touchStartで取得したポイントをと現在の指の位置の差分をscrollTopに設定しているだけです。 模式的に書くと次のようなかんじです。 タッチ開始 $target.on("touchStart", function(event) { event = event.originalEvent; var touch = event.touches[0]; touchStartX = touch.pageX; touchStartY = touch.pageY; });
これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ
作成：2016/04/25 更新：2016/06/29 Web制作 > ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 背景色に合わせて、テキスト色をリバースさせる DOM要素の重なりを指定するCSS3のブレンドモードmix-blend-mode: differenceを使って、背景色と同時にテキストカラーを反転させていく方法。CSSだけでこれができるのは驚き。 進捗を示すプログレスバーなどで使うと、コントラストがはっきりするので見やすくなりそうです。 mix-blend-modeの「 difference」についてはCSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこな
フロントエンジニア向けTwitterに関する実装まとめ 2016 開幕版（ツイートボタンの設置方法・Web Intent・ツイッターウィジェット・Twitterカード etc...） - みかづきブログ その3
（のちにキャッチーでポップな気の利いた文章に差し替える） いつまで経ってもキャッチーでポップな気の利いた文章が思いつかなかったので、このまま公開します。Twitterに関する実装あれこれです。 実は 公式ドキュメント に詳しく載っているので気になる方はそちらも確認してみてください。ちなみに本記事には公式ドキュメントに載っていない生活の知恵的なテクニックも記載しております。 dev.twitter.com 目次 1. 公式ボタンの設置方法 1.1 ボタンの種類と入力項目 1.2 ページ内に公式ボタンを複数置きたい場合 1.3 ツイートの文字数を稼ぐためにURLの短縮を缶変えている場合 1.4 ユーザーを複数入力したい場合 1.5 推奨ユーザーを複数入力したい場合 1.6 ハッシュタグを複数入力したい場合 1.7 画像付きツイートを投稿させたい場合 1.8 動画付きツイートを投稿させたい場合
Owl Carousel
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.Fully Customisable Over 60 options. Easy for novice users and even more powerful for advanced developers. Touch and Drag Support Designed specially to boost mobile browsing experience. Mouse drag works great on desktop too!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Code an Inline Sharing Menu | Envato Tuts+
Living Styleguide by Devbridge