「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の
// Good: choose between two options as appropriate (see below). import * as ng from '@angular/core'; import {Foo} from './foo'; // Only when needed: default imports. import Button from 'Button'; // Sometimes needed to import libraries for their side effects: import 'jasmine'; import '@polymer/paper-button'; Import paths TypeScript code must use paths to import other TypeScript code. Paths may be r
大手ITスタイルガイドがベースGoogleやMicrosoftなど大手IT企業の英語スタイルガイドの基準がベース。一般的な英語表記から外れません。
プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da
Go の命名規則 | micnncim
本記事は Go Advent Calendar 2019 11 日目の記事です。 Go はシンプルな言語機能・シンタックスが特徴であり、命名規則にもそのシンプルさが表れています。 本記事では、公式や著名な Go エンジニア、OSS などから見られる Go らしい命名規則を紹介します。 今更なテーマかもしれませんが、意外にも公私共々で命名規則が意識されていないコードを時折見かけるので、自戒も込めて記します。 誤った内容があれば Twitter でご指摘いただければと思います。 パッケージ名簡潔にするEffective Go では、short, concise, evocative なパッケージ名が望ましいとされます。 これはパッケージ名に限らずほとんどあらゆる命名において役立つ指針だと思います。 また、「パッケージ名は一言で何をするかを表すエレベーターピッチだ」という Dave Cheney
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
背景 (Background) どのシェルを使うか (Which Shell to Use) Bash は実行が許可された唯一のシェルスクリプト言語である。 実行可能ファイルは #!/bin/bash と最小限のフラグで始めなければならない。シェルオプションの設定に set を利用することで、 スクリプトを bash script_name として呼び出してもその機能を損なわないようにせよ。 全ての実行可能シェルスクリプトを bash に制限することで、全てのマシンにインストールされた一貫したシェル言語を得る。 これに対する唯一の例外は、コーディング対象によって強制される場合である。この1つの例として、Solaris SVR4 パッケージは、どんなスクリプトにも plain Bourne shell であることを要求する。 いつシェルを使うか (When to use Shell) シェル
Linuxカーネルの開発者であるLinus Torvalds氏は5月29日(米国時間)、「LKML: Linus Torvalds: Re: clean up kernel_{read,write} & friends v2」において、ソースコードの1行当たりの文字数を80までとする現在の制限によって生まれる過度の改行はソースコードにとって良くないことであり、さまざまな問題を引き起こすと指摘した。 同氏はメールの中で次のような意見を述べ、制限を緩和する方向の意見を示している。 grepのようなコマンドは基本的に行単位で検索を行うので、過度に改行されたソースコードだと扱いにくい。 すでに多くのユーザーが80カラムの幅のターミナルを使用せず、より広げて使用している。同様の理由で、高さも25行よりも広げて使っている。 少数のユーザーが小さいターミナルウィンドウを使用しているという理由で、80カラ
This article is about a few quick thumb rules I use when writing shell scripts that I’ve come to appreciate over the years. Very opinionated. Things¶ Use bash. Using zsh or fish or any other, will make it hard for others to understand / collaborate. Among all shells, bash strikes a good balance between portability and DX. Just make the first line be #!/usr/bin/env bash, even if you don’t give exec
.button { display: block; margin: 50px auto 0; padding: 8px 20px; border: solid 2px #ddd; border-radius: 10px; font-size: 16px; } See the Pen button_01 by Otsuka Yuhi (@boltkeep) on CodePen. パット見、いい感じのボタンです。 しかし、このボタンには一点重大な欠点があります。 それは、このボタンは必ず上に50pxの余白が付き、かつ中央寄せされるということです。 デザイナー登場 デザイナーがこう言いました。 「ボタンを横に２つ並べたい」 「ボタンとボタンの間隔は20px」 「その上で中央寄せで！」 「あと、上のマージンは外しといて！」 さて、どうしましょう？？display: flex;でしょうか？
生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。 僕の入社の経緯や業務内容についてはこちらからご覧いただけます！ デザインシステムとは デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。 しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。 古い物ですと1975年に
Go をセキュアに書き進めるための
「ガードレール」を整備しよう / Let's Build Security Guardrails For Your Go Programs!
Go Conference 2021 Spring (B7-S) で使用した資料です。 - セッションの詳細: https://gocon.jp/sessions/session-b7-s/ - 発表者: https://twitter.com/lmt_swallow - 資料に誤りがあれば是非こちらにご連絡ください
3/30 に X で Terraform がトレンド入りしていて何事かと思ったら Terraform が公式ドキュメントとしてスタイルガイドを出したようです。 Terraform Style Guide いままで Terraform のスタイルに関して信頼できるドキュメントといえば Google Cloud の Terraform を使用するためのベスト プラクティス ぐらいしか知らなかったのですが、 Terraform 公式がようやく出してくれてありがたい限りです。 これでわざわざ社内の Terraform 規約を設けずとも「公式ドキュメントに従いましょう。」の一言で済みます。 ということで一通り読んだのでまとめました。 原文だと構文の簡単な使い方なども書いてありますが以下の要約ではだいたい省略しています。 詳細は原文を読んで確認してください。 要約 スタイルガイドについて コードのスタ
ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発（Component Driven Development）と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう？ 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ
この記事では、デザインシステムを作成するときの基本ガイドをまとめています。 この記事は3つのパートで構成されています。 デザインシステムを理解する（デザインシステムとは何か、いつ作るべきか？） デザインシステムの作成（作成プロセスとやっておきたい項目） デザインシステムの具体的なサンプル例（デザイナーとデベロッパー、それぞれの観点より） デザインシステム追加の検討事項（その他のコンセプトや参考文献など） *この記事では、Webサイトやアプリ、オンラインサービスなどを表す包括的な用語として、「プロダクト（Product）」という言葉を使用しています。 この記事のコンセプトをイラスト化するために作成した、デザインシステムを公開しています。ご自由にお使いください。 Basic Design System – Figmaファイル デザインシステムを理解しよう デザインシステムとは？ デザインシステ
Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive. Principles#Get to know our foundational thinking and how we put it into action across our design system. Learn about our principles
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
styleguide
Background Which Shell to Use Bash is the only shell scripting language permitted for executables. Executables must start with #!/bin/bash and a minimum number of flags. Use set to set shell options so that calling your script as bash script_name does not break its functionality. Restricting all executable shell scripts to bash gives us a consistent shell language that’s installed on all our machi
TypeScript style guideThis is the style guide for the TypeScript language that was based on the one that is provided by Google. It contains both rules and best practices. Choose those that work best for your team. If you have a suggestion on how to improve this style guide please check the Changing the style guide below. This Style Guide uses RFC 2119 terminology when using the phrases must, must
The Gradual Design System: How We Built Slack Kit - Slack Engineering
A group of engineers, designers, and writers began to centralize and standardize components. We named it Slack Kit. This post was co-written with Zack Sultan, Lead Product Designer at Slack In 2016, Slack was two years old and already used by millions of people. Our codebase had grown rapidly, and like many companies that focused on product/market fit, our code was built in a way that favored time
「楽天カードらしさ」を追求した楽天カードのデザインシステムの導入と今後について｜Rakuten Card Designs
楽天グループはさまざまなサービスを展開しており、楽天カードのお客様においても楽天カードだけではなく楽天市場や楽天銀行など、ほかの楽天グループのサービスも多くのお客様にご利用いただいています。 それぞれご提供するサービスは別ですが、お客様にとっては1つの「楽天ブランド」であるため、楽天グループ共通のデザインを踏襲しながらも、金融サービスに特化した顧客体験を提供できるよう、楽天カードのデザインチームによりカード事業独自で「楽天カードのデザインシステム」と呼ぶデザインシステムを構築し、運用しています。 今回の記事では、そんな「楽天カードのデザインシステム」についてご紹介していきます。 デザインシステムとはこんにちは、UIデザインチームのVideoです。 初めに、デザインシステムとはどういうものなのか、ご説明します。 デザインシステムとは、ユーザーがどのデバイス・サービス・プロダクトを利用しても一
Ruby Style Guide
This Ruby style guide recommends best practices so that real-world Ruby programmers can write code that can be maintained by other real-world Ruby programmers. A style guide that reflects real-world usage gets used, while a style guide that holds to an ideal that has been rejected by the people it is supposed to help risks not getting used at all - no matter how good it is. The guide is separated
Best Practices for Working with Configuration in Python Applications - Preferred Networks Research & Development
Home Blog Best Practices for Working with Configuration in Python Applications Most computer applications can be configured to behave a certain way, be it via command line flags, environment variables, or configuration files. For you as a software developer, dealing with configuration comes with challenges such as parsing untrusted input, validating it, and accessing it on all layers of your progr
前置き 本記事では、Googleスタイル形式でのPython Docstringの書き方について必要最低限に絞って説明する。 これから、Python Docstringを覚えようとしているエンジニアの参考になれば、幸いである。 Python Docstringとは Pythonにおけるクラスや、メソッド(関数)についての説明を記載したコメント文のこと。 Docstringは、__doc__という変数に格納されている。 以下は、printメソッドのDocstringを表示させたもの。 >>> print(print.__doc__) print(value, ..., sep=' ', end='\n', file=sys.stdout, flush=False) Prints the values to a stream, or to sys.stdout by default. Opti
Proportio.app
Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.
SQL Style Guide
A set of conventions and guidelines for writing SQL at GitLab SQL Style Guide This guide establishes our standards for SQL and are enforced by the SQLFluff linter and by code review. The target code changes that this stile guide apply to are those made using dbt. If you are not on the Data Team or you are developing SQL outside of dbt, keep in mind that the linting tools may be more difficult to a
コンテンツスタイルガイドとは、ブランドが公開するコンテンツの作成基準を、ライティングチームや同僚が理解できるようにするためのものです。特に、あなたの会社に複数のライターが在籍している場合、文法や表記ルール、文章のスタイルを定めておくことは、次の３つの点で役に立ちます。 １.ブランドの「らしさ」に一貫性が生まれる 表現や言い回しに調和が取れていると、コンテンツはより研ぎ澄まされ、読者に信頼感を与えることができます。それはウェブページ、ソーシャルメディア、ニュースレター、ブログ記事に限りません。アプリのユーザーインターフェースに表示するマイクロコピーを書く場合においても、スタイルガイドがあれば、プロダクトの個性や「らしさ」に一貫性を与えることができます。 ２.ライティングの上での誤りを防げる 使ってはいけないスラング、避けるべき専門用語、または日付の正しい表記方法まで、スタイルガイドではっきり
Vue.js
スタイルガイド このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための素晴らしい参考資料となります。しかし、どんなスタイルガイドもすべてのチームやプロジェクトにとって理想的であるとは考えていません。そのため、過去の経験、周囲の技術スタック、および個人的な価値観に基づいて、注意深い逸脱が奨励されます。 ほとんどの場合、一般的な JavaScript や HTML に関する提案も避けています。セミコロンや末尾のカンマの使用は気にしません。 HTML の属性値がシングルクオートで囲まれているかダブルクオートで囲まれているかも気にしません。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません。 最後に、私達
Announcing Global Styleguides—connecting design systems to engineering
One year ago today we launched Zeplin 2.0, adding components to Styleguides and we’ve heard amazing feedback from teams around the world. Styleguides in Zeplin help your team create consistent experiences by sharing common components, text styles and colors throughout your design system. As we talked with users in this past year, we learned more about a limitation of Styleguides: each project in Z
DesignGapp
Simple, intuitive design documentation for projects and styleguides.
Duomly Posted on Oct 28, 2019 • Updated on Mar 30, 2020 • Originally published at blog.duomly.com This article was originally published at: https://www.blog.duomly.com/good-and-bad-practices-of-coding-in-python/ Python is a high-level multi-paradigm programming language that emphasizes readability. It’s being developed, maintained, and often used following the rules called The Zen of Python or PEP
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SEOに強いHTMLの書き方」についての個人的な見解
Google TypeScript Style Guide
IT英語スタイルガイド | IT英語スタイルガイド
なぜ default export を使うべきではないのか？
GoogleのShell Style Guideの邦訳 - Qiita
Linuxカーネルコード、1行の文字制限を80字から100字まで緩和
Shell Script Best Practices — The Sharat's
UIコンポーネントにはマージンをつけるな！絶対にだ！！ - Qiita
グッドパッチエンジニアが選ぶ、推しデザインシステム10選｜Goodpatch Blog グッドパッチブログ
Terraform 公式がスタイルガイドを出したので読んで要約した - Qiita
静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って
デザインシステムの作り方徹底ガイド 参考にしたい導入事例まとめ
Spectrum, Adobe’s design system
GitHub - knsh14/uber-style-guide-ja
TS Style Guide
GoogleスタイルのPython Docstringの入門 - Qiita
❓コンテンツスタイルガイドとは？ | contents style guide
Good and Bad Practices of Coding in Python