新宿(近々代々木に移転)で働く18歳エンジニアのブログ

思ったこととか、技術的なこと書きます。

仮説思考―BCG流 問題発見・解決の発想法 を読んで

今回この本を読んだ目的 仕事のアウトプットのスピードを上げるため 新規事業をより深い思考で考えるようになるため。 仮説思考とは 仕事ができる人は人より答えを出すのが早い。まだ十分な材料が集まっていない段階、あるいは分析が進んでいない段階で自分…

最近RTFMについて思ったこと

生産性を上げるためには情報へのアクセス手段が必要で、それこそwebであり、document, manualと呼ばれるものなのではないか。基本的にggrksとかRTFMとかなるたけ、同期的なコミュニケーションをなくすことで時間のロスをなくそうという方針があり、それには…

gitよく使うやつまとめ

git addしたファイルをもとに戻すとき $ git reset HEAD hoge.html commitを取り消ししたいとき $ git reset --soft HEAD^ or $ git reset --hard HEAD^ 空コミット $ git commit --allow-empty -m "initial commit" stashしているものを見るとき $ g stash …

Google HTML/CSS Style Guide を読んで意外だと思った点まとめ

HTML HTML_Quotation_Marks - -<a class='maia-button maia-button-secondary'>Sign in</a> + +<a class="maia-button maia-button-secondary">Sign in</a> CSS Shorthand_Properties -/* Not recommended */ -border-top-style: none; -font-family: palatino, georgia, seri…

Teem Geekを読んで

チーム チームは個人の生産性や幸福に直接影響する ソフトウェア開発はチームスポーツ 素晴らしいアイデアを隠しておいて、それが完成するまで誰にも話さないというのはリスクの高い大きな賭け 検証を重視した「早い段階で、高速に、何度も失敗せよ」の精神 …

DOM構造を作ったりするときに王道を見つける方法について思ったことがあるので書く

なんかhtmlとかって実際同じビューを作ろうとおもえば、例えばheaderとかfooter作る上だといくらでも書ける。でも使うタグもたくさんあるし、こういうレイアウトのときはどうしたほうがいいか。そういうのは、w3cのdocsを読むか、google のseo周りの部分を見…

em, rem, px, % 違い

engageinteractive.co.uk zellwk.com zellwk.com

MCSS

MCSS(Multilayer CSS) OOCSSとBEM BEMでいうところのBlockとそのElementとModifierはまとめて同じ場所に記述されるべき。 可能な限りクラス名を略称にする 1.Foundation SMACSSでいうところのBase 2.Base SMACSSでいうところのModule Baseレイヤーコンポーネ…

Difference between mixins, extend and %placeholder

Mixins A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. @mixin message($color) { border: 1px solid #ccc; padding: 10px; color: $color; } .success { @include message(#333); border-color: green; }…

!important

6.4.2 !important rules CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet (see cascade rule 3). cssはauthorとuserでバランスを…

SMACSS

命名規則 .alert { - .alert.success { + .alert-success { - .alert.warning { + .alert-warning { - .alert.error { + .alert-error { … .warning { // 汚染されてしまう ベースとなるコンポーネント名を名前空間として継承した命名にすること - クラス名…

sass, scss

Sass, also known as the indented syntax SCSS, a CSS-like syntax Initially, Sass was part of another preprocessor called Haml, designed and written by Ruby developers. // Variable !primary-color= hotpink // Mixin =border-radius(!radius) -we…

OOCSS(Object Oriented CSS)概要とその具体的な書き方

枠とモジュールという考え方 枠 モジュールをはめ込んでいくための枠組み モジュール レゴや積み木などの1ピース(部品) モジュール名さえかぶらなければスタイルの競合が起きない モジュールの一覧を作る モジュールの命名、抽象的(汎用的)⇄具体的(汎用…

フロントでコーディングをするときに困ったら見るべきドキュメント集

Google HTML/CSS Style Guide HTML5 HTML & CSS - W3C HTML5 CSS3 Cascading Style Sheets JS https://google.github.io/styleguide/javascriptguide.xml#Custom_toString___methods GitHub - airbnb/javascript: JavaScript Style Guide

デザイン、現場の手法

chapter1 デザインの作法 デザインにゴール地点を設定する どうすればデザイン案にOKが出るか、クライアントが期待している何か(要望)を正確に聞き出す レイアウトは枠組みから、最初にデザインの設計を済ませて、作るものの仕上がりに近いサイズの紙を用意…

git commit --amend 二つ以上前のcommit の編集方法、丁寧に解説

fugaのcommit messageを編集したい。 $ g log --oneline 068bc0b bar 19b06a6 fuga 6f04c12 hoge rebaseする。 $ git rebase -i HEAD~3 vimが開くので、該当コミットをpickからeに変えて保存(:wq) pick 6f04c12 hoge - pick 19b06a6 fuga + e 19b06a6 fuga p…

Overview of terraform

Getting Started Install $ brew install terraform Configuration provider "aws" { access_key = "ACCESS_KEY_HERE" secret_key = "SECRET_KEY_HERE" region = "us-east-1" } resource "aws_instance" "example" { ami = "ami-2757f631" instance_type = "…

(8) コンポジションでオブジェクトを組み合わせる

(7) モジュールでロールの振る舞いを共有する

(6) 継承によって振る舞いを獲得する

(5) ダックタイピングでコストを削減する

(4) 柔軟なインターフェースをつくる

インターフェース クラス間の窓のようなもの。界面や接触面、中間面。クラス内のメソッドと、何をどのように外部に晒すのか。 オブジェクト志向アプリケーションはクラスから成り立つが、「メッセージ」によって定義される。 アプリケーション設計で中心とな…

(3) 依存関係を管理する

オブジェクトは単一の責任を持っている→複雑な問題を解決するためにはオブジェクト間で共同作業をする必要がある 一方のオブジェクトに変更を加えたとき、他方のオブジェクトも変更しなければならない=依存関係がある class Gear def initialize(hoge, fuga…

(2) 単一責任のクラスを設計する

TRUE 変更が簡単なコードに伴う性質 Transparent(見通しが良い) 変更するコードにおいても、そのコードに依存する別の場所のコードにおいても、変更がもたらす影響が明白 Reasonable(合理的) どんな変更があってもかかるコストは変更がもたらす利益にふ…

(1) オブジェクト指向設計 from オブジェクト指向設計実践ガイド

システムを、あらかじめ決められた手続きの集まりではなく、オブジェクト間で受け渡されるメッセージの連続としてモデル化 部品が相互に作用しあい、全体の振る舞いが生まれる 部品がオブジェクト、相互作用はオブジェクト間で受け渡されるメッセージ メッセ…

学校の課題でhtml/css/js縛りでなんか作るっていうのがあったので、shell scriptを書いてみた

要件 紙芝居、ページは画像と文字列、ボタン(次のページへ)で構成されており、たまにある入力の値の条件分岐によってページの遷移先を変える その入力値はページ間で保持する必要がある(縛りがあるのでDBとかは使えない。JSだけというか) 実装したこと …

先輩のtweetを見て危機感を感じてrmのaliasを設定した

qiita.com qiita.com 最近twitterの有用性に気づいた。 あと学習について、思ったことがあって、エンジニアって一生勉強だから、ある課題にあたった時にそれを今そのタイミングで掘るか、ペンディングして休日にやるか、一週間後くらいにやるかいろいろ考え…

指示の本質を理解する

少し短い記事になってしまうのですが、あるタスクで指示を受けたときにその本質を理解する必要があると感じたこと。ゴールを明確にするとかと共通している部分があるとは思うけど。 たとえばstaging環境にnofollowが付いていないため、SEOランキングが下がる…

エンジニアの勉強について

まず勉強には二種類あると思っている。それでこれら二つってお互いにすごく関連している気がする。たとえばあの基礎が抑えられてないから、これが理解できなくて、調べ方の指針もたたないみたいなことがたまにある。 仕事に必要な知識を得るための勉強、勉強…

SEOまとめ

SEOと検索エンジン Webマーケティング メルマガ アフィリエイト RSS プレスリリース Twitter SEM(Search Engine Marketing) PPC(Pay Per Click)クリック課金の広告 SEO(Search Engine Optimization)検索エンジン最適化←ここ SEOとは、検索エンジンを利用する…