読者です 読者をやめる 読者になる 読者になる

やまろぐはてな

yamanokuの技術メモ。Qiitaは怖くて書けない。

Promise処理について雑にまとめる

Promiseとは 簡単に言うと非同期処理を行う時にコールバック地獄、ネストの深層化を回避して記述をだいぶ楽にするオブジェクト。ES2015です。 非同期処理とは 例えばAの処理の後にBの処理があるとする。javascriptとはシングルスレッドで動く=同時に処理を…

javascript無効にしたときのユーザビリティとかについて

社内で話した内容で気づけてよかったことなのでまとめてみる。自戒も込めてます。 最近はjavascript無効な環境とかに対して優しくする意識はないのではないか SPAとかなんかjavascriptあり気なんだしでかいFlash1つ置いててiPhoneで見る場合のと同義っぽい…

最近考えてる「使いまわせるCSS」について

CSSちゃんの4コマの描き直ししてます〜 こちらは初登場時の一コマ目ですね #マンガでわかるWebデザイン #CSS擬人化 #擬人化 #イラスト基地 pic.twitter.com/R5r9hg6s3V— マンガでわかるGit@書籍版発売中 (@webdesignManga) 2015年2月21日 色々設計思想があり…

フロントエンドエンジニアってどんな生き物なのか

こないだ他業種(SE)の人と偶然呑む機会があって、自分の同僚が「MEをやってます」って伝えたんだけど「MEってなんですか?」と返されました。 弊社ではマークアップエンジニア=MarkupEngineerの頭文字からそれぞれとってMEと略されて「MEチームの皆さんは…

初心者にGit教える時に必要最低限のCUIコマンド

前提条件 ガチ初心者でgitの操作をCUIで学ぶため、基本1人でmasterで作業するという「いやお前それGit管理じゃないだろそれ」という前提でやってもらます。いいんだよ細かいのはこれから学んでいけば。 作業前にリポジトリとかはどこかで作って置いたほうが…

wordpressの組込みをするときに思うセクショニングの話

みなさんセクショニングマークアップしてますか してない人は正直に手をあげなさい。先生は怒らないので。 最近html5.1の勧告がありましたよねという話で 前置きはどうでもいいんですが、セクショニングでは個人的に気になっている点があります。 【HTML5.1…

社内分報 ver 2.0について

みなさんこんにちは今日はSlackでの分報(ぶんぽう)について触れてみます。 おさらい yamanoku.hatenablog.com 分報分からん人向けに言うと、1日のことを報告する日報を分刻みレベルで今何しているかをSlackとかのチャットツールで自分用のチャンネルを作っ…

エンジニア立ち居振舞い : 誰がどう触っても良いようにつくる

お題「エンジニア立ち居振舞い」 マークアップなのかフロントエンドなのかいまいち良く分からない位置付けに居ますが、自分の中で大事にしていることについて。 タイトルの通りなんですが簡単な例でいくと、jQueryでトグルボタンを実装する時に $("#button")…

ScopedCSSを使って思ったこと

Scoped CSS | Introduction 今個人的にVueを使ってアレコレ試しててVueコンポーネントを使うためにVue-loaderを導入しており、中でtempleteとstyleとscriptを一気に記述できるんだけど、styleで使えるscoped-cssてECSSの設計思想にうまく合いそうだなと思う…

Jadeのprettyはアテにならなかった話(と今更ですがPugについて)

経緯 Jadeは通常何もせずコンパイルするとこうなる そこでgulpとかのオプションでこう設定するとインデント維持して見やすくなる var jade = require("gulp-jade"); .pipe(jade({ pretty: '\t', })) だいたいはこれでよい。 ただコーディングガイドラインで…

HTML5 Conference 2016 行ってきたよ

events.html5j.org 自分のまとめです。 Reactの最新動向とベストプラクティス @koba speakerdeck.com この内容の通りです。https://getstorybook.io/とかhttps://storybooks.io/は視覚的に確認できるのがめっちゃ便利だと思いました。 あと会場内でのReact体…

モーダルでyoutube動画流すことへの所感

結論 から述べるとこうした方がいいと思います。 PC時はモーダルで表示して流す SP、タブレットは埋め込みプレイヤーで流す 理由 モーダルで表示するそもそもの目的は縮小されたものを拡大したり別レイヤーで表示することであり、スマートフォンなどでの携帯…

サイトをリニューアルしたい話(計画)

計画としてではあるのですが、自分のポートフォリオサイトをリニューアルしたいなという話です。 リニューアルについて 現状把握 とはいっても内容を全てを新しくするとかそういうわけではなくて、色々分散している内容をどうまとめようかみたいなところの話…

cookieとかを使ってjsで云々

仕事とか実験で色々試してみたので雑まとめ。 js-cookie便利 github.com jsでのCookie処理が楽なので是非導入してみよう。以下はそれを使った処理になります。 ページ固有のcookieを記録したい http://xxxxx.xxx/xxxxx/xxxx/001/ みたいなアドレスがあったと…

XSS対策のセキュアJSについて(基本編)

社内ブログでまとめた内容をこっちでも書いてみる。ただ、フレームワーク使ったりしている中級者以上にはあんま参考にならないと思いますが基本編みたいなノリで御覧ください。 エスケープをする すぐできる対策であり、割と効果的なものがエスケープ処理で…

クオリティチェックで気をつけていること

クオリティチェックしてますか 納品前に一旦問題ないかをしっかりチェックし、品質は維持しているかを確認するクオリティチェック。皆さんの会社でも行っているかと思われます。やってないのだとしたら、自社のプログラマーがよほど立派なのか、客のことどう…

Media Queries でコンテンツ隠すのやめたい

