はじめに、デフォルトCSSについて HTMLのタグには、デフォルトCSSが設定されています。 例えば<h1>タグはfont-sizeを設定したわけでもないのに大きくボールドで表示されます。 <p>タグも同様にmargin系のプロパティを設定していないのに下に空きができます。 CSSでスタイルを設定しようとすると、思ったとおりの見栄えが実現できないことがよくありますが、理由の1つがこのデフォルトCSSです。 デフォルトCSSの挙動は把握する必要はありますが、一方でデフォルトCSSはブラウザごとに微妙に設定が違います。 これをある程度揃える目的でリセットCSS、ノーマライズCSS、サニタイズCSSが存在します。 デフォルトCSSを揃えるCSS 下記のHTMLを表示させることを考えます。 <h1>&lt;h1&gt;でマークアップされた見出し</h1> <h2>&lt;h2&gt;でマークアップ

Help us understand the problem. What is going on with this article? はじめに 軽いノリでgitコミットに署名しようとgpg (GNU Privacy Guard)について調べたところ、思いの外複雑で全体像を把握するのに苦労しました。 そこでgpgに頭を悩ませている人を一人でも多く救うべく、この記事を書きました。内容に誤りがありましたら、修正リクエストを送っていただけると幸いです。 gpgのバージョンについて この記事を執筆している2016年9月18日の時点で、gpgには3種類のバージョンが存在し、それぞれ開発が続いています。 gpg modern (2.1.x) gpg stable (2.0.x) gpg classic (1.4.x) gpg1.4はシングルバイナリであり、それ単体で動作します。一方gpg2.0以降は、

Chrome 79以下や他ブラウザのデフォルト値。 Chrome 80からこの値を設定する場合、Secure属性も必須となる。 Aサイトに対し、Bサイトからどのようなリクエストがあっても、発行したサイトでCookieヘッダーに含める (Cookieを使用する) 図にすると以下のようになります。 Strict 外部サイトからのアクセスではCookieを送らない。 Lax 外部サイトからのアクセスはGETリクエストのときだけCookieを送る。 None 従来通りの動き。 【追記】なおChrome 80以降でSecure属性を付けずSameSite=Noneを指定した場合、set-cookie自体が無効になります。 セキュリティ上の効果 CSRF対策になります。 CSRF (クロスサイト・リクエスト・フォージェリ) とは、 WEBサイトがユーザー本人の意図した動作であることを検証していないため

データ・リテラシーと言う言葉を聞いたことありますか？ 簡単に言うと、「データを読むことができて、データを理解でき、データを使って議論でき、データから得られた情報を使って意思決定ができる」能力のことです。 ダレル・ハフによって今から70年前になる1950年代に書かれた「統計でウソをつく方法 (How to Lie with Statistics) 」というこの世界では古典となる本があります。この本ほどデータリテラシーがいかに重要かをわかりやすく簡潔に説いた本はないと思うのですが、その教えは70年経った今でもまるで昨日書かれたかのように新鮮です。 むしろ、私達市民のデータリテラシーは当時と比べてあまり変わっていないかのようで残念です。 さらに、今日のようにデータがいよいよ簡単に手に入るようになり、簡単に分析できるようなツールも出てくるようになると、情報の消費者としてだけでなく、むしろ情報の供給

はじめに 少し前から話題になっているが、日本の労働生産性はG7で最も低いらしい。 日本生産性本部資料より https://www.jpc-net.jp/intl_comparison/intl_comparison_2018_press.pdf 日本は人口減少に突入していることもあって、「作業の効率化」や「自動化・省力化」をいうフレーズをあらゆる業種で聞くようになった。 ITエンジニアは、あらゆる職業の中でも最も効率化、自動化をして生産性を高められるといっても過言ではないだろう。プログラマの三大美徳(「怠惰」「短気」「傲慢」)にもあるように、同じことを何度もやらない、楽をするためにがんばるという生産性を意識した感性が重要視されているからだ。 生産性を高めることで、勉強する時間が作れたり、新しいことを経験したりするなどしてさらにスキルアップができ、さらに生産性が上がるという好循環を作り出すこ

Gitのコミットメッセージの書き方 自分なりにまとめてみました。Git歴浅いので、意見募集中です。 （2014年12月17日追記） 想像以上にたくさんの方にストックなりはてブなりいただいたので、はてブでなるほど！と思ったコメントをもとに少し修正・加筆してみました。 （2022年1月4日追記） 最新の書き方をこちらに書きました。 https://zenn.dev/itosho/articles/git-commit-message-2023 原則 以下のフォーマットとします。 1行目：変更内容の要約（タイトル、概要） 2行目 ：空行 3行目以降：変更した理由（内容、詳細） 日本語でも英語でもOKですが、リポジトリで統一してください。 1行目 コミット種別と要約を書きます。フォーマットは以下とします。 [コミット種別]要約 コミット種別 以下の中から適切な種別を選びます。 （多すぎても悩むので

株式会社オズビジョンの@terra_yuccoです。 最近会話こそ日本語ですが、仕事で英語を使う割合が異常に増え（え、なんでかって？察してくださいｗ）、受験知識とGoogle翻訳とGoogle検索を駆使して対応しているので、よく使うものを自分用を兼ねてまとめてみようと思います。 同じような業務に急遽回されたような方の助けになれば幸いです。 なお本稿はオズビジョン初☆エンジニアによるアドベントカレンダーのトップバッター記事となっております。よろしければぜひ購読いただき、明日以降の他メンバーの記事もご覧ください。 私はこの通り若干文系寄りなことを書いていますが、他の日は、python & re:dash や react、最新の php 7.2 やはたまたチーム作りのことまで、さまざまなテーマの記事が書かれる予定です。 本題 と、いうことで、ざっくりと自分の一か月のチャットログ & Pull R

Jeff Deanとは GoogleのSenior Fellow. Googleの基盤となる分散システムのほぼ全てに中心的に関わり、圧倒的なエンジニアリング能力を発揮したらしい。あまりにも尊敬されているため、IT業界において全盛期のイチロー伝説のような破天荒なホラ話のネタにされている人。 日本語での紹介がなさそうだったので意訳してみました。 元ネタはこちら。多すぎるのでGoogle社員じゃない人には面白みがわかりにくそうなもの、面白みが被っていると私が判断したものなどは省いてあります。 NP問題 Jeff DeanがGoogleの採用面接を受けたときに、もしP=NPが成り立つとしたらどうなるかを問われて"P=0かN=1ですね"と答えた。試験官が笑い終わりさえしないうちに彼はGoogleのpublic keyを突き止め、private keyをホワイトボードに書き終わった。 Jeff Dea

chromeの動作が重くなってきていたので、 拡張機能の整理まとめ。 さよならした拡張機能その1「Full Page Screen Capture」 全画面のスクリーンショットが撮れる、すてきな拡張機能ですが、 拡張機能を入れずに全画面スクショを撮る方法がありました。 まずはDevtoolsを開きます。 Macのショートカットはoption+command+I WindowsはF12 そのままshift+command+Pを押すと、こんな感じで入力画面が出てきます。 WindowsはShift+Ctrl+P ここに「Capture」と打ち込みます。 このうちスクリーンショットが撮れるのは以下の3つ ・Mobile Capture full size screenshot ・Mobile Capture node screenshot ・Mobile Capture　screenshot ス

describe <クラス名> do it "<期待する動作の内容>" # ... end context "<条件の内容>" do it "<contextの条件下で期待する動作の内容>" do # ... end end end ここで、 contextは、describeに置き換え可能 itは、specifyまたはexampleに置き換え可能 なので、文脈に合わせて使いやすい用語を使えば良い。 なお、デフォルトの設定では、名前として<クラス名>_spec.rbというようにサフィックスとして_spec.rbがないとrspecコマンドで全体を走らせた時に無視されるようになるので気をつけること。 何をしているか describe,contextはExampleGroupを生成 it,specify,exampleはExampleを生成 なお、topレベルのdescribeはExampleG

はじめに RSpecは難しい、よくわからない、といったコメントをときどき見かけます。 確かにちょっと独特な構文を持っていますし、機能も結構多いので「難しそう」と感じてしまう気持ちもわかります。 （構文については僕も最初見たときに「うげっ、なんか気持ちわるっ」と思った記憶がありますw） しかし、RSpecに限らずどんなフレームワークでも同じですが、慣れてしまえばスラスラ書けますし、実際僕自身は「RSpecって便利だな－」と思いながらテストコードを書いています。 そこでこの記事では、僕が考える「最低限ここだけを押さえていれば大丈夫！！」なRSpecの構文や、僕が普段よく使う便利な機能をまとめてみます。 具体的には以下のような構文や機能です。 describe / it / expect の役割 ネストした describe context の使い方 before の使い方 let / let!

はじめに 有名な初心者向けのRSpec入門記事として、和田卓人さん(@t_wada)の「RSpec の入門とその一歩先へ」という記事があります。 僕もRSpecを全く知らなかった頃に参考にさせてもらいました。 今読んでもとても素晴らしい資料なのですが、RSpecのバージョンが古く、現状の書き方とマッチしなくなってきているのが少しもったいないところです。 そこで、この記事では和田さんの記事をRSpec 3バージョンに書き直してみようと思います。 各イテレーション(RSpec 3バージョン)へのリンク 第1イテレーション(本記事) 第2イテレーション 第3イテレーション ソースコードのURL https://github.com/JunichiIto/rspec3-for-beginners/tree/end_of_iter1 本記事のライセンスについて 本記事は クリエイティブ・コモンズ 表

このようなクエリには、2つの前提条件が必要 値が同じ列に格納されていること 例: Bugs.date_reported GROUP BY で正確に日付をグループ化するために、値が比較できること Bugs.date_reported のフォーマットが揃っている必要がある EAV (エンティティ・アトリビュート・バリュー) と呼ばれるアンチパターンを用いていると、上記の前提条件が成立しない問題に遭遇する 日付が行によって違う列に格納されている 例: date_reported, report_date 日付のフォーマットが異なり、簡単には比較できない 5.1 目的: 可変属性をサポートする バグデータベースの例 Issue (問題) を基底型として、Bug と FeatureRequest (機能要望) のオブジェクトを管理する Issue 基底型 - 共通の属性 Date_reported:

VTeacher 所属の Masaki Suzuki です。 ※各項目をできるだけ3行以内にまとめています デザイナーさんやフロントのエンジニアさん向けのReact.js（リアクトジェーエス）入門です。 「最近、『リアクト』と聞くけど、つまり何？」ってひとが対象です。 React.jsとは React.jsはUIのパーツ（構成部品）を作るためのライブラリです。 FacebookがOSSとして公開しています。 初回投稿日：2015年06月21日 この投稿はReactが話題になり始めた頃（6年前のv0.1の頃）、整理した記事です。 最新情報はこちら React Server Components 2021年からReactを始めるなら React Server Components 一択ではないか？ https://zenn.dev/rgbkids/articles/e58ef9b947b199

WIPで新しい開発手法 WIP(Work-in-progress)：仕掛り作業という意味 WIPという文字が付いていると、その作業はまだ終了しておらず、作業中であるとわかる。 一つの作業においても作業が様々あるので、それを細分化して書いておく。 例）進行中のチケットの状態 【WIP】#12345 ○○機能の新規追加 [✔]　○○.php にformを作成する [✔]　○○テーブルを作成する [　]　formをカスタマイズする [　]　formの挙動を確認する [　]　CSSの適応 [　]　テスト レビューワー（コードチェック）はWIPの状態を見ることで、その作業がどこまで進行しているかがわかり、タイトルの【WIP】が外れていたらその作業は完了（レビュー待ち）というように一目でわかるようになる。 プロジェクト管理において、今あるチケットがどういう状態なのか「見える化」することができるようにな

プログラミング学習サービスやら、ペットサロン予約サービス、風俗検索サービスなど色々とやっている「かずきち」です。 ◾️Qiita記事 WEBサービスで起業したい人に読んで欲しい２０のコト ウェブカツ生を雇わない？転職できない？著作権無断使用の炎上から１年を経て思うところをぶっちゃける。 テックキャンプをウェブカツ!! 顧問が徹底レビューしてぶった切ってみた ■運営サービス一部 http://crazy-wp.com/ フリーランスエンジニアを育成するオンライン最大級のプログラミングスクール「ウェブカツ」 http://webukatu.com/ ■プログラミングスクール「ウェブカツ」の出版本 「小学生からでもプログラミングを楽しく学べる漫画作りたいなー」と思い立ち、外注してウェブカツで漫画本を作りました。KADOKAWAさんより出版しています。 はたらくプログラミング 完全版 (コミックエ

AWS使い始めて 業務命令でAWSを使い始めて、3時間目ｗ。インスタンスのコピーどうやるんだろう？って調べてみた。 インスタンスのコピー 日本語でAWSマネジメントコンソールが利用可能(2015/04/22から)になっていたので自分備忘録ですｗ。ほんと最近すぐに物忘れするのでこういうメモは、必要だよねｗ kvm のようにちょっと面倒かと思ったらそうでもなく、インスタンス元をベースにして高パフォーマンスのインスタンスを生成するとか簡単にできるので、CPUによって処理コストがどれくらい違うとかとか色々遊べそう。 ちなみに、Elastic IP は当然引き継がれないので別途設定する必要があります。 AMI作成 EC2ダッシュボードをまずは選択します。で、左のメニュー「インスタンス」を選択し、コピーしたいインスタンスを選択します（インスタンスは、停止しておいたほうがよい）。 アクションのプルダウン

不思議の国 SEが住んでいるところ、そこは不思議な不思議なお国柄です。 新たな国民として移住してきた人、特産物のシステムを買いに来た人など色々な人がこの国には存在します。 しかしこの国で話される言葉は 独特 です。 ぱっと聞いただけでは意味がわからなかったり、よく似た表現であっても微妙にニュアンスが違っていたり。 似たような表現を使い分けるその裏に、その人の意図や省略された文脈が隠されていたりもします。 どこの国でもコミュニケーションを間違うと非常に厄介ですが、そんなことにならぬよう、 お国言葉らしきもの をまとめてみました。 SEを代表例として、このお国言葉を話す人も、話される人も、改めて言葉の意味合いを見つめなおしてみると新たな気付きが得られるかもしれません。 なお、そんなことから 「絶対にSEしか使わない用語」を集めたわけではない のでその点ご了承くださいませ。 他言語版 @micr

はじめに この記事は CrowdWorks Advent Calendar 2016 18日目の記事です。1 やすにしと申します。世間一般的に言う、ジャーマネ的なことをやらせていただいております。組織というのはナマモノでして、常に変化し、課題の種のようなものを見過ごすと、後々大変なことになることが多くあります。とはいえ、うまくいっても空気のように当たり前となりますし、うまくいかないと批判の的になるというなんとも世知辛い役割ですね。 我々も、5人ほどのエンジニアだった組織が、9ヶ月ほどで30人を超え、大きな変化を迎えました。人数が多くなるということは、課題が変容し複雑になるということ。当然ながらその複雑な課題に対して対処するわけですが、そこで多くの会社は「マネジメント」をしようとします。ただ、そのマネジメントもやり方を間違えると、活力や改善や変革をする芽を奪ってしまい、一気に硬直化し、数人だ

プロジェクトが進行するにつれて増える『負債』 長いプロジェクトに携わっていると、技術的負債をいつ返すのかが課題になってきます。 リファクタリングはいつの時点でやるのか、これは長いプロジェクトを運用していく上で問題になっていきますが、今回は負債の種類を整理し、それぞれどう対応をしていけばよいかを考えていきたいと思います。 私達の開発では常に時間が足りない 最近読んだ、「アジャイルサムライ」という本には下記のようなことが書いてありました。 (開発における)3つの真実 プロジェクト開始時点にすべての要求をあつめることは出来ない 集めたところで要求はどれも必ずと言っていいほど変わる やるべきことはいつだって与えられた時間と資金よりも多い 以上のことからわかるように、私達の開発には時間が無いということが常だということがわかります。実際、技術的負債が多いプロジェクトほどこの傾向が強いのではないでしょう