Nuxt.js で ESLint ＆ Prettier を導入する - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ
はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます． そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大
三年間運用しているサービスにFLOCSSを導入してCSSの健全化を目指す | Recruit Tech Blog
こんにちは、キッズリー開発グループ サーバサイドエンジニアの @t_uyama です。 本記事では、ローンチから三年間運用されているwebサービスにFLOCSSを導入して既存のCSSをリファクタリングしたという事例をご紹介します。また、各人で解釈が分かれがちなFLOCSSのレイヤ分けの一例と、FLOCSS導入後のCSSの開発体制についても併せてご紹介します。 FLOCSSとは？ CSSを書く際のファイル構成や命名規則などを取り決めたルールの1つです。CSSの命名規則というとBEM、OOCSS ( Object Oriented CSS )、といったものが有名なところして挙げられますが、FLOCSSはこれらの良いところを組み合わせたものとなります。Foundation Layout Objectと役割ごとにレイヤ（層）が分かれているのが特徴です。これにより、CSSコードの再利用・拡張がしやす
5 key Redux libraries to improve code reuse - LogRocket Blog
Glad Chinda Full-stack web developer learning new hacks one day at a time. Web technology enthusiast. Hacking stuffs @theflutterwave. Redux is a very popular state container used in so many modern frontend JavaScript applications. It is framework agnostic and can be used in apps built either with vanilla JavaScript or any of the modern JavaScript frameworks like React, Angular, VueJS, etc. One of
Annotated Build Processes | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. When you’re putting together a build process for a site, it’s so dang useful to look at other people’s processes. I ran across Andrew Welch’s “An Annotated webpack 4 Config for Frontend Web Development” the other day and was glad he blogged it. If I was kicking off a new site where I wanted a webpa
「Electron」を使って業務改善に役立つツールをつくってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
※この記事はLIGアドベントカレンダー2018の15日目です。 こんにちは。バックエンドエンジニアのまさくにです。 LIGにおいて逃れえぬ仕事のひとつに「LIGブログを書く」という作業があるのですが、僕の場合、この仕事の中に「マークダウンからLIGブログ用のフォーマットを作り出す」という非生産的な作業が含まれています。 僕はたいていの文章をマークダウンで書いていて、このブログ記事も一度マークダウンで書き出してから、WordPressに取り込み、それからLIGブログ用のhtmlに直して公開しているため、この置換作業をこれまでイヤイヤやってきました。 マ ジ な ム ダ。 そこで今回は、マークダウンからLIGブログ用のフォーマットへ変更するためのツールを考えたいと思います。 作りたいものと選定 単純に「マークダウンをhtmlに変更したい」っていうわけではありません。LIGブログには、たとえば下
An Introduction and Guide to the CSS Object Model (CSSOM) | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. If you’ve been writing JavaScript for some time now, it’s almost certain you’ve written some scripts dealing with the Document Object Model (DOM). DOM scripting takes advantage of the fact that a web page opens up a set of APIs (or interfaces) so you can manipulate and otherwise deal with elements
Bridging the Gap Between CSS and JavaScript: CSS-in-JS | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. In this article, we’re going to dig into the concept of CSS-in-JS. If you’re already acquainted with this concept, you might still enjoy a stroll through the philosophy of that approach, and you might be even more interested in the next article. Web development is very interdisciplinary. We’re used
Switching to Parcel from webpack - LogRocket Blog
Over the past year, you’ve likely heard rumblings about a new build tool called Parcel. For those of you unaware, Parcel describes itself as “a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration”. Now build tools have come and gone and ones such as webpack and Browserify are still k
CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog
CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類（定義的に微妙なやつも全部ひっくるめて）だ。可能性は一気に広がり無数のライブラリが生み出された。 ある程度の期間を経ていくつかの着目すべきアプローチが見えてきた。これから僕はどのようにセレクタと関わっていくべきかという視点で記してみたい。 擬似スコープ 通常CSSのセレクタにはスコープはないが、HTMLやCSSにハッシュ値を付与して特定のコンテキストを擬似的に閉じてしまおうというアイデア。実装としては、Vue.jsの単一ファイルコンポーネント、Angularのコンポーネントスタイル、styled-jsxなど。関連するウェブ標準技術としてShadow DOMがある。 例え
Advanced web security topics – George's Techblog
This first one comes from An XSS on Facebook via PNGs & Wonky Content Types [1] which gets the browser to execute HTML code embedded in an image. This attack uploads an image that contains HTML strings as a user-contributed content and serves it with an HTML MIME type from the same domain as the compromised website. This exploit circumvents many server-side code injection checks since nobody check
最新のJavaScript技術を使ったウェブサイトを検索向けにする方法 #ChromeDevSummit | 海外SEO情報ブログ
[レベル: 上級] この記事では、11 月 12 〜 13 日に米サンフランシスコで開催された Chrome Dev Summit 2018 に参加した際のセッションをレポートします。 セッションテーマは、JavaScript を多用したサイトを検索で発見されやすくするためのベストプラクティスと注意点です。 セッションスピーカーは、Google チューリッヒの Martin Splitt（マーティン・スプリット）氏と Google シドニーの Tom Greenaway（トム・グリーンアウェイ）氏です。 最新の JavaScript 技術で構成されたウェブサイトを検索フレンドリーにするための秘訣をマーティンとトムの2人がどんなふうに解説したのかを一緒に見ていきましょう。 JavaScript コンテンツの処理プロセス 1. クロール ⇒ 2. レンダリング ⇒ 3. インデックス 静的な
Puppeteer入門 スクレイピング+Web操作自動処理プログラミング - 秀和システム新社 あなたの学びをサポート！
Puppeteerは、Node.jsで動く最新のWebブラウザ自動化ライブラリで、データ収集やWeb開発、動作テストの効率化などに使われます。Google製のライブラリなので、Chromeとの相性は抜群です。本書は、Puppeteerの実行環境の構築から、スクレイピングとWeb操作の自動化を実現するプログラミング、デバッグまでを解説した入門書です。Node.jsとJavaScriptの入門書としても使えます。鶴田謙二さんによる素敵なイラストが目印です！ 【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/5520.html 第1部 準備編 第1章 Puppeteerの基礎 1-1 ブラウザ自動化のライブラリ Puppeteer 1-2 JavaScriptと組み合わせ可能 Puppeteerでできること、できないこと 1-3
JavaScriptでコンテンツが生成されるサイトのスクレイピング【Selenium+PhantomJS】 - Qiita
はじめに JavaScriptによってコンテンツが生成されるサイトは、よく使用されるBeautifulSoup4だけではスクレイピングできません。 例えば「最後までスクロールすると次のコンテンツが表示される」といったサイトです。 URLが変化するわけでもないし、どうすればいいのでしょうか…。 そんなときに登場するのがSelenium+PhantomJSです。 背景 さまざまなケースでWebスクレイピングができるようになりたいという想いのもと、今回も『Pythonクローリング＆スクレイピング』という本を参考に実践していきます。 単純に、Webスクレイピングは楽しいです。 やること 「note」というサイトのスクレイピングを行います。 トップページに表示される投稿の タイトル URL 概要 を抽出し、MongoDBやcsv、RSSで保存します。 何ができるのか 以下のようなページからスクレイピ
How to write X in both Python 3 and JavaScript (ES2015)
Python and JavaScript are two of the most popular programming languages. If you're a Python programmer learning JavaScript, or a JavaScript programmer learning Python, this handy cheat sheet might help you. This page is open sourced on GitHub. Pull requests are welcome! Star I'm Saya, a jewelry designer and a junior JavaScript/Python developer living in Tokyo. Find me on Twitter: @sayajewels If yo
Render Caching for React | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Server Side Rendering (SSR) is a very useful technique that makes web apps appear faster. The initial HTML is displayed before the JavaScript is parsed and, while the user is deciding what to tap on, our handlers are ready. Server side rendering in React requires additional work to setup and has se
Comparing the React and Vue Ecosystems with a Real-World SPA
React vs Vue - a favorite talking point among developers. Many people pick a framework and stick to it, never really getting to know the library they left behind. That's mainly due to time; the only way to really get to know the ins and outs of a system is to use it, struggle with it, grow with it. It's just not efficient to spread your focus thin across similar tools, but aren't you curious? I wa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Replace jQuery with Vue — SitePoint
Google Strongly Recommends Using HTML to Get Content Indexed Quickly