個人的に気にかかってること よくMedia QueriesのブレークポイントでPC時とSP時でリンク先ほかコンテンツを、出したり出さなかったりする制御をしたりするんだけどあれって本当にいいのかという話。そんなことあり得るのかお前とお思いでしょうがまあ聞いて…

マテリアルデザインについて学ぶ社内勉強会

先週の水曜日に初主催の社内勉強会でマテリアルデザインについてやりました。 正直なところ曖昧な部分でしかしれてなかったので自分の勉強と改めて理解する・社内として共有知識にするみたいな感じでスライドつくりました。あくまで基本的な要点だけなので詳…

初夏のJavaScript祭2016 行ってきた。

jsfes.net 個人的には参考になった。jsってやっぱ色々できるんだな。 以下発表順メモなど node.jsでデスクトップアプリをつくる @CHIHIRO_KAASAN 仕事中に自動で開発コストをかけずにいろいろできるものをつくる。 実行環境の準備 猫ファイルを取得 jsonで保…

CSSプロパティの記述順について - CSScomb解決編

yamanoku.hatenablog.com 以前CSSプロパティの記述順に対してどうするかなどと悩んでいましたが、1つの解決策を見つけました。 CSScombを使用してみる 自分で記述順を悩むなんてアホくさいので機械に全部処理してもらうということになりました。というわけ…

在宅勤務に関してやってみて思うこと

今日は在宅勤務(厳密にはリモート勤務)したので適当に書いてみる。 在宅勤務について 自分の会社では月1回の在宅勤務を推奨されており、好きなタイミングで申し込める。もちろん電車だったり交通期間が機能していないときなどにも変更できる。これまで基…

株式会社はてなに入社しました

株式会社はてなに入社しました 株式会社はてなに入社しました - hitode909の日記 本当はここで働いてます。 www.geek.co.jp 絶賛社員募集中です。

colorbox - iframeでyoutube使う時の諸注意

経緯 colorboxでyoutube動画をモーダルギャラリーで見せるみたいな流れになった。 やり方は以下の感じ。 <p> <a href="https://www.youtube.com/embed/00000000" class="colorBox"> <img src="~~" alt=""> </a> </p> // jquery (事前にjquery.jsとcolorbox.js読み込んでおく) $(".colorBox").colorbox({rel:'colorBox', iframe: true, width: 640, height: 480, …

CSSプロパティの記述順について - 問題提起編

CSS

管理というか記述順どうしてますか 会社ではルールを覚える前にアルファベット順で記載したらどうかっていうのがあり、Googleの書式ルールではそれらしい。 確かに複数人との作業では確実性のある法則性なんですが、個人的にはpositionのためのtop, bottom, …

CSS - opacity、visibilityで要素消した時の注意点

マテリアルデザインのCSSアニメーションが顕著になってきましたが業務での気付きがあったので共有メモ。 opacityやvisibilityで要素を消したり出すアニメーション .hoge { opacity: 0; visibility: hidden; transition: all .5s linear; /* allだと重いから…

stylus - mediaqueryとreset.cssの管理

mediaquery管理 自分なりに考えた結果です。嘘です参考にした結果です。 pc() @media all and (min-width: 769px) {block} sp() @media all and (max-width: 768px) {block} をどこでもいいけど、base.stylみたいなのに設定しといて呼び出す時 .element +pc(…

StylusでOldIEの記述やりたい話

stylus便利なのでもうピュアなcssを書きたくないのですが、かねてから気になってた問題と解決法を記載。 Old IE 問題 Old IEっていうよりかはfilterの記述法についてです。 通常の書き方だとこう書きたくなります。 filter: progid:DXImageTransform.Microso…

Hubot弄ってみる 準備編

経緯 Reading... 割と本気で家庭用Slack Botを作ってみた - 八発白中 https://t.co/fOo7NWGqpQ— やまのく (@yamanoku) January 14, 2016 slackで残業申告時間前になったら残業するやつは申告しろって通知するbot作りたいんだけど、通知されたところで自分た…

config.jsonのhostnameをいちいち変えなくてもいい方法(追記あり)

背景 gulpの便利機能の1つにhostnameに自分のPCのIPアドレスを設定すると、他端末でアクセスしても見れる(ただしwifi接続時)っていうのがあるんですが、他の人と作業しているとhostname設定ママで渡しちゃうとエラーが吐いちゃうので非常に不便ですねとい…

Chromeでソースコード見た時文字化けする問題

Cmd+Alt+Uでソースコードみてたら文字化けしてたので直し方 chrome://settings/fonts をアドレスバーに入れてエンター 下のように出てきたら一番下の「エンコード」を日本語(Shift_JIS)からUnicode(UTF-8)に変更 ChromeはデフォがShift_JISになってるっぽ…

jQuery - スクロールバーも入れて幅検知する

背景 レスポンシブさせるときにサブカラムの幅は維持してメインカラムの幅を縮めようとしたかった。そしてある幅になったらカラム落ちさせて1カラムにさせる。 やりたいこととして、リサイズ&ロードさせて、全体分の幅からサブカラム+横のmargin分を引いた…

作業時間を記録する話

きちんと把握できているか 自分の作業時間について把握できるのがプロかとは思いますが、一応お金をもらってる身ではあるのでプロなのだと思いますが、そこまでちゃんと出来てないのが現実です。 簡単な更新作業ではおおよその把握は出来ると思いますが、新…

技術的な方はこっちで書こうかなという感じでなんとなく移行です。徐々に追加してゆきます。 日常的なのはこちらからどうぞ oyamaokuto.org 自己紹介は以下からどうぞ http://oyamaokuto.org/about