これを読んで欲しい人のターゲット像や前提について Web版開発の話をしています ITのソフトウェアエンジニアの話をしています ある程度チームのやり方に対して影響を与えられる権限がある人 マネージャーかメンバーかはあまり気にしないです 「発言するのは自由だが聞き流されるだけ」ならこの記事を読む意味はないです ある程度裁量権があり、ビジネスサイドとも話ができるチームのメンバーを想定しています 作業の流れの前提について チケットがあって 作業者がそれを取って（自分で取るのか他人にアサインされるのかは問わない） PullRequestの形でレビュー依頼をかけてレビュワーがレビューする OKならmergeしてそのうち本番デプロイ 間にQAが入るかもしれないけどそこは問わない 手が遅いとは何か？ ある作業者のサイクルタイムが他の作業者に比べて長いこと 100の大きさの作業があるチケットを渡した際に、ほ

はじめに こんにちは。WEBエンジニアのmasakichiです。 OSSを始めたいと思いながらも「なにから始めたらいいかわからない…」と悩んでいませんか？ そんなOSS未経験者にGood First Issueというリポジトリをお勧めしたく記事にしました。 この記事で書いてあること この記事には以下の2つが書いてあります。 Good First Issueについて Good First Issueからコントリビュートするまでの流れ（経験談） Good First Issueとは OSSにコントリビュートしたことのない開発者でもすぐに始められる人気プロジェクトをピックアップしたキュレーションサイトです。 プロジェクトのリンク先はgithubリポジトリで管理されています。 リポジトリはこちら キュレーションサイトはこちら Good First Issueでは下記の基準を満たしたプロジェクトがピ

現在在宅ワーク中なわけだけど, 家族にミーティング中ですとアピールするために, ミーティングはいい感じのランプを点灯させたりしている。 こんなやつ ただミーティング始まる/終わったときに手動でON/OFFするの面倒なので, 自動化してみた。 事前準備 まずは遠隔で操作できるように, スマートプラグを用意。 【Amazon Alexa認定取得製品】 TP-Link WiFi スマートプラグ 遠隔操作 直差しコンセント Echo シリーズ/Google ホーム/LINE Clova 対応 音声コントロール サーキュレーター ハブ不要 3年保証 HS105 TP-LINKAmazon TP-Link のやつが安いのでそれにした。IFTTT 対応しているなら別なやつでもよさそう。Amazon でポチったら速攻届いたので, Webhook の設定して HTTP request 投げて点いたり消えたり

対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先順

Gitを用いた開発作業を行う際、意図がわからないメッセージのコミットを積み重ねていくと、コミットログを見る人の負担が増えたり、コミットログを活用する習慣がなくなっていき、開発効率の低下を招きます。この...

プログラマによるプログラミングのためのBGMなど、仕事や勉強の邪魔にならない無料で使えそうなBGM集。2021年版 在宅で仕事や勉強をしている時間が増えてくると、ずっと無音だと寂しい気がして、できればあまり気にならないBGMや環境音があるといいなあ、と思ったことはありませんか？ 最近流行しているYouTubeでの24時間365日ライブ配信のLoFiチャンネルにはそうしたニーズに応えてか、プログラマがプログラミングのためのBGMを配信しているものもあります。 YouTubeの再生には動画広告が付き物ですが、ライブ配信では最初に広告が再生されると、あとは広告なしでずっと配信が続くため（少なくとも記事執筆時点では）、BGMとして使うのにぴったりです。 この記事ではそうしたYouTubeの配信を中心に、仕事や勉強のBGMとして使えそうなサービスを紹介していきましょう。 いわゆるLoFiチャンネルと

JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。 Explore DOM Events https://domevents.dev/ ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると…… イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加して

素晴らしい課題でコーディング意欲を高めよう。 Photo by Ferenc Almasi on Unsplash. はじめに コーディングを上達させる最も効率的な方法の1つは、できるだけたくさん作ることです。 コーディング課題は、ものを作ることで自分のスキルアップする楽しい方法です。この記事のリストを参考に、何か選んで作り始めましょう！ 急いでいる時や、コーディングのアイディアを枯渇させたくない時は、100以上の課題をここにまとめてあります。 課題には好きなツールを使えるので、練習したいものがあれば、気軽に挑戦してみてください。 1. タスクマネージャUI なんて美しいアプリケーションでしょう！クリーンでモダン、インテリジェントなUIです。 Aysenur Turkによる「CSSグリッドを使ったタスクマネージャーUI」 学べること HTMLでCSSを使用する方法。新しいCSSグリッドを試

よんてんごP @yontengoP ベーチェット病と痔瘻という難病に侵されたナプキンを付けた社畜です。優しく 接してあげて下さい。尻穴方面/IT方面/社畜方面/下ネタ方面のツイートが多い ですが、病気なので許してあげて下さい(傲慢) よんてんごP @yontengoP コレ僕がIT業界の人間だからなのか分からんのだが、 「エラーに何が画面に出てるかおしえてください」 ってそんなに難しい作業…？ 普通に 「画面上に、エラー：XXXって文言がでてると思うので、その内容を教えて」つったら 「こっちはITの人間じゃないんだから出来ない！！💢」とキレられてな 2021-05-15 18:56:53 よんてんごP @yontengoP ちなみにお客さんじゃなくて社内の他部署。 「多分画面にERR_ってのが出てると思うので そこに何が出てるかを知りたいです」 ってだけのお願いなんだけども 「こっちはI

みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac

React Flow is a MIT-licensed open source library. You can help us to ensure the further development and maintenance by subscribing to React Flow Pro. React Flow Pro Getting Started with React Flow Make sure you’ve installed npm, pnpm or yarn. Then you can install React Flow via:

これは何 「デザイナーもReact書いてくださいよ」って空気になったときに読むと役立つかもしれない記事です 基本的に筆者が学んだ流れを記載しています そのため、世間一般のベストプラクティスではないと思います エンジニアの方から見ると邪道な流れ・説明の仕方かもしれませんが、デザイナーに教える上での分かりやすさを重視していますのでご了承ください この記事の中で使っているコードはこちらのリポジトリで公開しています コミットを辿ってもらえれば、各セクションの内容が全て見れます ※言い訳がましいですが、筆者もReactに精通している程ではなく「デザイナーにしては割と知ってる」レベルです もし説明に間違いや不足があれば編集リクエストをお願いします 対象読者 Web or UIデザイナー HTMLとCSSは普通に書けるけど、Reactはほぼ全く触ったことがない人 1人で完全に実装したいってほどではないけ

会社に戻れてよかった約11ヶ月のテレワークを経て、会社通勤に戻った。安心したというのが率直な気持ちだ。もうこれ以上自宅勤務を続けたら、頭がばかになってしまうのではないかと不安にさいなまれていたところだった。朝起きて着替え、玄関を開けて外に出ることがこれほど大事だとは思わなかった。世間的には今後、テレワークの常態化を推進する流れもあると聞くし、たとえば子育て中の夫婦や、性格的に在宅勤務が向いている人にとっては朗報だと思うのだが、個人的にはもう一度自宅勤務を命じられたら、会社の机につっぷして泣いてしまうのではないかと思う。テレワークは二度としたくない。毎朝電車に乗りたいし、会社に行かせてほしいと心の底から懇願する私である。 当初、自分ほどテレワークに向いている人間はいないと思っていた。通勤時間がゼロになり、始業ぎりぎりまで寝ていられる。生活に余裕が生まれ、好きな本を読んだり、趣味のギターを弾い

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ

この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 どう書くんだっけ？ を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー

Blender アセット Blender アドオン プラグイン＆アドオン-Plugin&Addon THE MEGA FLEET - Blender向けの最大級の自動車モデルコレク... 2024-05-02 3D CGI StudioによるBlender向けの最大級の自動車モデルコレクションアドオン『THE MEGA FLEET』がリリースされました！ 続きを読む Blender アドオン プラグイン＆アドオン-Plugin&Addon Step Loop Select Ver1.4 - １列飛ばしで連続面ループ選択... 2024-05-01 KKS氏（@kksabnormal）による１列飛ばしでループ選択を可能にするBlenderアドオン『Step Loop Select Ver1.4』が無料公開されています！ 続きを読む

フロントエンドのデベロッパー、バックエンドのデベロッパー、開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップを紹介します。 2021年、フロントエンドやバックエンドのデベロッパーが次に何を学べばよいか、キャリアアップのための道筋がコンパクトにまとめられています。 Developer Roadmaps Developer Roadmaps -GitHub フロントエンド デベロッパーのためのロードマップ バックエンド デベロッパーのためのロードマップ 開発・運用のためのロードマップ フロントエンド デベロッパーのためのロードマップ 2021年版、フロントエンド デベロッパーになるためのステップバイステップガイドです。PDFもダウンロードできます。 Frontend Roadmap.pdf フロントエンド デベロッパーのためのロードマップ

Git は紛らわしいという評判です。用語や言い回しが意味するものと、そこから想像する挙動が違ってユーザーが混乱すると言われます。これは、git cherry-pick や git rebase のような「履歴を書き換える」コマンドに最も顕著です。私の経験では、この混乱の根本的な原因は、コミットは 差分 であり順番を入れ替えることができるという解釈にあります。しかし、コミットはスナップショットであって、差分ではありません! Git がリポジトリデータをどのように保存しているかを見てみると、Git を理解しやすくなります。このモデルを調べた後に、この新しい視点が git cherry-pick や git rebase のようなコマンドを理解するのにどのように役立つのかを探っていきます。 本当に深く 掘り下げたいのであれば、Pro Git という書籍の Git Internals の章を読むと

しばらくプログラミングをした後に勢いよく寝ると、現実でやってたことや考えてたことの続きみたいな不思議な夢を見ることがある。変数が食べ物になったり自分がDBのレコードだったりしておもしろい。 いくらの寿司 isLoading というbooleanの変数を作っていた。（ここまで現実）その言語のboolean型はいくらの寿司で、いくらをシャリのどちらの端に固めるかによって、スイッチのようにtrue/falseを表現するようになっていた。いくらの場所が中途半端だったら、trueなのかfalseなのかわかりにくくて困るだろうなと思った。 Señorita Shawn MendesのSeñoritaを脳内で再生していた。（ここまで現実）サビの「You keep me coming for ya」というところで、二人称が2回出てくるのは冗長だから、コードレビューで指摘される前に直しておこうと思った。2回

2020/2にbefore 600点台（正確な値は紛失）から始めて2020/9に目標(900点以上)を達成しました₍₍ (ง´･_･`)ว ⁾⁾ うれC ₍₍ (ง´･_･`)ว ⁾⁾ ₍₍ (ง´･_･`)ว ⁾⁾ ₍₍ (ง´･_･`)ว ⁾⁾ pic.twitter.com/pKDX2mPmW6— まっちゃら (@matsu_chara) 2020年9月28日 英語学習は最初の入門のところが割と難しいなと思ったので、やったことをまとめておきます。（なお、この記事は頑張ったから自慢したい気持ちが90%、他の人に参考になったらなという気持ちが10%で提供されています。） ちなみに英語指導経験があるとか、すごいペラペラになったとかそういう感じではないので、近くに英語に詳しい人がいる場合はそちらの人の言うことに従うのがおすすめです。（あくまで素人がやったことが書いてあるだけ） 基本的にリスニ