ひっそりと @catnose の友人としてZennのマークダウン部分の改善やエディターを開発している@steelydylan です。 ReactやVueなどのフレームワークの影に隠れてあまり注目されていないようにみえるWeb Componentsが今回活躍したのでメモがてら記事にしておこうと思います。 Web Componentsを使うまでのマークダウン表示の問題点 Zennのマークダウンには通常のマークダウン記法に加え独自の記法が存在します。 たとえば、上記の記法でTwitterのウィジェットが表示されます。 まさにこのウィジェットの表示には今回紹介するWeb Componentsの技術の一つであるCustom Elementsが利用されています。 実はZennのマークダウン記法は全てここのソースコードに集約されています笑 Zennではこういったオリジナルの記法を実現するためにマークダウ

2021/02/25(木) Node学園 35時限目の発表資料 https://nodejs.connpass.com/event/203464/ Node.js の ES Modules 対応についてRead less

はてなブログで技術に関するブログを書いている方に、“ブログを書き続けること”について教えていただく企画「エンジニアのブログ探訪」。第2回は河合俊典（ばんくし）さん（id:vaaaaaanquish）に登場いただきました。 河合さんは大学在学中の2013年にブログを開設し、これまでさまざまな技術や多くの技術書に関する記事を発信し続けています。 どのようにして記事の題材を考えるのか、そしてそれらの記事は河合さんにとってどんな形で役立っているのか──河合さんと技術ブログの関わり方を、テキストインタビューで伺いました。 河合さんの技術ブログ「Stimulator」 ──ブログを始めたきっかけについて教えてください。 既に技術ブログを書いていた方々とGive and Takeの関係になりたい、と感じたのがきっかけです。 今でこそさまざまな媒体で多くのソフトウェアエンジニアが技術ブログを書いていますが

2021/02/24の11時頃〜1時間ほどzenn.devにアクセスしづらい・アクセスできない問題が発生していました。その後も3時間ほど一部のページへのアクセスができない状況となっていました。Zennに投稿してくれた方、見に来てくれた方、ご迷惑をおかけしてすみませんでした。 今回の障害は学びが多かったので、個人の記事として残しておくことにします。 原因 今回の障害は、使用しているクラウドサービスではなく、Zenn自体に原因がありました。 1. KaTeX記法により生成されるHTMLが思った以上に大きかった ZennのマークダウンエディターではKaTeX記法をサポートしています。例えば、$a\ne0$と書くとa\ne0と表示されます。 KaTeXはサーバーサイドレンダリングをサポートしており、KaTeX記法からの数式のHTMLへの変換はサーバーサイドで行なっていました。DBにはマークダウンだ

2020年11月にAWSにより発行されたAmazon CloudFrontを使ってストリーミング配信を行う際のベストプラクティス集なホワイトペーパーについて、ざっとですが読んでみました。概要をまとめてみます。 はじめに 清水です。先日ふとしたことからAWSのホワイトペーパーに「Amazon CloudFront for Media ~ Best Practices for Streaming Media Delivery」という、Amazon CloudFrontを使ってストリーミング配信を行う際のベストプラクティス集なものが追加されていることを知りました。ホワイトペーパー自体のドキュメント履歴から、2020年11月に発行されていたようです。 Amazon CloudFront for Media ~ Best Practices for Streaming Media Delivery

「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 こんにちは、ログラスのエンジニアの佐藤です。 昨年に入社して早2ヶ月経ちましたので、入社記事でも書いていきます。 「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 と、CTOに言ったのは昨年末くらいでした。 入社してまだ1ヶ月経たないくらいです。 ログラスは創業当時からAngularを使って開発をしていました。 正社員のフロントエンドエンジニアは自分が入るまではいなくて、業務委託の方と協働しながら開発をしていました。 そのプロダクトをゼロからこの創業期のタイミングでReactでフロントエンドを作り直そうというお話です。 今回のお話はあくまでログラスのプロダクトチームの目指す理想像とAngularの相性が悪いだけで、AngularがReactより劣っているわけではありません。 Angularはフ

フロントエンドエキスパートチーム内でスピードハッカソンを行いました。通常のスピードハッカソンは共通の題材に対してチームごとにスコアを競うというイメージですが、今回はランダムに決めたチームでそれぞれのチームごとに題材を探すところからはじめ、計測方法も自由としました。 今回のハッカソンは、チームのコミュニケーション促進を主な目的として開催しましたが、結果としてプロダクトの改善につながる成果、とっかかりとなる知見などが得られました。 今回取り組んだ内容などを紹介します。 開催目的とチーム分け フロントエンドエキスパートチームは現在 9 名いますが、メンバーごとに異なるプロダクトや関心事を業務としています。そのため、同じチームに在籍していながら接点が少ないメンバー同士も存在しています。 普段接点が少ないメンバー同士でチームを組んで、コミュケーションを取りながら一つのことに取り組める機会としてハッカ

