reveal.js用のエディタを自作したら、LT用資料が爆速で作れるようになって俺得だった件 - Qiita
本記事のサマリ 普段使っているreveal.jsというmarkdownでライトニングトーク用の発表資料を作れるツール用に、よい感じのエディタが無かったので、Electronで自作しましたという話。 reveal.jsで表示した見た目を即確認しつつmarkdownでつらつらとかけるようなアプリ こんな見た目 スクショをそのままコピペできるようにしたので、資料づくりが爆速になった Skitchで文字を書き込んだ画像も直接ドラッグ＆ドロップできるようにしたので、爆速にな(ry 技術的な話はまた別途まとめるつもりなので、この記事にはトピックだけまとめています(詳細はまた別途) 作ったアプリのリポジトリはこちら 作ったアプリのダウンロードはこちら アプリの説明や作成の動機をまとめた資料(この自作アプリで作りました) このアプリをネタにした勉強会資料：electronアプリで学ぶフロントエンド(この自
Developing a design environment
Since moving to San Francisco, I’ve done my fair share of job-hopping. I’ve been a communication designer, a product designer and a front-end developer. Each time my role shifted, I was always busy learning new skills but never felt like I was working on problems that I’d actually be good at solving. Fortunately, it all turned out to be great training for the job I have now, which is building out
Browser Extensions I Actually Use - The Media Temple Blog
I’m a web developer and blogger. These are the browser extensions that I actually use right now. It’s an ever-changing set, and I’m never afraid to try new ones, but I’m also fairly picky and uninstall anything I don’t find myself using. Ghostery Ghostery is a browser extension that shows you, and more importantly, helps you block third-party resources (mostly scripts). This is a big deal for a bu
Markdownだけで綺麗なスライドを作るCLIを作っている - 技術探し
テーマ やりたかったこと デモ 手順 タスク 仕組み できること・できないこと できること できないこと 次の実装 さいごに fusuma0.0.1をリリースした。https://t.co/EpS9Wkq7DT— npx hiroppy😶 (@about_hiroppy) 2018年4月27日 今現在、0.2.1 テーマ 本質ではないwebpackとかBabelとかPostcssとかの設定ファイルを書くことなく、1コマンドでリリースまで面倒を見てくれて、マークダウンだけクールなスライドを作れるようにしたい。 サッとスライドを作れて、サッっとデプロイしたい。 やりたかったこと webpackやBabelの設定を隠蔽したい 開発・プロダクトビルド・リリースを1コマンドで終わらせたい マークダウン(or HTML)で書けるようにしたい フレームワークへの接続 bespoke.js以外にも対応さ
「Google Web Designer」で無料・簡単にアニメーションバナー作成！
ネットショップを運営していると、商品広告のバナーが急に必要になることがあります。普段はデザイナーやコーダーに依頼しているものの、納期が短いことで負担をかけてしまったり、出来上がりのイメージを上手くすり合わせられなかったりといった課題を感じている方もいるのではないでしょうか。 今では画像加工サービスも多く提供されているため、バナー作成の知識や技術がなくても、画像素材を組み合わせた静止画像のバナーであれば、簡単に作成できるでしょう。 しかし、「よりクオリティの高いバナーを作りたい」「Googleの広告サービスに使うバナーを作りたい」場合は、バナー作成ツール「Google Web Designer」がオススメです。 「Google Web Designer」は、デザインやコーディングの專門知識がなくても、無料で簡単にアニメーションバナーを作成できます。また、Googleの広告サービスを利用する場
Debugging Modern Web Applications – Mozilla Hacks - the Web developer blog
Building and debugging modern JavaScript applications in Firefox DevTools just took a quantum leap forward. In collaboration with Logan Smyth, Tech Lead for Babel, we leveled up the debugger’s source map support to let you inspect the code that you actually wrote. Combined with the ongoing initiative to offer first-class JS framework support across all our devtools, this will boost productivity fo
コーディングをするときに鼻血がでるほど便利なwebツールリスト - Qiita
普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO
CSS Motion Path beyond the Big Three Properties
While still only in Chromium-based browsers and actively being drafted for its specification, CSS Motion Path has grown up a bit in its three years since Chrome 46 rolled out the first implementation. I've previously documented the basics of the primary CSS Motion Path use case via the main three properties — offset-path to define a path for an element to follow, offset-distance to position the el
5000人に聞いた、2018年最先端のフロントエンド開発者が使ってるツールはこれだ - Qiita
先日Launching the Front-End Tooling Survey 2018というフロントエンドツールのアンケート調査を和訳しましたが、その結果が発表されました。 以下はThe Front-End Tooling Survey 2018 - Resultsの日本語訳です。 The Front-End Tooling Survey 2018 - Results 今年3月のFront-End Tooling Surveyに、5097人のフロントエンド開発者から回答をいただきました。 参加された皆さんには感謝致します。 毎回、調査の目標は単純です。 フロントエンドエンジニアが現在仕事で使用しているツールについて光を当てたいのです。 どのようなツールが使われているのか、自分の知識や経験だけで判断してしまうのは早計です。 以下の結果は、フロントエンドツールの現在の動向を把握するのに役立
最新版で学ぶwebpack 5入門 - Bootstrapをバンドルする方法 - ICS MEDIA
モジュールバンドラーwebpack（ウェブパック）はJavaScriptだけでなくCSSもバンドルできるツールです。タスクランナーGulpで対応していたことの多くはwebpackで置き換えが可能。JavaScriptエンジニアだけでなく、CSSコーダーにも利用が拡大しているのではないでしょうか？ 前回の記事「webpackにスタイルシートを取り込む方法」ではCSS・Sassとwebpackの連携方法について解説しました。今回は応用としてCSSフレームワークのBootstrap 5をwebpackで利用する方法を解説します。最小構成と、応用構成の二通りについて説明します。 ▲Bootstrapの公式サイト ※この記事は2023年3月現在最新のBootstrap 5、webpack 5、Node.js 19で解説しています。 Bootstrap とは BootstrapとはもとはTwitter
私が月に1度やってるMacのメンテナンス方法 | Stocker.jp / diary
私はメインマシンとして Mac を使用していますが、一時期全くメンテナンスをせずに使っていたら、10ヶ月ほどで買った時より明らかに動作が遅くなってしまいました。 そこで、最近は毎月1回メンテナンス作業を行うことにしています。 具体的には以下のような感じです。 関連記事: Windows 10を快適に使用し続けるために月1回やった方が良いメンテナンス ディスクユーティリティ メニューバー右端の検索アイコンをクリックするか、command + space または control + space キーを押して Spotlight を起動します。 disk と入力します。すると、候補にディスクユーティリティが出てくるはずなので、Enter キーを押して起動します。 ディスクユーティリティでディスクを検証 ディスクユーティリティの［First Aid］ボタンをクリックし、［実行］をクリックするとMa
フロントエンドのコンポーネント設計に立ち向かう - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コ
In web design, everything hard can be easy again
Frank Chimero recently published “Everything Easy is Hard Again” — describing his journey back into web design after a three-year break. He points out that web design veterans and beginners are pretty much in the same boat today: “I had fifteen years of experience designing for web clients, she had one year, and yet some how [sic], we were in the same situation: we enjoyed the work, but were utter
デベロッパーなら知っておきたい30秒でできるCSSスニペット集「30 Seconds of CSS」
毎日コーディングでさまざまなコードを書くデベロッパーにとって非常に便利なスニペット。知っているだけで作業効率が格段にアップするもの。そんな方におすすめできる「30 Seconds of CSS」をご紹介していきたいと思います。 先進的な知識を多く取り込むためにも、基礎的な業務内容をいかに短縮して行っていけるかは非常に重要なポイント。デベロッパーの方はぜひ下記よりチェックしてみてください。 詳しくは以下 レイアウト、アニメーション、インタラクティビティ、その他といったようにカテゴライズされており、それぞれのジャンルに分類されたコードがわかりやすく記載されています。デモもすぐ閲覧できるようになっており、使いたい要素を探しやすいのも魅力。奇抜なものはありませんが、基本として使いたい、ぜひ知っておきたいものが揃っているので、日々のコーディングに非常に役立ってくれそうです。 コードを書く手間を短縮す
【PageSpeed Insights】レンダリングをブロックしている JavaScript/CSS を排除したら99点になったので方法をご紹介 | 株式会社ウェブ企画パートナーズ
【PageSpeed Insights】レンダリングをブロックしている JavaScript/CSS を排除したら99点になったので方法をご紹介 シェア つぶやく ブックマーク LINE Pocket 「どうせなら100点にしようよ！」というお声が聞こえてきそうですが…。 それはさておき、最近ではページの表示速度がこれまでよりもより重要視されていて、PageSpeed Insights を活用する方も増えてきています。WordPressは動的なCMSということもあり表示速度があまり速くありませんので、 キャッシュプラグイン 画像の軽量化 上記のような工夫をしてらっしゃるのではないでしょうか。 ですが、PageSpeed Insights で注意されがちな項目はそれだけではありません。 スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
Web Components にも対応した SSR as a Service を作った - Qiita
SSR as a Service の Renderly というサービスを地道に作っていましたが、先日 Try it out を公開して機能がプレビューできるようになりました。 SSR のこと、普段はあまり考えたくないです。しかし取り扱う情報がパブリックなものであれば対応しておきたいところです。 とはいえ Web Components の中で Shadow DOM を使っている場合、Shadow DOM は文字列にシリアライズするのが難しい1 ので、そもそも完全な SSR はできません。 Isomorphic JavaScript として開発していれば skate js/ssr を使って ブラウザ側で Shadow DOM にリプレイスされる HTML+Script を使うという選択肢もあります。しかし個人的には、ブラウザで動かすためのコードを書いているのであってサーバ側では極力テンプレート
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Huge List of Summer Learning Resources for Front-end Devs
画面サイズのレスポンシブデザインはなぜ必要? 対応が必須となったいま求められること | Webデザイン、これからどうなるの？（全10回）
BootstrapベースのシンプルなUIのオープンソース管理画面テンプレート・「tabler」 - かちびと.net
エキセントリックなエフェクトを付与できるユニークなCSSアニメーションライブラリ・「Woah.css」 - かちびと.net