// 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
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
大手ITスタイルガイドがベースGoogleやMicrosoftなど大手IT企業の英語スタイルガイドの基準がベース。一般的な英語表記から外れません。
Help us understand the problem. What is going on with this article?
予防に勝る防御なし - 堅牢なコードを導く様々な設計のヒント / Growing Reliable Code PHPerKaigi 2022
PHPerKaigi 2022 2022/04/10 10:40〜 Track A レギュラートーク（40分） PHP はバージョンを追う毎に型宣言、例外、表明、列挙型などの機能が大幅に強化され、堅牢なコードを書くための機能が充実してきました。それらの機能はどう使うと効果的なのでしょうか。 本講演では PHP 8.1 をベースにして、誤りを想定してチェックするのではなく、そもそも誤りにくい設計とはどのようなものか、つまり「予防」の観点を軸足に、堅牢なコードを導くための様々な設計のヒントをご紹介します。 Agenda - 型宣言 - 列挙型 - ドメインモデリング - 不変性と等価性 - 完全性 - レイヤーと責務
「オブジェクト指向するとプログラムが読めなくなるから禁止」のような話は昔からあって、新しい技術についてこれない人を揶揄するようなニュアンスで使われていましたが、実際にはこれはオブジェクト指向迷路にうんざりした現場での率直な意見だと思います。 オブジェクト指向は、まじめにやるほどプログラムを読みにくくするという性質をもっています。 ※ 使い方次第というコメントついてますが、だからこそちゃんと性質をしっておく必要があると思います。 オブジェクト指向の代表的な指針を３つあげると次のようなものがあります。 オブジェクト同士の連携としてプログラムを組む 単一責務の原則 インタフェースと実装の分離 まず、オブジェクト同士の連携でプログラムを組むと、コードが飛びまくって追いにくくなります。そして単一責務の原則により、小さいクラスが大量に生成されて、追いにくさがさらにあがっていきます。 ダイクストラ先生が
【追記あり】プログラミング初心者がTwitterで質問したら「スクールではこんなクソコード教えてんのか」とキツい指摘が飛んできた
こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ
確かに、パッと見で 「なんだこれ？」 になりますね。 意味のないコメントとして else 句ごと削除してしまって良さそうにみえます。 しかし、実はこの「何もしない」コードは、 プログラミング（理論）的に面白い側面を持っている ので、簡単に記事にまとめてみたいと思います（記事中では Swift に似た擬似コードを使用します）。 キーワード if 式、網羅的パターンマッチ、参照透過、副作用、モナドと単位元 else 句が省略できる条件 例えば、次のコード例を考えてみます： let array: Array<Int> = ... var positiveArray: Array<Int> = [] // var = 可変変数 for x in array { if x > 0 { positiveArray.append(x) } else { // 何もしない } } ここでは array か
竹雄 on Twitter: "プログラミングをしていて”dataの複数形”を使いたくなることが年に365回くらいあるんですけどどうするのが正解なんですか？"
プログラミングをしていて”dataの複数形”を使いたくなることが年に365回くらいあるんですけどどうするのが正解なんですか？
検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃える インタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか？ あなたは仲間です、多くの人が経験していると思います。 この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。 まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは
なぜ <div> に onClick がダメなのか？
変数名とか関数名つけるの難しい
長過ぎるとわかりにくいし端折りすぎると何がなんだかわからなくなる
Conventional Commits 人間と機械が読みやすく、意味のあるコミットメッセージにするための仕様 Conventional Commits 1.0.0 概要 Conventional Commits の仕様はコミットメッセージのための軽量の規約です。 明示的なコミット履歴を作成するための簡単なルールを提供します。この規則に従うことで自動化ツールの導入を簡単にします。 コミットメッセージで機能追加・修正・破壊的変更などを説明することで、この規約は SemVer と協調動作します。 コミットメッセージは次のような形にする必要があります: 原文： <type>[optional scope]: <description> [optional body] [optional footer(s)] 訳： <型>[任意 スコープ]: <タイトル> [任意 本文] [任意 フッター] あな
今回のエントリでは先日、僕が勤めているソニックガーデンで話題になったプログラミング関連の小ネタを書きます。 それは何かというと、「プログラミング初心者は変数名やメソッド名を略さない方がいい」という話です。 長い変数名やメソッド名はつい略したくなります。 実際、僕も長い名前を略すときはよくあります。 ですが、略称を使うのは長年の経験から「この略称は一般的だから誤解を招くことはきっと少ないだろう」とか「前後の文脈から、変数の中身は誰が見ても明らかだろう」という想像が付いた場合だけです。 一方、プログラミング初心者の人は経験が浅いため、「一般的かどうか」とか、「誤解が発生しないかどうか」といった判断ができません。 そのため、他の人が見たときに「え、何この変数名？」と思ってしまうような略称を付けてしまう恐れがあります。 たとえば、先日のコードレビューで、初心者の人がrev_noという名前の変数を定
詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと思います。 CSSの新機能を効果的にうまく使った、新時代のCSSリセットを紹介します。 CSSリセットとして使用するだけでなく、CSSの勉強にもなるCSSリセットです。 @acab/reset.css -GitHub :where()とか新しいビューポート単位など、CSSの各新機能については以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！ CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる CSSの疑似クラス「:focus-within」が素晴らしい
プログラミングで日本語変数名使ったて良いじゃん
3/30 に X で Terraform がトレンド入りしていて何事かと思ったら Terraform が公式ドキュメントとしてスタイルガイドを出したようです。 Terraform Style Guide いままで Terraform のスタイルに関して信頼できるドキュメントといえば Google Cloud の Terraform を使用するためのベスト プラクティス ぐらいしか知らなかったのですが、 Terraform 公式がようやく出してくれてありがたい限りです。 これでわざわざ社内の Terraform 規約を設けずとも「公式ドキュメントに従いましょう。」の一言で済みます。 ということで一通り読んだのでまとめました。 原文だと構文の簡単な使い方なども書いてありますが以下の要約ではだいたい省略しています。 詳細は原文を読んで確認してください。 要約 スタイルガイドについて コードのスタ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Reactにおけるスタイリング手法まとめ
開発初期に「どのスタイリング手法でいくべきか」などとよく悩むと思います。 筆者ならそこで「悩むよりもとりあえず書き始めよう」と言いたいところですが、規模が大きいプロジェクトなどでは途中でスタイリング手法を変えようとすると大きな負担になったりと柔軟な変更ができないことがあります。 だがしかし！！ Google先生で調べようものなら 「CSS-in-JSをやめた理由」 「CSS Modulesをやめた話」 などなど... じゃあ何ならええねん！ そもそもReactにおけるスタイリング手法は多種多様で、時代によって流行が移り変わっていくものでもあり、Googleのトップに来るのは古い情報ばかりです。 そんな悩めるあなたにこの記事では筆者が利用したことのあるスタイリング手法を、CSS-in-JSやCSS Modulesに限らず、筆者の使用感もふまえて紹介していきます。 古い情報だけでなく、zero
クソコードを見る度に怖くなる
業務で結構な量のコードレビューを毎日してるんだけど 最近マジでクソコードが多い 適当に書き殴ったコードなんじゃなくて とにかく思い付いたところからコーディングして 実際に動作させたら思い通りに行かないから継ぎ接ぎで修正して 最終的に機能を満たしたから完成、PR作成、レビューよろしく、みたいなのが本当に多い 無駄な処理が多数含まれているのなんて当たり前だし 機能を満たせてるように見えるコードも境界値的なところでバグだらけだったり そういうコードが特に最近増えている 問題なのはレビューで指摘した部分が実は今回のPRではなくて既に業務システムに組み込まれてる、とかいうのも多々あって めちゃくちゃヒヤリとするようなコードも多い レビューは数人でやってるんだけど、こういうコードを通してしまう人物に2，3人心当たりがあるし とはいえ人材不足で仕方ないんだろうな、という気がしている 多分だけどソフトウェ
Facebook CSS-in-JS Solution Stylex Introduced at React Finland 2021
InfoQ Software Architects' Newsletter A monthly overview of things you need to know as an architect or aspiring architects. View an example
Plasmic is an open-source visual editing and content platform for building websites and apps. Integrate with existing codebases. Ship incredibly fast.
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
早期リターンを禁止されるつらさ
StyleX
The styling system that powers facebook.cominstagram.comwhatsapp.comthreads.netGet StartedThinking in StyleX
GitHub - vanilla-extract-css/vanilla-extract: Zero-runtime Stylesheets-in-TypeScript
Zero-runtime Stylesheets-in-TypeScript. Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time. Basically, it’s “CSS Modules-in-TypeScript” but with scoped CSS Variables + heaps more. 🔥 All styles generated at build time — just like Sass, Less, etc. ✨ Minimal abstraction over standard CSS. 🦄 Works with
uber-style-guide-ja/guide.md at master · knsh14/uber-style-guide-ja
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - sqlfluff/sqlfluff: A modular SQL linter and auto-formatter with support for multiple dialects and templated code.
Although SQL is reasonably consistent in its implementations, there are several different dialects available with variations of syntax and grammar. SQLFluff currently supports the following SQL dialects (though perhaps not in full): ANSI SQL - this is the base version and on occasion may not strictly follow the ANSI/ISO SQL definition Athena BigQuery ClickHouse Databricks (note: this extends the s
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - facebookincubator/infima: A UI framework that provides websites with the minimal CSS and JS needed to get started with building a modern responsive beautiful website
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
More Control Over CSS Borders With background-image | CSS-Tricks
You can make a typical CSS border dashed or dotted. For example: .box { border: 1px dashed black; border: 3px dotted red; } You don’t have all that much control over how big or long the dashes or gaps are. And you certainly can’t give the dashes slants, fading, or animation! You can do those things with some trickery though. Amit Sheen build this really neat Dashed Border Generator: The trick is u
Proportio.app
Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.
この記事で伝えたいこと ここでは、私が設計を勉強しながらコーディングした経験から、初心者でも簡単に実践できる簡単なルールを3つピックアップしました。 一つのクラスは150行以内に収める 循環参照はしない 継承はしない この3つを守れば、破滅的なクソコードであれば割と簡単に防げるかと思います。 この記事における「破滅的なクソコード」は「一切のリファクタリングの余地も残されていないほどのコード」を意味し、この記事の目的は、「破滅的なクソコード」から、「最低限リファクタリングすればなんとかなるコード」になる程度の手法を紹介することです。 マサカリは大歓迎ですがお手柔らかにお願いします。 読む上で留意して欲しいこと この記事はあくまで 「初心者のための破滅的なクソコードを書かないための簡単な方法論」 であって、「効率的で分かりやすい設計の方法論」ではありません。 この3つは「銀の弾丸」ではないです
![[初心者向け]破滅的なクソコードを書かないために意識したい3つのこと - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/dfc9cb7a7ae60a3ca220948d1de61937409038fa/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJTVEJUU3JUEwJUI0JUU2JUJCJTg1JUU3JTlBJTg0JUUzJTgxJUFBJUUzJTgyJUFGJUUzJTgyJUJEJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgyJTkyJUU2JTlCJUI4JUUzJTgxJThCJUUzJTgxJUFBJUUzJTgxJTg0JUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFCJUU2JTg0JThGJUU4JUFEJTk4JUUzJTgxJTk3JUUzJTgxJTlGJUUzJTgxJTg0MyVFMyU4MSVBNCVFMyU4MSVBRSVFMyU4MSU5MyVFMyU4MSVBOCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OGRjNmFiYjBmYzRhNDk5NzU4NmNmNWIwMzY2NDY5OTY%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzYWthc3R1ZGlvXyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzBjZmYwYjU1YTkwMDc5MDY3MWI4OTA3NjM0OWY3NGI%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D04db432a4edc064f3d26fb16f5b4291f)
3行 クソコードは無知から生まれる 個人的にコーディングのときに心掛けていることのまとめ ここに書いてあるのが全て正しいわけではないので参考程度に、という保険 クソコードを滅ぼしたい おはようございます。デブです。 早速タイトルと趣旨が食い違っているような気がします。 さて「クソコード」という言葉があるようにコードにもピンキリがあります。 因みにピンキリの語源はポルトガル語のpintaとcruzらしいです(諸説あります)。 時としてクソコードは見た者の精神を破壊します。 私の場合は、年上で先輩で異性であんまり話したことのない方のコードをレビューしろと言われたときに「今まで何やってきたの？」という感情を常識と礼節でねじ伏せて柔らかく表現しようと言葉を選びまくったときが一番精神にキました。 虚空に口汚く文句叫ぶのが一番冷静になれる方法だと学びました。リモートワークで丁度叫びやすいので毎日叫んで
PlainStyle (プレーンスタイル)
PlainStyle を友だちに教える 𝕏 Facebook はてブ 説明 文字を学術用の記号に置き換えることによって、擬似的にフォントをつけることができるツールです。 Unicode に対応しているアプリケーションであれば、X 以外にもコピペできます。 テキストの一部を選択してからフォントを選ぶと、その部分だけフォントが変わります。 フォントを指定できるのは英数字のみです。 length は X での消費文字数の目安です。 ご注意 重要な文書には使わないでください。音声読み上げやその他の機械処理で不具合が生じる恐れがあります。 URL やハッシュタグにフォントを付けるとリンクにならないかもしれません。 古い端末や OSバージョンによって正しく表示されない可能性があります。 当サイトは趣味で運営されています。環境によってうまく動かないかもしれませんが勘弁してください。 偽サイトにご注意く
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google TypeScript Style Guide
"レガシー"と言われないためのJavaScript再入門
IT英語スタイルガイド | IT英語スタイルガイド
プログラムの可読性を上げるための条件分岐を減らす方法7個 - Qiita
オブジェクト指向はコードを複雑に読みにくくする - きしだのHatena
DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ
もう初回コードレビューはずんだもんに任せる時代になった
こんなコードは嫌だ、古い書き方のコード駆逐したい（とりあえず９つ） - Qiita
else 句に「// 何もしない」コメントを書く意味について
CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック
Conventional Commits
プログラミング初心者は変数名やメソッド名を略さない方がいいよ、という話 - give IT a try
CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css
Terraform 公式がスタイルガイドを出したので読んで要約した - Qiita
guide/style.md at master · uber-go/guide
Go言語でプログラマーが進化する過程 - Qiita
Plasmic | Build powerful apps fast— without the limits
GitHub - mvdan/gofumpt: A stricter gofmt
[初心者向け]破滅的なクソコードを書かないために意識したい3つのこと - Qiita
個人的にコーディングで心掛けていること - Qiita
togetter.com
jin115.com
chimolog.co
jafmate.jp
news.yahoo.co.jp