Vueの秘密のパフォーマンステク9選紹介 - Qiita
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
フロントエンドのお仕事図鑑
Webフロントエンドエンジニア2年生になりました。 この1年で本当に多種多様なフロントエンドエンジニアの方たちとお話する機会をいただき、その度に「フロントエンドの領域って様々な役割があるなー」と思わされる毎日です。 一方で、「フロントエンド開発」という単語が形骸化してきている感覚も抱いており、具体的には 「フロントエンドチームに入社してみたけれどスキルミスマッチで苦しんでいる」 「フロントエンドの業務に対してビジネス側や採用側の理解が得られない」 という話を目にする事も少なくありません。 今回はこれまで自分が出会ってきたり仕事でこなしてきたフロントエンド領域の業務について改めて整理する事で、 非フロントエンドエンジニアの方に少しでも興味を持ってもらう より実態に即したジョブロール細分化に向けた議論の下地を提供する フロントエンドエンジニア自身が得手不得手を踏まえたキャリア選択をできるよう、
Softbank Air導入期。VPSでVPNを使って自宅LANへアクセスしてみた。 | しま★りん.blog @ayurina
Softbank Air導入期。VPSでVPNを使って自宅LANへアクセスしてみた。 time 2015/01/18 folder Linux コンピューター Softbank Airは外部からのアクセスが不可。でも自宅のサーバーにはアクセスしたいよね、ということで、VPSでVPNサーバーを上げるという方法で実現してみました。 原理的には、この方法でできることは分かっていたのですが、実際やってみるとなるほど、と思ったり、実際繋がってみるともの凄く便利だったので、書いておこうと思った。 構成は以下の通り。 自宅の回線がSoftbank Airです。外部からのアクセスは不可ですが、内部からのアクセスは可能なので、こちらからVPNを張る構成を取ります。 VPSを１台使います。多分、AWSでもお名前VPSでもさくらVPSでも可能かと思います。条件は、VPSであること。ネットワークがきちんと掴めるV
Linuxmania:SoftEtherでVPN環境を作ろう
すべての項目を選択すると、ダウンロード可能なファイルが表示されますので、beta版を避け、リリースの新しいものをダウンロードしてください。 3.ダウンロードしたファイルをお好きな場所に展開し、展開した vpnserver ファイルを開き「.install.sh」を端末内で実行してください。 4.端末が開きます。 画面の指示に従い、「1」を入力し[Enter]キーを押してください。 ライセンス契約に同意すると、インストールが開始されます。 インストールが終了すると、端末は自動で閉じます。 SoftEther VPN Server のダウンロード方法は以上で終了です。 ◆VPN Server 設定方法 1.端末を開き、下記コマンドを実行しVPNServerを起動します。 $ sudo /home/{先程展開したフォルダ}/vpnserver/vpnserver start 2.続いて下記のコマ
VPSでSoftEther VPNを使って自宅LANに外部から接続する
2016.02.18 スクリプトvpnserver.shに不備があったので修正。末尾に追記あり。 自宅（大阪の方）のインターネット環境をSoftbank Airに変えた。 ところが、Softbank Airの機器(Airターミナル)はポート開放ができないので、自宅のVPNサーバー(SoftEther VPN Server)に外から接続できなくなってしまった。 どうしたもんか、と色々調べていたら、似たような境遇の方がいて(Softbank Air導入期。VPSでVPNを使って自宅LANへアクセスしてみた。 | しま★りん.blog @ayurina)、この記事が大変参考になったので、同じような構成を組んでみることにした。 具体的には VPSを借りて、そこにSoftEther VPN Serverを立てる。 自宅サーバーにはSoftEther VPN Bridgeを入れて、VPS上のSoftE
RaspberryPi B+でカメラモジュール使ってnode.jsとsocket.ioでストリーミング配信してみる - 森川敬一 CTO ブログ
RaspberryPi B+でカメラモジュール使ってnode.jsとsocket.ioでストリーミング配信してみます。 純正カメラをつなげました。 ついでにネットワークがつながってるので、シリアルログインが不要のためmicroUSBケーブルで接続してます。 カメラの有効化を行います # sudo raspi-config 下記を参考にさせて頂きます Raspberry Pi, Camera and Node.js - Live Streaming with Websockets #IoT | The Jackal of Javascript liveStreamingフォルダを作って、expressをsocket.io付きでinitします。 http://thejackalofjavascript.com/rpi-live-streaming/ pi@raspberrypi ~ $ cd
Node.jsを使ってshellコマンドを叩く - ハードウェアエンジニアの備忘録
Raspberry Piに入れたNode.jsを使って、シェルを叩く方法のメモ。 参考にしたのは、以下のブログ。 Node.jsでshellコマンドを叩く - PolyPeaceLight Node.jsからSlackに投稿するPythonスクリプトを動かしてみる。 まずは、適当なディレクトリに移動し、jsファイルを作る。 $ vi shelltest.js 以下のサンプルコードを書く。 var exec = require('child_process').exec; var child; child = exec("python slacktest.py", function (error, stdout, stderr) { console.log('stdout: ' + stdout); console.log('stderr: ' + stderr); if (error !=
Raspberry Pi, Camera and Node.js - Live Streaming with Websockets #IoT | The Jackal of Javascript
A few days ago Bala Kolluru has reached out to me asking if we can control a Raspberry Pi camera module using Web browser, so he can view a live stream from any HTML5 powered device. I was intrigued by this idea and wanted to give it a try. In this post, we will see how we can implement a system that can “stream” a video from our pi to a browser. The completed system would look like Pretty sweet r
Server.js
server.js for Node.js Powerful server for Node.js that just works so you can focus on your awesome project: // Include it and extract some methods for convenience const server = require('server'); const { get, post } = server.router; // Launch server with options and a couple of routes server({ port: 8080 }, [ get('/', ctx => 'Hello world'), post('/', ctx => { console.log(ctx.data); return 'ok'; }
170 Responsive Froala Design Blocks - Froala Building Blocks
For Developers..All Froala products are built for developers. As a HTML5 and CSS3 library, the Froala Design Blocks is clearly no exception. Learn more ..and Designers tooSketch, PSD you name it. Froala Design Blocks is the tool that helps developers and designers speak the same language. Learn more
さくらVPS上にSoftEtherを使ってVPNサーバ(L2TP/IPSec and OpenVPN)を立てる方法 - MyEnigma
SoftEther+VPN構築ガイドposted with カエレバ塩見 豊久 アスペクト 2004-09-01 目次 目次 はじめに VPNの接続方式 SoftEtherサーバ(L2TP/IPSec) の立て方 1. さくらVPSの申し込みと設定 2. OS (ubuntu) の初期設定 3. SoftEtherのインストールと起動設定 4. vpnサーバの自動起動設定 5. VPNサーバのアカウント作成 6. SoftEther用のポート設定 7. Mac, iPhone等からVPNに接続する。 L2TP/IPSecのサーバに同じLANから複数台同時にVPNサーバに繋げない場合 SoftEtherを使ってOpenVPNのサーバも同時に立てる MacからOpenVPNでVPNサーバに接続する iOSからOpenVPNでVPNサーバに接続する Interlink, さくらVPS上のSoft
CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
LinuxでiPadをセカンドモニターにする - 技術日記＠kiwanami
はじめに 「iPad」と呼ばれるディスプレイ装置はすごいデバイスです。タッチパネル付きの9.7インチIPS液晶で、解像度はXGA、しかも無線でマシンと接続できるだけでなく、わずか700g弱という重さながら、バッテリーを内蔵していて10時間以上の連続動作が可能です。 革命的で魔法のようなデバイス「iPad」 AirDisplayというソフトを使うと、簡単にMacやWindowsでiPadをセカンドディスプレイにすることが出来ます。 AirDisplay - Avatron社 残念ながら、このiPadをLinuxでセカンドディスプレイとして使う情報はありません。いろいろ検索してみましたが、やっている人は誰もいないようです。 そこでiPadをLinuxでもセカンドモニターにしてみる方法を探してみました。結果としては一応セカンドモニターとして使えなくもないことが分かりました。 達成目標 ここでの「
Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説
玉石混合状態にあったFluxのフレームワークも、ここ最近ではReduxが首一つ抜け出したような感じとなっています。自分はFacebook/Flux派ではありましたが、先月発売された『WEB+DB PRESS vol.92』に掲載されていた伊藤直也さんのReduxの記事を読んで、Reduxを覚えてみようという気になりました。Redux自体はとてもシンプルで、とっつきやすいと思いました。ただReactとの連携はFacebook/Fluxと比べるとややこしい部分が多いかなといった印象です。ちょっとしたサンプルを作ってみたので、Reduxの実装方法とReactとの連携について紹介したいと思います。 ReduxとはReduxは、Facebookの提唱するFluxアーキテクチャに基づいて（影響を受けて）設計されたJavaScriptフレームワークです。作者は@dan_abramov氏。 reactjs
FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog
You can read this post in English. みなさんこんにちは、FRESH! でフロントエンドの開発している鈴木(sutiwo)です。 前回は、FRESH!におけるPCブラウザのFlash脱却という HLS の Web プレイヤーについて記事を書きました。 今回はスマートフォン・ PC でのブラウザに関するパフォーマンス改善の取り組みとその結果についてお知らせします。 まずクライアントサイドのパフォーマンス改善を行うにあたり、弊社の Web Initiative Center* から 1000ch 氏に加わっていただきどのようなことを目標とするか議論しました。 * Web プロダクトの品質向上とWeb技術を使ったチャレンジを目的に設立された弊社の組織 議論の様子 議論を行った後、今回の改善で以下のことに取り組むことが決まりました。 Service Worker で
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ
伝説の「キーボードクラッシャー」、日本のファン向けにYouTubeでビデオレターを公開【やじうまWatch】
最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger
Ubuntuの使い勝手をできるだけMacに近づける - Qiita
