非依存なHTML5オーディオプレーヤー・「Amplitude.js」 - かちびと.netAmplitude.jsは依存性の無いHTML5 オーディオプレーヤー実装スクリプトです。フレキシブルで軽量、タッチデバイスフレンドリーな点が主な特徴のようです。シンプルで良いんじゃないでしょうか。jsDelivrにCDNも公開されています。ライセンスはMIT。 Amplitude.js
ずぼらによるずぼらのための React 入門 - Qiita
この記事について Node.jsもES2015も使わないReact入門 - Qiita（以下「元記事」） に感銘を受けつつ、拙作のReact用ライブラリである rx7.jsも補助的に使ってみて欲しい、という記事です。 (以前はt7.jsというライブラリを紹介していましたが rx7.js が完成したので変更しました) ですので、元記事の React.createElement() を用いた方式を理解したうえでこの記事を読むことをお勧めします。 なお、この記事内の引用部分は特に断りがない限り元記事からの引用です。 Reactって使い始めると便利なのですが、一つ大きな問題があります そう、それは導入障壁が大きすぎること Node入れて、Babel導入してJSX/ES2015でコーディングして、タスクランナー導入してビルド自動化して、Redux導入して... 巷のReact記事を読むとこんな感じの
Chrome M60 で Native ES Modules + ServiceWorker を試して未来へのマイグレーションを見積もる - Qiita
目的 Chrome M60(Canary) でフラグ付きで ES 2015 の ES Modules が動くようになったので、試す。 ServiceWorker と Babel 前提で、エッジな構成で今のバンドル環境を無理矢理シミュレートしてみて、今との比較で現実的なマイグレーションパスを探しておくことにした。 成果物 uupaaさんの WebApp2 をスケルトンとしてお借りしました。 なにができるか まるで browserify/webpack でビルドしてるかのようにこのコードが動く。ブラウザ上だけど babel も動く。 /* @flow */ import { combineReducers } from 'redux' // import external import sub from './sub' // import internal sub() console.log(
Atom hydrogen で、ruby-xmpfilter 的な workflow を実現する - Qiita
追記: 結局パッケージにしてしまった。。。 https://atom.io/packages/hydrogen-helpers Atom のパッケージ Hydrogen を使い始めた。 目的は JavaScript のお勉強を加速するために、サンプルコードスニペットを手早く理解するためだ。 これまで、理解の難しいコードは自作の transformer パッケージで Atom から直接実行していたが、 hydrogen を試してみようと思い立った。いちいち debug プリント( console.log ) 入れるのが辛くなってきた。 もともと、Vim を使っていた頃、vim-ruby-xmpfilter というのを作って使っていた( 単なる rcodetools/xmpfilter 自体の wrapper) これとワークフローを実現したかった。 実現したい Workflow コードをセレク
JavaScript requireの無い環境でrequireを提供する - Qiita
元記事 以前こちらの記事で、requireで書ける node.js や browserify に対応し かつ、素のHTMLでのscriptタグリンクでも動作するような モジュールの書き方をまとめました。 JavaScriptの名前空間とモジュール分割方法 require(node.js/browserify) HTMLScriptタグ WSH フル対応 - Qiita モジュールを作成する場合は、このようにしておいた方が、様々な環境用に提供できる汎用的なライブラリにできます。 ただ、これは呼び出し側では、HTMLのscriptタグを使う場合には、グローバル唯一の名前空間を使うという、やり方でした。 require のない環境でも require を使えるようにする 今回は require のない環境でも require 使えるようにして、モジュール側の汎用性だけではなく、モジュールを使用す
フロント書くなら確実に知っておくべきCodePenについてのメモ - Qiita
概要 HTML/CSS/JavaScriptが書きたい？じゃあCodePenでしょ！！ ということで基本の使い方とすごいところを語ります。 What is CodePen? HTML/CSS/JSのコードを、ブラウザ上で編集しながら実行結果が確認できる最強ツールです。 コードを保存して公開することもできるので、ポートフォリオとしてコードを公開している人や、誰かの書いた素晴らしいコードを参考にしてコーディングを行うことができます。 How to Start CodePen! 1. Sign up ボタンを押します！ 【URL】 https://codepen.io/ 2.Free プランをクリックします！ 3.入力＆Submit！ 4.Save&Continueをクリック！ 5.アカウント作成完了！ 他にも色々 フォークする 参考になりそうなコードをフォーク(コピー)して自分のアカウントで編
Node.js 8.0が公開。npm 5.0バンドル、Node.js API搭載、WHATWG URLパーサーを正式サポートなど
Node.js 8.0が公開。npm 5.0バンドル、Node.js API搭載、WHATWG URLパーサーを正式サポートなど Node.js 8.0では、パッケージマネージャとして最新のnpm 5.0をバンドル。npm 5.0ではキャッシュ機構のコードがリライトされて高速になるなどの強化が行われています。下記はnpm 5.0と以前のバージョンの速度比較を行っているツイートです。 With #npm5 about to come out, I thought I'd update those benchmarks. Here's the npm5 code I'm working on, vs [email protected] on a popular repo pic.twitter.com/KWPfbpE46p — ✨11x gayer Kat✨ (@maybekatz) 2017
Node.js — Node v8.0.0 (Current)
The next major release of Node.js brings a range of significant changes and additions, far too many for us to cover adequately in a blog post such as this. This article contains a summary of the most significant changes and features. Say hello to npm version 5.0.0 npm, Inc. recently announced the release of version 5.0.0 of the npm client and we are happy to include this significant new version wi
Webをほとんど分からない奴がRiot.jsを触ってみる(多分①) - Qiita
⚠はじめに 文章を書くのが下手なので見苦しくて読みにくく理解しづらいかもしれませんがご了承ください この文章書いてるアホ、まっじで初心者なので、何か間違っていたらコメント等でやさ～～～～しく教えてくれると助かります イントロ タイトルを三回読みましたでしょうか そうです、HTML CSS js 全て超基礎レベルでしか覚えてない野郎がRiotに挑戦してみます しかも続きます たぶん あ Webエンジニアとかそういうのは目指してません こういうの使えたらかっこいいみたいな自己満です 私みたいな同じような初心者の方で挑戦してみたいとか、参考になればいいかなぁなんて思ってこの記事を書いています Q, てかなんで挑戦しようと思ったの？ 知り合いがRiotを使用していたのを見て私もやりたいな～～～～(唐突)と、思ったからです インターン探してたらWeb系多くてちょっと覚えておこうとか思ったわけではない
JavaScript(React+Flux)のディレクトリ構成がガタガタになりそうだったので反省して改善する - コネヒト開発者ブログ
こんにちは。フロントエンジニアの@ry0_adachiです。 ここのところ、React + Flux Utils *1 の構成を選択することが多く、それ以外を選択することが少なくなってきました。特に大きな不満はないし、慣れてきたので良いかもな〜と思っていたのですが、開発期間が伸びてきて、アプリ自体の規模がそこそこになってくるとFacebook公式のサンプルコードのようにシンプルな構成だけではカバーしきれない状況が生まれることもあります。運用し始めてだんだんとその辺の辛さみたいなものが見えてきたのと、継ぎ接ぎな構成になるのは嫌だったので、このタイミングで1回整理して改善してみようと思いました。 Fluxについて Facebook提唱のアーキテクチャ、またはフレームワークです。データの流れを一方向にして、シンプルに状態管理が行えることがメリットとしてよく挙げられています。Fluxについてより詳
【React】Goodpatch×TeamSpirit Meetupに参加してきた - ゆとり日記
teamspirit.connpass.com ↑のイベントに参加してきました。 （通常枠で申し込んだつもりでいたが、直前になって「ブログ執筆枠」で申し込んでいた事に気づくという阿呆ぶりを発揮。） フロントエンドエンジニア3年目。 Redux + React + Node.jsのSPA開発を1年くらいやってる。 Reactに若干飽きてる。 こんな人間から見た感想を書いていきます。 各LTの感想 ※発表者の方の資料は、展開され次第追記していきます。 LT1 Reactのパフォーマンスを改善する必要が無かった話 チームスピリットさんが開発してるプロダクトがReactで開発されていて、それのパフォーマンス改善の話を聞いた。 結論はLTのタイトルにもある通りでそこまでパフォーマンスを改善する必要が無かった、とのこと。普段から設計やコードレビューに気をつけていた甲斐もあって、現状のパフォーマンスは悪
Efficient React Components: A Guide to Optimizing React Performance | Toptal®
Efficient React Components: A Guide to Optimizing React Performance Why does a React web app run slow? The answer often lies in when and how frequently your components re-render, and whether those re-renders were even necessary. React doesn’t promise magical performance gains, but it provides just the right tools and functionalities to make it easy. In this article, Toptal Freelance Software Engin
グーグル検索はどこへ向かう？ モバイルファーストからAIファーストへ | 海外&国内SEO情報ウォッチ | Web担当者Forum
海外のSEO/SEM情報を日本語でピックアップグーグル検索はどこへ向かう？ モバイルファーストからAIファーストへ AMP・PWA・HTTPS・構造化データの最新情報 （Google I/O 2017）グーグルは、いま何を重視していて、どこへ向かっているのか。 グーグル本社がある米カリフォルニア州マウンテンビューで5月17日～19日に開催された「Google I/O」というカンファレンスに参加してきた。基本的には開発者向けのカンファレンスなのだが、検索関連のセッションも数多くあった。 筆者が参加した検索に関わるセッションのなかから、グーグル検索の最新情報をダイジェストで紹介する。 AI（人工知能）モバイルファーストからAIファーストへ ―― すべてのプロダクトでAIを使っていく Googleの音声認識のエラー率は4.9%（音声認識にはAI技術が用いられている） 音声と同様に視覚も入力方式と
AMPはニュースサイトだけじゃない、ECサイトでもAMP対応可能 #IO17JP
[レベル: 上級] この記事では、EC サイトを AMP 対応させる方法を解説します。 米カリフォルニア州マウンテンビューで先週開催された Google I/O 2017 で僕が参加したセッションにもとづきます。 AMP はニュースサイトやブログのような静的コンテンツを提供するサイトに向いています。 一方で、EC サイトのようなダイナミックな機能を必要とするサイトには向いていません。 向いていないというよりも、機能不足で実装不可能と行ったほうが正確でしょうか。 しかし状況は変わりつつあります。 AMP プロジェクトは EC サイトにも AMP を使えるように取り組んでいます。 AMP 対応した EC系サイトも増えつつあります。 それでは、どのようにして EC サイトをAMP 対応させていくかを、これから解説します。 EC サイトで利用できる AMP コンポーネント EC サイトでよく使われ
Bootstrap3をRails4に導入 - Qiita
1年くらい前に書いた記事ですが、お蔵入りさせるのも何なので公開します。実は先程新しいプロジェクトでもやって違うところがないか確認もしたので2017年現在でも有効じゃないかと思います。 Bootstrap導入するのに結構ハマりました。実際両方の方法を試しました。 最新はBootstrap4だけどα版のため現時点（2016年7月時点）では3が無難。 あと、世にある導入方法の殆どがscaffoldでまず何らかの雛形作らせるんだけど、当然読み飛ばしています。 Gemを使う 以下はBootswatchをインストールする例だが、これだけだと動かない可能性あり、並行して手動のものもやってみました。 イイ感じのテンプレートができるとか言う有名なサンプルサイトはこちら。 http://bootswatch.com/ Rubyといえばお馴染みのこちらを参照。 http://dev.classmethod.jp
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Should We Upgrade to Rails 5? - DZone
RailsでSprocketsを使わないでwebpackを使いHMRで開発する - Qiita
SEOで成果を伸ばしたい? 「ユーザーのために」は聞き飽きた? イマドキSEOを大御所が解説【SEO記事12本まとめ】 | 海外&国内SEO情報ウォッチ
Weekly News for Web Designers