cardboarderのブックマーク - はてなブックマーク

サービスのヘッダーリプレイスがたいへんだった話 - クラウドワークスエンジニアブログ

こんにちは、 @t0yohei です。先日、crowdworks.jpで使用されているヘッダーのリプレイスを行いました。ヘッダーのデザインを改善し、より使いやすくなりました！ – クラウドワークス　お知らせブログこのリプレイスでは、ユーザビリティやアクセシビリティの向上を目指すと同時に、技術的負債の解消や新しい画面レイアウトの下準備といった意図もありました。このブログでは、今回のヘッダーリプレイスで直面した課題やポイントを共有したいと思います。ヘッダーの改修や多くの画面に適用されているUIパーツのリプレイスに取り組む方にとって参考になれば嬉しいです。バリエーションの把握と、採用パターンの選択サービス全体に反映されているヘッダーをリプレイスするには、まずどのようなバリエーションが現在存在しているのかを知る必要があります。時には特定画面に向けてカスタマイズされたヘッダーもあった

cardboarder 2024/05/21

お疲れさまでした

リンク

TSKaigi 2024参加レポート - クラウドワークスエンジニアブログ

皆様こんにちは。クラウドソーシングサービス﹁クラウドワークス﹂にてエンジニアをしております@okuto_oyamaです。今回は、5月11日に開催されたTSKaigi 2024に参加してきたのでその参加レポートをお届けします。 TSKaigi 2024とは tskaigi.org TSKaigi 2024は、日本最大級のTypeScriptをテーマとした技術カンファレンスです。会場は昨年のVue Fes Japan 2023のときと同様に、中野セントラルパークカンファレンスにて開催されました。オフライン参加とオンライン視聴を含めた総参加者は2400人以上となっており、とても注目が集まった技術カンファレンスになったと言えます。 TSKaigi 2024では合計3トラックに分かれており、セッション30分・LT5分でそれぞれ発表が行われていました。フロントエンド開発にとどまらず、バックエンド開

cardboarder 2024/05/16

参加してきました

リンク

サービス開発におけるVue3とTypeScriptの親和性について

2024年5月11日︵土︶に開催された TSKaigi 2024 のセッションで発表したスライドになります。 Vue3がリリースされ、早くも4年弱経とうとしています、Vue2のLTSも2023年末に終了し、新規開発ではVue3を利用することが主流となってきました。 Vueと並ぶフレームワークとしてReactがありますが、未だにReactと比較される際、TypeScript対応が…という噂がたまに聞こえてきます。しかして、Vue3とTypeScriptの親和性は実際のところどうなのでしょうか。Piniaやその他ツールチェイン側などと共にVue3の機能や実際の実装例とともにVue3とTypeScriptの親和性の疑問を解消できるような発表にできればと思っています。 https://tskaigi.org/talks/karan_corons

cardboarder 2024/05/14

リンク

開発責任者がやるべきことの気づきと"Think Like a CTO" - クラウドワークスエンジニアブログ

1年をふりかえる年の瀬ご多端の折、皆様におかれましては本年も大変お世話になりました。crowdworks.jpの開発をしているプロダクト開発部部長の@hihatsです。本記事はクラウドワークスAdvent Calendar 2023 シリーズ2の25日目の記事です。今回は、プロダクト開発部として今年取り組んできたことと、その中での気づき、﹁Think Like a CTO﹂という書籍の話にも触れていきます。今年やってきたこと技術的負債解消への取り組み昨年のアドベントカレンダーでも書きましたが、2023年も技術的負債の解消に取り組んで参りました。結果としては、フロントエンドでの注力の割合が大きかった一年でした。詳しくは@okuto_oyamaさんの1日目の記事をご覧ください。記事にもありますが、Vue.js化をフロントエンドを触る全チームが行える体制に整えることで加速させてい

cardboarder 2023/12/27

リンク

2023年 crowdworks.jp の SRE チームでやったこと - クラウドワークスエンジニアブログ

この記事はクラウドワークス Advent Calendar 2023 シリーズ1 6日目の記事です。こんにちは。crowdworks.jp SRE チームの田中︵@kangaechu︶です。この記事では crowdworks.jp の SRE チームが2023年にやったことを記載していきます。やっていることは色々で、まとまりはありませんが、そこら辺はご容赦ください。 2022年の振り返り 2023年にやったこと CircleCI インシデント対応 RundeckのECS化 Railsで使用しているMemcachedをRedisに寄せる課題 1. Memcachedでは停止時にデータが揮発する 2. Memcached単体ではマルチAZ構成でデータのレプリケーションができない 3. Memcached/Redisともにバージョンアップをしていない 4. MemcachedとRedi

