#stylelint

[syakuis]

Webpack setting - babel & react #2

http://syaku.tistory.com/365 #webpack #babel #react #eslint #stylelint

[ttech]

Stylelint: Herramienta para evitar errores en tus archivos CSS (hojas de estilo)

Stylelint: Herramienta para evitar errores en tus archivos CSS (hojas de estilo)

(more…)

[mediba-ce]

Next.js 採用プロダクトにおける Lint ツール導入事例

mediba Advent Calendar 2021 の 18 日目の記事です。

こんにちは。エンジニアの中畑（@yn2011）です。最近は Switch の月姫で直死の魔眼について学んでいます。

初めに

プロダクトを新規に開発する際に、どんな Lint ツールを導入し、どのような設定で利用するかは悩むことが多いです。最終的にはチームメンバーと議論をして決めていく必要がありますが、社内外の他のプロダクトでどのようにしているか参考事例が欲しい場合があります。業務で開発したプロダクトのコードベースは社外に公開されることは少ないため、他社でどのような Lint ツールを導入しているのかを知る機会は少ないです。

そういった背景から、直近のプロダクト開発において ① どんな Lint ツールを導入しているか、② 特に工夫している設定は何か���という Lint にフォーカスした内容を書いたらどうだろうと考え、今回の記事のテーマとしました。

昨年から引き続き、mediba のプロダクトでは Next.js の採用が増えています。その中のとある Next.js 採用プロダクトを例として今回ご紹介します。

tsc

TypeScript です。Next.js 9 以降は、TypeScript 関連の機能はビルトインされていて yarn build 時に型検査を行いますが、型検査だけを任意のタイミングで行う場合は、tsc -p . --noEmit のようなコマンドを実行します。Lint ツールではありませんが、型検査のためにだけ使用しているので一応記載しました。

ESLint

ESLint です。Next.js 11 以降は、ESLint 関連の設定をビルトインするようになり、next lint で実行と設定ができます。

Next.js 向けのコンフィグとして、eslint-config-next があります。以下のルールはオフにしています。

"@next/next/no-img-element": "off", "@next/next/no-html-link-for-pages": "off", "@next/next/next-script-for-ga": "off", "@next/next/no-sync-scripts": "off",

Next.js の機能を活用するためのルールをなぜオフにしているか疑問に思われるかもしれませんので理由を説明します。

no-img-element は、Next.js が提供する next/image を使用せずに、img 要素を使用している場合に警告を行うルールです。プロダクトでは、SSR ではなく、SSG を使用していて next/image は未使用なのでオフにしています。

no-html-link-for-pages は、Next.js が提供する next/link を使用せずに anchor 要素のみを使ってリンクを実装している場合に警告を行うルールです。next/link を使用することで、CSR でページ遷移を実現することが可能になりますが、mediba で利用している Google Analytics 向けの実装ではページ遷移時の集計に懸念があることが分かっています。そういった理由から意図的に next/link を使用しないようにしているため、ルールをオフにしています。

next-script-for-ga と no-sync-scripts は、next/script の仕様をきちんと調査できていなかったので暫定的に script 要素を使用していましたが今後対応するかもしれません。

Stylelint

Stylelint です。プロダクトでは、styled-components のような JS in CSS ではなく、.scss ファイルに定義した CSS を CSS Modules から利用しているためプロパティの並び順の auto fix 等、Stylelint の機能を全て活用することができています。

プロパティの並び順定義は、stylelint-config-recess-order を使用しています。定義されているプロパティの数とメンテナンスの頻度の面で、他のライブラリや自身で作成するよりも良さそうだったため選定しました。

また、Prettier を使用しているので stylelint-config-prettier で競合を防いでいます。

markuplint

markuplint です。HTML Living Standard の仕様に準拠した HTML になっているかを検証できます。React (JSX) にも対応しています。

ルールを独自に追加しています。

{ "nodeRules": [ { "selector": "meta[property]", "rules": { "invalid-attr": { "option": { "attrs": { "property": { "type": "String" }, "content": { "type": "String" } } } } } } ] }

meta 要素の属性についてです。SNS でページを共有された際の挙動を定義するため、このような meta 要素を実装することが多いと思います。

<meta content="ページタイトル">

この実装は markuplint が 2 つ警告を出します。まず、HTML Living Standard の meta 要素の仕様には、property 属性が定義されていないため警告を出します。 また、name 属性が定義されていない場合に、content 属性を使用することができないため、こちらについても警告を出します。

では一体この属性は何なんだ、という話になりますが、property 属性については RDFa で定義されており、OGP に従ってこの meta 要素を SNS 側が解釈します。したがってここでは例外として取り扱うようにルールを変更しています。

なお、React 独自の属性（key や dangerouslySetInnerHTML) は @markuplint/react-spec に含まれているため独自にルールを追加する必要はありません。便利です。

まとめ

直近の Next.js 採用プロダクトを例に、使用している Lint ツールと、その設定についてご紹介しました。これらの Lint ツールは全て GitHub Actions で commit push をトリガーにして実行していますので、ルールに違反しているコードをコミットするとすぐに気づくことができ、Lint ツール運用の形骸化を防ぐことができています。

Lint ツールの導入によって、コードベースをクリーンに保つことはもちろんですが、標準仕様やベストプラクティスを知る良いきっかけにもなっています。

Lint ツール導入時の参考になれば幸いです。最後までお読み頂きありがとうございました。

[macunan]

Ultimate Vim Configuration for Developer

Install latest version of nodejs (For ubuntu like distro)

curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh   sudo bash nodesource_setup.sh   sudo apt-get install -y nodejs

Download plug.vim and put it in the "autoload" directory.

usually found in the echo $VIMRUNTIME directory

in my case it was :/usr/local/share/vim/vim82

since I compiled from source in most installations you can do the following:

Vim

Unix

curl -fLo ~/.vim/autoload/plug.vim --create-dirs \    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

You can automate the process by putting the command in your Vim configuration file as suggested here.

Windows (PowerShell)

iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |`    ni $HOME/vimfiles/autoload/plug.vim -Force

Neovim

Unix, Linux

sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \       https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

edit and  add the following to your .vimrc:

set number set clipboard=unnamedplus colorscheme peaksea set backspace=indent,eol,start call plug#begin('~/.vim/plugged') Plug 'neoclide/coc.nvim', {'branch': 'release'} Plug 'ctrlpvim/ctrlp.vim' Plug 'ctrlpvim/ctrlp.vim' Plug 'preservim/nerdtree' Plug 'chrisbra/vim-commentary' Plug 'jlanzarotta/bufexplorer' Plug 'itchyny/lightline.vim' Plug 'preservim/tagbar' call plug#end() set laststatus=2 let mapleader = "," nmap <leader>w :w!<cr> map <leader>tn :tabnew<cr> map <leader>to :tabonly<cr> map <leader>tc :tabclose<cr> map <leader>tm :tabmove " Opens a new tab with the current buffer's path " Super useful when editing files in the same directory map <leader>te :tabedit <C-r>=expand("%:p:h")<cr>/ " Close current buffer map <leader>bd :Bclose<cr> map <leader>tt :term<cr> " Close all buffers map <leader>ba :1,1000 bd!<cr> vnoremap <silent> <leader>r :call VisualSelection('replace')<CR> map <leader>o :BufExplorer<cr> " Quickly find and open a file in the CWD let g:ctrlp_map = '<C-f>' " Quickly find and open a recently opened file map <leader>f :CtrlPMRU<CR> " Quickly find and open a buffer map <leader>b :CtrlPBuffer<cr> map <leader>nn :NERDTreeToggle<cr> map <leader>nb :NERDTreeFromBookmark map <leader>nf :NERDTreeFind<cr> map <leader>ss :setlocal spell!<cr> map <leader>sn ]s map <leader>sp [s map <leader>sa zg map <leader>s? z= nmap <F8> :TagbarToggle<CR>

restart vim and type

:PlugInstall

Restart vim  and enjoy.

In vim install the plugins you need for your development 

For example:

:CocInstall coc-json coc-css

That was css

 Few of the available plugins are:

You can find available coc extensions by searching coc.nvim on npm, or use coc-marketplace, which can search and install extensions in coc.nvim directly.

coc-angular for angular.

coc-blade-formatter for blade, Integrates the blade-formatter (Laravel Blade formatter).

coc-blade-linter for blade, Integrates the Laravel Blade Linter.

coc-browser for browser words completion

coc-calc expression calculation extension

coc-cfn-lint for CloudFormation Linter, cfn-python-lint

coc-clangd for C/C++/Objective-C, use clangd

coc-clang-format-style-options coc.nvim extension, helps you write .clang-format more easily.

coc-cmake for cmake code completion

coc-css for css, scss and less.

coc-cssmodules css modules intellisense.

coc-deno for deno.

coc-denoland for deno, fork of vscode_deno.

coc-diagnostic for All filetypes, use diagnostic-languageserver.

coc-discord discord rich presence for coc.nvim

coc-discord-rpc fully customizable discord rpc integration with support for over 130+ of the most popular languages

coc-dash-complete Press - to trigger buffer source completion.

coc-dot-complete Press . to trigger buffer source completion.

coc-ecdict ECDICT extension

coc-elixir for elixir, based on elixir-ls.

coc-ember for ember projects.

coc-emmet provides emmet suggestions in completion list.

coc-erlang_ls for erlang, based on erlang_ls

coc-esbonio for rst (reStructuredText), esbonio ([Sphinx] Python Documentation Generator) language server extension.

coc-eslint Eslint extension for coc.nvim

coc-explorer file explorer extension

coc-floaterm for vim-floaterm integration

coc-flow for flow

coc-flutter for flutter

coc-fsharp for fsharp.

coc-fzf-preview provide powerful fzf integration.

coc-gist gist management

coc-git provides git integration.

coc-glslx for glsl, use glslx.

coc-go for go, use gopls.

coc-graphql for graphql.

coc-highlight provides default document symbol highlighting and color support.

coc-html for html, handlebars and razor.

coc-htmldjango for htmldjango, django templates (htmldjango) extension. Provides "formatter", "snippets completion" and more...

coc-htmlhint for html, Integrates the HTMLHint static analysis tool.

coc-html-css-support for HTML id and class attribute completion.

coc-intelephense for php, fork of vscode-intelephense. (scoped packages: @yaegassy/coc-intelephense)

coc-java for java, use eclipse.jdt.ls.

coc-jedi for python, use jedi-language-server.

coc-json for json.

coc-julia for julia.

coc-just-complete Press _ to trigger buffer source completion.

coc-lists provides some basic lists like fzf.vim.

coc-lsp-wl for wolfram mathematica, fork of vscode-lsp-wl.

coc-markdownlint for markdown linting

coc-metals for Scala using Metals

coc-omnisharp for csharp and visualbasic.

coc-perl for perl.

coc-php-cs-fixer for php, Integrates the php-cs-fixer (PHP Coding Standards Fixer).

coc-phpactor for php, using phpactor

coc-phpls for php, use intelephense-docs.

coc-psalm for php, use psalm.

coc-powershell for PowerShellEditorService integration.

coc-prettier a fork of prettier-vscode.

coc-prisma for Prisma schema integration.

coc-pyright Pyright extension

coc-python for python, extension forked from vscode-python. (Not maintained anymore)

coc-pydocstring for python, using doq (python docstring generator) extension.

coc-r-lsp for r, use R languageserver.

coc-reason for reasonml

coc-rls for rust, use Rust Language Server

coc-rome for javascript, typescript, json and more, use Rome

coc-rust-analyzer for rust, use rust-analyzer

coc-sh for bash using bash-language-server.

coc-stylelintplus for linting CSS and CSS preprocessed formats

coc-stylelint for linting CSS and CSS preprocessed formats

coc-snippets provides snippets solution.

coc-solargraph for ruby, use solargraph.

coc-sourcekit for Swift

coc-spell-checker A basic spell checker that works well with camelCase code

coc-sql for sql.

coc-sqlfluff for sql, SQLFluff (A SQL linter and auto-formatter for Humans) extension

coc-svelte for svelte.

coc-svg for svg.

coc-swagger for improved Swagger/OpenAPI spec authoring experience.

coc-tabnine for tabnine.

coc-tailwindcss for tailwindcss.

coc-tasks for asynctasks.vim integration

coc-texlab for LaTeX using TexLab.

coc-toml for toml using taplo.

coc-translator language transaction extension

coc-tsserver for javascript and typescript.

coc-vetur for vue, use vetur.

coc-vimlsp for viml.

coc-xml for xml, use lsp4xml.

coc-yaml for yaml

coc-yank provides yank highlights & history.

coc-thrift-syntax-support for thrift.

 in case it the vim version is an issue then you will need to install and compile version:

sudo apt-get install lua50 liblua50-dev liblualib50-dev sudo apt-get install libncurses5-dev libgnome2-dev libgnomeui-dev libgtk2.0-dev libatk1.0-dev libbonoboui2-dev libcairo2-dev libx11-dev libxpm-dev libxt-dev python-dev ruby-dev mercurial  sudo make install  sudo apt-get install python3-dev   sudo apt-get install python-dev

git clone https://github.com/vim/vim.git

cd vim

./configure --with-features=huge --enable-rubyinterp --enable-python3interp --with-python-config-dir=/usr/bin/python3.6-config --enable-perlinterp --enable-gui=gtk2 --enable-cscope --prefix=/usr --enable-luainterp --with-lua-prefix=/usr/local

make 

make install

You can get the config here:

https://github.com/macunan/vimconfig/blob/main/.vimrc

[reportingessay517]

custom writing online

About me

Customerwriter

Customerwriter This is all thanks to Women Who Rock, Pittsburgh Winery, Savor Pittsburgh, and Magee-Womens Research. They’ve come together for a very cool custom line of wines. For every bottle bought, Pittsburgh Winery will donate $5 to benefit girls’s and toddler’s health research at Magee-Womens Research Institute & Foundation. Sublime Text uses a customized UI toolkit, optimized for pace and wonder, whereas taking advantage of native performance on every platform. Sublime Text is constructed from customized components, offering for unmatched responsiveness. She asked the administrator why other students have been allowed to put on masks in obvious support of President Donald Trump, who has attacked the motion. The faculty’s assistant principal advised her the mask was not permitted and that she had to take it off, Martinez recalled. The administrator informed her the mask’s message may create a conflict with other college students, Martinez added. When writing console commands, it's common to gather enter from the user through arguments or options. She wore her masks once more, a move that she says drew her an in-faculty suspension. A member of the family notified the college that Martinez can be going house. From a strong, custom cross-platform UI toolkit, to an unmatched syntax highlighting engine, Sublime Text units the bar for efficiency. , and the swap is instant, with no save prompts - all your modifications might be restored next time the project is opened. Key bindings, menus, snippets, macros, completions and extra - nearly every little thing in Sublime Text is customizable with simple JSON information. For instance, most guidelines help the severity option. When utilizing your rule, the ruleFunction might be referred to as with the matching choices . In his free time, he likes to play guitar, learn and hike. After a summer time of protests about police violence towards Blacks, Martinez said was she merely trying to face with these drawing attention to the issue. Administrators lately have admonished students or issued in-house suspensions over the length of dreadlocks, etching a design in a fade haircut and wearing a hijab. Displays of district, campus, Texas or American flag logos will be permitted. Martinez complied with the request till Thursday, when she says she again observed other college students sporting pro-Trump masks and not being admonished. Even in excessive conditions, toner won’t rub or wash off, and unlike laminated paper, it can be written on with a pencil or all-climate pen. Print your personal all-climate maps, indicators, and paperwork on paper that can survive any outdoor office. I hope that after reading this post, it is possible for you to to rapidly create and integrate your personal stylelint rules. This means, you will hold a better stage of code quality whereas respecting your project’s requirements. Blacks comprise solely three.four percent of scholars within the district, which is predominantly white or Hispanic. The dispute within the rural college district 45 miles southwest of downtown Houston is the newest to come up over gown codes. Now, let’s write the lint operate which holds the core logic of the rule. As mentioned before, stylelint calls ruleFunction for each single linting “process”. These can be used to customize the rule’s habits from the stylelint’s configuration. This system offers you flexibility as settings could be specified on a per-file kind and per-project foundation. Make ten modifications on the same time, not one change ten occasions. Multiple choices allow you to interactively change many strains without delay, rename variables with ease, and manipulate recordsdata sooner than ever. Recyclable and archival-grade, this water resistant paper will defend your prints in opposition to Mother Nature & Father Time. There are a number of things to consider when choosing a delivery service. Properly preparing your packing containers will get them where they’re occurring time and save you money. What better method to have fun the start of Fall than with amazing wine—all native, and for an excellent cause!

[toddbirchard-architect]

Todd Birchard just completed issue HACK-1542: Bump stylelint from 13.7.0 to 13.7.1 Hackers and Slackers Bug Medium Todd Birchard toddbirchard/ghosttheme-stockholm

[t-baba]

Web Design Weekly #296

Headlines

The 6-Step “Happy Path” to HTTPS

Troy Hunt explains the fastest and easiest way you can get HTTPS up and running correctly. (troyhunt.com)

Documenting the Web together (blogs.windows.com)

The new tab page you’ll actually use

Replace your web browser’s gratuitous new tab page with a clean and simple list of links, grouped and sorted how you like. Available for web, and as a Chrome extension. A Fine Start — a concise new tab page. Get it for free here » (afinestart.me)

Articles

Prettier + Stylelint

If you are keen to keep your code clean and consistent this post by Chris Coyier will help you on the right path. The Prettier + Stylelint combo is a massive winner in my books. (css-tricks.com)

Write tests. Not too many. Mostly integration.

Some wise words by Kent C. Dodds around JavaScript testing. (blog.kentcdodds.com)

Mobile web through the users’ eyes

Google recently conducted a user research project focused around the mobile web. In this article, Jenny Gove shares what they learnt, what works for people, what some of the issues are and some of the areas for developing better experiences. (medium.com)

Design in the Age of Anxiety

Erika Hall shares some high level thought provoking words around the importance of removing anxiety from the design process. (muledesign.com)

Things that you’ll learn when you start to use React Native (medium.com)

Tools / Resources

REST Client for VS Code

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly. No external app like Postman or Paw needed. (josephwoodward.co.uk)

CSS Grids for Everyone

Jeffrey Way teaches everything you need to know in bite-sized episodes. (laracasts.com)

Image Trace Loader

Loads images and exports traced outlines as image/svg+xml URL-encoded data. (npmjs.com)

Responsive Web Design podcast talking about Slacks new site (responsivewebdesign.com)

Dropbox Professional – Powerful tools to showcase your work (blogs.dropbox.com)

A Modern Front-End Workflow with DevTools (vimeo.com)

InVision Studio (invisionapp.com)

Inspiration

Making website building fun (gatsbyjs.org)

The Era of Newshammer (daverupert.com)

Jobs

Senior Product Designer (Web & Mobile) at TaskRabbit

We’re looking for a senior product designer to create modern and great looking designs across all our web and mobile products. You will be an important member of the TaskRabbit User Experience & Design team and help guide the visual language for products that support both TaskRabbit Clients and Taskers. (taskrabbit.com)

Product Designer at Creative Market

As a Product Designer, you will be responsible for working closely with a cross-functional team to build new features and a/b tests that will help our 3.5M+ members engage with Creative Market and drive meaningful revenue for the 20k+ creators on our platform. (creativemarket.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

We fired our top talent. Best decision we ever made. (freecodecamp.org)

The post Web Design Weekly #296 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly http://ift.tt/2y1mUfq

[masaa-ma]

JavaScript開発者のための優秀なVSCodeツール26選

from https://qiita.com/rana_kualu/items/4a4ce6ea7f489dc19f63?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

以下はjsmanifestによる記事、26 Miraculous VS Code Tools for JavaScript Developers in 2019の日本語訳です。

26 Miraculous VS Code Tools for JavaScript Developers in 2019

Visual Studio Code(一般的にはVScodeと呼ばれる)は、デスクトップ上で動作する軽量で強力なクロスプラットフォームのコードエディタです。 TypeScriptやChrome Debuggerなどの開発ツールがサポートされています。 最初は自分のプロジェクトを構築するためにVScodeを使ったのですが、すぐに惚れ込みました。

VScodeには、誰もが開発することができ、誰もが使用することができる莫大なオープンソースの拡張機能が存在します。 開発に使える便利なツールを探しているのであれば、この記事がきっと役に立つことを願っています。

ここに紹介するツール全てがJavaScript専用というわけではありませんが、あなたや私のようなJavaScript開発者のためのツールです。 人間の五感のうち3つを強化し、JavaScript開発の流れを助けてくれるものです。

JavaScript開発者のための優秀なVSCodeツール26選、2019年版がこちらです。

1. Project Snippets

リストの先頭にくるのは、私がこれまでで最も気に入っているProject Snippetsです。 これはVSCode組み込みのUser Snippetsから派生したものです。

User Snippetsは、プロジェクト内で何度も再利用するための独自のコードスニペットを作ることができる機能です。 さて、再利用とはどういうことでしょうか。

たとえば、あなたは頻繁に以下のような定型文を書いているとします。

import { useReducer } from 'react'

const initialState = { // }

const reducer = (state, action) => { switch (action.type) { default: return state } }

const useSomeHook = () => { const [state, dispatch] = useReducer(reducer, initialState)

return { ...state, } }

export default useSomeHook

毎回全体を記述する(あるいはコピペする)かわりに、それを記載したスニペットを作成することで、プレフィックスを入力するだけで定型文が補完されるようにできます。 ファイル→基本設定→ユーザースニペットから、グローバルなユーザスニペットを作成可能です。

たとえばReactプロジェクトに独自のコードスニペットを作成したい場合は、ユーザースニペットから『新しいグローバルスニペットファイル』を選択し、"typescriptreact.json"と入力します。 開かれたファイルに以下を登録します。

typescriptreact.json

{ "const initialState = {}; const reducer = (state, action)": { "prefix": "rsr", "body": [ "const initialState = {", " //$1", "}", "", "const reducer = (state, action) => {", " switch (action.type) {", " default:", " return state", " }", "}" ] } }

拡張子が.tsxのファイルを作成し、"rsr"と入力すると、このスニペットを作成する候補が表示されます。 その候補を選択すると、以下のコードが一気に注入されます。

const initialState = { // }

const reducer = (state, action) => { switch (action.type) { default: return state } }

このユーザースニペットの問題点は、あらゆるプロジェクトに適用されるということです。 場合によってはそのほうが良いこともあるかもしれません。 しかし、特定のプロジェクトでは一部が異なるスニペットを登録したいといった場合には、この仕様が問題になってきます。 たとえばプロジェクトごとにディレクトリ構造が異なる場合などです。

{ "import Link from components/common/Link": { "prefix": "gcl", "body": "import Link from 'components/common/Link'" }, "border test": { "prefix": "b1", "body": "border: '1px solid red'," }, "border test2": { "prefix": "b2", "body": "border: '1px solid green'," }, "border test3": { "prefix": "b3", "body": "border: '1px solid magenta'," } }

常にディレクトリ構造が同じであれば、これで十分かもしれません。 しかし、一部のプロジェクトだけはLinkコンポーネントがcomponents/Linkに存在している、といったことがあったらどうでしょうか。

さらに、3つのborder testは値がシングルクオートで囲われていることに注目してください。 この文法はJavaScriptでは完全に合法ですが、しかしstyled-componentsを採用しているプロジェクトがあったらどうでしょうか。 この構文はstyled-componentsでは正しく動作しません。

これこそが、Project Snippetsが輝き始める理由です。

Project Snippetsを使うことで、ユーザースニペットをプロジェクト単位・ワークスペース単位に限定することができるようになり、他のプロジェクトに影響を出さないようになります。 すっごい便利！

2. Better Comments

コードはしばしば過密になるので、かつて書いたであろうコメントが見つけられず途方に暮れることがあるかもしれません。

Better Commentsを使うことで、コードに色をつけることができ、コメントをより目立たせることができます。

また、チームメンバーに向けて警告メッセージを!や?で強調することができます。

3. Bracker Pair Colorizer

初めてスクリーンショットを見たとき、これは絶対に取り入れなければならないと直感しました。 コーディングは私のパッションであり、そしてパッションは楽しいものでなければならないはずです。 この拡張機能は、私がやりたいことをもっと楽しむことを助けてくれます。

ちょっと面白い事実として、色が脳の血流と覚醒に影響を与えるという研究結果があり、つまりカラーアクセントを取り入れることは開発効率を上げるということです。 言い換えれば、ワークフローに色を取り入れることは、開発が楽しくなるだけではなく、健康の向上にも寄与するということです。

4. Material Theme

Material Themeは、VSCode全体の見た目を大きく変更することができるテーマです。

今まで作られた中でも、最も素晴らしいテーマのひとつです。 私にはちょっとこの素晴らしさを言い表す��彙がないのですが、とにかくよいものです。 今すぐこれをインストールして、私といっしょに今日から世界をマテリアルに変えていきましょう！ あるいは世界は変えずに単にテーマを使ってください。それもクールです。

5. @typescript-eslint/parser

もし現在TSLintを使用しているのなら、TSLintは廃止が表明されているので、あなたのTSLint設定をESLintに移植する作業を始めることを検討し始めるべきです。

将来性のある環境を確保するため、プロジェクトは徐々に@typescript-eslint/parserの採用に向かって動き始めています。 新しい環境では、これまでと互換性のあるルールと、ESLintのルールを使うことができるようになります。

6. Stylelint

私にとっては、あらゆるプロジェクトでStylelintの存在が必要不可欠です。

css/scss/sass/lessに対応していて、間違いを教えてくれ、CSSのコーディングスタイルを強制します。 自動整形プラグインと さらにコミュニティ製のプラグインにも対応しています。

7. Markdownlint + Docsify

あなたや他の開発者が、プロジェクトのブレインストーミングをするときどのようにメモを取っているのかはわからないが、私はメモをマークダウンフォーマットで取っています。

その理由は、まずわかりやすいことです。 markdownlintのような、マークダウンの記述をサポートするツールも数多くあります。 markdownlintは、.mdファイルのスタイルフォーマットをチェックしてくれるLinterです。 さらにクールなことに、自動整形もサポートしています。

さらに、私は個人的にDocsifyをあらゆるプロジェクトにインストールしたいと思います。 Docsifyはマークダウンと、さらにプロジェクト固有の拡張機能などもサポートしているからです。

8. TODO Highlight

私は自分のプロジェクトにはTODOを書く習性があるので、そのTODOをハイライトしてくれるTODO Highlightは非常に役立ってくれるエクステンションです。

9. Import Cost

Import Costは、初めてそれを試したときには非常に役に立つと思えるツールのひとつです。 しかししばらくすると、あなたはもうこのツールを必要としなくなっていることに気がつき始めます。 このツールが教えてくれることは、あなたは既に知っているからです。 それでもなお、最初のうちはこのツールを使ってみるととても有用です。

10. Highlight Matching Tag

開始タグに対応した終了タグがどこにあるかわからずに苛つくことがあるかもしれません。 Highlight Matching Tagがその不満を取り除いてくれるでしょう。

11. vscode-spotify

不満といえば、あなたは時々タブをVScodeから音楽プレイヤーに切り替え、楽曲を変更し、そしてまたVScodeに戻ってこなければならないので、とても不満に思っていることは間違いありません。 そこでこのvscode-spotifyの登場です。 これはなんと、VScode中でSpotifyを使うことを可能にしてくれます！

このエクステンションをインストールすると、ステータスバーで現在再生中の曲を確認し、ボタンひとつで楽曲を切り替えたり、spotifyをコントロールしたりと色々なことができるようになります。

11. GraphQL for VSCode

JavaScriptコミュニティのあらゆるところでGraphQLという単語が現れるようになり、さらに浸食し続けています。 GraphQLの構文強調表示手段を未だ手に入れていないのなら、そしてLintやオートコンプリートなどの恩恵を得たいのであれば、GraphQL for VSCodeをインストールするべきときです。

���はGatsbyJSをよく使うので、日常的にGraphQL構文と戯れています。

12. Indent Rainbow

これが必要な理由は、上記のHighlight Matching Tagと同じです。 Indent Rainbowは、インデントの深さを一目でわかるようにしてくれます。

13. Color Highlight

誰もが私に「これは何処で手に入れたのだ？」と尋ねてくる拡張機能のひとつです。 Color Highlightは、コード内の色をハイライト表示してくれます。

14. Color Picker

Color Pickerは、CSSのカラー表示、およびカラーコードを選択して生成するGUIを提供する拡張機能です。

15. REST Client

初めてREST Clientを使ったとき、それがPostmanのような既に評価が確立されたツールに勝るところがあるとは思えませんでした。 しかし、REST Clientを使えば使うほど、特にAPIをテストするときに、この拡張がどれほど素晴らしいものかに気付かされることが多くなりました。

使う準備は、新しいファイルを作成して以下の1行を書くだけです。

GETリクエストを送るのに必要な操作は、対象の行を選択し、コマンドパレットを表示(Ctrl + Shift + P)し、Rest Client: Send Requestコマンドを選ぶことです。 これでリクエストが送信され、1秒以内にレスポンスの詳細が新しいタブで開かれます。

URLの下にコードを数行追加するだけで、リクエストヘッダを追加したり、POSTパラメータを追加したりすることができます。

POST https://test.someapi.com/v1/account/user/login/ Content-Type: application/json

{ "email": "someemail@gmail.com", "password": 1 }

これだけで{ "email": "someemail@gmail.com", "password": 1 }がPOSTリクエストされます。

しかし、これでもその機能のほんの一部でしかありません。 もっと詳しく知るためにはドキュメントを読んでください。

16. Settings Sync

開発ツールで使用しているエクステンションの一覧をEvernoteなどに手動で書き出し、管理しなければならないことが非常に苦痛でした。 それもSettings Syncの存在を知るまでのことです。

この拡張機能はgistのアカウントを必要とします。 設定を保存したくなったときはいつでもShift + Alt + Uを押すことで、キーバインドやスニペットを含めた設定がgistアカウントにアップロードされます。

次回ログインしたとき、あるいは別のPCで起動したときなどは、Shift + Alt + Dを押すと設定が速やかにダウンロードされます。

17. Todo Tree

Todo Treeを使うと、アプリケーションに存在している全てのTODOがひとつのパネルで一覧表示されます。

18. Toggle Quotes

Toggle Quotesは、引用符をワンタッチで切り替えることができる楽しいエクステンションです。 テキスト文字列をテンプレートリテラルが使えるようにバッククオートにしたい、などといったときに便利です。

19. Better Align

Better Alignは、整形範囲を指定せずとも、コードを綺麗に整列させることができます。 使い方は、整形したい行でコマンドパレットを表示(Ctrl + Shift + P)し、Alignコマンドを選ぶことです。

20. Auto Close Tag

Auto Close Tagは、私が初めてVScodeを使った日に真っ先に役に立ったエクステンションです。 <divのようなタグを打ったあと、閉じタグを自動的に補完してくれます。 これはデフォルトのVScodeにはついていない機能で、私にとっては非常に便利です。

21. Sort Lines

アルファベット順に並んでいない配列は生理的に受け付けられませんよね。 幸いなことにSort Linesが、私の心を落ち着かせてくれます。

22. VScode Google Translate

これを便利だと思っているのは私だけかもしれません。 多言語対応のプロジェクトに関わっているため、VScode Google Translateは、エディタから離れたくない私にとっては有用です。

23. Prettier

Prettierは、JavaScript、TypeScript、その他のコードを綺麗に自動整形してくれるエクステンションです。

24. Material Icon Theme

他のアイコンテーマよりMaterial Icon Themeのほうが好みです。 なぜなら、特に暗めのテーマで作業する際は、他のアイコンテーマよりファイルタイプがわかりやすいからです。

25. IntelliSense for CSS Class Names in HTML

IntelliSense for CSS Class Names in HTMLは、HTMLのclass属性値を、ワークスペース内のCSS定義から補完します。

26. Path IntelliSense

Path IntelliSenseは、ファイル名を補完します。

Conclusion

これで私の記事は終わりです。 あなたの開発ツールに新しいお気に入りが見つかったのなら嬉しく思います。 今後の私の記事も期待していてください。

コメント欄

dev.toのコメント欄。

「今日の残り時間はインストールで潰れるわ」 「REST Clientがお気に入りすぎてつらい。」 「Intent Rainbow便利なんだけど、時々無効にしたいことがあるんだけどいちいち設定開かないといけないから面倒。」「そんなあなたにSettings Cycler」「これはすごい！」 「ワークスペースを複数開いてるときにそれぞれを区別するPeacockが便利。」 「Todo TreeとBetter Commentsを悪魔合体させたComment Anchorsってのを見つけたよ」 「コメントを自動調整してくれるRewrapが便利。」 「ピボットやグラフ表示とかできるData Previewってのを作った！」「これはいいね！今度紹介するよ！」「ありがとう！」

感想

おい27個あるぞ。 あとリストの後半のほう、紹介がどんどん雑になっていくのはもうちょっと頑張るのだ。

リストの幾つかは私も使っていますが、Bracket Pair Colorizer、REST Client、Settings Syncあたりはデフォルトで入ってるべきレベルで便利です。 Auto Close Tagは入ってなかったんだけど、閉じタグ自動補完機能は何故か動いています。 いったいどのエクステンションのおかげなのかはわからない。 Material Icon Themeは使ってるけど、Material Themeは個人的には見辛くて駄目だった。

VSCodeは単体でも十分に高機能なエディタですが、適切な拡張を入れることでさらに飛躍的に効率が上昇します。 みんなも自分に合った拡張機能を探してみてはいかがでしょうか。

なお整形はもはや人力で行う時代ではありません。 ファイル全体をコーディング規約に沿って整形するツールを導入しましょう。 私は現在PHPの整形にphpfmtを使っているのですが、これがクローズされてしまいました。 今後どうしたものか。

https://cdn.qiita.com/assets/qiita-fb-2887e7b4aad86fd8c25cea84846f2236.png

[hackernewsrobot]

Stylelint

https://stylelint.io/ Comments

[macronimous]

Quick and easy linting of #PostCSS using Stylelint (in #VSCode) https://t.co/YAZIgN8NRK #CSS #WebDevelopment https://t.co/0v4lWCb9DP

Quick and easy linting of #PostCSS using Stylelint (in #VSCode) https://t.co/YAZIgN8NRK #CSS #WebDevelopment pic.twitter.com/0v4lWCb9DP

— Macronimous.com (@macronimous) June 7, 2020

from Twitter https://twitter.com/macronimous June 07, 2020 at 05:33PM via IFTTT

[mbaljeetsingh]

The Best Tools to Help You Build Your Open-Source JavaScript Project

I recently published a package on npm: a data structures and algorithms library implemented in JavaScript.

The purpose of the project is to help others learn and understand data structures and algorithms from a JavaScript perspective.

Rather than containing only snippets of code with accompanying explanations, the project is meant to provide an eager learner with fully working code, good test cases, and a playground full of examples.

If you’re interested, the project can be found on npm here.

But, rather than talking about the project itself, what I want to write about today are all the neat tools I learned about and used while creating the project.

I’ve worked on tons of side projects and demos over the last six years, but each of them are very visibly just "pet projects". They in no way have the qualities that’d make them look professional or production-ready.

What I set out to create was something that could be considered a respectable open-source package. To do that, I decided my project would need proper documentation, tooling, linting, continuous integration, and unit tests.

Below are some of the tools I used. Each one serves a unique purpose. I’ve linked to the documentation for each package so you, too, can start utilizing these tools in projects of you own.

Note: This article assumes that you are already familiar with the process of creating a simple JavaScript package and publishing it on npm.

If not, the npm team has some great documentation on getting started that will walk you through the initialization of a project and the steps for publishing.

So let's get started.

Prettier

Prettier is an opinionated code formatter that automatically formats your code for you. Rather than simply using ESLint to enforce whatever formatting standards your team has agreed on, Prettier can take care of the formatting for you.

No more worrying about fixing your indentation and line widths! I’m using this specifically for my JavaScript, but it can handle many different languages.

Sample JavaScript before and after running Prettier

You can check out the Prettier docs here: https://github.com/prettier/prettier

stylelint

stylelint autoformats your CSS for you. Similar to Prettier, this tool helps you keep your CSS clean while taking care of the heavy lifting for you.

Sample output from running stylelint

You can check out the stylelint docs here: https://github.com/stylelint/stylelint

ESLint

ESLint handles all my other JavaScript linting for catching syntax errors and enforcing best practices.

Sample output from linting with ESLint in their playground environment

You can check out the ESLint docs here: https://eslint.org/

Commitizen

Commitizen is a CLI tool that walks you through writing your commit messages. It generates the commit message for you based on your input and ensures that the resulting commit message follows the Conventional Commits standard.

Commitizen command line interface when creating a new commit

You can check out the Commitizen docs here: https://github.com/commitizen/cz-cli

commitlint

commitlint verifies that your commit messages follow the Conventional Commits standard. As long as you use Commitizen to create your commit messages, you won’t run into any problems.

The real benefit of using commitlint is to catch commits that developers wrote on their own that don’t follow your formatting standards.

commitlint demo to show possible error messages

You can check out the commitlint docs here: https://github.com/conventional-changelog/commitlint

lint-staged

lint-staged runs linters against code that you’re trying to commit. This is where you can validate that your code is passing the standards being enforced by Prettier, stylelint, and ESLint.

lint-staged example that runs ESLint on checked-in code

You can check out the lint-staged docs here: https://github.com/okonet/lint-staged

Husky

Husky makes it easy to run Git hooks.

All the previously mentioned tools can be run through Husky on Git hooks like pre-commit or commit-msg, so this is where the magic happens.

For instance, I’m running lint-staged and my unit tests during the pre-commit hook, and I’m running commitlint during the commit-msg hook. That means when I’m trying to check in my code, Husky does all the validation to make sure I’m abiding by all the rules I’m enforcing in my project.

Sample Husky configuration that runs on the pre-commit and commit-msg Git hooks

You can check out the Husky docs here: https://github.com/typicode/husky

Rollup

Rollup is a module bundler for JavaScript. It takes all of your source code and bundles it into the files you actually want to distribute as part of your package.

The conventional wisdom seems to be if you’re building a web application, you should use webpack. And if you’re building a library, you should use Rollup.

In my case, I was building a data structures and algorithms library, so I chose to use Rollup. One benefit seems to be the output that Rollup generates is significantly smaller than what webpack outputs.

A very minimal Rollup config that creates an output bundle in the CommonJS format

You can check out the Rollup docs here: https://rollupjs.org/guide/en/

Standard Version

Standard Version helps automate your versioning and changelog generation.

Previously, I mentioned tools like Commitizen and commitlint for formatting your commits according to the Conventional Commits standard. Why, you may ask, is that helpful?

The answer, at least in part, is that by using a consistent commit message format, you can use tools that are able to understand what kind of changes your commits are making.

For example, are you fixing bugs? Adding new features? Making breaking changes people consuming your library should be aware of? Standard Version is able to understand your commit messages and then generate a changelog for you.

It’s also able to intelligently bump the version of your package according to the semantic versioning standard (major, minor, patch).

Sample Standard Version pre-release script that runs before version bumps

You can check out the Standard Version docs here: https://github.com/conventional-changelog/standard-version

Travis CI

Travis CI is a continuous-integration (CI) tool that can be integrated with GitHub, where my code happens to be hosted.

CI tools are important because they allow your commits to be tested yet again before you merge them into your master branch. You could argue using Travis CI and a tool like Husky duplicates functionality, but it’s important to keep in mind that even Husky can be bypassed by passing a --no-verify flag to your commit command.

Through GitHub, you can specify that your Travis CI jobs must be passing before code can be merged, so this adds one more layer of protection and verifies that only passing code makes it into your repo.

Travis CI output from a passing build

You can check out the Travis CI docs here: https://docs.travis-ci.com/

Codecov

Codecov is another CI tool that looks at your project’s code coverage.

I’m writing JavaScript unit tests using Jest. Part of my Travis CI job runs my test suite and ensures they all pass. It also pipes the code coverage output to Codecov, which then can verify if my code coverage is slipping or staying high. It also can be used in conjunction with GitHub badges, which we’ll talk about next.

Codecov dashboard (look at that beautiful 100% code coverage!)

You can check out the Codecov docs here: https://docs.codecov.io/docs

Badges

Have you ever looked at a project in GitHub and seen little badges near the top of the README? Things like whether the build is passing, what the code coverage is, and what the latest version of the npm package is can all be shown using badges.

They’re relatively simple to add, but I think they add a really nice touch to any project. Shields.io is a great resource for finding lots of different badges that can be added to your project, and it helps you generate the markdown to include in your README.

GitHub badges for my js-data-structures-and-algorithms npm package

You can check out the Shields.io docs here: https://shields.io/

Documentation

A little documentation goes a long way. In my project, I’ve added a README, CHANGELOG, contributing guidelines, code of conduct, and a license.

These docs serve to help people know what your project is, how to use it, what changes have been made with each release, how to contribute if they want to get involved, how they’re expected to interact with other members of the community, and what the legal terms are.

The CHANGELOG for my js-data-structures-and-algorithms npm package

You can check out the documentation for my project here: https://github.com/thawkin3/js-data-structures-and-algorithms

GitHub Templates

Did you know you can create templates in GitHub for things like bug reports, feature requests, and pull requests? Creating these templates makes it crystal clear, for example, what information someone should be expected to provide when filing a bug.

GitHub templates for bug reports and feature requests

You can check out the GitHub templates docs here: https://help.github.com/en/github/building-a-strong-community/about-issue-and-pull-request-templates

Closing

That’s it. When I first showed this project to some friends, one of them commented, “Oh my build tool soup!��� And he may be right. This is a lot. But I strongly believe that adding all the tooling above is worth it. It helps automate many things and helps keep your codebase clean and in working order.

My biggest takeaway from building this project is that setting up all of the tooling above isn’t as daunting as it may seem. Each of these tools has good documentation and helpful guides for getting started. It really wasn’t that bad, and you should feel confident adopting some (if not all) of these tools in your project, too.

Happy coding!

via freeCodeCamp.org https://ift.tt/3aIPTIz

[toddbirchard-architect]

Todd Birchard just completed issue HACK-1512: Bump stylelint from 13.6.1 to 13.7.0 Hackers and Slackers Bug Medium Todd Birchard toddbirchard/ghosttheme-stockholm

[t-baba]

A guide to overcoming CSS browser support issues

#377 — February 6, 2019

Read on the Web

Frontend Focus

How to Architect a Complex Web Table — Tables frequently appear on the web but aren’t particularly easy to design and code. This illustrated guide explains the anatomy of tables and how to build them properly.

Slava Shestopalov

Firefox 66 to Block Automatically Playing Audible Video & Audio — Version 66 is due in March, and it will block audible content by default. It will only allow a site to play audio or video aloud via the 'HTMLMediaElement' API once a page has had interaction to initiate (such as a user clicking ‘Play’).

Chris Pearce (Mozilla)

Free Visual Testing with Percy — Replace time-consuming manual QA to catch visual UI bugs automatically. Percy’s all-in-one visual testing solution makes it easy to test your UI across browsers and responsive breakpoint widths and review all visual changes with a single click.

Percy sponsor

A Guide To CSS Support In Browsers — A look at the issues you may face when certain CSS features behave differently across browsers (or not at all), with some tips for getting around such roadblocks.

Smashing Magazine

Bandwidth or Latency: When to Optimise for Which — A simple way to quickly and roughly work out whether your assets would benefit most from an increase in bandwidth or a reduction in latency.

Harry Roberts

WebExtensions V3 Considered Harmful? — A strong reaction to Chrome’s proposed changes to how Web extensions will work. “The Open Web Platform is alive and vibrant. The Browser Extension ecosystem is in jail, subject to unpredictable harmful changes decided by one single actor. This must change, it’s not viable any more.”

Daniel Glazman

HTML, CSS and Our Vanishing Industry Entry Points — Thoughts on CSS, frameworks and the vanishing entry points to web development. The author fears a loss of something that “has enabled so many people without a traditional computer science background to be here”.

Rachel Andrew

💻 Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Try Vettery — Vettery specializes in developer roles and is completely free for job seekers.

Vettery

📘 Articles, Opinion & Tutorials

▶  Time Traveler's Guide to Accessibility Mechanics — “the time has come to invent another solution that will let us encapsulate accessibility in the shadow DOM - and its called the Accessibility Object Model”.

Léonie Watson

Revisiting the abbr Element — An experiment in enhancing the <abbr> abbreviation element, creating a tooltip experience that works for touchscreen, keyboard, and mouse.

Ire Aderinokun

The Case for Vanilla Front-end Development — Makes the argument for framework-free front-end web development using vanilla HTML, CSS, and JS.

Ragnar Lonn

A Much Faster Way to Debug Code Than with Breakpoints or console.log — Wallaby catches errors in your tests and displays the results of expressions right in your editor as you type.

Wallaby.js sponsor

Navigation Should Be Boring — “Almost any part of an app can be a good place to add novelty, except for one: navigation. Navigation is different. Navigation should be boring.”

Allen Pike

Ways to Change an SVG Fill on Hover (and When to Use Them)

Cassie Evans

State of gRPC in The Browser — “With the release of gRPC-Web, gRPC is poised to become a valuable addition in the toolbox of frontend developers.”

Johan Brandhorst

Dropbox Paper As A Headless CMS — A quick look at how to turn Dropbox Paper into a headless CMS (and use it to publish content elsewhere). Here’s the code if you want to take a look.

Jasper Moelker

Setting Up a MongoDB Service Under Windows via PowerShell

Studio 3T sponsor

Basic Color Theory for Web Developers

Nicole Zonnenberg

🔧 Code and Tools

CSS Grid: Excel Spreadsheet — An impressive recreation of the Excel user interface using CSS Grid.

Olivia Ng codepen

stylelint: A Modern Style Linter — A linter with over 160 built-in rules to help “catch errors, apply limits and enforce stylistic conventions”. Here’s the repo.

stylelint

Lightning-Fast GraphQL Service for Ecommerce✌️PIM & Subscription Commerce 🎉

Crystallize sponsor

Cattle Grid: A Configurable CSS Flexbox Framework — A lightweight, basic flex CSS Grid built from simple Mixins.

Ruth Johnson

Usability Hike: A Chrome Extension to Find Usability Problems

Ulmo

   🗓 Upcoming Events

Frontend Developer Love, February 13-15 — Amsterdam, Netherlands — The biggest frontend developer / JS conference in the Netherlands.

An Event Apart, March 4-6 — Seattle, Washington — A 3-day conference with 17 sessions and a focus on digital design, UX, content, code, and more.

UpFront Conference, March 22 — Manchester, UK — A frontend conference 'open to everyone who makes for the web'.

SmashingConf, April 16–17 — San Francisco, California — A friendly, inclusive event which is focused on real-world problems and solutions

by via Frontend Focus http://bit.ly/2TwbfRb

[entlizm]

via HTML5タグが付けられた新着記事 - Qiita