Tailwind CSS Components LibraryFlyonUI is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins.

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

daisyUI adds component class names to Tailwind CSS so you can make beautiful websites faster than ever. don't re-invent the wheel every time In a Tailwind CSS project, you need to write utility class names for every element. Thousands of class names just to style the most basic elements.

はじめに 今どきのフロントエンドのトレンドを調べていたら、この記事に出会いました。 7 FrontEnd JavaScript Trends and Tools You Should Know for 2020 その中で、コンポーネント単位での共有ツールとしてBitが「今、アツい！」と紹介されており、前々から個人的に気になっていたのと、日本語の情報が少なかったので、公式ドキュメントにあるチュートリアルをやってみました。 ということで、この記事は以下のBit公式ドキュメントの翻訳記事です。 Bit for React - Bit よしなに意訳したり、重要そうな部分を太字にしたりしていますが、基本的に内容は変えていません。 少しでも、皆さんのBitの理解の助けになれば幸いです。 Bit for React 概要 Bitを使用すると、異なるプロジェクトやアプリケーション間でコンポーネントを共有お

こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー

TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための

こんにちは、芝田 将 ( @c_bata_ ) です。 この資料はPyCon JP 2016で行った 「基礎から学ぶWebアプリケーションフレームワークの作り方」 の書き起こし資料です。 誤字等があれば、Issue or PRをお待ちしております。 はじめに¶ この資料では200行に満たないシンプルなWebフレームワークの作り方をボトムアップで解説します。 テンプレートエンジンとしてJinja2を使ったりもしますが、基本的にはPythonの標準ライブラリのみを使っています。 FlaskやDjango等を使ったWeb開発の経験があり、基本的なHTTPの知識があれば読み進められるんじゃないかなと思うのでぜひチャレンジしてみてください。 本資料を読み終えた方はBottleやDjango、筆者の公開している Kobin というフレームワークのコードを 読んでみたり、自分でWSGIフレームワークを実

Vue.jsのコンポーネント開発をTDDでやってみる ※ TDD (test-driven development): テスト駆動開発 ※ テスト駆動開発は文化です。チームの「状況」「納期」「スキルレベル」、その他いろんな要因が絡んできた結果、そのチームが導入するかどうか決めたらいいと思います。 ※ 例えがいいかはわかりませんが、私は「早起き」と「テスト」は同じようなものだと思っています。「早起き」は健康にいいよねって誰でも言うと思うけど、実際に万人がやっているかどうかは別じゃないですか。それと同じで「テストすること」も絶対いいことだと私は思っていますが、やるかどうかはチームの置かれている状況によって決まります。この記事は、その「テストを導入するかどうか」という意思決定の一助にでもなれればいいなと思います。 はじめに こんにちは。ぼくです。 今回はVue.jsでTODOアプリを作ってみよう

Introduction Developers have a number of choices today when it comes to selecting a JavaScript framework or UI library for building scalable web apps. React / Next.js, Vue / Nuxt, Angular…the list of solutions continues to grow, but just how do you decide on which to use in a sea of so many options? To help you understand the options, we created TodoMVC - a project which has offered the same Todo

主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu

JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ

Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい

やわらかVue.jsについて / 迷わないVueの学び方 / イベント情報 / フロントエンドを気楽に歩こう / 猫本以前 / 書籍 / 【漫画で解説】Vue.jsで楽をしよう！ / レイアウトどうすればいい？ / 参考になるページ / webpackの動作を見てみよう / vue-routerとかvuexって使ったほうがいいの？ / Vueのコミュニティに入りたい！ / flaskやrailsと

こんにちは。フロントエンドのつっちーです。 前回に引き続き、「サーバーサイドテンプレートやHTMLファイルへのマークアップに対して、Vue.jsを使用する方法」に的を絞り、Vue.jsについて書いていきます。 今回は、Vue.jsが用意している様々な便利機能について、実際にそれを用いて作成したモーダルウィンドウを例として見ていきたいと思います。 モーダル実装にみるVue.jsの便利機能 こちらがモーダルウィンドウの完成形です。 See the Pen v-example-completed by ligdsktschy (@lig-dsktschy) on CodePen. See the Pen v-example-completed by ligdsktschy (@lig-dsktschy) on CodePen. See the Pen v-example-completed by

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: When (and when not) to use Redux – LogRocket 原文公開日: 2018/01/20 著者: Christian Nwamba サイト: LogRocket 2018/03/13: 初版公開 2021/06/03: 更新 Reduxが登場するまで、複雑なタスクを組むときのステート管理は相当つらい作業でした。Reduxは、Fluxというアプリケーションデザインパターンにヒントを得て、JavaScriptアプリでステートを管理するために設計されました。ReduxはReactと併用されることが多いのですが、ReduxはjQueryやAngular、Vueといった別のフレームワークとも併用できます。 Reduxのサイズは非常に小さい（依存関係も含めてわずか2KB）にもかかわらず、アプリの各コンポーネ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。

2017年版と2018年版でwebアプリケーション作成時のreactの（マイ）ベストプラクティクスを以下のリポジトリに、まとめてみたので記事にしてみました。 react-best-practices https://github.com/wheatandcat/react-best-practices/tree/master ちなみにタイトルは、その過程で2018年版に削除したpackageです（理由は後述） github サンプルコードの内容は、ログイン/ログアウト + fetchした内容を画面に表示するだけです （ただのサンプルなので、実装はハリボテです） 2017年版 https://github.com/wheatandcat/react-best-practices/tree/master/2017years 2018年版 https://github.com/wheatandc

2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日Web Developer Roadmapが2018年版に更新されました。(kamranahmedse/developer-roadmap) 簡単に言えばWebに携わっている人が何かを勉強＆実装する際に迷ったら見ろ！って感じのやつです。 チョーヤバ/ナウい/MK5の三段階で世にある技術を区別しています。更に大きな枠としてFront-end/Back-end/Dev Opsと分けられています。 正直Dev Opsはさっぱりピーマンなのであまり触れられませんが、2017と2018で変わったところがあれば注目して書いていこうかなって記事で

This domain may be for sale!