池田 泰延 @clockmaker ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSSのフロントエンド技術が専門、TypeScript/WebGLによる3D表現やクリエイティブコーディングが得意。著書『JavaScriptコードレシピ集』など解説書12冊を執筆。ウェブ業界の最新情報と、現場で役立つ技を発信します。趣味でタイムラプス撮影。 ics.media/entry/staff/ik…
池田 泰延 @clockmaker ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSSのフロントエンド技術が専門、TypeScript/WebGLによる3D表現やクリエイティブコーディングが得意。著書『JavaScriptコードレシピ集』など解説書12冊を執筆。ウェブ業界の最新情報と、現場で役立つ技を発信します。趣味でタイムラプス撮影。 ics.media/entry/staff/ik…
Zero Bundle SizeTypewind compiles away all the styles used, and converts them to static classes at build time. Apply variants to multiple styles at onceTypewind provides an intuitive syntax to apply variants to multiple styles. TypesafeUsing TS intellisense, Typewind is able to provide type safety to tailwind, and provide autocomplete for all the classes from tailwind.config.js
はじめにTIG真野です。Go 1.20リリース連載の2本目は、Minor changes to the libraryの context についてです。Go 1.7で context.Contextが入ってから、context界隈において久しぶりのアップデートです。 contextの歴史やダイジェストは、澁川さんのGo 1.16のsignal.NotifyContext() 記事に書かれていますので、ぜひ確認ください。context自体にの説明は、さき(H.Saki)さんの よくわかるcontextの使い方というZenn Bookを読むとすごく詳しくなれると思います。 リリースノートには、WithCancelCause()と Cause() 関数が追加され、キャンセル理由を追加・取得できるようにするという内容です。なぜか2023.1.22時点(go 1.20rc3)だとGoDocにはWit
こんにちは、株式会社LegalOn TechnologiesのLegalForceキャビネ開発部でQAリードを務めている島根(@shimashima35)と申します。 QAというとマニュアルテストが中心かと思われるかもしれません。確かにマニュアルテストはQAの業務の一部ではありますが、「質とスピードの両立」つまりプロダクト品質の高さとリリーススピードの両立を目指すため自動テストの導入もおこなっています。 今回はLegalForceキャビネのバックエンドに対するAPIテストを実装した話をご紹介します。 APIテストとは まず最初にAPIテストについて説明します。 APIテストの概要 APIテストとはWeb APIの外形的な仕様を満たしているかを HTTP(S)を用いてテストすることです。バックエンドのコントローラーに対するユニットテストとは以下の点が異なります。 HTTP(S)を経由する デ
はじめに 汎用的なElementレイヤーのコンポーネントを作るときの Props定義はこうした方がよいのではないか、という話です。 ※ここで言うElementレイヤーとは: input, button, label など、atomic design でいう atom の部分 ComponentPropsを使おう このように一つ一つのプロパティを定義するより type Props = { value?: string; onChange?: React.ChangeEventHandler<HTMLInputElement>; }; export const Input = ({ value, onChange }: Props) => ( <input value={value} onChange={onChange} /> );
Introducing Astro 2.0! Astro is a popular web framework for building performant, content-focused websites. Our next-gen frontend architecture (known as Astro Islands) can optimize your site to load 33% faster with 90% less JavaScript using the UI frameworks you already love like React, Svelte, and Vue. Astro 2.0 is the first major web framework to deliver complete type-safety for Markdown and MDX.
「情報セキュリティ10大脅威 2023」簡易説明資料(スライド形式) 情報セキュリティ10大脅威 2023 [組織編] 85ページ(PDF:2.6 MB) 情報セキュリティ10大脅威 2023 [個人編] 84ページ(PDF:2.8 MB) 情報セキュリティ10大脅威 2023 [組織編](英語版)85ページ(PDF:2.5 MB) 情報セキュリティ10大脅威 2023 [個人編](一般利用者向け)68ページ(PDF:2.9 MB) 「情報セキュリティ10大脅威 2023」簡易説明資料(脅威個別版) 情報セキュリティ10大脅威 2023 [組織編](脅威個別版)(ZIP:3.0 MB) 情報セキュリティ10大脅威 2023 [個人編](脅威個別版)(ZIP:3.1 MB) 10大脅威の引用について 資料に含まれるデータやグラフ・図表・イラスト等を、作成される資料に引用・抜粋してご利用いただ
はじめに ここ最近の業務では TypeScript を用いた webフォームの実装を担当させていただいています。 親愛なる上司が TypeScriptファーストなバリデーションライブラリの存在を教えてくださり、「プロダクトでどう使えるか考えてみるのも楽しいかも」とお題をくださったので、今回は手始めにZodの基本的な使い方について記事を書かせていただこうと思います。 Zod とは Zod GitHub: https://github.com/colinhacks/zod TypeScriptファーストなスキーマ宣言・バリデーションライブラリ。 ここでいうスキーマとはデータの型のことで、Zodではスキーマの宣言 → スキーマに沿っているか値を検証 というステップでバリデーションを行います。 公式にもある通り、「parse, don't validate」の思考に基づいた関数型プログラミングのア
はじめに アーキテクチャ・デザイン全般 ソフトウェアアーキテクチャの基礎 Clean Architecture 達人に学ぶソフトウェアの構造と設計 Design It! ソフトウェアシステムアーキテクチャ構築の原理 データ指向アプリケーションデザイン マイクロサービス マイクロサービスアーキテクチャ マイクロサービスパターン 実践的システムデザインのためのコード解説 ソフトウェアアーキテクチャ・ハードパーツ ドメイン駆動設計 エリック・エヴァンスのドメイン駆動設計 ドメイン駆動設計入門 ボトムアップでわかる!ドメイン駆動設計の基本 現場で役立つシステム設計の原則 要件定義 はじめよう!プロセス設計 ~要件定義のその前に はじめよう! 要件定義 ~ビギナーからベテランまで はじめよう!システム設計 ~要件定義のその後に Web, Web API Webを支える技術 プロになるためのWeb技術
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフートラベルと宿泊予約サイトの一休.comにおいて、システムリニューアルを行い統合したプロジェクトについて紹介します。 これはヤフートラベルと一休.comのシステムを統合した後の画面です。左がヤフートラベル、右は一休.comです。サイトは2つですが、バックエンドもフロントエンドも、1つのシステムで2つのブランドのサービスを配信しています。そのため、一見するとデザインが似ています。 ですが、細かいところをよく見ると、ホテルの表示カードのデザインは横幅と縦幅が違いますし、当然ロゴとかバナー表示するコンテンツも異なります。ヤフートラベルの方はYahoo! JAPAN IDでログインでき、一休.comの方は一休.comのIDでログインな
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
Serverless Frontend Meetup #1 「Cloudflare Workers」
20kb for a simple date transformation?? All I wanted is a pretty output for a relative time. Like time is in 5 minutes or 2 weeks ago or tomorrow . You know, like your calendar can do, and Twitter, and kinda anything that needs to refer to a relative time in a friendly way. Now, you may think, I got this, and begin doing something like: Yeah… please don’t. While relative times may seem like a simp
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 10 月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている Vercel 社が主催する、Next.js とその周辺技術に関するカンファレンスです。 コミューンでもメインプロダクト commmune の Web フロントフレームワークとして Next.js を採用しており、私個人としてもとても興味深くオンラインから視聴をしていました。 特に話題になったのは、React Server Components をサポートしたルーティング・レイアウトシステム"app directory"などの新機能を新たに追加したNext.js 13と、"Webpack の後継"を謳う Rust
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く