TL;DR docker-compose では bind mount の構文が "short", "long" の2通りあるが, それぞれ挙動が異なる docker-compose.yml の volumes に略記法 (short syntax) を用いると, コンテナ内で non-root user を用いる際にエラーの発見が遅れる可能性があるので避けよう 概要 Docker アプリケーション (コンテナ) は, 実行時にホストのファイルやディレクトリをコンテナ内にマウントし, ホストとのファイル共有を行うことができます (bind mount). docker-compose では, Compose ファイル (デフォルトでは docker-compose.yml) にマウント情報を記述することができますが, 構文によっては意図せぬ挙動や, パーミッションエラーを引き起こす原因となり

r7kamuraと言います。2020年9月頃からANDPADの開発に参画しています。 2021年2月、ANDPADで利用しているWebアプリケーションフレームワーク Ruby on Rails (以下Rails) のバージョンを5.2から6.0にアップグレードしました。今後アップグレードを行う方が同様の作業を行えるよう、今回の変更に伴い必要となった作業について、あらためて言語化してこの記事で共有できればと思います。 全体の流れ 大まかに分けると、今回は次のような手順で作業を進めていきました。 Rails 5.2系の最新のバージョンに上げる Rails 6.0版のブランチを用意してテストを通す Rails 5.2と6.0に両対応したコードに変更する Rails 6.0で検証を進める Rails 6.0に本番環境を切り替える Rails 5.2向けの対応を取り除く Gemのバージョン変更 Ra

2022-05-06 更新 「React でコンポーネントテストを書くといいらしい、 React Testing Library や jest でサンプルを参考に書いてみたが 現実どうやってプロダクトコードに合わせていけばいいか分からない」 そういった方が対象となる本を目指しています。 いろいろ調べて実践したものの下記のように感じた方に適しているかもしれません。 - 結局テストで何を担保しようとしているか分からない - React のテストでハマっているか、Jest でハマっているか分からない - モックとかスパイとかアプリケーションとは遠い出来事も多くてピンとこない 誤り・ご指摘あればフィードバックいただけると嬉しいです。 無料で配布していますが、気に入ったらサポートなどいただけると今後もこの本をアップデートし拡張していく気持ちになれるのでよろしくお願いします。

CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整

WEINの前谷優太と申します。 今回下記の記事が出た影響で、多くの方から僕に、連絡や問い合わせが来ております。 最初から最後まで渦中の1人として巻き込まれた僕としては、この件を言及するかどうかについて最後の最後まで悩みました。 それこそ元上場企業の社長や本田圭佑さんや高岡浩三さん含めて、海千山千の人たちに対して、たとえ本当のことであったとしても22歳の自分が何か言及をすることは、本当に恐怖でしかありません。 ですが事実無根のことや、切り取られて印象操作された記事で、WEINが掲げたビジョンを達成できなくなってしまうのは、どうしても嫌だったのでこのnoteを投稿いたします。 (こういった文章は表に出すのは今回が初めてですが、可能な限り客観的な事実を記載していき、解釈を入れないように注意してまいります……。) はじめに今回、DIAMOND SIGNALで取り上げられているWEIN Group(

〜「無意識の偏見を適切に理解する」ためのノウハウを広く共有し、日本社会全体の多様性の受容の推進を目指す〜 株式会社メルカリ（以下、メルカリ）は「無意識バイアスを適切に理解する」ためのノウハウを広く共有し、日本社会全体の多様性の受容を推進すべく、「無意識バイアスワークショップ」研修資料を、当社採用サイト内、ダイバーシティ＆インクルージョン（以下、D&I）ページにて無償公開いたします。 メルカリでは社内のD&I（多様性の受容）の推進の一環として、2019年より自社内製による独自研修プログラム「無意識バイアスワークショップ」を実施してきました。メルカリではこのプログラムを2020年初めより、全マネージャー受講必須の研修としています。 「無意識バイアス」とは、普段の生活や文化による影響で、無意識下に培われた「思い込み」や「偏見」を指す呼称です。「無意識バイアス」のひとつの例として挙げられるのが「女