cardboarder 2023/12/08

リンク

crowdworks.jp のフロントエンド活動を振り返る2023 - クラウドワークスエンジニアブログ

この記事はクラウドワークス Advent Calendar 2023 シリーズ1の1日目の記事です。クラウドソーシングサービス﹁クラウドワークス﹂︵以下 crowdworks.jp ︶にてエンジニアをしております、フロントエンドの可能性をしつこく信じ続ける@okuto_oyamaです。一昨年・去年と引き続き、今年もアドベントカレンダー初日の盛り上げ手としてやっていきます。よろしくお願いします。フロントエンド活動の振り返りをしてみよう一昨年・去年もフロントエンド活動の振り返りをしてみましたが、今年もやっていきます。qiita.com engineer.crowdworks.jp 全体総括編まずは crowdworks.jp の全体のフロントエンド活動を総括していきます。 erbのVue.js化活動が拡大昨年から続けているフロントエンドとバックエンドの分離作業についてお話ししま

cardboarder 2023/12/01

今年のまとめです

リンク

フロントエンド勉強会の振り返り | ランサーズ（Lancers）エンジニアブログ

この記事は、Lancers︵ランサーズ︶ Advent Calendar 2023 の1日目の記事です。フロントエンドエンジニアの谷︵@high_g_engineer︶です。 2023年が馴染んできたと思ったら、もう終わろうとしてますね。怖い怖い。年の瀬なので、約1年ほど取り組んだ﹁フロントエンド勉強会﹂を振り返ります。フロントエンド勉強会とはフロントエンド初学者を対象とした社内勉強会です。モットーは、フロントエンド力を底上げする勉強会。オリジナルのカリキュラムを元に、口頭で説明を加えながら、ハンズオン形式で進めていました。勉強会で扱った内容 JavaScript︵ES2015︶ HTML、CSSの基本的なマークアップ React周辺知識︵環境構築、コンポーネント、ReactHooks、GlobalState、CSS in JSなど︶ TypeScript 社内製デザインシス

cardboarder 2023/12/01

リンク

「どうしてAngularは流行らないのか」と言われて思うこと | Marginalia

最近に限らず、ここ数年ずっと目にするし、聞かれることもあるこの話について、いくつかの思うこと、ぼやきを書いておく。あとで参照できて便利なので。 1. あなたが使い始めれば少なくとも昨日よりは広まりますよ好きなら使えばいいと思うので僕には気持ちがわからないのだが、好き・気になるけど流行ってないから使わないという心理があるらしい。企業での判断ならわかるが、個人でそれはまったくわからん。仮にそれがマジョリティだとしたら、使われなければ流行らないのに流行らないと使われない、デッドロックで詰みです。あなたが使ってみてそのことを発信すれば、少なくとも昨日より世界で一人分は使用者が増えます。その積み重ねでしか普及しません。ですので、流行って欲しいと思うならまず自分から使って周りに広めてください。 2. そもそも﹁流行っている﹂とは？僕が思うに、﹁流行っている﹂ということと﹁広く普及している﹂ということ

cardboarder 2023/09/24

リンク

散らばったAWS LambdaのGitHubリポジトリをモノレポ構成にしてメンテナンスコストを削減する - クラウドワークスエンジニアブログ

初めまして。crowdworks.jpのSREチームに所属しています @ciloholic です。入社してかれこれ1年経ちますが、筆を執る機会がなかったため、今回が初エンジニアブログとなります。この記事では、入社して3か月ほど行なっていた﹁AWS Lambda周りのメンテナンスコスト削減﹂の取り組みを紹介していきます。背景 crowdworks.jpでは、多くのエンジニアがさまざまなGitHubリポジトリに色々な言語でLambdaを活用してきました。GitHubリポジトリは30個以上、使用言語はNode.js / Ruby / Goとさまざま、CI/CDもCircleCI / GitHub Actionsとバラバラです。 SREチームでは、定期的に各種言語のEOL対応やライブラリのアップデート作業を行なっているのですが、GitHubリポジトリもそれぞれ異なる、使用言語もCI/CDもバ

cardboarder 2023/03/27

リンク

OpenAPIとMSWを使ってユーザーのフォロー機能を実装した話 - クラウドワークスエンジニアブログ

はじめにこんにちは。 crowdworks.jpでユーザー向けの施策・機能開発を行うチームでエンジニアをしている駒井です。 2022年10月にクラウドワークスに入社してから早4ヶ月が経ちました。 crowdworks.jpでは負債解消の一環で、一部のRubyonRailsのerbで作られた画面をVue.jsに置き換える取り組みを行っています。︵社内ではVue.js化と呼ばれています。︶この記事では、施策チームで現在注力しているcrowdworks.jpのクライアントプロフィール画面のVue.js化の中で、ユーザーのフォロー機能を実装した際に扱った技術などについて紹介します。対象について本記事ではVue.js化を行っているクライアントプロフィール画面にある、プロフィール画像やフォローボタンが配置されているサイドバーのフォローボタンを対象として取り上げます。 Vue.js化に

cardboarder 2023/02/28

最近のフロントエンド開発情報です

リンク

2023年2月の crowdworks.jp フロントエンド活動 - クラウドワークスエンジニアブログ

こんにちは、CrowdWorks のジャンヌチームのエンジニア Bugfire です。 crowdworks.jp では複数のチームでフロントエンドの実装・改善をしています。この記事では前回の crowdworks.jp のフロントエンド活動を振り返る 2022 のその後の活動について報告します。最近のフロントエンド活動フロントエンド開発に関わるメンバーが増え、賑やかになってきています！技術的な負債解消活動にて erb で記述されていた既存画面を徐々に Vue.js 化していますデザイナーを中心として作られているデザインシステム︵norman︶におけるコンポーネント設計と実装が進んでいます Storybook のバージョンを 6.3 から 6.5 へアップデートしました関連記事‥Vue3での Storybook v6.3.13 から v6.5.14 にアップデートする前年に

cardboarder 2023/02/17

Web フロントエンドの実装において本来の機能を損なってはいけない

Web フロントエンドの実装において本来の機能を損なってはいけない 2022.12.24 データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で

cardboarder 2022/12/27

リンク

変化に適応するソフトウェアアーキテクチャと組織構造への道程 - クラウドワークスエンジニアブログ

年の瀬ご多端の折、皆様におかれましては本年も大変お世話になりました。crowdworks.jpの開発をしているプロダクト開発部部長兼VPoEの@hihats です。本記事はクラウドワークスAdvent Calendar 202224日目の記事です。我々の組織ではこれまでも技術的負債解消に取り組んできていましたが、今期︵10月︶よりさらに人と時間をそこに集中しています。これまでこのブログでも紹介されてきたようにRubyonRailsのモノリスとなっているcrowdworks.jpにおいて、フロントエンドのVue.jsへの移行は今年に入ってから着々と進む中、バックエンドのほうは保守性の低下からどう脱却していくかが手付かずに近い状態でした。この本丸を攻略するにあたって、闇雲にリファクタリングしていくぞ！では到底うまくいきそうにない。まず﹁何故やるのか、何をゴールとするのか﹂の意識あわ

cardboarder 2022/12/26

リンク

ありがとう Webpacker さようなら Webpacker - クラウドワークスエンジニアブログ

こんにちは。crowdworks.jp における技術的負債の解消をリードするジャンヌチームです。12月ということでアドベントカレンダーの時期ですね。今年も弊社で開催しており、合計25名が参加して盛り上げております。qiita.com ジャンヌチームからは @okuto_oyama が今年のフロントエンド活動の振り返りをしていました。 engineer.crowdworks.jp その中の1つに﹁Webpackerから Simpacker + webpack 構成へ﹂というものがあり、今回はそれに関する取り組みを紹介していきます。 Webpackerとは Webpackerは Rails アプリケーションにおける webpack でのフロントエンド開発をするときに用いる公式ライブラリです。このライブラリの利点として webpack のビルドシステムに詳しくなくとも汎用的な設定

cardboarder 2022/12/13

今までありがとうございました。

リンク

crowdworks.jp のフロントエンド活動を振り返る 2022 - クラウドワークスエンジニアブログ

