CSSについての社内勉強会を行いました

勉強会

6月25日に社内でマークアップの勉強会を開催しました🎉

www.slideshare.net

内容としては

  • BEMの基礎
  • CSSを組む際に気をつけたい点

+アルファでデザイン意図を汲んだマークアップ

デザイン意図を汲んだマークアップに関してはスライド用意しておらずその場でサンプル出して話してました。

内容的には
「このテキストは伸びた場合はどうなる？左側が基準？中央そろえ？」
「このボタンは高さが大事？それとも余白？」 みたいな話をデザインを見ながら1つ1つ解説していきました。

このあたりちゃんとした資料にして再度勉強会を行いたい…

できれば社外の方にも来ていただいて知見共有できればと思ってるので参加したい方はお声がけくださいー🙏

スクロールに応じてヘッダーが順次固定されているJsを組んだ

javascript

iTunesか何かのようなスクロールにお応じてヘッダーが切り替わる挙動を組みました。
（言葉で説明するのが難しい…↓を見てくださいな）
仕様変更によりお蔵入りになったのでブログで供養します。

See the Pen MultiFixedHeader by あっきー💪😎💪 (@kuronekopunk) on CodePen.

Rails selectタグにクラスを付ける

Ruby on Rails 
f.select :foo, { a: 1, b: 2 }, class: 'bar'
=> <select name="model[foo]"> # あれ？classが居ない

時々ど忘れしてドキュメントを読みに行くやつ。

この様に定義されています。

def select(method, choices = nil, options = {}, html_options = {}, &block)

ref: rails/form_options_helper.rb at 71c7fd101324046995d8f7e51e78475c0e37ec1a · rails/rails · GitHub

optionsとhtml_optionsが違う👀
というわけで分けて書いてあげましょう

f.select :foo, { a: 1, b: 2 }, {}, class: 'bar'
=> <select name="model[foo]" class="bar">

ﾔｯﾀﾈ🎉

JavaScriptでURLクエリを取得する

javascript

クエリ文字列の取得は

window.location.search
=> "?foo=1&bar=2"

クエリ文字列をオブジェクトに整形する関数を用意。

function getUrlQueries() {
  var queryStr = window.location.search.slice(1);  // 文頭?を除外
      queries = {};
      
  // クエリがない場合は空のオブジェクトを返す
  if (!queryStr) {
    return queries;
  }
  
  // クエリ文字列を & で分割して処理
  queryStr.split('&').forEach(function(queryStr) {
    // = で分割してkey,valueをオブジェクトに格納
    var queryArr = queryStr.split('=');
    queries[queryArr[0]] = queryArr[1];
  });
  
  return queries;
}

これでめでたくクエリのオブジェクトの取得に成功しました🎉

エンジニア募集にJobTagはいいぞというお話

エンジニア webサービス

JobTagでエンジニア募集をしたら2名から応募があったのでJobTagはいいぞという話をします🤟

投稿した内容と反響をご紹介

１つ目

反応

f:id:kuronekopunk:20180704213625p:plain

RT０でインプレッションはそんなに伸びませんでしたが１応募ありました🎉

２つ目

２回目の方にはJobTagに書いた内容もコピペで載せてみました。

反応

f:id:kuronekopunk:20180704213945p:plain

RTもされてそれなりのインプレッション数に。
こちらでも１応募いただきました🎉

結論

JobTagはいいぞ

jobtag.jp

宣伝

7/2に弊社でもくもく会やります！
作業内容に特に縛りはないです！お気軽にどうぞ！
なんならビアも用意して待ってます！🍻🍻

handsshare.connpass.com

ハンズシェアでは一緒に開発するメンバーを募集しています🙆

www.wantedly.com