HTML/CSSをプレビューせずに競う大会『Code in the Dark』とは?

世界各地で開催されるWordPressのカンファレンスがタイで開催されるため、バンコクに1週間滞在していました。
WordCampが終わったのでバンコクから約3時間のフィリピンに移動し、仕事を協力してくれる人材を探しにきました。

今日は現地の知人に紹介してもらった『Code in the Dark』に参加してきます。
僕はあまり英語が得意ではないので、事前にCode in the Darkとは何かを調べてまとめようと思います。

『Code in the Dark』とは?

Code in the Dark – you thought you knew front-end

2013年にストックホルムで始まったフロントエンド、コーダーの大会です。
Tictailというスウェーデン発の消費者向けのショッピングアプリが始め、パリ・フィンランド・マニラでも開催されている大会です。

  • 15 min (制限時間は15分)
  • HTML / CSS (HTMLとCSSで競う)
  • No previews (プレビュー、確認をしない)
  • One champion (チャンピオンを一人決める)

上記の4つが公式で発表されているルールです。

プレビューをせずに15分間コーディング

特徴的なのは大会の名前にもなっているとおり、プレビュー画面を見ないでコーディングをすることです。
さらに大会では普段利用しているエディターは利用できず、大会のオリジナルエディターを使う規定になっています。

なので、ハイライトやコード補完がされないため1つのタイポ (打ち間違え) が、命取りになることもあります。

また、勝敗は参加者の投票によってきまります。

Code in the Dark from Tictail on Vimeo.

GitHub / codeinthedark.github.io

Code in the Darkの細かいルールやエディタは下記のGitHubアカウントにて公開されています。

codeinthedark / codeinthedark.github.io:Code in the Dark

自分の地域でCode in the Darkを開催したい場合には、上記のリポジトリに所定のフォーマットで詳細をプルリクエストすれば公式ページに表示されるようです。

オリジナルエディターはBSDライセンスで配布されています。


偶然にも滞在期間中にとても楽しそうなイベントに参加できて楽しみです。
ティザームービーもいい感じにおしゃれで映画『ソーシャル・ネットワーク』のあの雰囲気を感じます。

僕も日本に輸入できればいいなー。

WordCamp Bangkok 2018コントリビューターディ『WP-CLI』チームに参加しました

WordCamp Bangkok 2018のコントリビューターデイでWP-CLIチームに参加しました。
コントリビューターデイのチームリーダーはTakayuki Miyauchiさんが優しく教えてくれました。

準備とオリエンテーション

GitHubでチケット管理がされているようで、実際にはそちらを見てコントリビュートにとりかかるのですが、その前の準備としてWP-CLIを最も新しいnightly版に下記のコマンドでアップデートします。

wp cli update --nightly

また、下記のコマンドでWP-CLIのメインコマンドやサブコマンドを確認することができます。

wp

その後はWordPressのコアのチケットにもある“Good First Issues”という初心者でもできるチケットが判別できるようになっているので、そちらの一覧を見てとりかかれそうなものを探していきます。

WP-CLI – GitHub : Good First Issues

gulp-sassを使っていたら『throw new Error(errors.unsupportedEnvironment());』がでた時の対処法

久々に修正を加えたコードがうまくコンパイルできなかったので、対処方法とその時の学びについて。

CSSのプリプロセッサーであるメタ言語のSassをコンパイルする時に使っている”gulp-sass”が下記のようにエラーを吐いていたので調べてみました。

throw new Error(errors.unsupportedEnvironment());

結論から言えばバージョンが古いので最新版のモジュールをインストールすればよいです。なのでnpm install gulp-sassでokなはず。
詳しくみたいかたは先に進んでください。


Node Sass does not yet support your current environment (macOS 10.12.1, Node 7.0.0) · Issue #1764 · sass/node-sass · GitHub

「そのバージョンではサポートしてないよ」ってことらしいので、まずはgulp-sassのバージョンを調べてみます。
package.jsonのあるディレクトリで下記コマンドを実行します。

npm outdated

Currentの行が現在のバージョンで、Latestは最新バージョンです。
Wantedはなんでしょうか…。

npm-check-updatesというnpmのモジュールを更新&確認する『GitHub – tjunnone/npm-check-updates: Find newer versions of package dependencies than what your package.json or bower.json allows』を見つけたので「まさに!」と思い試してみました。

まずは-gのオプションをつけてグローバルにnpm-check-updatesをインストールします。
ncuに-uのオプションをつけるとpackage.jsonも更新されるようなので、gulp-sassを更新しpackage.jsonも更新します。

npm install -g npm-check-updates
ncu -u gulp-sass

もういちどoutdatedをかけてみると、消えてしまっていました。
使い方間違えたかな…。

消えちゃったので普通にgulp-sassだけを再度インストール

npm install gulp-sass

バージョンの指定はしてないので最新版がインストールされて、無事にエラーは消えました。
最初からこれでよかったのではないだろうか…。

参考の記事はこちら

npm installしたパッケージの更新確認とアップデート(npm-check-updates) – dackdive’s blog

おまけ

週末に開催されるWordPressのお祭り『WordCamp Bangkog』のためにタイに来ています。
今日はJoeのおすすめの場所でコワークしてます。

We co-working at Bangkog! #theta360 – Spherical Image – RICOH THETA

WordPressコミュニティと地域メディアを運営している人の集まりに参加した話

今日はタイトルの通り、各地のWordBenchを運営している人や東京の各地で地域メディアを運営している方々が集まる飲み会に参加してきました。

そこで感じたことや勉強になったことを忘れないように書き残します。

ブログやメディアを続けるコツ

共通の知人が多くいて、『め〜んずスタジオ』『トヨスト』の運営者である瀬長 明日香さんにお会いしました。

そんな瀬川 明日香さんは1ヶ月に100記事くらいを執筆しているようで、アウトプットの多さに脱帽です。

僕は仕事もプライベートでも情報発信の大切さを伝えている身として、去年はオンラインでの発信365本を目指していたのですが成果は100本でした…。

1ヶ月で僕の年間に相当する記事を発信する明日香さんに秘訣を聞いたところ、とても共感するお話をしていただきました。

「記事を書こうとするとみんな難しい事を考えて自分でハードルをあげてしまう。まずは4行でもいいから発信すること。」との事。

アウトプットする事を常に意識すると、日頃のインプットを意識する事ができます。

最近読んだ実用書には「なにかが上手くできないときに規律を作って行動を制限してしまうが、大切なのは規律を作ることではなく行動を習慣化することだ」と書いてあったのを思い出しました。

少しでもいいから書くこと。それを続けて習慣に変えるために自分の中の『こうしなければいけない』というハードルを下げる事が大切なんだと学びました。

WordBench北千住が4-5月に初開催

そして次のニュースは、あの足立区にWordPressの地域コミュニティが発足するということです!

僕は生まれも育ちも東京の足立区という貧民窟なのですが、そんな足立区の北千住にITコミュニティが発足するという奇跡的な瞬間に立ち会う事ができましたw

モデレーターは足立区の情報サイトである『北千住プレス』を運営する海上さん。

僕も生まれ育った地域コミュニティになにかコントリビュートをしたいと思っていたところ、同じような考えを持つ方と知り合えて僕も協力させていただくことになりました。

こんな素敵な会を企画してくれた福田さんの主催するWordBench 羽田は3月25日に開催しますー。