はじめに 下記の記事での検証の結果、文字列をはみ出さずに改行させるためには、overflow-wrap: break-word; が良さそうだ、ということがわかりました。 しかし、flex の文脈の中ではこの方法では解決しないケースがありました。 困ったこと flex の要素内で、固定値の幅を持った緑の要素と、そうでないオレンジの要素を並べます。 オレンジの要素は overflow-wrap: break-word; が指定されているにも関わらず、改行されませんでした。 See the Pen Untitled by shiraishi yuma (@punkshiraishi) on CodePen. 解決方法 1 : 要素の幅を指定する オレンジの要素の幅を指定すると、オレンジの要素内の文字は改行します。 See the Pen flex and break-word 2 by shi

このようにさまざまなデコレータが用意されていますが、今回はサンプルで利用するデコレータに絞って説明します。他のデコレータについては、NestJSの公式ドキュメントなどを参照してください。 依存性注入（DI） 依存性注入（DI、Dependency Injection）とは、クラスの依存関係を解決する仕組みです。NestJSでは、依存性注入を使ってクラスの依存関係を解決します。 クラスの依存関係とは、クラスが他のクラスに依存している関係のことです。例えば、次のようなクラスAがあったとします。このクラスは他のクラスに依存していません。@Injectable()デコレータを使って、サービスを定義します。 @Injectable() class A { constructor() {} } そして、次のようなクラスBがあったとします。このクラスは、@Inject()デコレータを使って依存性を注入し

Vue.js v-tokyo Meetup #16の登壇資料です。 🌟

{ sns: @ushiro_noko, jobs: { main: STORES, sub: NuxtLabs Japan } }

技術をわかりやすく伝えるためのテクニックとしての「テクニカルライティング」を学べます。Developers Summit 2023の登壇資料。開発者・エンジニアの方向け。 https://twitter.com/naoh_nak

要するに Nuxt3 Stabledで開発をしていたら、XSS脆弱性が顕在化したという話。 結論、基本的な点ではあるけど、ユーザーインプットが表出する場所ではちゃんとSanitizeしようねという話。 OG情報やページタイトルを動的生成するために、useHead()を使って<title>タグと<meta>タグに動的な値を入れていた。そこのSanitizeが欠落していたから反省しようねという話。 はじめに 本記事の投稿時現在、本記事で扱う事象は既にNuxt Communityにとって既知であり、対応を検討並びに実施している最中となります。 実際、どういう脆弱性が判明したの？ 百聞は一見にしかず。実際に私の手元で顕在化したXSS脆弱性を、Playgroundにシンプルに書き直してみました。まずはこちらをご覧ください。 なお、モノホンはもう少し複雑なロジックで、descriptionやog:ti

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

デジタルトランスフォーメーション（DX）とは、企業の競争力の維持や強化のためにデジタル技術を活用し、新しいビジネスモデルを考えていく取り組みです。 DX 推進は 1. デジタイゼーション（アナログデータのデジタルデータ化、業務プロセスの部分的なデジタル化）、2. デジタライゼーション（業務プロセスのデジタル化）、3. デジタルトランスフォーメーション（ビジネスモデルの変革）の三段階に分けて定義されており、それぞれの段階を経て企業の競争上の優位性確保に繋げます。取り組みにあたっては多面的な視点が必要となり、IT 部門・ビジネス部門・利用者部門の相互かつ継続的な連携が必要と言われています。 DX の推進には、データ活用方法の確立やオンプレミスのレガシーシステム更改など、さまざまなハードルがあります。一方でこの課題に取り組まずにいる場合、国内の経済損失額が 2025 年以降に最大 12 兆円／年

私は安田峰俊。プロのルポライターをやっている者だ。この年末年始、20代の後輩ライターに原稿の書き方を教える機会があったり、別の場でかなりヤベえ水準の新人の原稿を読まされる機会があったりしたので、思ったのである。ちょっと文章術を世間に伝えてみようと。 第1回記事で書いた通り、私は大学院修了後に就職に失敗してから、1文字1円以下のウェブライター→コンビニ売りの怪しい500円ムックの執筆者→裏モノ・実話誌ライター→ブログ本作者→週刊誌記者→微妙な中国ライター→わりと有名な賞の受賞歴を持つノンフィクション作家（わざと「ルポライター」を名乗っているが）、というクラスチェンジをおこなった。 ゆえに、これまでに詩と長編小説以外ならば、学術論文を含めてたいがいの文章を書いた経験がある。過去14年間の寄稿先は、倒産直前に天然水の販売に手を出していたイケていない編プロが作る無料冊子から、アカデミックな中国通の

Design layouts more efficiently by pulling text strings, images, and icons from one palette. Content Reel lets you create custom content and share it with other Figma users. Collaboration has never been easier! Content: Browse or search content to find published collections of text strings, imag...

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

リンク 公式サイト デモサイト 概要 Camome UI は React または HTML + CSS で使用できる UI フレームワークです。 ソースは React + CSS Modules で書かれており、 それを React コードからインポートするか、静的なクラス名で出力された CSS ファイルを読み込むことで使用できます。 特徴 軽量なバンドルサイズ 例えば @mui/material@5.11.6 の Button は単体で16.9KBあり、それに Emotion や ThemeProvider も加わります。 それに対して Camome UI の Buttonは単体で 1.42KB(CSS 含む)、それにグローバル CSS の 4KB が加わります（計測方法）。 これらのフレームワークは言ってみれば「フルスタック」であり、どんなウェブサイト・アプリでも構築できる柔軟性と機能

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 今回は、Reactのディレクトリ構成について再考する機会があったので、記事にしようと思います。 なお、技術スタックについては以下の記事を参照してください。 tech.locaop.jp Reactのディレクトリ構成について 現状は、フロントエンドのsrc配下は以下のような感じになってます。 @interfaces/ (55) api/ (88) components/ (50) context/ (3) pages/ (136) utils/ (22) これ、ロカオプMEO側だけ書いているんですが、プロダクトもだいぶ成長してきまして、それぞれのディレクトリ内のファイル数がすごいことになってます。 (かっこ内の数字がファイル数です。) それぞれのmonorepo内のディレクトリが、こんな感じです

