npmをGUIで管理するアプリケーション「ndm - npm desktop manager」
node.jsを使用して開発する際になくてはならないのが「npm」です。パッケージ管理を担ってくれるのですが、ターミナル（CUI）を今まで使ったことのない人がいきなりnpmを使ってパッケージを管理するというのはハードルが高いかもしれません。 そうでない人からしても、今インストールしているパッケージとそのバージョンがGUIで一覧になって見れたら非常に管理しやすいですよね。今回はそんな願いを実現するnpmのGUI管理アプリ「ndm – npm desktop manager」をご紹介します。 下の画像がndmのメイン画面です。グローバルにインストールされているパッケージが一覧になっていますし、どんなパッケージが入っているのかひと目で分かる上にバージョンもそれぞれ表示されていて非常に見やすいですよね。 ndmのインストールndm（npm desktop manager）のサイトからアプリのインス
Webpackってどんなもの？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 初めてのWebpack 今回はWebpackについて紹介したいと思います。 私自身は今回初めて使ったのですが、小規模なプロジェクトの途中から導入していて、 使ってみて結構良い感じなので記事にしてみました。 Webpackとは Node.jsでサーバーサイドで動かすモジュールバンドラーツールになります。 Node.jsでモジュールという単語を聞くと、「npmやbowerとかと何が違うの？」みたいな印象を持たれる方もいるかもしれませんが、基本的にはそれらとはまた違った役割をもっています。 npmやbowerはJSライブラリのバージョン管理な
【2019年】Web開発トレンド総まとめ – フロントエンド開発編 – Ryosuke's Blog
こんにちは。Ryosuke(@ryosuke_mizuta)です。 現在フリーランスエンジニア/プログラミング講師として働いております。 今回は、2019年のWeb開発のトレンドをフロントエンド開発に焦点を絞ってご紹介します。 今回の記事は、この動画を日本語訳したものです。 この記事で意識していただきたいこと Web開発者になるために、この記事で紹介しているすべての技術トレンドを学ぶ必要はありません。 この記事では様々な技術トレンドをシンプルなカテゴリーに分け、何をどのような順番で学べば良いか、計画を立てやすいようご紹介しています。 この記事内でのアドバイスや提案は、あくまで私の経験と予測によるものです。 この記事はとっても長いので先に目次を確認し、全体像を確認していただくのがオススメです！ Basic Front-End Web Developer – 若手フロントエンド開発者 最初にフ
アスペクト比計算ツール
アスペクト比とは長辺：短辺(横縦比)(業界によっては縦横が反対の場合がある)のことで、動画などは4:3や16:9などの整数比で表わすことが多く、紙などは1.618:1(黄金比)など小数点でも表わすことがある。 本サイトでは整数比で計算。 計算方法は長辺と短辺の最大公約数をもとめ、最大公約数で除算をすることで比率を求めることができる。 最大公約数は2つ以上の整数に共通する約数(割り切れる数値)の中で一番大きい数値の事で、ユークリッド互除法でその数値を求めることができる。 詳しい計算方法はアスペクト比の求め方という記事を参照。
Notionの使い方まとめ。必要な情報をこれひとつで管理する5つの方法｜平野太一
【2020/12/24 更新】12月時点でのページ管理方法をまとめました 📋 【2020/12/04 更新】「インプットを行動に繋げるためのNotion活用術を聞いてきた！」で、自分のNotionの使い方を話しました 💬 【2019/10/01 更新】10月時点でのページ管理方法をまとめました 📋 【2019/03/03 更新】3月時点でのページ管理方法をまとめました 📋 「Notion」という、何でもござれの万能ツールがあります。 ざっくりというと、Googleドキュメント(Dropbox Paper)、Googleスプレッドシート、Trello、タスクアプリ、GitHub Wikiを合体させたようなサービスです。 ノートをとったり、情報を一箇所にまとめたり、タスクをつくったり、データを表で見たり。正直、何でもござれです。 ▲ 自由にページをつくって、メモしたりWebブックマーク
browserl.ist: A page to display compatible browsers from a browserslist string.
Shared browser compatibility config for popular JavaScript tools like Autoprefixer, Babel, ESLint, PostCSS, and Webpack Supported by Evil Martians and Cube Check compatible browsers How to get started Use defaults if you're building a web application for the global audience. Use node 18 if you're building a Node.js application, e.g., for server-side rendering. Autoprefixer, Babel and many other to
浮紙
コンテンツへスキップ ファイルを開く ファイルを保存する テーマ ドキュメントウインドウ 不可視文字 検索 テキスト整形 浮紙の整形項目 ストック 特定文字を確認 設定ファイル 今後の予定 v4とv8の違い
ウェブサイトのリンク切れを確認する方法【比較検証】
こんにちは。 あなたは自分のウェブサイトのリンク切れを確認していますか？ じつは、リンク切れによって発生する404エラーはGoogleのインデックス処理や検索順位に影響をあたえるものではありません。 【参考】Google ウェブマスター向け公式ブログ: 404 はサイトに悪影響を与えますか？ でも、だからといってリンク切れをそのままにしてしまうと、ユーザーには質の悪いサイトと評価されてしまいそうです。 WordPressであれば「Broken Link Checker」というプラグインをインストールしておけば、リンク切れが起きたときに自動的に知らせてくれるため、その都度修正することが可能です。 しかし、ワードプレス以外のサイトでは、そのような便利な機能はありませんのでリンクチェックを手動で行わなければなりません。 今回は、ウェブサイトのリンク切れを確認できる、さまざまなリンクチェックツール
HTML Color Codes
Color Picker Find that perfect color with our color picker and discover beautiful color harmonies, tints, shades and tones; input Hex color codes, RGB and HSL values, and generate HTML, CSS and SCSS styles. Color Chart Looking for some already great color combinations? Our color chart features flat design colors, Google's Material design scheme and the classic web safe color palette, all with Hex
Webクリエイターは要チェック！CSS作業をバツグンに効率化してくれる無料のツール&アプリ17選｜SeleQt【セレキュト】
CSSの作業をする際に便利なWebベースのツールやアプリケーションをご紹介します。 すべて無料のものをそろえましたので、Webクリエイターの方はぜひチェックしてみてください！ extractCSS HTMLシートからclass, id, インラインスタイルなどを抽出してCSSスタイルシートとして形成するための便利なツールです。 CSS Beautifier CSSスタイルシートを自動でフォーマットしてくれるので、読みやすく統一感のあるデザインのページが出来上がります。 CSScomb コーディングのスタイルをフォーマットする機能を持っていて、CSSプロパティをソートしてくれます。 CSS Compressor 圧縮してサイズを小さくしてくれる便利なアプリケーションです。 Style Stats どんなスタイルシートからでも便利な統計を取ることができるツールです。 アクセスしてURLを入力す
ブックマークレット10選
こんにちは、デザイナーのサリーです。セブ島のお土産に名物のシニガンスープの素をたくさん貰いました。 シニガン？な私は裏面（おそらくフィリピン語）を見てもさっぱり作り方がわかりません、クノールなのに… パッケージイラストとクックパッドを頼りにどうにかこうにか料理してみようと思います。 今日はデザインやコードをチェックするのに便利なブックマークレット10個を紹介します。 デベロッパーツールやブラウザの拡張機能を使った方が良さそうだと思ったもの、個人的に使いづらかったものは除外して、実用性のあるブックマークレットを選んでみました。 「ブックマークレットってなんだろう？」な方に説明をしておくと、 ブックマークレット 通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選ん
gulp.js
A toolkit to automate & enhance your workflowLeverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines. TypeScriptDevelop in any languagePNGCreate assets with any toolMarkdownWrite using any formatJavaScriptGet compiled codeWebPGet optimized imagesHTMLGet rendered content
Favicon Generator for perfect icons on all browsers
Your favicon is transparent. This is usually a good thing, but not for iOS Web Clips which are supposed to be opaque. Look at the sample on the left, this is how a user would see your favicon as a Web Clip on his device. What to do about this? Your favicon is not transparent. This is a good thing for iOS Web Clips. Yet, web clip corners are rounded. Depending of your favicon, it may disrupt its de
最近お世話になったWeb制作に関するお役立ちツール＆プラグイン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。春ですね。4月生まれなので春はなんだか気合が入ります。 さて、挨拶とは関係ありませんが、最近Web制作をする上で役に立ったツールやプラグインをご紹介したいと思います。 画像作成編 無料で半透過マルチアイコンやファビコン（favicon.ico）作成 http://ao-system.net/alphaicon/ アルファチャンネルを持った綺麗なマルチアイコンが一発で作れます。仕上がりが綺麗だったのでお気に入りです。favicon画像作成のお供に。 OGP画像シミュレータ | og:image Simulator http://ogimage.tsmallfield.com/ 画像をアップロードするだけでFacebookのタイムライン上にどのようにトリミングされて配置されるかを一発でシミュレートしてくれます。 「あっこのままだとロゴが欠ける…」とかぱっと見で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transform
【プログラミング未経験者向け】 AWS Cloud9 のインストール方法を丁寧に解説します。 – Ryosuke's Blog
Web制作者が厳選したブックマークを晒してみる。Webツールやデザインサイトなど30選
Really Quick Responsive Web Design Calculator
ガントチャート,プロジェクト管理,スケジュール表がサクサク作れる。チャート作成がカンタンに共有！しかもフリー タスク管理にも - Brabio!
alter.cf