reveal.js用のエディタを自作したら、LT用資料が爆速で作れるようになって俺得だった件 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事のサマリ 普段使っているreveal.jsというmarkdownでライトニングトーク用の発表資料を作れるツール用に、よい感じのエディタが無かったので、Electronで自作しましたという話。 reveal.jsで表示した見た目を即確認しつつmarkdownでつらつらとかけるようなアプリ こんな見た目 スクショをそのままコピペできるようにしたので、資料づくりが爆速になった Skitchで文字を書き込んだ画像も直接ドラッグ＆ドロップできるようにしたので、爆速にな(ry 技術的な話はまた別途まとめるつもりなので、この記事にはトピックだけ
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以外にも対応さ
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
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
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
【PageSpeed Insights】レンダリングをブロックしている JavaScript/CSS を排除したら99点になったので方法をご紹介 | 株式会社ウェブ企画パートナーズ
【PageSpeed Insights】レンダリングをブロックしている JavaScript/CSS を排除したら99点になったので方法をご紹介 「どうせなら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 を使うという選択肢もあります。しかし個人的には、ブラウザで動かすためのコードを書いているのであってサーバ側では極力テンプレート
ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを
フォームをより使いやすくするためのJavaScript/CSSツール10選 - ポップインサイト
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ
重要ではない CSS を link タグだけで非同期で読み込む方法
何もせずにスタイルシートを <link> で読み込む場合は、レンダリングをブロックしてしまいます。 また、rel="preload" を使えばレンダリングブロックは防げますが、他のリソースの読み込みからブラウザのリソースを奪うという代償が伴います。 そのため、可能な限り CSS のサイズを小さくし、<style> を使いインラインで CSS を読み込むのが一般的です。 ただ、どうしても CSS のサイズが大きくなる場合は、重要ではない CSS を非同期で読み込むといいかもしれません。<link> に 2 つの属性を付けるだけでスタイルシートを非同期で読み込めます。 <link rel="stylesheet" href="スタイルシートのパス" media="print" onload="this.media='all'" /> <link> に media="print" と onloa
地図ライブラリの本命「Leaflet」を5分で理解&導入する - Qiita
どうもmiyachi（@_38ch）です。 Web地図ライブラリ 「Leaflet」の簡易的なデモを5分で作成する方法を書いていきます。 ソースコードはこちらに丸っと置いておきます。 https://gist.github.com/miyachin/aa1f1d745578aa915fc2c2bd6e99d4df もしお役にたったらならStarをポチッとお願いします。 Leafletとは？ Leafletはモバイルフレンドリーなインタラクティブマップを作成する、JavaScriptオープンソースライブラリです。初版は、2011年にリリースされ、最新版は、2018年1月18日にver.1.3.1がリリースされています。 公式: Leaflet - a JavaScript library for interactive maps チュートリアルに沿って簡易デモを作る 「Leaflet」のwe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Huge List of Summer Learning Resources for Front-end Devs
10 CSS & JavaScript Snippets for Creating Drag-and-Drop UIs — Speckyboy
FlexboxベースのレスポンシブなWebサイトを構築するプロジェクトの開発をサポートするCSSフレームワーク・「Frow CSS」 - かちびと.net
TypeScriptでGatsby.jsチュートリアル - Qiita