CodeSpeedy is a simple tool to manage your code snippet and sync to your Visual Studio Code immediately.
CodeSpeedy
CodeSpeedy is a simple tool to manage your code snippet and sync to your Visual Studio Code immediately.
Web制作者におすすめ！ Win, Mac対応、クラウドでの同期機能も備えた最強のコードスニペットマネージャー -massCode
Web制作者・デベロッパー向けに、クラウドでの同期機能も備えたオープンソースのコードスニペットマネージャーを紹介します。 macOS, Windows対応のアプリで、Web制作のさまざまな言語をサポートしています。日本語の入力など、日本語環境でも問題なく利用できます。エディタにはAceが使用されており、非常に快適で、高速に動作します。 massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 11.0+, Windows 10,11をサポート、Linuxも近日サポート予定です。 2年ほど前にv1.0がリリースされたときに紹介
CSSでアスペクト比を管理する
Result CSSでアスペクト比を管理しよう、みたいなネタです。 上サンプルはサイズがバラバラな画像を一定の比率のサイズで統一したものです。歪みが出るので画像そのものには使えませんが分かりやすいサンプルとして。 css:root { --w: 300px; --h: calc(var(--w) / (1.618 / 1)); } img { width: var(--w); height: var(--h); }こちらは黄金比で固定したものになります。横幅を決めて変数に代入するとcalc()関数で比率に沿った高さに計算されます。後は幅と高さの変数を比率を保ちたい要素に適応すれば任意のアスペクト比を保つ事が出来ます。 例えば横幅400pxで4:3比率固定にしたいなら :root { --w: 400px; --h: calc(var(--w) / (4 / 3)); }とすればいい。 CS
)
Snapcode - Webベースのスニペット管理
プログラミングをしていると、繰り返し使いたくなる便利な関数ができたりします。そうした関数は同じプロジェクトではなく、異なるプロジェクトでも使いたくなるでしょう。 今回はそうしたちょっとしたコードを管理する、Webベースのスニペット管理であるSnapcodeを紹介します。 Snapcodeの使い方 メイン画面です。タグとフォルダがあります。 スニペットをクリックすればコードが読めます。 ライトモードも用意されています。 新しいスニペットも登録できます。 SnapcodeはWebベースで、かつ認証も不要で使えるので、社内で立てると便利そうです。コードのコピー機能がなさそうなのが残念ですが、そこはカスタマイズすればいいでしょう。 SnapcodeはVue製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Snapcode Kholid060/snapcode
Web制作者におすすめ！VS Codeと同じエディタを使用した最強のコードスニペットマネージャーが登場 -massCode
使い勝手がよく、高速動作のオープンソースのコードスニペットマネージャーを紹介します。VS Codeと同じMonacoがエディタに使用されており、非常に快適です。 macOS, Windwos, Linux対応のアプリで、Web制作のさまざまな言語をサポートしています。日本語の入力など、日本語環境でも問題なく利用できます。 massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 10.13+, Windows 7, 8, 10, Ubuntuをサポートしています。 コード管理 massCodeは、マルチレベルのフォルダとタグ
massCode - マルチプラットフォームで使えるスニペット管理 MOONGIFT
開発をしていてプロジェクトをまたいで繰り返し使うようなコードはスニペットとして登録しておくと便利です。ライブラリ化するまでもないコードだったり、Webブラウザの開発者ツールで頻繁に実行するコードもスニペットにしておくと便利です。 今回紹介するmassCodeはマルチプラットフォームで使えるスニペット管理となっています。 massCodeの使い方 メイン画面です。3ペインの画面構成になっています。 言語を選んでハイライトもできます。 フラグメントを使って、一つのスニペットに複数のコードを登録できます。 検索はハイライト機能付きです。 massCodeはスニペットのフォルダ管理、お気に入り登録ができます。コードはクリック一つでクリップボードにコピーできます。Gistに登録するのもいいですが、社内用のコードであればローカルにあった方が安全ですし、すぐに使えるのが便利です。 massCodeはVu
CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則
CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with these 5 principles by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSを改善する命名の原則 CSSを改善する詳細度の原則 CSSを改善するDRY原則 CSSを改善する単一責任の原則 CSSを改善する開放/閉鎖原則 CSSを改善する方法のまとめ はじめに CSSは簡単で分かりやすいのに、CSSを書く時に
Beeftext - Windows用のスニペット管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 仕事中、繰り返し使う文面であったり、よく使う関数があります。それらをメモしておくと便利です。そして必要な時に検索してコピー&ペーストすれば仕事の効率が大幅にアップするはずです。 今回紹介するBeeftextもそんな短文、スニペットを管理するソフトウェアです。 Beeftextの使い方 新しいスニペットを記載します。 スニペット一覧です。グループ管理できます。 設定です。 Beeftextはショートカットキー操作が基本で、さっと立ち上げて検索し、そして文字列をコピーするといった一連の操作をショートカットキーでできます。Webベースでなく、GUIアプリケーションなのも使いやすい点です。 BeeftextはC++製、Windows用のオープンソース・ソフトウェア（MIT License）
Vuexライクなノンコンポーネント用ステート管理ライブラリ「Vanix」をつくってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、フロントエンドエンジニアのヒガです。 ここ最近の案件でNuxtを使っていたんですが、とっても素敵なフレームワークで恋に落ちちゃいそうでした。 でも、僕の対応する案件はそれらのフレームワークを使えないことも多く、フレームワークを使ったあとにそういった案件にとりかかると正直めんどうだなと感じることがあります。ですので、一部の機能だけでもいい感じにつかうことはできないかなと思いました。 目をつけたのはステート管理に関する機能です。NuxtでいうとVuexですね。公式サイトを引用するとこのように書いてあります。 Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 （引用元：https://vuex.
カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法
テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーをCSSで効率的に管理するために セマンティックにするか、宣言型にするか 基本的なカラーパレットの作成 セマンティックカラーの追加 このアプローチを採用する理由 テーマに使用するカラー はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。 Web Components|CodyHouse カラーをCS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS