You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ものすごく遅レスですが、LLDiver で @esehara さんの LT であった話。 forやめろ、あるいは「繰り返し」という呪縛から逃れるために 簡単に言うと、 1~10 までを出力する方法を複数考えるというもの。 for, while, 再帰, goto etc.. と出て、途中で終わっちゃったので結論はよくわかりませんでしたが、 Node ではどれも使わずにできるな、と思ったのでちょっと例を出してみます。 ちなみに、タイトルでネタバレしている通りイベントループの話です。 そしてよくある「イベントループとは何か」「なぜ止めてはいけないのか」「process.nextTick() とは何か」「setImmediate() と何が違うのか」 などを解説する良い例だったので、書いてるうちに実はそっちがメインの解説となりました。 サンプルの実行結果は Node v0.11.13 です。(書
はじめに はじめまして、福岡オフィスで働いている前平です。 セキュアスカイ・テクノロジーでは、すでにいくつかのカテゴリのブログを発信していますが、技術を気軽に発信したり、エンジニアが普段の業務でどのような技術に触れているのかを紹介したりすることを目的として、新しく「エンジニアブログ」が立ち上がりました。 本記事では、最近になってようやく (汗) 検証した Vue.js でのクロスサイト・スクリプティング (XSS) について紹介します。 なお、本記事の内容は私見に基づくものであり、所属組織を代表するものではありません。 前提 本記事では Vue.js を使って XSS の脆弱性を作ってしまうようなケースを説明しますが、その他の JavaScript のライブラリ/フレームワークを使った場合でも同様のリスクがある可能性があります。 検証で利用したバージョン Vue.js v2.5.16 (サ
サーバサイドJavaScriptのための環境として登場した「Node.js」は、今やクライアント環境でのJavaScriptランタイムとしてもポピュラーなものとなっています。その開発はどのようなプロセスで進められており、今後はどのような形で進化していくのでしょうか。今回、Node.jsのコミッターであるヤフーの大津繁樹氏と、「Japan Node.js Associations」の代表理事を務める、リクルートテクノロジーズの古川陽介氏に、それぞれの立場から「Node.js」の現状と未来について語っていただきました。モデレーターは、テックフィード代表取締役の白石俊平氏が務めます。本稿は2部構成の【前編】です。 日本の「Node.js」コミッターには実は意外なつながりが? 白石:今回は、Node.jsのコミッターである大津さんと古川さんに、Node.jsの現在と未来について語っていただきたいと
ZEIT が作っている Micro という Node.js のフレームワークがあり、使いやすそう。 ZEIT は、かの Next.js を作っていて、 Mongoose を作った人や socket.io を作った人が所属しており、とても信頼できる。 ちなみに、 ZEIT は Now という、 Node.js (及び Dockerized されたもの)を動かせる、サーバーレスのサービスもやっている。 ZEIT(時) と Now(今) という世界観が良いですね。 初動が早くて、快適だった。 [追記] 何かに Micro 8 と書いてあって、最初、そういう名前のフレームワークと思ったのですが、実際は 8 はバージョン名で、 Micro のようです。また現行バージョンは9でした。 多分これ https://zeit.co/blog/micro-8 [/追記] Features README の F
HTML5アプリに関わるユーザのための祭典。HTML5 APP CONFERENCE 2018 開催レポート 2018年7月9日 イベント Capacitor, cordova, html5, HTML5 APP CONFERENCE, Ionic, PWA, イベント 生形 可奈子 2018年7月8日(日)、サイボウズ株式会社にてHTML5アプリに関わるユーザのための祭典、「HTML5 APP CONFERENCE 2018」が開催されました。 本記事ではイベントの様子を、熱気冷めやらぬうちに速報でお伝えします! HTML5 APP CONFERENCE 2018 様々な分野のエキスパートが登壇した今回のイベント。本記事では個人的に気になったセッションをピックアップしてご紹介します! 基調講演「Web App Platform Strategy (Webアプリ・プラットフォーム戦略)」
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純(後述)だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない!! と思いました。 フロントエンドの想定外 ウェブサイト
Webエンジニアの森脇です。LCLでは、以前より「Capybara + PhantomJS」でE2Eテストを行っていましたが、「Puppeteer + Headless Chrome」へ変更しました。 元々は、軽くPuppeteerを触ってみるだけのつもりでしたが、できが良く本格的にE2Eテストへ導入することにしました。 本記事では、変更の経緯や、PuppeteerでE2Eテストを実装する上でのTIPSを紹介します。なお、Capybara + PhantomJSを利用したE2Eテストは、以下の記事でご紹介しております。 techblog.lclco.com 変更の経緯 PhantomJSは古めのWebkitをベースにしているため、一部のCSSがうまく適用されず、Headless Chromeへ移行を以前より考えていました。そんな中、PhantomJSの開発が終了したこともあり、移行すること
連載「Visual Studio CodeでWebアプリ開発を始めよう」 Visual Studio Code(以下、VS Code)はデフォルトでHTML/CSS/JavaScriptをサポートしている。このことから、VS CodeをWebアプリ開発で使用している方も多いことだろう。本連載では、VS CodeにおけるHTML/CSS/JavaScriptコーディングの基本や活用方法を何回かに分けて取り上げる。今回はVS Codeが持つHTMLサポート機能を見てみよう。 HTMLについて、VS Codeは以下のような機能を内包している。
Embed your circuit Ctrl+Click(Mac:command+Click) on your circuit and copy a circuit data. Then paste it into template below. <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="simcir.js"></script> <link rel="stylesheet" type="text/css" href="simcir.css" /> <script type="text/javascript" src="simcir-basicset.js"></s
PLAID Advent Calendar 2017 23日目。 プレイド @otolabです。イブイブですね(古い)。 面白くて新しい技術はどんどん変化していきます。検索していてもなかなかうまい具合に情報に当たらない。せっかくみつけても情報が古いなんてことはザラ。 というわけで、今回はService Workerに関する最近の動きをまとめ、知識のアップデートを試みます。 前作「従来のWebアプリの常識を変える! Service WorkerがもたらすWebの未来」を2016年の中頃に書いているので、そこからの差分をざっくりと紹介したいと思います。 Service Workerとは? まずは「とは?」から。 Service Workerとは、Web Workerの一種で、ブラウザで表示しているページ内のスクリプトとは独立して動くスクリプトです。必要に応じてサイトごとに見えないタブが開くイメ
Canvas drawing made easy oCanvas is a JavaScript library intended to make development with HTML5 Canvas easier. Instead of working with pixels, you work with objects. It’s very straightforward and easy to get started with. Please have a look at the examples to see just how easy it is. View demos & examples Download oCanvas Current release: 2.10.1 Production 21 kB minified & gzipped Development 192
CreateJSでHTML5 Canvasを操る 第1回 CreateJSとは 第1回目はCreateJSの概要と、おおまかな機能、またCreateJSの理解に必要な概念を解説します。簡単なデモを多く用意したので、まずはどんな表現ができるのかを実感してもらえるといいと思います。 CreateJSとは CreateJSは、Canvasを便利に扱うためのライブラリ群で、JavaScriptの知識があればHTML5のCanvasを直感的に制御し、コンテンツを作ることができます。CreateJSというと、Flash経験者のためのライブラリと捉えている人がいるかもしれませんが、JavaScriptでコードを書いた経験があれば、だれでも使いこなすことができます。 現在のところFlashがかつてになっていたウェブ上のダイナミックな表現を可能にするツールとしても注目されています。 これまで、ウェブの動的コ
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
どうもですよ、はやちですよ٩( ᐛ )و 以前、こちらの記事でご紹介したPixi.js。 今回はパーティクルを使用して、ちょいと「雪が降ってる風」の演出を実装する方法をご紹介します( ˇωˇ)☝ 導入方法 npmはこちらからインストールしてお使いください。 npm install pixi.js 実装方法 それでは実装方法ご紹介します( ˘ω˘)☞三☞シュッシュッ 土台の設定 はじめに表示するCanvasを用意します。 Canvasはサイズと背景色も設定できます( ˇωˇ)☝ let app = new PIXI.Application(800,600,{backgroundColor : 0x1099bb}); document.body.appendChild(app.view); 複製させる画像の数を決めておきます( ˇωˇ)☝ //表示をする画像の数 let totalSprite
Standalone, framework-agnostic JavaScript library that enables recording, replaying, and stubbing HTTP interactions.
Intro Web Authentication(WebAuthN) API の策定と実装が進んでいる。 これを用いると、FIDO(Fast IDentity Online) U2F(Universal Second Factor) 認証が可能になる。 今回は YubiKey 認証の実装を通じて、ブラウザ API の呼び出しと、サーバ側で必要な処理について解説する。 https://w3c.github.io/webauthn/ DEMO 動作するデモを以下に用意した。 https://labs.jxck.io/webauthentication/fido-u2f/ YubiKey での動作のみ確認している。 コードは以下にあり、今回の解説もここから抜粋している。 (あくまで API の流れを解説するためのものであるため、飛ばした処理もあり、本番利用に耐えうるものではない。) https:
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの3つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く