はじめに 「心理的安全性」とは、「対人リスクを取っても問題ないという信念がチームで共有されている状態」であるとか、「自分のキャリアやステータス、セルフイメージにネガティブな影響を与える恐れのなく、自分を表現し働くことができること」というような定義がなされています。 心理的安全性という言葉はともすれば、ただ快適で居心地のよい職場という意味にも聞こえます。そのため、ぬるま湯で緊張感のない関係性のことを「心理的安全性が高い」と言うのではないかと考えても不思議はありません。 そのため、友人関係のようにプライベートの時間を長く共有する関係になることが、心理的安全性が高いのだろうと考え、飲み会やバーベキュー、慰安旅行などを企画してみたりとプライベートでも遊ぶ機会を増やそうと考える人もいるでしょう。 いわゆる「アットホームな会社です」とアルバイトの求人記事に書かれているような状態です。こういった求人内容

2018年12月9日 著 少し前に中野さんがWebの健全性を守る主役は果たして誰なのかでこれ以上のブラウザベンダは撤退してはいけない状況と書いてらしたのが、まるで伏線か一種のフラグであったかのように、Microsoft is building a Chromium-powered web browser that will replace Edge on Windows 10で噂された内容は、現実のものとなってしまいました。 Microsoft Edge: Making the web better through more open source collaboration - Windows Experience BlogWindows Experience Blog Microsoft Edge and Chromium Open Source: Our Intent なってしまいま

オブジェクトベースなUIデザインの考え方が近頃注目されてきています。デザイナーとしてこれと向き合うに当たって、私なりに解釈した事柄を記しておこうと思います。 オブジェクトベースのUIとはUIデザインにオブジェクト指向の設計論を導入したものをオブジェクトベースのUI、Object-Oriented User Interfaces= OOUI などと呼ぶようです。オブジェクト指向UI、オブジェクト指向ユーザーインターフェイスと呼ぶこともあるかもしれません。そのほかにも OOUX という表記も見られますが、ここでは一貫した呼び名を定めておきたいため、便宜上 OOUI と呼ぶことにします。 私たちが普段目にするGUIは元来OOUIの思想に基づいていると考えられるのですが、中にはとても機能指向的（タスクベース）な設計で構築されたGUIが多くみられるため、特にオブジェクト指向的であるものを強調・区別す

フロントエンドエキスパートチームの@koba04です。 10/25,26の2日間、ネバダで開催されたReact Conf 2018に参加して来ました。 今回は、気になっている人も多いKeynoteで発表されたHooksとConcurrent Reactについて紹介したいと思います。 今回紹介された内容は、2014年後半くらいからReactを見てきた中でも、最も大きな変更であると言えます。 React Conf 2018 React Conf 2018のストラップ カンファレンスのトーク自体はすでにYouTubeで公開されているので、全トーク観ることが出来ます。 https://www.youtube.com/playlist?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ Hooks Hooksは、GitHub上でも一切公開されておらず、React Conf

この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま

Web ページの高速化セミナー WCAN 2018/09/15「Web ページを高速化してユーザーに価値を届けたい制作者のためのセミナー＆ワークショップ」 - WCAN | Doorkeeper 先日、2018年9月15日にひっさびさに WCAN に登壇させていただいて Web パフォーマンスチューニング....のなかでもページロード速度の高速化を中心にセミナーとワークショップを行わせていただきました。 下記はそのときの資料です。今回は Web サイト制作者向けのセミナーとして企画したので、Web アプリ開発勢が好きそうなテクニカルな話はすべて割愛しています。 ウケが良かったような気がするネタ なにがウケるか読みがつかなかったので、とりあえず色々盛り込んでみました。会場では下記のあたりがウケが良かったような....気が...する。 格安 SIM の回線は、大手キャリアのプロパー回線と比べる

2018年10月21日 著 10月19日の覚え書き。今まで訪れたことがなく、取り壊される前に一度は入ってみたいなーと思っていた中野サンプラザの8階研修室で催された、DIST.23 「マークアップを止めるな！」に参加しました。DISTは以前、DIST.18 「Sketch時代のWebデザインワークフロー」で参加したことのある、クリエイティブコミュニティのこと。この日は都合、3つのセッションがありました。 手戻りの少ないレスポンシブデザインのチェックポイント 残念ながら、内容がよくわかりませんでした。後からスライドをじっくり見返しても、やはりわかりません。 モバイルファーストで作ろうがデスクトップファーストで作ろうが、レイアウトが崩れる時は崩れるわけで、自分の経験上どちらがどうというのはありません。ターゲットサイズを決めることの大切さを力説されていましたが、ターゲットサイズなんて「あってないよ

『良いウェブサービスを支える「利用規約」の作り方』第二版に掲載するプライバシーポリシーひな形について、初版からの改訂案を作成し、パブリックコメントを実施します。 意見求ム「プライバシーポリシーひな形」改訂案 春にお知らせした、利用規約本第二版改訂プロジェクト。書籍の本文については、この5年の間に発生したウェブサービスに関する法令の改正やトラブル事例のアップデートがほぼ終わりました。現在はそれらを踏まえ、著者3人でプライバシーポリシーと利用規約のひな形の改訂の詰めを行っているところです。 おかげさまで、初版のサービス利用規約・プライバシーポリシー・特定商取引法に基づく表示の3つのひな形は、ベンチャー・スタートアップ企業を中心に多くの企業に参考にしていただきました。ですので、これらについてはヘタに構造を変えるような大工事を施さず、変更ポイントは必要最小限にしようと考えています。 しかし、特にプ

CSS Tutorials CSS basics CSS first steps CSS first steps overview What is CSS? Getting started with CSS How CSS is structured How CSS works Assessment: Styling a biography page CSS building blocks CSS building blocks overview CSS selectors Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators Cascade, specificity, and inheritance Cascade layers The box mo

Webデザイナーで入社したのにコーダーになってしまったWebデザイナーで採用されたのにコーダーのポディションに配置されることはしばしばあります。 特に未経験だったり、日の浅いデザイナーに多いです。 Webデザインの知識を一日も早く吸収してWebデザイナーとして一人前になりたい！そう思われることだと思います。 しかし！熟練のデザイナーさんのつくるデザインカンプに毎日触れるコーダーからもWEBデザインの知識を得ることは沢山あります。 コーダーだった私がWebデザイナーに転身した経験を踏まえてデザインカンプからWebデザインの知識を蓄える方法を書いていきます。 デザインの意図深く考えるコーディングする際にこのデザインはどういう意図でデザインされているかを深く考える事が重要です。 配色、隙間、配置、大きさ、線の太さなど・・・ これらの全ては、コーディングする際には全て確認していることかと思いますの

某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty

YES! Nuxt 2.0 is finally out!We are really excited to release Nuxt.js v2.0.0, a major release with a lot of improvements. We recommend to look at the GitHub release note to know more about the technical details 🕵️‍. This article has been published on stage, see https://twitter.com/nuxt_js/status/1043092485310955520 Create-nuxt-appWe are proud to announce our official scaffolding tool that takes o

Vue School の無料コース「Vuex for Everyone」を受講した．Vue.js 初心者でも受講できるレベルになっているし，今まで Vue.js を書いたことはあるけど，Vuex はまだ使ったことがないという人にもオススメできる．進め方にもよるけど，写経するとしても2,3時間あれば終わる． Vuex for Everyone 今回受講した「Vuex for Everyone」の題材は「shopping-cart」で，ステップバイステップに実装を進めていく．動作確認をしながら，機能を追加したり，リファクタリングをしたりする． vueschool.io 動画を見るとわかるけど，とにかく実装スピードが早いので，写経する場合は何度も戻して見直す必要がある．ただ困ったときは Vue School の GitHub にセッションごとにコミットされているので，それを活用すればオッケー．

JavaScipt についてのハンズオンを開催している JSLounge が提供する、プロフェッショナルによる上質な資料を使って、自宅で最新技術をキャッチアップできる資料販売サイトです。

builderscon tokyo 2018での情報セキュリティのセッション。 "実例と基礎で情報セキュリティについて知る" というお題で話しました。

Aug 11, 2018 このブログはこちらの翻訳ブログです。 過去数ヶ月にわたり、私たちは Vue アプリケーション用の標準ビルドツールチェーン、次世代の Vue CLI について懸命に取り組んできました。 今日私たちは Vue CLI 3.0 のリリースとそれに付随する全てのエキサイティングな機能を発表することにわくわくしています。 豊富なビルトイン機能Vue CLI 3 は以前のバージョンとは全く別物です。書換えのゴールは以下の 2 つです： モダンなフロントエンドツール、特に複数のツールを混在させる場合の構築疲れを軽減する； どんな Vue アプリのデフォルトにもなるよう、可能な限りツールチェインにベストプラクティスを組込む 核として、 Vue CLI は webpack 4 の上に構築された事前設定済みのビルド設定を提供します。開発者が必要とする構成の量を最小限に抑えることを目指

「第19回ゼロから始めるセキュリティ入門 勉強会」での, CSS Injection の脅威と対策に関する short talk 用に作成した資料です :-) 勉強会ページ: https://weeyble-security.connpass.com/event/98127/ I explain some techniques of CSS Injection by @masatokinugawa, @SecurityMB, and other websec researchers in Japanese. I highly recommend to check the following awesome work by @SecurityMB and @0x6D6172696F. - https://sekurak.pl/wykradanie-danych-w-swietnym-styl

ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ

自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h