並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 80件

新着順 人気順

draft.jsの検索結果1 - 40 件 / 80件

  • 日報共有アプリケーションをOSSとして開発している話

    日報一覧画面最近、プライベートな時間をつかってRepostというオープンソースの日報共有アプリケーションを開発しています。 投稿した日報に対して、コメントや絵文字でリアクションすることでチームでのコミュニケーションを活性化させることを目的としています。日報版Slackのようなイメージです。 まだ開発着手から1ヶ月ということもあり、バージョン0.0.1でまともに稼働できる段階ではないですが、開発のモチベーションを高めるためにも記事を書いてみました。 技術スタック チャンネル作成画面RepostはフロントエンドにReduxを採用し、SPAとして構築しています。APIサーバとしてのバックエンドはRuby on Railsで開発しています。また、エディタ部分はDraft.jsを用いてMarkdownエディタを実装しているところです。 Draft.jsについては、過去にとあるプロダクトに採用した経験

      日報共有アプリケーションをOSSとして開発している話
    • GitHubのトレンドで振り返る2022年のJavaScript/TypeScript

      今年も GitHub トレンドから 2022 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2021 年の JavaScript | WEB EGG 集計方法 本記事の集計期間は 2022/01/01〜2022/12/07、対象言語は JavaScript および TypeScript です。 なお GitHub がそのリポジトリをなんの言語と見なしてトレンドに掲載したかをもとに集計対象を決定していることにご留意ください。 別言語で書かれた Rust 製の JS 向けのツールや CSS フレームワークなどは基本的に対象外となります。 集計に利用したデータですが、GitHub は過去のトレンドを閲覧する方法を提供していないため、独自の仕組みで GitHub トレンドのアーカイブを生成しそのデータを利用しまし

        GitHubのトレンドで振り返る2022年のJavaScript/TypeScript
      • Draft.js

        Extensible and CustomizableWe provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from basic text styles to embedded media. Declarative Rich TextDraft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API. Immutable Editor StateThe Draft.js model is

        • Meta の新しいリッチテキストエディターフレームワーク Lexical を調べる

          Brand-new Rich Text Editor Framework! 先日 Meta から新しいリッチテキストエディターのフレームワーク Lexical の OSS 化が発表されました。 一方で、 Meta が開発していた既存の React 用リッチテキストエディターフレームワーク Draft.js はアーカイブが決定されました。 実は自分は業務で Draft.js をめちゃくちゃ使っていて、発展に期待しつつウォッチしていたので開発が終了してしまうのが非常に残念ではあるのですが、代わりにより高度に抽象化されたフレームワークが公開されたのでこれはマスターするしかありません。 ということで調べたことをまとめていこうと思います。 執筆時点(2022 年 4 月)では正式リリースされていないので、本稿のサンプルコードは参考にならなくなる可能性があります。 概要 エディターを作るためのフレーム

            Meta の新しいリッチテキストエディターフレームワーク Lexical を調べる
          • Awesome JavaScript : 素晴らしい JavaScript ライブラリ・リソースの数々 - Qiita

            元記事: Awesome JavaScript Awesome List in Qiita Awesome Ruby Awesome Java Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージマネージャ JavaScript ライブラリをホストし, それらを取得してパッケージ化するためのツールを提供します npm - npm は JavaScript のためのパッケージマネージャです. Bower - Web のためのパッケージマネージャ. component - より良い Web アプリケーションを構築するためのクライアントパッケージマネージャ. spm - 新しい静的パッケージマネージャ. jam - RequireJS のレポジトリと互換性があり, ブラウザーに焦点を当てたパ

              Awesome JavaScript : 素晴らしい JavaScript ライブラリ・リソースの数々 - Qiita
            • React専用リッチテキストエディタライブラリ「Draft.js」の実践的Tips集

                React専用リッチテキストエディタライブラリ「Draft.js」の実践的Tips集
              • React.js, Draft.jsで作る リッチテキストエディタ開発入門

                Meguro.es #4 @wantedlyでのトーク内容です

                  React.js, Draft.jsで作る リッチテキストエディタ開発入門
                • 実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例 | Wantedly Engineer Blog

                  Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要Node.jsにはNative ESMというモードがある。Native ESMはまだ普及していないが、ライブラリ側の更新が進み、移行が必要になりつつある。Native ESMをめぐる状況は (この記事の長さからわかるように) 色々複雑で、概念をちゃんと説明するだけでも大変。Native ESMへの移行にあたってはさまざまな困難が待ち受けている。Native ESMとは歴史的経緯から、JavaScriptには複数のモジュールシステムがあります。そのうちNode.js周辺でよく使われるのはCommonJS ModulesとES Modulesです。 CommonJS Modules (CJS) は実質的に

                    実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例 | Wantedly Engineer Blog
                  • ピクシブフロントエンド互助会の取り組み - pixiv inside

                    どうもこんにちは @f_subal です。普段は pixivFACTORY のフロントエンドを見ています。 最近は ruby-sass の deprecation に悩みながら dart-sass を調べたりしています。 さてさて、みなさん日々の開発にあたってフロントエンドの悩みや知見、気になるニュースなどが溜まっているかと思います。あのライブラリを試したい、あれアップデートしたらハマったので誰かに相談したい…そんなときに社内に頼れる仲間がいると心強いですよね。 というわけで、本日はピクシブエンジニア組織における「フロントエンド互助会」の取り組みについてご紹介します。 ピクシブにおけるエンジニア互助会 ピクシブでは2017年まで、システムを超えた共有事項や障害報告や最近の挑戦について話す「技術互助会」というミーティングがありました。初期は全社員の参加でしたが、その後エンジニア全員参加・発表

                      ピクシブフロントエンド互助会の取り組み - pixiv inside
                    • スレッド形式で雑にメモを書き散らすためのサービス「Thredot」をリリースしました

                      Thredot はスレッド形式でメモを書けるサービスです。 Google アカウントがあればログインできます。 こういうの Playground ページを用意しているので、気軽に使い心地を試してみてください。 Thredot のコンセプト Thredot はアイデアや情報をメモに書き出すハードルを限界まで下げることを目指しており、そのために様々な工夫をしています。 メモを整理させない 爆速な検索機能 公開範囲を設定できる WYSIWYG エディタを採用 メモを整理させない Thredot では徹底的にメモを整理させない方針を取っています。 僕は「整理するための機能が用意されていると整理をしたくなってしまう」人間です。 でも整理するのって超面倒くさいです。 ( 支離滅裂 ) 結局中途半端に整理しようとして余計にゴチャゴチャになり、最終的にメモを書くこと自体が億劫になってしまいます。 Thre

                        スレッド形式で雑にメモを書き散らすためのサービス「Thredot」をリリースしました
                      • オンラインWYSIWYGエディタリンク集 - Qiita

                        以下はAwesome text editingからリンクされているオンラインエディタのリンク集です。 昔はCKEditorとTinyMCEの二択だったような気がするけど、いつの間にかずいぶん増えていた。 最近はどれを選んでも十分な機能を持ってるし、脆弱性さえ無ければどれを選んでもまあ問題ないでしょう。 そういやWYSIWYGって聞かなくなったよね。 Trix サンプル。 一般的な機能。ドキュメントがわかりやすい。 CKEditor 2003年から存在する老舗中の老舗だが古くささは全くない。 インラインエディタとかすごい。 Squire サンプル。 昔のCKEditorっぽい見た目。 デザイン目的ではなくドキュメントを書くことを重視しているようだ。 ProseMirror 複数人でのリアルタイム同時編集に対応している。すごい。 Scribe サンプル。 正直見た目が一番わかりやすい。 だが公

                          オンラインWYSIWYGエディタリンク集 - Qiita
                        • React v15.0 – React Blog

                          This blog site has been archived. Go to react.dev/blog to see the recent posts. We would like to thank the React community for reporting issues and regressions in the release candidates on our issue tracker. Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15. As a reminder, we’re switching to major

                            React v15.0 – React Blog
                          • WYSIWYGエディターの状態抽象化とReactとのつなぎ込み - 良いクロスブラウザエディターを目指して | Wantedly Engineer Blog

                            まえがきブログや記事を投稿するWebサービスには、殆どの場合、リッチなエディター機能が備わっています。特に、記事を見た目通りに書けるエディターは、WYSIWYGエディターと呼ばれ、記事を書く際には欠かせない機能の一つです。 Wantedly にもストーリーと呼ぶ記事を投稿する機能があり、その記事投稿部分では、WYSIWYGエディターを実装しています。 では、どのようにWYSISYGエディターを開発していくのでしょうか。この記事では、エディターの機能を実際に開発するための基礎知識と実装について書いていきます。 今回話すエディターについて今回記事で指すエディターとは、 WYSIWYGエディターを想定しています。例えば、Dropbox Paper や google docs、Medium、Note などのエディターがそれに該当します。Qiita や Zenn のような 2カラムの Markdow

                              WYSIWYGエディターの状態抽象化とReactとのつなぎ込み - 良いクロスブラウザエディターを目指して | Wantedly Engineer Blog
                            • ヘンリーの技術スタックの概観と展望 - 株式会社ヘンリー エンジニアブログ

                              株式会社ヘンリーVPoEの@shenyu_cyanです。2023年が始まり、当社の新しい取り組みとしてエンジニアリングブログを始めました。 私たちは「社会課題を解決し続け、より良いセカイを創る」をミッションにプロダクトを開発しています。その第一歩として現在はクリニック・中小病院向けの基幹システムであるクラウド型電子カルテ・レセプトシステム「Henry」を展開しています。 技術ブログの初投稿として、今回はヘンリーが利用している技術スタックおよびその裏の考え方をご紹介し、これからの方向性について書かせていただきます。 ヘンリーの技術スタックを簡単にご紹介しますが、フロントエンドはReact+TypeScriptを採用し、その裏にBFFを設け、GraphQLで通信を行なっています。そして、BFFとバックエンドの各サービス、バックエンドのサービス同士はgRPCでやりとりをします。バックエンドは主に

                                ヘンリーの技術スタックの概観と展望 - 株式会社ヘンリー エンジニアブログ
                              • Draft.js と Slate.js と CodeMirror の感想 - r7kamura - Medium

                                幾つかの Web サービスや Electron ベースのアプリに組み込むエディタを実装するにあたって、Draft.js、Slate.js、CodeMirror を試してきて得た情報について、個人の感想を述べる。今更感があるので、ライブラリそのものについての解説はしない。 Draft.js冒頭で挙げている三つのライブラリの中では、単純に Server-Side Rendering してもエラーを出さず、普通に動くところが良かった。単純に動かないタイプのライブラリでは、例えば React ではライフサイクルイベントのコールバックである ComponentDidMount メソッドを利用するなどして、クライアントサイドのみでエディタが描画されるように工夫しなければならない。 Draft.js でエディタのスタイルを変更するには、Decorator という、描画前の内部データを DOM 要素へと変

                                • Tiptapでオリジナルエディタをつくろう!

                                  こんにちは!テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです! 今回はHeadless Editor FrameworkであるTiptapのご紹介と、そちらを使ってオリジナルなエディタを作成しようと思います。 Tiptapとは TiptapはHeadless Editor Frameworkと呼ばれています。 これまでWebでのWYSIWYGエディタとしてQuill.jsやDraft.jsなどが存在しました。 これらは文字の装飾や文章の編集に関するUIをデフォルトで提供しており、エディタに特別な機能を追加しようとしたり、UIを大きく変えるというのは少々大変でした。 TiptapのようなHeadless Editor Frameworkは、エディタで必要な機能のコア機能を提供し、必要なUIや機能は拡張機能として追加できるような仕組みになっ

                                    Tiptapでオリジナルエディタをつくろう!
                                  • Meta(旧Facebook)、テキストエディタ用のUIコンポーネント「Lexical」をオープンソースで公開。Reactなどフレームワークの依存性なく軽量で高速、機能拡張も容易に

                                    Reactなどを始めとする特定のJavaScriptフレームワークやライブラリには依存していないため、基本的にどんなフレームワークとも組み合わせて利用することが可能。 Lexicalは信頼性、アクセシビリティ、実行速度にフォーカスして開発されていると説明されており、W3Cのアクセシビリティ標準となる「Web Content Accessibility Guidelines」(WCAG)にも準拠しており、Webブラウザの読み上げ機能などを始めとするアクセシビリティ機能に対応。 圧縮後のサイズは22kbと比較的小さく、性能に関しては同社が以前から公開していたエディタ用UIコンポーネントのDraft.jsと比較してタイピング性能が20%から70%向上したと説明されています。これは特に性能の低いデバイスで利用するときに有利に働くとのこと。 拡張が容易になるようにAPIが容易されており、すでにRea

                                      Meta(旧Facebook)、テキストエディタ用のUIコンポーネント「Lexical」をオープンソースで公開。Reactなどフレームワークの依存性なく軽量で高速、機能拡張も容易に
                                    • Awesome JavaScript : 素晴らしい JavaScript ライブラリ・リソースの数々 - Qiita

                                      元記事: Awesome JavaScript Awesome List in Qiita Awesome Ruby Awesome Java Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージマネージャ JavaScript ライブラリをホストし, それらを取得してパッケージ化するためのツールを提供します npm - npm は JavaScript のためのパッケージマネージャです. Bower - Web のためのパッケージマネージャ. component - より良い Web アプリケーションを構築するためのクライアントパッケージマネージャ. spm - 新しい静的パッケージマネージャ. jam - RequireJS のレポジトリと互換性があり, ブラウザーに焦点を当てたパ

                                        Awesome JavaScript : 素晴らしい JavaScript ライブラリ・リソースの数々 - Qiita
                                      • 最強のリンク集の最強のリンク集 - Qiita

                                        ここに載れたらAwesomeバッジくれてやんよ。 Githubの☆ランキングを見ていたら、8位にawesomeというのが入ってた。 前はランキングに入ってなかったと思うので最近伸びてきたようだ。 ということで見てみよう。 以下はawesomeからリンクされている対象のAwesomeコンテンツと、その簡単な紹介です。 Platforms Node.js みんな大好きNode.jsのライブラリリンク集。 Frontend Development 主にJavaScript関連の、フロントエンド言語リンク集。 iOS iPhoneアプリ用のSwiftとObjective-Cライブラリリンク集。 Android Androidアプリ用のJavaライブラリリンク集。 IoT & Hybrid Apps IoTハードウェア、クロスプラットフォームのハイブリッドアプリなどリンク集。どういうまとまりなのかよ

                                          最強のリンク集の最強のリンク集 - Qiita
                                        • Awesome JavaScript : 素晴らしい JavaScript のライブラリ・リソースの数々 - Qiita

                                          元記事: Awesome JavaScript Awesome List in Qiita Awesome Ruby Awesome Java Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージマネージャ JavaScript ライブラリをホストし, それらを取得してパッケージ化するためのツールを提供します npm - npm は JavaScript のためのパッケージマネージャです. Bower - Web のためのパッケージマネージャ. component - より良い Web アプリケーションを構築するためのクライアントパッケージマネージャ. spm - 新しい静的パッケージマネージャ. jam - RequireJS のレポジトリと互換性があり, ブラウザーに焦点を当てたパ

                                            Awesome JavaScript : 素晴らしい JavaScript のライブラリ・リソースの数々 - Qiita
                                          • GitHub - facebookarchive/draft-js: A React framework for building text editors.

                                            THIS PROJECT IS CURRENTLY IN MAINTENANCE MODE. It will not receive any feature updates, only critical security bug patches. On 31st December 2022 the repo will be fully archived. For users looking for an open source alternative, Meta have been working on migrating to a new framework, called Lexical. It's still experimental, and we're working on adding migration guides, but, we believe, it provides

                                              GitHub - facebookarchive/draft-js: A React framework for building text editors.
                                            • GitHub - jondot/awesome-react-native: Awesome React Native components, news, tools, and learning material!

                                              Awesome React Native is an awesome style list that curates the best React Native libraries, tools, tutorials, articles and more. PRs are welcome! Don't miss out! Subscribe to our weekly newsletter Sponsors Never leave your command line for secrets Teller is an OSS and FREE productivity secret manager for developers made by SpectralOps, supporting cloud-native apps and multiple cloud providers. Mix

                                                GitHub - jondot/awesome-react-native: Awesome React Native components, news, tools, and learning material!
                                              • 2015-04-20のJS: ECMAScript6最終ドラフト、JavaScriptトレーニング

                                                JSer.info #224 - 次期ECMAScriptであるES6 Rev 38 Final Draftがリリースされました。 Final Draft of the ECMAScript 2015 Language Specification (ES6) is now available at http://t.co/pcHkz1muWu Next step: Ecma GA approval vote — Allen Wirfs-Brock (@awbjs) April 16, 2015 ECMAへ提出されて2015年の6月のECMAのミーティングにて承認されれば、ECMA標準として公開される予定になっています。 2014-06-09のJSの際にES6のリリース次期が変更されていましたが、この変更した通りに進んでいるようです。 (図は2014-06-09時点のもの) *画像が横に長い

                                                  2015-04-20のJS: ECMAScript6最終ドラフト、JavaScriptトレーニング
                                                • Webpack — The Confusing Parts

                                                  Webpack is the leading module bundler for React and Redux apps. I think folks using Angular 2 and other frameworks are also using it a lot these days. When I first saw a Webpack config file, it looked very alien-y 👽 and confusing 😱. After playing around with it for some time, I now think that it is because Webpack just has a unique syntax and new philosophies that may cause confusion in the begi

                                                    Webpack — The Confusing Parts
                                                  • DraftJS Plugins - High quality plugins with great UX

                                                    The documentation currently represents the 4.0.0 release. For troubleshooting please checkout theFAQ Slack-like emoji autocompletion, Facebook-like stickers & mentions, and many more features out of the box to enhance your web application. Wait, but why?Facebook's rich-text editor framework DraftJS built on top of React allows you to create powerful editors. We're building a plugin architecture on

                                                      DraftJS Plugins - High quality plugins with great UX
                                                    • 30分で出来るDraft.js+React.js リッチエディタ作成入門 - Qiita

                                                      目的と概要 Draft.jsはReact.js上でリッチテキストエディタを作るためのフレームワークです。日本であまり流行ってない気がするので、始めやすいように入門記事を書いてみることにしました。 最近ではReact.jsを採用しているサイトも増えてきて、Webフロントエンドは更にリッチ化の流れが激しくなっています。 今回はReact.jsでリッチなテキストエディタを簡単につくれるDraft.jsを利用して30分でテキストエディタを作っていきます。 この記事で作れるもの こんな感じのエディタ。すごいよくある感じのWYSIWYGエディタ。 手順 環境構築 React.js、Draft.jsの環境を作りましょう。 React.jsの環境を整えている方は bash npm install draft-js --save で大丈夫です。 環境構築が面倒な方にはテンプレート用意しておきました お納めく

                                                        30分で出来るDraft.js+React.js リッチエディタ作成入門 - Qiita
                                                      • Draft.js - テキストエディタ開発用のReactコンポーネント MOONGIFT

                                                        Reactが向いているのはユーザの入力をリアルタイムに、かつ画面上の様々な場所に反映するようなインタラクティブなWebアプリケーションです。開発者は状態を気にせず画面を作れるのが利点でしょう。 さらにReactではコンポーネントの再利用がしやすいのも利点と言えます。今回はFacebookの開発したテキストエディタ開発用コンポーネントDraft.jsを紹介します。 Draft.jsの使い方 Draft.jsのデモです。文字を選択して色をつけられます。 背景色を変えることもできます。 改行すると、それに合わせてテキストエリアの大きさも変化します。 リンクを追加。 機能を追加すればWYSIWYGエディタとして使えます。 Twitter風に。@や#に対して色がつきます。 数式を埋め込む機能もあります。 編集はテキストエリアで行います。 Reactなので、変更はリアルタイムに反映されます。 Draf

                                                          Draft.js - テキストエディタ開発用のReactコンポーネント MOONGIFT
                                                        • Facebook謹製フレームワークDraft.js + React.jsでつくるリッチテキストエディタ | Wantedly Engineer Blog

                                                          Wantedlyでエンジニアをしている竹本です。主にこのブログを含むフィードを中心に開発をしています。 最近、フィードの記事編集画面のリニューアルを行ったので事例の簡単な紹介と、得られた知見を共有したいと思います。 先日のMeguro.es #4でDreaft.jsについて発表したスライドはこちらになります。あわせて参照して下さい。 リニューアル対象の記事編集画面のざっくり紹介Wantedlyのフィードの記事編集画面は以下の画像のような、いわゆるリッチテキストエディタです。 これは記事を書くユーザーのイメージと乖離した記事が公開されないように、ページ全体が「編集している見た目=公開されるもの」になっています。 開発スタックは、弊社の高松が公開している「WantedlyにReact + Reduxを導入した話」で言及している通り、ES2015, Babel, React, Redux, Im

                                                            Facebook謹製フレームワークDraft.js + React.jsでつくるリッチテキストエディタ | Wantedly Engineer Blog
                                                          • 苦しんで覚えるDraft.js -リッチテキストエディタをシュッと作る- - Qiita

                                                            株式会社LITALICOでWebエンジニア(Rails)を担当しています、@YudaiTsukamotoです。 この記事は『LITALICO Advent Calendar 2017』1日目の記事です。 記念すべき1記事目は、Facebook謹製のリッチテキストエディタフレームワークのDraft.jsについて書こうと思います。 はじめに 弊社では、conobie, LITALICO(りたりこ)発達ナビ, U2Plusを始めとするメディアを中心としたWebサービスを複数運営しております。様々な歴史的な経緯で、記事編集画面をスクラッチで実装しているのですが、以下のような辛さを抱えています。 記事UIパーツの修正・追加をする事が結構しんどい 書いた見た目と表示される見た目が異なるので、いちいちプレビューを見ないといけない Undo/Redoなどの履歴管理が辛い コンテンツの順序を変更することが辛

                                                              苦しんで覚えるDraft.js -リッチテキストエディタをシュッと作る- - Qiita
                                                            • 初夏のJavaScript祭(2017) 資料まとめ - Qiita

                                                              概要 JavaScript祭に参加してきたので発表資料や内容をまとめます。 間違いや追記などあればご指摘お願いします 初夏のJavaScript祭 in mixi twitter #jsfes 講演内容 講演資料 JSのエラーチェックツールを作ろうとした話 資料:https://www.slideshare.net/keisukeimura/javascript-76398722 ツイート:https://togetter.com/li/1115447 WW checkerを作った話 jsエラーやリンク切れなどを自動でチェックするツール 本日β版の事前登録開始! Draft.jsによる 統制のとれたテキスト編集の世界 資料:https://speakerdeck.com/potato4d/draft-dot-jsniyoru-tong-zhi-falsetoretatekisutobian

                                                                初夏のJavaScript祭(2017) 資料まとめ - Qiita
                                                              • GitHub - microsoft/FluidFramework: Library for building distributed, real-time collaborative web applications

                                                                The core code for both the Fluid client packages and the reference ordering service is contained within this repo. The repo structure is somewhat unique because it contains several pnpm workspaces: some for individual packages and some for larger collections which we call "release groups". The workspaces are versioned separately from one another, but internally all packages in a workspaces are ver

                                                                  GitHub - microsoft/FluidFramework: Library for building distributed, real-time collaborative web applications
                                                                • 2017年まとめ - Islands in the byte stream

                                                                  キャリア Bit Journey(as エンジニア)とSpeee(as 技術顧問)は引き続き スタートアップでサービス開発するのは学びがあってよい 技術顧問業は難しい。成果はあったりなかったりする 35歳になった 2017年の初頭に 定年説をめぐって — 1. ミームの濫用 – To Phantasien *1 を読んでキャリアについて考えた ぼくはこれを「35歳定年説は捨てていいとして、その後50代や60代を見据えたキャリアプランを真面目に考えるべきでは?」という話だと解釈した 自分に関して言うと、まだ Plan B(≒ プログラマ以外の職種)は考えられないが… 子供が産まれた 家事と子育てに割く時間が非常に大きい これは好むと好まざるとに関わらず、キャリアに対する影響は大きい 時間もそうだが、家事と子育てで疲労がたまることにより他のことをする気力がなくなるという問題もある 結果、子供が

                                                                    2017年まとめ - Islands in the byte stream
                                                                  • facebook製のReact用エディタフレームワーク draft.js を触ってみた - deglog

                                                                    5月ぐらいにdraft.jsを使って、Markdownエディタを作ってみた。普段技術ネタはBlogに書かないのだけど、まだあまり日本語情報も無いのでメモを公開してみる。 draft.jsはいまも活発に開発が進んでる状況なので、この数ヶ月で古くなってる部分があるかもしれません。 draft.jsとは何か facebookが作っているReact用のリッチテキストエディタ (WYSIWYG) のフレームワーク。 https://github.com/facebook/draft-js https://facebook.github.io/draft-js facebookのnote機能や、メッセンジャーのエディタに使われてるらしく、今年に入ってオープンソースになった。ってことでまだあまり情報が無いが、react本家のfacebookが作ってるのもあり、エコシステムができつつある (後述) 。 d

                                                                      facebook製のReact用エディタフレームワーク draft.js を触ってみた - deglog
                                                                    • 【個人開発】2000RT超えの大バズリ〜初課金まで至った穴埋めテストメーカーを支える技術

                                                                      この記事は個人開発Advent Calendar 2022 1日目の記事です。 2022年6月13日、私が個人開発でリリースしたサービス「テストメーカー」がTwitterで2,000RT、7,600いいね以上の大バズリを記録しました。 「テストメーカー」は穴埋めテストを直感的に作れるツールです。 マウスで穴埋めにしたいテキストを選択して離すと、その部分が穴埋め問題に変わります。 リリース以降、主に全国各地の中学校、高校、大学などの授業で使っていただいたりしながらユーザー数が増えています。 他にも、社会人の方が国家資格を受験するときの受験勉強に使っていただいていることもあります。 ITMediaさんに取材も受けました。 そして、リリースからおよそ1ヶ月が経過した7月に課金機能を実装し、そこから少しずつですが課金してくださるユーザーさんも増え続けています。 本記事では、そんなテストメーカーを支

                                                                        【個人開発】2000RT超えの大バズリ〜初課金まで至った穴埋めテストメーカーを支える技術
                                                                      • React 16 Umbrella ☂️ (and 15.5) · Issue #8854 · facebook/react

                                                                        This list might change, just putting it out there as the first draft. Posting these together since they're related, and we don't plan more 15.x releases after 15.5 anyway. To put these changes in context, we have a few goals: (Click to show) For the past several months, we have been working on a rewrite of React codenamed “Fiber”. Initially, it won’t affect public API, but it brings several new fe

                                                                          React 16 Umbrella ☂️ (and 15.5) · Issue #8854 · facebook/react
                                                                        • Megadraft - Draft.JSをベースにしたリッチテキストエディタ MOONGIFT

                                                                          Facebookが開発している、WYSIWYGエディタのベースになるDraft.JSというソフトウェアがあります。Draft.JSを使うことで効率的に非開発者でも使いやすいエディタが開発できます。 今回はDraft.JSをベースとして、さらに拡張性を高めたMegadraftを紹介します。 Megadraftの使い方 デモです。リスト表示の例。 それぞれ編集、削除できます。 新しいリストの追加もできます。 画像や動画を埋め込んだりすることもできます。 Megadraftはユーザビリティ高く、プラグインによって拡張可能なライブラリとなっています。何でも作れると言うよりも、プラグインでテンプレートを作ることで、ユーザは特定のフォーマットに沿った入力を簡単にできるようになるというもののようです。 MegadraftはReact/JavaScript製のオープンソース・ソフトウェア(MIT Lice

                                                                            Megadraft - Draft.JSをベースにしたリッチテキストエディタ MOONGIFT
                                                                          • 初夏のJavaScript祭2017 参加メモ - Qiita

                                                                            行ってきました。殴り書きメモですが公開するよ! 初夏のJavaScript祭 in mixi hikarutさんのQiita記事のほうがリンク等しっかりしてるかと。 初夏のJavaScript祭(2017) 資料まとめ 訂正点あったらよろしくお願いします。 JSのエラーチェックツールを作ろうとした話 Rails製のウェブページ解析サービスWWCheckerを作った サイトのスクショ撮影 + 実行時JSエラー解析しようとして苦戦 headless chrome使ったらメモリ食いすぎ 実行時エラー解析機能を削って、より需要のあるパフォーマンス分析機能をPageSpeed InsightsのAPI使って作ることにした PageSpeed Insightsでスクショも撮れて満足 Draft.jsによる統制のとれたテキスト編集の世界 Draft.js WYSIWIGエディタを作るやつ 内部でcont

                                                                              初夏のJavaScript祭2017 参加メモ - Qiita
                                                                            • Awesome JavaScript : 素晴らしい JavaScript ライブラリ・リソースの数々 - Qiita

                                                                              元記事: Awesome JavaScript Awesome List in Qiita Awesome Ruby Awesome Java Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージマネージャ JavaScript ライブラリをホストし, それらを取得してパッケージ化するためのツールを提供します npm - npm は JavaScript のためのパッケージマネージャです. Bower - Web のためのパッケージマネージャ. component - より良い Web アプリケーションを構築するためのクライアントパッケージマネージャ. spm - 新しい静的パッケージマネージャ. jam - RequireJS のレポジトリと互換性があり, ブラウザーに焦点を当てたパ

                                                                                Awesome JavaScript : 素晴らしい JavaScript ライブラリ・リソースの数々 - Qiita
                                                                              • React.js Conf: The Good Parts

                                                                                I had the amazing opportunity to attend React.js conf in San Fransisco on 22nd/23rd of February thanks to a generous diversity scholarship from Facebook! Two full days of talks from the creators, contributors and users of React.js, and 600+ React enthusiasts from around the world there to take it all in. It was a great chance to meet other React-ers and share ideas in a place where it is completel

                                                                                • Two Quick Ways To Reduce React App’s Size In Production

                                                                                  If you are building a React + Redux App that has Webpack, then you might have noticed that the size of the final bundle.js (the dev version) for a simple app itself could be 1MB- 2MB! For example: Below is a picture from Webpack stats analyzer for the simple react-redux-blog (live). It shows that total size is 1.5MB and 90% (1.2MB) is just libraries in node_modules! It could be scary😱 but Webpack

                                                                                    Two Quick Ways To Reduce React App’s Size In Production