Why I wrote 33 VSCode extensions and how I manage them
They say posts with great images attract more viewers…Hey there 👋 I’m Fabio, a self-taught developer passionate about open source and empowering people. I also like to make my own tools, so naturally I ended up writing a lot of extensions for one of the programs I spend a lot of my time on: VSCode. I’d like to share with you a bit of my workflow when developing and managing VSCode extensions as w
AngularのPWA（Progressive Web Apps）機能でアプリのようなWebページを作成 (1/3)：CodeZine（コードジン）
本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はe2e（End-to-End）テストの実行方法を説明しました。今回は、ネイティブアプリのような使い勝手のWebページを実現するPWA（Progressive Web Apps）に関するAngularの機能を紹介します。 はじめに Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。 PWA（Progressive Web Apps）は、まるでネイティブアプリのような使い勝手を提供するWebページです。Webページのアプリ名やアイコンを定義する「Web
再利用・保守・拡張しやすく破綻しにくいCSSを書くためのポイント 〜CSSLintの全32個のルールを解説〜 - Qiita
はじめに 既存のコードに対してCSSLintを走らせてCSSのチェックをしてみると結構色々な警告が出ていました。 本記事はCSSLintのルールをベースにして、CSSはこう書いた方が 保守・再利用・拡張しやすい 、またこう書くと 破綻しにくい というポイントを紹介していきます。 CSSLintとは その名の通り、CSSのLinterです。 CSSに問題点ないか自動でチェックしてくれるツールです。 CSSLintにはルールが存在して「この書き方はちょっとなぁ・・・」という箇所を警告してくれます。 警告されたものの「このコードの何がダメ？」「どう直せば良い？」などパッとわからなかったところがありました。 本記事では、公式の ルール を元に説明を加えていきます。(一部、紹介する順番を公式と変えている部分がありますが内容は同じです) また、ブラウザ版( http://csslint.net/ )も
Netlify+Node.js+MongoDBでJAMstackな草を生やすサービスをOSSで公開しました! - Qiita
Netlify は無料の静的サイトホスティングサービスです。GitHub のレポジトリと連携することが出来て、特定ブランチの内容と同期して、静的サイトを自動的に更新してくれます。また、ブランチの更新にフックして、静的サイトのビルドコマンドを指定することも出来て、ブランチ更新 -> Netlify 上で自動ビルド -> サイト更新という簡単なワークフローを組む機能も持っています。 🌱buttons では、GitHub 上にはビルド前のソースコードだけを commit して、後述の bulbo というビルドツールでビルドした静的サイトを Netlify 上にホスティングしています。 Database MongoDB はドキュメントデータベースと呼ばれるタイプのデータベースです。RDBMS よりもお手軽に開発を開始できます。 node.js では mongoose という ODM ライブラリが
Node.jsにおけるプロトタイプ汚染攻撃とは何か - ぼちぼち日記
1. はじめに 最近わけあってNodeのセキュリティ調査をしているのですが、今年の5月に開催された North Sec 2018 でセキュリティ研究者の Olivier Arteau 氏による 「Prototype pollution attacks in NodeJS applications」という面白い発表を見つけました。 この発表の論文や発表資料、デモ動画などもgithubで公開されていますし、ちょうどタイミングよくセッション動画も最近公開されました。 github.com Olivier Arteau -- Prototype pollution attacks in NodeJS applications この発表で解説されているのは、悪意のある攻撃者が、JavaScript言語固有のプロトタイプチェーンの挙動を利用して、Webサーバを攻撃する方法です。 発表者は、npmからダ
［速報］GitHub Actions発表、Dockerコンテナの連係によるワークフローを自由に定義可能。GitHub Universe 2018 － Publickey
［速報］GitHub Actions発表、Dockerコンテナの連係によるワークフローを自由に定義可能。GitHub Universe 2018 GitHubが主催するイベント「GitHub Universe 2018」が、サンフランシスコで開幕しました。 初日の基調講演で同社は「Pull Request以来もっとも大きな新機能」（同社シニアバイスプレジデント Jason Warner氏）とするGitHubの新機能「GitHub Actions」を発表しました。 GitHub Actionsとは、GitHubのイベントをトリガーとして任意のDockerコンテナの実行を連係させていくことにより、ユーザーが自由にワークフローを定義できるというものです。 ワークフロー内のアクションとしてDockerコンテナを実行できるため、コードのビルドやテストの実行、クラウドへのデプロイなど、GitHubの機
How to level up your organization's security expertise
Any good network-level security tool will also give you information on the types of attacks the tool is blocking and how it recognizes likely attacks. This information is available in the marketing materials online as well as the tool’s console and reports if you have access to those. Each of your development teams or squads should have at least one subject matter expert who takes the time to read
vue.js + typescript = vue.ts ことはじめ
vue.js は typescript を公式にサポートしています。 つい先日 vue-cli のバージョン 3.0 にてついに、初めから typescript が導入された vue.js のプロジェクトテンプレートが追加されました。 いよいよ vue.js ならぬ vue.ts に追い風が吹いてきたのを感じます。 そこでその追い風を更に強くするべく vue.js + typescript でコンポーネントを作るための基礎知識というかチュートリアルっぽいものを書いてみました。 この記事の概要 vue.js を typescript で書く vue-class-component を利用する vue-property-decolator を利用する ドキュメントにない細かい機能や tips でお送りします。 目標はコンポーネントを自由に作れるようになることです。 プロジェクトテンプレート 何
Vue.jsの開発環境とngrokを連携する方法
はじめに Vue.jsでFacebookログインとGoogleログインを開発をしていて、開発環境でHTTPSが必要でした。 実際は、こちらの記事で書いた通り、「yarn serve --https」で事足りました。 しかし、開発中は、それに気づかずに、ngrokの連携までして開発を行いました。 結構がんばったので記事にしました(笑) ngrokを使う上での困ったところは、起動するたびに公開URLが変わってしまうことです。 このため都度都度vue.jsのdevserverの設定を変更する必要があります。 そのあたりを極力自動化するようにしました。 デモ用にアプリを外部公開するとかに使えるので、お試しください。 TL;DR ngrokの起動スクリプト(ngrok.js)を作成した。 ngrok.jsを実行すると、ngrokを実行し、転送先の公開URLと転送元のポート番号を「process.en
素のJavaScriptで書くPOSTメソッドにおける二重送信対策
はじめに 現在とあるチームプロジェクトにおいてフロント(Vue.js)を担当しております。しかしバックエンドをNode.jsで組んでおり、ちょくちょくそちら側も勉強しております。 今は「Node.js超入門」を使って勉強を進めています。 とても親切に優しく書かれているので、初学者の方にはお勧めですねー。 チャプター３で「超簡単掲示板を作ろう」とあるのですが、個人的に追加で機能を実装しながら遊んでいましたところ、とある問題に気づきました。 それが、「フォームの二重送信問題」 特に「ページリロード時に発生する」ものについてです。 対策としては、PRGパターンの活用や、トークンの発行など色々あるのですが、 調べても調べても出てくるのはPHPにおける対策例ばかり。 確かに以前私もPHPを使ったことがあるので、そちらについては分かるのですが、今回はNode使ってるし、しかも送信後の表示ページは元のホ
Vue.jsで構築された、デスクトップでもスマホでも快適に操作できるスライドショーのフレームワーク -Eagle.js | コリス
Vue.jsで構築されたスライドショーのフレームワークを紹介します。 デスクトップ・スマホに完全対応、プレゼンテーションモードも備えており、キーボード・マウス・タッチ操作をサポートしている快適なスライドショーを実装できます。 Vue.jsで構築された、軽快に動作するスライドショーのフレームワーク。 アニメーション、テーマ、インタラクティブウィジェットをサポート。 プレゼンテーション全体でコンポーネント、スライド、スタイルを再利用可能。 ビルトインプレゼンターモードとさまざまな便利なウィジェット。 すべてのAPIが公開されており、カスタマイズ可能。 ライセンスはISC Licenseで、商用でも無料で利用できます。 Eagle.jsのデモ Eagle.jsを使用したさまざまなスライドショーを楽しめます。 まずは、スライドやフェードなどのアニメーションが仕込まれたスライドショーから。 Eagl
Announcing TypeScript 3.1 | TypeScript
Today we’re announcing the release of TypeScript 3.1!If you haven’t heard of TypeScript, it’s a language that builds on top of modern JavaScript and adds static type-checking. When you write TypeScript code, you can use a tool like the TypeScript compiler to remove type-specific constructs, and rewrite any newer ECMAScript code to something that older browsers & runtimes can understand. Additional
web界隈LT会 (2018/09/28 19:00〜)
新機能 バウチャーによるイベント管理機能をリリースしました。協賛企業の社員や関係者のイベント参加を円滑にすることに活用いただけます。詳しくはヘルプページをご覧ください。 新機能 connpass APIに新しく、所属グループを取得できるAPIやユーザーの参加イベントAPIを追加しました。各APIの詳細な仕様や利用方法につきましては、 APIリファレンス をご確認ください。またAPI利用希望の方は connpassのAPI利用について をご覧ください。 お知らせ 2024年9月1日より、connpassではスクレイピングを禁止し、利用規約に明記しました。以降の情報取得にはconnpass APIをご利用ください。APIご利用についてはヘルプページをご確認ください。
Nuxt.js + Netlifyで爆速構築するサーバーレスSPA開発入門
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 こんにちは、アジアクエスト株式会社でフロントエンドエンジニア(以下、FE)をやっています、かめぽんです。 最近、VueもNuxtも勢いすごくないですか？？ すごいですよね？！？！ そんでもって、FirebaseやAWSを使ったサーバーレスアーキテクチャのアプリケーションも増えてきていますね！ だけど、「覚えること多くてよくわからん！けど、なんか動かしてみたい！」 と、思う方もいると思うのでぜひこの記事を参考にしていただけたらと思います。 サーバーレスSPAの構築方法はたくさんありますが、まずは手軽にモダンフロントエンド周りの知見を
Nuxt.js アプリケーションを CircleCI 経由で App Engine Standard 環境へと自動デプロイする
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Nuxt.js が遂に v2.0 になりましたね 私も個人的にほしい機能を Pull Request で出していたものが入って、ようやく使えるようになって嬉しい限りです。 v2 が出たことによって、 v1 である程度安定しているものの、 nuxt-edge とどっちを使うべきかで悩んでいた層が、「v2 から Nuxt.js をはじめてみよう」とはじめることも多くなるかと思います。 そんなときに悩みのタネになるのが、 Nuxt.js 特有のサーバー管理事情です。 SSR モードで立ち上げる場合、 Node.js サーバーが必要となるため、
Introduction to WebSockets. Creating a Node.js server and using WebSocket API in the browser - wanago.io - Marcin Wanago Blog
September 24, 2018 WebSocket is a protocol that makes two-way communication in real-time between the user and the server possible. A common use cases are chats and online multiplayer games. Today we cover implementing it both on frontend and backend. Let’s go! Explaining WebSockets WebSocket is a different protocol than HTTP. Despite that, to establish a connection, the client sends a WebSocket ha
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Why Netflix Rolled Its Own Node.js Functions-as-a-Service Runtime - The New Stack
Javascript async await: Introduction to asynchronous JavaScript - FrontNet Blog