create-react-appでPostCSS環境を作る - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
堅牢で保守的な最低限度の CSS 設計 - Qiita
CSS 設計でいう保守性とは、新しいルールの追加・更新のしやすさ をあらわす。保守性を高めるためには、変更の局所化、他のルールへの副作用を最小にするアーキテクチャ を採用します。 CSS 設計 設計思想は FLOCSS ベースの ECSS + rscss + Tailwind CSS のいいとこ取り 命名規則は MindBEMding （以降、BEM） 開発言語は Sass + PostCSS コンポーネント粒度 FLOCSS ではプロジェクトにおいて繰り返されるビジュアルパターンをすべて Object として定義します。Object には、Component と Project のレイヤーがあり、この 2 つの判別において Atomic Design のコンポーネント粒度の考えを拝借します。具体的には、 Component：Atoms Project：Molecules に分類します。
TypeScript メモ - Qiita
import * as React from 'react'; import { View } from './view'; // Propsの型定義 interface IProps { name: string; } interface IState { count: number; } export class Profile extends React.Component<IProps, IState> { constructor(props) { super(props); this.state = { count: 0, }; } handleClick() { const text_element = document.getElementsByClassName("modal")[0]; if (text_element.className === "modal on")
TypeScript メモ 2 - Qiita
{ "compileOnSave": false, "compilerOptions": { "target": "es5", "module": "es2015", "jsx": "react", "moduleResolution": "node", "allowSyntheticDefaultImports": true, "noUnusedLocals": true, "noUnusedParameters": true, "removeComments": false, "preserveConstEnums": true, "sourceMap": true, "skipLibCheck": true, "baseUrl": ".", "lib": ["dom", "es2018"] } } { "compilerOptions": { "module": "commonjs"
TypeScript メモ 3 便利グッズ - Qiita
input HTMLInputElement = <HTMLInputElement> inputに const samplae: NodeListOf<Element> = app!.querySelectorAll(""); listに interface HTMLElementEvent<T extends HTMLElement> extends Event { path: T;//ジェネリック } addEventListener('click', (e: HTMLElementEvent<HTMLInputElement>) => {}); addEventListener時にも const target = items_arr.filter((item) => { return item; }); 便利 mapでも利用はもちろんできる
もっとみる機能の実装メモ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? function view_img() { const more_view = document.getElementsByClassName("js-more--view_target")[0]; const more_number = more_view.querySelectorAll(".js-more_number"); const more_target = more_view.getElementsByTagName("li"); const more_target__arr = Array.prototype.slice
Vue.js+TypeScriptで開発するときの参考記事まとめ - Qiita
概要 Vue.js+TypeScriptで開発する際によく参考にしている記事をまとめています。 自分用なので、自分記事が若干多めです。随時更新 この記事良かったよーとか、教えていただけると助かります。 環境構築 Vue CLIのプロジェクト管理UIがいい感じだった https://qiita.com/kai_kou/items/8fcabc7a8445c1be8a30 DockerでVue.js+TypeScript開発環境を構築する https://qiita.com/kai_kou/items/d581a9f8f3ee8605aed1 Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript開発環境をつくってみた https://qiita.com/kai_kou/items/a404c73c8bb23f25c510 Vuexによる
cypressでintegrationフォルダ以外を対象にしたい時 - Qiita
Angularのテストランナーをkarma→cypressに乗り換えたときに デフォルトのspec探索パスが'/cypress/integration/**.spec.ts'になっているのを変更したい TL;DR package.jsonのscriptsを変更する cypress.jsonの設定を追加する 対象読者 cypressを使う人です デフォルト設定 cypressをインストールしてすぐだと、cypressフォルダが生成され、 cypress/integration/配下にあるspecファイルだけがテストの実行対象になっているはずです。 cypress ├── fixtures │ └── example.json ├── integration │ └── test.spec.ts ├── plugins │ ├── cy-ts-preprocessor.js │
Reactで一人TDD修行 - Qiita
Reactで一人TDD修行したので紹介 TDDとは TDD(Test Driven Development:テスト駆動開発)は、実装を進めるより先にテストコードを書くことです。はじめにテストを書き、そのテストを実行し失敗させます。その後、目的部分のコードを書き、テストを成功する形にします。次にテストが通るままでリファクタリングを行っていきます。 TDDでは、この失敗(Red) -> 成功(Greed) -> リファクタリング(Refactor)を繰り返して、少しずつ作っていきます(一気に複数の機能は実装しない)。 Red TDDのスタート地点の状態。テストが、失敗に終わる・コンパイルエラー(プロダクトコードが無い初期状態に限る)になる状態。書いたテストに対して、想定通りにエラーになることを確認。このとき、プロダクトコードがなくてもテストのみに注力。 Greed Redで失敗しているテストを
Node.jsでセキュアな乱数を生成したい！（0.0 ~ 1.0） - Qiita
やりたいこと 0.0~1.0の間で小数の乱数をセキュアに生成したいです 以下のMDNによるとMath.random()はセキュアじゃないです。 Math.random() の提供する乱数は、暗号に使用可能な安全性を備えていません。セキュリティに関連する目的では使用しないで下さい。代わりにWeb Crypto API（より正確にはwindow.crypto.getRandomValues()メソッド）を使用して下さい。 なので、Math.random()のセキュア版を作りたいです。 セキュアな乱数生成 以下のsecureRandom()がセキュアなMath.random()のつもりです。 // cryptoをインポート const crypto = require('crypto'); // crypto.randomBytes()で生成するときのバイト数 const nBytes = 4;
「小説家になろう」の年間pt検索を無限スクロールできるサイトを作った - Qiita
何を作った？ 小説家になろうでの小説検索が不便なので、 1日ちょっとでGitHub Pagesを使って「小説家になろう」の年間ランキングを無限スクロール表示するサイトを作りました。(雑なのでバグがあったら教えてください) ×ボタンで一度見た小説を非表示にすることで効率的に検索できます！ https://o-posting.github.io/syosetu-infinite-yearly-ranking/ データは事前にスクレイピングしてsyosetu_data.jsに入れてあり、htmlを開くたびにデータを送受信するわけではありません。ランキングに載るのはほぼすべての15万字以上の小説です。文字数が少ないほど小説数が爆発的に増えるため、比較的大きな小説のみを集めました。 スクレイピングは（一応）サーバへの影響を考慮して、5秒に検索1回のペースで行いました。 細かい使い方 Google C
npmのバージョン管理の話 - Qiita
注意点 tj/n などのnodeバージョン管理ツールと一緒に使う場合、 このような問題にぶち当たる可能性があります。その点だけ留意しておいてください。 npmのバージョン npm installとかした時に新しいnpmのバージョンあるで！ってコマンドラインに出た経験がある方も少なくないのではないでしょうか。今回はnpmのバージョンを管理する話です。 結論 $ npm info npm versions --json: インストールできるnpmのバージョン一覧をjson形式で $ npm install --global npm@<version>: 任意ののnpmをインストール ex. $ npm install --global npm@3.10.8 npmって そういえば、npmってパッケージ管理ツールですよね… そういえば、npmってバージョン指定でライブラリインストールできますよね
Ruby on Railsで外部のcssを読み込む方法 - Qiita
Ruby on Rails自分用備忘録 Ruby on Railsの既存プロジェクトを引き継いだ。そもそもRubyもRailsも触ったことがなかったけど、フルスタックフレームワークって何ぞやってことは、概ねDjangoで理解してたし、Rubyみたいなモダン言語は別に勉強しなくても、まあなんとなく雰囲気でいけるんじゃん。言語よりフレームワークの使用を覚えるのが面倒臭かった。ほら、フルスタックフレームワークって設計者の癖がより色濃く出るじゃんね。んで、早速「ん？」ってなった箇所があったので、書き留めておこうと思う。なんでもかんでも、できることなら正確に理解した今日この頃。 どうやってcssを読み込めばいいんだろう slimからcssを個別に読み込んでる感じ？とか思ったけど違った。slimからcssを呼び出してない。なのにcssが反映されている。なんじゃこりゃ。んで、勉強して知った。Railsで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ExtendScriptを使ってPhotoshop用のスクリプトを組むときに使った（調べた）こと色々 - Qiita
[非公式] Ionic v3でAngular 6を使う方法（追記あり） - Qiita![[非公式] Ionic v3でAngular 6を使う方法（追記あり） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/adfa4ac450c1c5d01f8ebf56c85ea1538f138459/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTAwNDYwJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTE5NzExNTk4P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz0wOWFlY2ZiNWY2MmE4Y2VkMWVjMmZkZjQ0NTk1MDgyMg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dd3f6f12a6f9368e42f105808e83df4fc%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU5JTlEJTlFJUU1JTg1JUFDJUU1JUJDJThGJTVEJTIwSW9uaWMlMjB2MyVFMyU4MSVBN0FuZ3VsYXIlMjA2JUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJTg2JUU2JTk2JUI5JUU2JUIzJTk1JUVGJUJDJTg4JUU4JUJGJUJEJUU4JUE4JTk4JUUzJTgxJTgyJUUzJTgyJThBJUVGJUJDJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NTdmMTJlMGRkMDUzMWRmMzNjMDA1NTljMDIyNjBiY2I%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDByZGxhYm8mdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0zODM2MjI1MDhjNTVjYjZlNWVkOGMzYWNmYThiZDhjYw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D25f308b70509411ded7012ec23f4e002)
LIVE}}}@~FrEE@@~ Patriots vs Texans Live Stream
if文中の非同期処理で取得した値をif文を抜けた後の処理で使うには？
bot Twitterで指定メンションに対する自動リプライ - Qiita
Node.js でつくる Node.js ミニコンパイラ - Extra01 : WebAssembly 化 - Qiita
D3 でヘキサゴン - Qiita