はじめに こんにちは、Kyashの品質管理を担当している、Tokkiです。 Kyash QAチームで、QAエンジニアとQAマネジャーの募集を開始しました。 herp.careers https://herp.careers/v1/kyash/Pe3iokatGiNGherp.careers たくさんの方に興味をもっていただきたいので、募集要項で記載している人物像や業務内容を少し詳細にお伝えしたいと思います。 募集している職種について 組織構成 プロダクト部門 Quality Assuarance(以下QA)チームはプロダクト部門の中の一つとして存在しています。 Kyashのプロダクト品質をサポートする横断的プラットフォームとして、頼られる存在であるとともに、品質向上のためなら積極的に行動をしていくアグレッシブなチームを目指しています。 QAチーム構成 新しいメンバーが加わり、嬉しくも1人体

2022年11月末のリリース以降、1週間未満でユーザー数が100万人を突破するなど、大きな注目を浴びるChatGPT。マイクロソフトが検索エンジンBingとChatGPTを融合した、新しい検索機能を発表したことでも話題を呼んでいる。 そんなChatGPTにいち早く注目し、さまざまな活用方法を考案しているのがnote株式会社 CXOの深津貴之氏だ。同氏は2月9日（木）、「あなたの仕事が劇的に変わる!? チャットAI使いこなし最前線」と題したイベントに登壇し、豊富な具体例とともに仕事でも役立つChatGPT活用術を公開した。 本レポートではChatGPT初心者に向けた基礎知識を整理したうえで、“深津式”ChatGPT活用術を紹介していく。 ChatGPTとは？ 何がスゴイ？ChatGPTとは、OpenAI社が開発した自然言語処理のAIモデル「GPT」を搭載した、対話型のAIチャットツールのこと

LAPRAS 社内で開催した Vue3 勉強会の資料を一部内容を変更して公開します。 Vue3 の新機能、Breaking Change に対して Codesandbox でひとつひとつ実行環境を作っています。動作・コードを検証しながら読んでもらえると嬉しいです。 🙋‍♂️ 対象読者 Vue2 を Vue3 に移行中 or 移行検討中の人 普段 Vue は触らないけど、教養的に Vue3 をキャッチアップしたい人 Vue3 の機能・注意点を普段フロントエンドを触らないメンバーに説明したい人 🏎️ Vue3 で何が変わる？ 新たな API の追加 Teleport, Fragments、Suspenseなど便利な API が多数追加 リアクティブの改善 Vue2 はObject.definePropertyを利用したリアクティブの実装だったが、Vue3 ではProxy をベースに変更 パ

フリーランスITエンジニアの案件数が多い言語、1位Java、2位JavaScript、3位PHPなど。Go言語は人材不足。レバテックフリーランス調べ ITエンジニア向けの転職や求人などの支援サービスをに提供するレバテックは、フリーランスのITエンジニア向けに案件紹介などを手がける「レバテックフリーランス」に蓄積された2万件以上のフリーランス案件のデータを元に、プログラミング言語別の案件数や月単価のランキングを発表しました。 集計期間は2021年10月から2022年10月までの1年間です。 発表によると、フリーランスのITエンジニア向けに案件数が多いプログラミング言語の1位はJavaで5564件、次いで2位がJavaScriptで3902件、3位がPHPで2836件となっています。 1位のJavaは、Webアプリケーションやゲームなどの開発に用いられることは比較的少なく、主に業務アプリケーシ

Magic Moment の @aqlwah です。 2021年10月に入社してから1年ほどの間は、フロントエンドエンジニアとして React や Redux を用いた SPA の開発に主に従事していました。 それが昨年10月に行われたチーム体制再編をきっかけとして、バックエンドの開発にも参画するようになりました。 この記事では、フルスタックエンジニア見習いとなった私が Go をキャッチアップしてバックエンド開発を始めるまでに取り組んだ学習の経緯（ほぼ書評）をご紹介します。 余談ですが、この記事は先日にチーム内で開催した LT 会での発表をブログ向けの文章として書き起こしたものです。 私たち Tech チームでは、不定期で自由参加の LT 会を実施しており、業務内外で得た様々な知見を共有しています。 LT 会についての詳細もいずれこのブログでご紹介できればと思っています。ご期待ください。

Today, we are announcing Sandpack 2.0, which introduces Nodebox—a fast Node.js runtime that allows you to run server-side code in any browser. One year ago, we introduced Sandpack, an open-source in-browser bundler that allows you to run live running code examples on your website. We couldn’t have made a better decision. We knew how powerful Sandpack is (it's the bundler that powers CodeSandbox it

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Type is the AI-powered document editor that speeds up every step of the writing process.

Documentation | Submit requests and defects | Slack community Automate production of page and component design specifications (“specs”) of selected components, instances and frames. The output is useful for design-dev handoff, auditing in progress design work, and critiquing with teammates. Fea...

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert