フロントエンドの開発時にESLintやPrettierなどのnpmパッケージを使うほど大きなプロジェクトではない（もしくは使うことができない）環境でも簡単に使用できるwebサービス一覧です。 コード変換 Prettier prettier.io jsのコードの整形を行なってくれるサー…
「storybook + tailwind + nuxt one webpack config」を参考に「storybook + tailwind + nuxt」の環境構築を行ったときのメモです。 dev.to 使用している技術 Nuxt.js Vue.js HTML JavaScript(not TypeScript) Scss tailwindcss バージョン メインで使用して…
imgタグ、sourceタグ、pictuireタグなど画像を表示するだけでもいろいろなものがあるので、それを管理しやすいように、pugでmixinを作成したので、その時のメモ 結果 まず、はじめに結果から 通常の画像ディレクトリ webpの画像ディレクトリ pugのコード //-…
既存だと出力時にbodyの下に <script src="/assets/js/bundle-e57c2548e14548c673e0.js"></script> headの下に <link href="/assets/css/bundle-e57c2548e14548c673e0.css" rel="stylesheet"> のように出力されるので、出力される場所の変更・ハッシュ値の変更などを行う 既存の状態 変更前のhtml <html lang="ja"> <head> </head></html></link>
マークダウン記載したファイルから PDFの作成 HTMLファイルにマークダウンを読み込んでWebページに表示 の対応を行ったので、その時に対応したことのメモです。 マークダウンファイルからPDFの作成 使用したパッケージ www.npmjs.com インストール $ npm i m…
個人用のプロジェクトでのビルドを「gulp + webpack」からwebpackのみに変更したので、その時に対応したことのメモです。 環境 pug stylus TypeScript gulpファイルを消そうと思った理由 1. 自分の環境ならwebpackのみで変換できる gulp上で行っていることが…
SPのtouchアクションに合わせて自由に要素を動かすことができるスニペットを作成したので、作成したときのメモ。 制作物 See the Pen PoPzOQY by miwa_shuntaro (@miwashutaro0611) on CodePen. 制作手順 ボタンの要素を作成 <button type='button' class='buttonIcon jsButton'></button> .buttonIcon { position: fixed…
storybook-dark-mode を追加することでstorybookでダークモードの対応を行うことができるので、その時に対応メモ。 実行結果 ライトモード ダークモード パッケージインストール¥ $ yarn add -D storybook-dark-mode or $ npm i -D storybook-dark-mode gith…
pugのlintを導入したので、その時のメモ pug-lintインストール インストール $ yarn add -D pug-lint or $ npm install -D pug-lint www.npmjs.com .pug-lintrcを作成 $ touch .pug-lintrc .pug-lintrc設定 ルール記載 書き方例 { "validateIndentation": 2 …
個人のフロントエンドのテンプレートでnpmパッケージのアップデートをよく行うので、アップデートの方法などのメモ コマンド上でのバージョンアップ手順 npm-check-updatesのインストール グローバルにインストール $ npm -g npm-check-updates www.npmjs.co…
テキストを1文字ずつアニメーションさせるときに手動でspanを囲わないで行いたいときに 成果物 See the Pen テキストアニメーション by miwa_shuntaro (@miwashutaro0611) on CodePen. 行ったこと 1. HTMLの作成 .txt: テキスト全体 .line: 改行させるための…
gulpfile.jsからgulpfile.tsに変更した時のメモ version gulp: ^4.0.2 ts-node: ^8.6.1 typescript-require: ^0.2.10 gulpfile.js 基本的に変更はしていませんが、念のため gulpfile.jsの内容 const { src, dest, watch, parallel } = require('gulp') const…
tslintから@typescript-eslintに変更したので、その時のメモ 。 あくまでも自分の環境の話になります。 変更した内容 1. tslintアンインストール $ yarn remove tslint tslint-loader tslint-config-airbnb tslint-config-prettier tslint-plugin-prettier t…
backdrop-filterとは 要素の背後に対してぼかしなどの処理を入れることができるプロパティ。 APPLEのTOPページのheader部分で使われているものになります。 サポート状況 2019年12月10日の状況 参考: https://caniuse.com/#search=backdrop-filter 実装 基本…
referrerとは document.referrerプロパティは、リファラー（リンク元URL）を参照。 Document.referrer プロパティは、このページへ「リンク」していたページの URI を返します。 参考リンク document.referrer－JavaScriptリファレンス Document.referrer - …
iosでモーダルの高さを100vhにしたときに下のコンテンツが上手く表示されなかったので、そのときの対応したことのメモ jsでの高さ取得については今回は省略します。 実際にどんな状態か テストサイト See the Pen modal-viewport-ng by miwa_shuntaro (@miwa…
色の取得をしてくれるもの webサービス XDプラグイン 基本的な書き方 css 通常 :root { --blue: #00f; } .className { color: var(--blue); /* 青色 */ } scss 通常 $blue: #00f; .className { color: $blue; // 青色 } パレットを使ってそこで管理 $palette…
cssを作っていく上で便利そうなジェネレーターメモ。 図形 CSS三角形作成ツール url : http://apps.eky.hk/css-triangle-generator/ja 使い方 左側の「方向」や「サイズ」を変更 右側の「CSS」の部分に書き出されるので、それをコピーして使う 吹き出し作成…
scssのコード品質については stylelint,prettierを使ってscssのコード品質を保つ - みわのブログを参考。 また、.jsと.vueが混在しているプロジェクトを想定。(.jsについてはjQueryも使っている想定) eslint, prettierをインストール $ yarn add babel-eslin…
Variable Fontとは 一つのフォントから複数の太さや幅などいろいろなものを変更できるフォント。 Variable Fontについていろいろと試すことができるサイト https://play.typedetail.com/ https://v-fonts.com/ ブラウザのサポート状況 https://caniuse.com/#…
CSSアニメーションについて CSS TransitionとCSS Animationの2つの機能がある。 CSS Transition,Transform 単純な動きのアニメーションを実装する時に利用する。 トグルボタン、ドロワーメニュー、など Transitionについて translate（移動）、scale（縮尺）…
codepenで自分がいいと思ったものを貼り付ける 主に参考にしているサイト photoshopvip.net photoshopvip.net cssのみですりガラス See the Pen CSS - Frosted Glass by Kyle Wetton (@kylewetton) on CodePen. ページトップボタンでどのくらいスクロールし…
scssのみでjsについての変更・設定はなし stylelint, prettierのインストール $ yarn add stylelint stylelint-config-standard stylelint-scss prettier prettier-stylelint stylelint-config-prettier 参考 stylelint - npm stylelint-config-standard - n…
要素のcssを取得したい プラグイン「Copy CSS」を使う。 ここからインストール Copy CSS と入力するとでてくる cssを取得する 書き出されるコード(一例) width: 360px; height: 70px; border-radius: 4px; background: linear-gradient(#48b047 0%, #45d943 …
バッチ処理 一括でpngやjpgを変更できるように やり方 1. 「ウィンドウ → アクション」を選択 アクションパネルが出る アクションの使い方については省略。 2. 画像を開いて、画像を保存する 開くファイルは適当。 画像の保存について 「書き出し → web用に…
vueのプロジェクトでstorybokを入れようとしたときにvueらしい書き方で行いたいと思ったのでその時のメモ 環境 Rails Vue.js Webpacker webpackerは今回関係ないですが、念のため 実行まで 今回参照するvueファイル <template lang="pug"> div p | {{ message }} </template> <script lang="ts"> import { Compo…
Railsそんな関係ない気がするけどバージョンもろもろ上げたらエラーでたので、storybook入れたときのwebpakerの編集した箇所も記載。 とりあえずstorybook入れる $ yarn add @storybook/cli $ npx getstorybook $ yarn run storybook ここまでやったら .stor…
Nuxt.js のv2でも色々と設定を行ったので、その時に行ったこととしてメモ。（随時追記予定） 今回変更を行ったgithubのコード ここ違うよなどありましたらPRいただけると嬉しいです。 更新速度は遅いですが、随時いろいろと更新できるようにしていきたいと思…
前提 SPAではない pug + stylus + vanillaを使う webpackのビルドはjsのファイルのみ 開発時と本番アップ時にビルドを分ける ディレクトリ コード gulpfile.js(v4) const { src, dest, watch, parallel } = require('gulp') //gulpを使うためのもの const pu…
gulpv4でgulp.taskが非推奨とのことだったので、少し変更したときのメモ。 前提条件 html,cssを動かしたいだけなので、pug,scssの変換のみ(js,imgなどはなし)。 ファイルの監視・ビルドがメインになるので、ローカルサーバーを立てるなどのことはしない。 変…