この記事はクラウドワークス Advent Calendar 2022 の1日目の記事です。クラウドソーシングサービス﹁クラウドワークス﹂︵以下 crowdworks.jp︶にてエンジニアをしております、フロントエンドの可能性をしつこく信じ続ける @okuto_oyama です。一昨年・去年と引き続き、今年もアドベントカレンダー初日の盛り上げ手としてやっていきます。よろしくお願いします。フロントエンド活動の振り返りをしてみよう一昨年・去年もフロントエンド活動の振り返りをしてみましたが、今年もやっていきます。qiita.com engineer.crowdworks.jp 去年と変わらず crowdworks.jp にはフロントエンド専属チームというものは存在しておりません。ですが、今年は去年よりも重要なフロントエンドにまつわる活動をしてこれたと思っています。それでは、ご覧くださ

cardboarder 2022/12/01

書いたぞ！！！！！！！

リンク

Vue Fes Japan Online 2022 参加レポート - クラウドワークスエンジニアブログ

皆様こんにちは、クラウドワークスのジャンヌチーム所属の @okuto_oyama です。最近飼い始めた大型犬と一緒に散歩できるようになり最高に幸せな日々を送っております。 10/16︵日︶に Vue.js 日本ユーザーグループが主催する日本最大の Vue.js カンファレンス、Vue Fes Japan Online 2022 が開催されました。 www.youtube.com 各セッションのアーカイブも閲覧できるようになっていますので、まだ見ていない方もぜひご覧になってみてください。メドピアトラック FUTUREトラッククラウドサイントラック参加したブログを出すまでカンファレンスということなので、今回は視聴していて興味深かったセッションのレポートを書いていこうと思います。キーノート - Evan You 我らが Evan You によるキーノートの発表です。これまでの Vue.j

cardboarder 2022/10/25

お疲れ様でした

リンク

Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js

Vue Fes Japan Online 2022 発表資料（Web 版）昨今 Web 開発において、アクセシビリティを重視することはそれほど珍しくなくなってきました。最新の Vue.js 公式ドキュメントでもアクセシビリティに関する項目が追加されました。しかしながらアクセシビリティ対応に関しては、間違った知識のままはじめるとアクセシブルでなくなる可能性もあります。この発表ではそうした間違いや疑問を解消し Vue.js でのアクセシビリティ向上に取り組みやすくするやり方を発表いたします。

cardboarder 2022/10/17

発表しました

リンク

CoffeeScript 辞めました - クラウドワークスエンジニアブログ

CoffeeScript 辞めましたはじめにこんにちは、CrowdWorks のジャンヌチームのエンジニア bugfire です。 CrowdWorks は歴史のあるサービスで CoffeeScript が利用されている箇所が大量にあります。具体的には411ファイルありました。1いまとなっては CoffeeScript を利用したコードを新たに書くことも少なくなり、改善するときに TypeScript で書き直されることも多くなってきました。しかし、個別に変換すると時間が掛かってしまうため、まとめて機械的に変換することにしました！3行まとめ CoffeeScript より TypeScript の方に記述を移していきたい。利用している Sprockets の CoffeeScript 変換コードを借用して全ファイルを変換しました。確認は変換前後の出力 JavaScript コ

cardboarder 2022/07/06

リンク

縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ

ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。はじめにこの記事では、日本語の縦書き HTMLにおいて、﹁ある1文字が縦組みのなかで違和感なく縦書きとして表示される﹂とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。はじめに N予備校における日本語縦書き HTML CSS の関連仕様日本語の一般的な縦書きに設定するうまくいかないことが起こりやすい文字たちうまくいかない文字がうまくいかない理由を理解する縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type

cardboarder 2022/07/02

リンク

Terraform AWSプロバイダv4アップグレードツールを作ろう - クラウドワークスエンジニアブログ

はじめに SREチームの @minamijoyo です。趣味のTerraformで遊んでいたら、先日HashiCorpさんから﹁Core Contributor to HashiCorp Terraform for 2022﹂という名の、がんばったで賞をもらいました。対戦よろしくおねがいします。 HashiCorpさんから﹁Core Contributor to HashiCorp Terraform for 2022﹂に選ばれました。わーい。https://t.co/qMzV3d2eOc 写真は頂いたTerraformマグカップです。ありがとうございます。家宝にします。最近やってることの近況などを書いた。https://t.co/6u63Bm5urZ pic.twitter.com/GDbiD6Evzf— 城陽人 (@minamijoyo) 2022年4月11日 crowdworks.j

cardboarder 2022/06/22

リンク

はてなブックマーク

タグ

cardboarderのブックマーク (2,434)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス