Magic UI50+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. Perfect companion for shadcn/ui.
React+TSプロジェクトで便利だったLint/Format設定紹介
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.
import { createTheme, style } from '@vanilla-extract/css'; export const [themeClass, vars] = createTheme({ color: { brand: 'blue', white: '#fff' }, space: { small: '4px', medium: '8px', } }); export const hero = style({ backgroundColor: vars.color.brandd, color: vars.color.white, padding: vars.space.large });
新規事業開発での技術選定の意思と意図 (フロントエンド編) - Sansan Tech Blog
こんにちは、関西支店で新規事業開発室に所属するソフトウェアエンジニアの加藤です。Bill Oneという新規サービスの開発に携わっています。 バックエンド編の続きとして、フロントエンドで私たちが使用している技術やライブラリを振り返って、どんな意志と意図があるかを確認していきます。 Bill Oneは今年の1月ごろにピボットし、それまで開発してきたフロントエンドを全て捨て、1から作り直しました。ピボットの際に改めて技術選定を行い、それまで使っていたライブラリ等を見直したので、本稿ではピボット前後で変化した箇所を中心にフロントエンドの技術選定を紹介します。 前提 改めて前提です。私たちのチームで開発しているBill Oneは今年の5月にローンチしたばかりのサービスで、チームのエンジニアは5名です。開発しているアプリケーションはSingle Page Application (SPA) で、エンジ
[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
React Native for Web + TypeScript + Firebase + PWAを調べたのでまとめておく - gibachan's blog
動機 きっかけはこの記事。ちょっと前にこれを読んで、 「モバイルネイティブアプリに慣れた開発者が、React Native for Webを利用することで手軽にWebアプリ開発できないか？」と思ってたので調べてみました。 iOSについて言えばSwiftUI登場後、宣言的にUIを構築するということが自然となり、Webアプリの各種FW（Reactなど）との距離感が縮まっていること。前述の記事にあるように、ネイティブ開発で馴染みのあるコンポーネントをReact Nativeを経由してWebの世界に持っていけるなら、Webアプリ開発の敷居が下げられるんじゃないかと思って調べてみました。 先に結論 React Native for Webを使って簡単なTODOアプリを作ってみました。 一応Firebase Hostingに置いてPWAとしてモバイルにインストールするところまで試しました。 githu
Webフロントエンドの現場とこれからをつなぐカンファレンス「Inside Frontend #3」開催レポート | CyberAgent Developers Blog
今回は2019年5月18日（土）に開催された「Inside Frontend #3」のレポートをお届けします！ Inside Frontend とは Inside FrontendはWebフロントエンドの現場とこれからをつなぐことを目的に、ヤフーとサイバーエージェントが共同で開催するカンファレンスです。 2017年に第1回、2018年に第2回が開催され、どちらも大盛況のうちに幕を閉じました。 第3回の今回は有料イベント化という初めての試みにも関わらずありがたいことに多くの方々に関心を持っていただき、満員御礼での開催となりました。 本イベントは2つのセッション形式で開催されました。 各社のケーススタディや様々な分野のスペシャリストによるセミナーと、セミナーの後でスピーカーと自由に質問や議論ができるAMA（Ask Me Anything）セッションです。参加者の方々は現場で得られたノウハウやこ
Automated Code Review for C#, C++, Java, CSS, JS, Go, Python, Ruby, TypeScript, Scala, CoffeeScript, Groovy, C, PHP, Dockerfile, Shell, YAML, Vue, HTML, Swift, Kotlin, PowerShell, Dart, R and Haskell source code | CodeFactor
{{getAnalysisToolsText()}} Yamllint TSLint trivy SwiftLint stylelint StyleCop.Analyzers ShellCheck Scalastyle RuboCop Revive Pylint pycodestyle PSScriptAnalyzer PHP_CodeSniffer lintr TSQLLint Linter for Dart Hadolint Brakeman bundler-audit Checkstyle Clippy CodeNarc HLint CoffeeLint CSSLint Detekt ESLint Flawfinder Vet CppLint Bandit .NET assembly informer Duplication checker
本当に2016年1番人気はTypeScriptなのか？ - Qiita
JavaScriptのプログラミング技術で2016年1番人気なのはMicrosoft社製のTypeScript。類似の技術であるBabel、Haxe、CoffeeScriptと比べても人気のある技術です。Babelも伸びてはいますが、TypeScriptの方が抜きん出ている状況です。 これを選んでおけば間違いない2016年流行りのCSS・JavaScript・タスクランナー - Qiita GoogleトレンドによるとTypeScript一強時代に入ったようです。 が、個人的にはGoogleトレンド？それで何がわかるの？と思っているので、npmのダウンロード数を比較してみます。Babelの構文調べるならBabelなんて書かずにES6ってみんな調べるんじゃないかなぁ typescript vs babel-core vs-coffee-script - npm trends だいたいBabe
プログラミング言語ランキングより：2016年 動向を見守るべき言語は Elixir、Julia、Rust、Swift、TypeScript - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最新のRedMonkプログラミング言語ランキング1 によると、Swiftの成長ぶりと潜在的なポテンシャルは驚異的とのことだ。GoとSwiftは、トップ10に食い込む可能性もあると見られている。 また、トップ20圏外にいるが、今後の動向を見守るべき言語として、Elixir、Julia、Rust、TypeScriptが挙げられている。 ベストランキング 開発者が採用するプログラミング言語を調べるために、RedMonkはStack Overflowのディスカッション数や、GitHubで使用されている言語を分析している。RedMonkのアナリス
#reject_sushi でReactとチーム開発について話してきた
React.js meetup #3に参加できなかったので#reject_sushiに参加してきました。 #reject_sushi - Togetterまとめ Draft.js | Rich Text Editor Framework for React ©年号を見る感じ結構前から実装してそう How to work as a Team @ azu #reject_sushi で発表したReact+Flux的な何かの意思決定と情報設計の話。 "How to work as a Team" https://t.co/qM4iyipRFS — azu (@azu_re) February 23, 2016 自分はチーム開発でReact + 何かを採用するときにどういうフローで話を進めていってるかについてを話しました。 まだ結論はないですが、Flux的な何かを採用したからといって設計がすごく簡
TypeScript + React JSX + CSS Modules で実現するタイプセーフなWeb開発 - Qiita
はじめに 以前、React JSX with TypeScript(1.6)にて書いたことがありますが、TypeScript 1.6以降ではReact JSXを直接コンパイルできるオプションが追加されています。 一般的にクライアントサイドWebアプリ開発は以下の3言語が土台ですが、 JavaScript HTML CSS TypeScriptのお陰で、1.と2.についてはタイプセーフな世界を手に入れたことになります(HTMLの要素名や属性名まで含めて、コンパイル時のチェックがされる) JavaScript -> TypeScript HTML -> React JSX(.tsx) CSS -> ??? こうなると、3. におけるCSSについても、何とかできんものかと期待するのが人情です。 今回のエントリは、CSS ModulesをTypeScript JSX環境に統合することで、タイプセー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybook 7.1
GitHub - typestyle/typestyle: Making CSS Typesafe 🌹
Scala Warrior and type-safe front-end development with Scala.js