代々木で働く19歳エンジニアのブログ

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

Bootstrap ざっと全容把握

Bootstrapとは? the world’s most popular framework for building responsive, mobile-first sites 要は結構有名なCSS framework frameworkと、design pattern (atomic designとか) Design pattern is a category of patterns that deals with object orie…

読みやすいPRの書き方まとめ

前提 コードを書く前に [ ] 実現したい要件はそれで合っていますか? [ ] フローチャートなどで処理の流れを可視化できていますか? [ ] 本当にそのソリューションで正しいですか?解決方法は本当にそれだけですか? 変数 [ ] それ変数化する意味ありますか…

コードレビューまとめ

ざっと見てコードボリューム見る。 +400 くらいが妥当 コミット粒度とコメントを見てみる ざっくり全体感を見る、splitで見る Reviewをするときに、なぜそうするべきなのか、cons, prosを示し、参考リンクもはる。 hogeしたほうがいい。 fugaということが考…

(随時更新) JS著名ツールなんとなくまとめ

Package manager npm npm is the package manager for JavaScript and the world's largest software registry. a package manager for javascript npm makes it easy for JavaScript developers to share and reuse code, and makes it easy to update the …

いつも学校のreport書くときに迷うのでメモ、markdownをpdfに変換

$ markdown-pdf hoge.md $ ls hoge.md hoge.pdf Reference from https://github.com/alanshaw/markdown-pdf

rbenvによるrubyのバージョンを切り換え備忘録

$ ruby --version $ rbenv versions $ rbenv install -l $ rbenv install 2.5.0 $ rbenv global 2.5.0 global, local, shell global: ~/.rbenv/version local: ./.ruby-version shell: RBENV_VERSION インストールしたいrubyのバージョンがリストにない場合 …

headless-chromeとpuppeteerを使った、web操作の自動化とscraping

headless-chromeとpuppeteerを使った、web操作の自動化とscraping puppeteerとは Puppeteer is a Node library API that allows us to control headless Chrome. https://github.com/GoogleChrome/puppeteer $ npm i puppeteer Headless Chromeとは Headless…

AltCSSについて雑多に書く。scss(sass), less, stylus

Sass Summary 2014/3 version: 3.2.15 current release: 3.5.4 https://github.com/sass/sass Sass can be used from the command line or as part of a web framework. The first step is to install the gem: $ gem insatll sass After you convert some C…

TCP/IP

コンピュータネットワーク発展の7つの段階 年 --- 1950 バッチ処理(処理するプログラムやデータなどをまとめて一括で処理する方式) 1960 タイムシェアリングシステム(TSS):一台のコンピュータに複数の端末を接続し、複数のユーザーが同時にコンピュータを…

「内部統制のためのアイデンティティ管理 導入や運用における落とし穴とは」を読んで

予防的統制とは、各ユーザーの職務内容に応じて、適切なシステムに対する適切なアクセス権限の付与や剥奪を実施すること 発見的統制とは、各種システムに実際に格納されているアクセス権限設定を確認し、誤りがあればこれを修正する作業のこと 「ユーザー・…

Linux 実践入門

LINUXシステム実践入門 シェルはユーザーから入力された指示に従い、コマンドを実行し、結果を出力するプログラム。 $ コマンド 引数 コマンドはシステムに処理させる命令で、プログラムやシェルスクリプト、シェルのビルトイン(組み込み)コマンドの名前を…

Gemfileのバージョン指定の書き方

1.0.0 バージョンを固定。 >= 1.0.0 1.0.0以上のバージョンが必要 >= 1.0.0, < 2.0.0 1.0.0以上、2.0.0未満のバージョンが必要、ex) 1.x.x ~> 1.0.0 1.0.0以上で利用可能で、1.0.9などは問題なく、1.1にバージョンが上がると利用不可 ex) 1.0.x reference fr…

面白い記事を読んだ

qiita.com なるほどという感じ。 イメージは、go, ruby, jsしか書かないって絞れば勉強時間集中するから、そこそこ強くなれる気がする。

クリティカルパス

クリティカルパスとは、プロジェクトの中で「開始から終了までに最も長い時間を要するタスクの連なり」 フロート日数とは、クリティカルでないタスクの作業上の余裕日数 所感 クリティカルパスを理解することで、そのプロジェクトにおいて絶対に遅れてはいけ…

仮説思考―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…