タグ

javascriptに関するvanbraamのブックマーク (85)

  • Brian Tracy - copy-paste-shell

    Don't Copy Paste Into A ShellWhen you see a shell command on the Internet, do not copy it into your terminal. Modern JavaScript Clipboard APIs allow a website to trivially overwrite what you put inside your clipboard, without the user's confirmation or permission. Here is an example of how easy it is to perform this attack. Imagine that the red text below is a shell command you want to use. Below

    vanbraam
    vanbraam 2020/11/01
    仕事柄こういうもののコピペを使うことも多いので,気をつけないと……
  • TypeScript誕生の背景 | TypeScript入門『サバイバルTypeScript』

    TypeScriptは、JavaScriptでも大規模なアプリケーションを開発しやすくすることを目的に開発されたプログラミング言語です。 確かにJavaScriptは元々、大規模な開発を想定した設計ではありませんでした。それでも、JavaScript自体が進化して、大規模開発に対応してゆけば良かったはずです。しかし、実際はそううまくは行きませんでした。代わりに、大規模開発の一部はTypeScriptが引き受けることになったのです。 なぜ、そうなったのでしょうか?その答えはJavaScript歴史にあります。TypeScriptが必要な発明で、そして、今もなお必要とされている理由が見えてきます。それでは、TypeScript誕生以前の歴史をひも解いていきましょう。 1990年代​JavaScriptの誕生​JavaScript誕生以前は、簡単なフォームのバリデーションをするのも、サーバーサ

    TypeScript誕生の背景 | TypeScript入門『サバイバルTypeScript』
    vanbraam
    vanbraam 2020/07/06
    TypeScriptを作ったMicrosoftへの配慮かもしれないが,JavaScriptのIE独自仕様という邪悪な存在がJavaScriptの停滞をもたらしたことに触れないのはダメでは
  • 【JavaScript】本日未明、[ if - else ]さんが死体で発見され... - Qiita

    「な、なんじゃこりゃあああぁあっtっt!!!!」 ・・・ ・・・ ・・・ 読みやすいコードを書きたい 複雑な条件分岐は、書いている人も、後からそれを読む他人も非常に疲れるものです。 令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついつい条件反射でif-elseを書いてしまいそうになります。 (*1: 令和になってからプログラミングを知った人。初心者のこと。) if - elseを使わない条件分岐のレパートリーを増やす if - else文が絶対ダメということでは決してありません。 たくさんのレパートリー、つまり引き出しを持っておけば、適切な読みやすいコードをかける可能性が上がるかなと思うのです。 文と式 JavaScriptには「文」と「式」があります。 この2つの違いを意識することが重要ではないかと思います。 「文」は、マシンへの命令です。 「式」は数学的な値

    【JavaScript】本日未明、[ if - else ]さんが死体で発見され... - Qiita
    vanbraam
    vanbraam 2020/07/05
    3項演算子,evilとする人もいて,Goでは不採用になってたりするので,安易に勧めて良いのだろうか? 最低限Bob PikeやKen Thompsonに喧嘩売る覚悟が必要では?; つまらない話だが"死体"は故人が未特定の場合. 特定済の場合は"遺体"
  • Node.jsの後悔から生まれた新しい実行環境・Deno入門 〜簡単なアプリケーション作成ハンズオン付き〜 | さくらのナレッジ

    こんにちは!小田島です。ウェブ業界に来る前は手品業界で働いていました。最近は外出自粛で手品をやる機会がないので家でひたすら練習しています。 前回の記事「いまさら聞けないNode.js」は、「わかりやすい」「いい記事」「背景の説明が丁寧」といった好意的な反応が多くて安心しました。 「Denoについては後日記事を書きます」と前回宣言したので、今回はDenoについての入門記事を書きます。よろしくおねがいします! 対象者 今回は、こんな人が対象です。 Denoって何? Node.jsとどう違うの? 全然触ったことないけど何か簡単で応用が効くものを作ってみたい 前回と違い、ハンズオンも含まれています。ぜひ読みながら実際に動かしてみてください。 Denoとは? 前回同様に超ざっくりと説明すると、JavaScriptTypeScriptの動作環境です。作者はNode.jsと同じライアン・ダールです。D

    Node.jsの後悔から生まれた新しい実行環境・Deno入門 〜簡単なアプリケーション作成ハンズオン付き〜 | さくらのナレッジ
  • Prototype Pollution in Kibana

    Working at Securitum Pentester / Researcher / Web Security Instructor Bug bounty hunter 0x08 place at Google's 0x0A Loving client-side security Speaking XSS Prototype-based inheritance What's prototype pollution anyway? DEMO: RCE via prototype pollution in Kibana Lessons learnt

    Prototype Pollution in Kibana
    vanbraam
    vanbraam 2019/10/28
    Kibanaに限った話ではなく,本質的にはJSの宿痾.JS実行系全体でPrototype変更を制限できれば良いが,それに依存したコードが多い現状では無理だろう.結局地道にユーザー入力をチェックするしかない
  • HTML5のLocal Storageを使ってはいけない(翻訳)|TechRacho by BPS株式会社

    概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す

    HTML5のLocal Storageを使ってはいけない(翻訳)|TechRacho by BPS株式会社
    vanbraam
    vanbraam 2019/10/10
    ユーザーの自衛策としては,ブラウザーの設定でLocal Storageを使用禁止にするくらい?今使ってるブラウザーでは禁止できないようだが..
  • sinuous/packages/sinuous at master · luwes/sinuous

    A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

    sinuous/packages/sinuous at master · luwes/sinuous
    vanbraam
    vanbraam 2019/07/24
    JavaScript frameworkの1つ.Surplusの改良版(non-JSX template)らしい
  • アロー関数はthisを束縛しないとかいう謎文言について考える - Qiita

    ES6で導入されたアロー関数式は従来のfunction式の代替構文ではあるものの、純粋な糖衣構文ではありません。 特にthisの扱いが異なることは有名です。 具体的にどう違うのかと言うと、アロー関数のthisは宣言時のスコープにおけるthis固定である一方、function式におけるthisは呼ばれ方によって決まります。 加えてアロー関数のthisはapplyやcallで上書きすることは出来ませんし、bindで新しい関数を作っても上書きされません。 「アロー関数はthisを束縛しない」 この特徴に対し、「アロー関数はthisを束縛しない」という説明がよくされています。 が、この文言よく意味が分かりません。 字面やthisの動きだけ見ると、アロー関数の方がthisの値が変わらないわけでより値を束縛してそうに見えます。 出所と原文 おそらく、この文言の出所はMDNかと思われます。 アロー関数式

    アロー関数はthisを束縛しないとかいう謎文言について考える - Qiita
  • GitHub - scinos/yarn-deduplicate: Deduplication tool for yarn.lock files

    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

    GitHub - scinos/yarn-deduplicate: Deduplication tool for yarn.lock files
    vanbraam
    vanbraam 2019/03/15
    逆にpackage managerなのに今まで重複排除なかったのか,という発見(Yarn殆ど使ったことない勢)
  • vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解 - Qiita

    Vuexについて、とりあえず必要ないしなんだか分かりづらいからと使わないでいたのですが、 この度いざ使ってみたところ、最初こそ引っかかるもののの、結構すんなりはいってきました。 ただ、この「最初こそ引っかかる」部分ができる人にとっては些細すぎるし、 引っかかって躓いてしまう人にとっては大変な部分だと思うので、 コードのどことどこに関連があるのか図解してみようと思います。 まずは、よくVuexの説明ででてくるこのイラストを見てほしいのですが、 私は一度にたくさんの要素が出てきすぎてしまって、一旦理解するのを後回しにしていました。 しかし、順を追っていけばそんなに難しくなさそうなので、この記事を書いてみました。 実際にシンプルなカウンタを作ってみたので、このコードを図解してみましょう。 サンプルコード コンポーネントとストアのサンプルコードは下記になります。 <template> <div i

    vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解 - Qiita
  • 要チェックな10個の Node.js フレームワーク - Qiita

    記事は、10 Node.js Frameworks Worth Checking Out: Express, Loopback, Hapi, and Beyond の日語訳です。 要チェックな10個のNode.js フレームワーク テクノロジーは急速に変化しているので、開発者たちは新しいテクノロジーを使用し、Web開発のニーズに合わせて、より便利なフレームワークを採用しています。Node.js は、アプリ開発にJavaScriptを使うのが好きな開発者達から、大いに注目されています。 開発者であるあなたは、クライアントサイドとサーバーサイドのスクリプト両方を同じ言語で管理できます。そしてこれは、Nodeの膨大な利用や採用をもたらしました。 Node.js フレームワークは、Web開発の市場で膨大な需要を獲得し続けており、2019年でも、より多くの機能や利点をもたらし続けています。現在の

    要チェックな10個の Node.js フレームワーク - Qiita
    vanbraam
    vanbraam 2019/02/16
    ExpressとMeteor以外知らなかった.Node.jsの世界は変化が速い
  • Callback を撲滅せよ

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。言語サポート(Node.js)チームの伊藤(@koh110)です。 Node.js v10 も10月にLTSとなり async/await によるフロー制御は当たり前のように利用されるようになってきました。JavaScriptの非同期処理は async/await から覚える人も今後増えていくでしょう。今回はそんな非同期処理について、社内での事例を交えて記事を書いていこうと思います。 index Promise 化がなぜ重要なのか ユーザーに promisify をさせる落とし穴 Road to Promise まとめ Promise 化がなぜ重要なのか ちょうど3年前のアドベントカレンダーで、今後はいろいろなモジュー

    Callback を撲滅せよ
  • denoの話

    Node学園 31時限目で発表した deno の話です。

    denoの話
    vanbraam
    vanbraam 2018/07/02
    面白そう.覚えておこう;しかしDahl氏のTypeScriptに対する評価は結局良いのだろうか?furukawa氏の評価は余り良くない様に見えるが..
  • Create Modern Applications with Django and Vue.js - Learn Here

    FullstackBuilding Modern Applications with Django and Vue.jsLearn ow to create a full-stack application with Django, Django REST framework, and Vue.js. Then, learn how to secure your REST API and the Vue.js frontend with Auth0. TL;DR: Throughout this article, you'll use Django, Django REST framework, and Vue.js to develop an application with a REST backend API and a Vue.js frontend. You will make

    Create Modern Applications with Django and Vue.js - Learn Here
  • CSSレスポンシブデザインをSPAで使うと破滅する - 橋本商会

    レスポンシブデザインは あくまで見た目の調整、表示・非表示のコントロールなので 下手に使うと、デバイス毎にインタラクションが違うUIのstateが無茶苦茶複雑になっていく コンポーネントという概念が無かった時代の設計を、SPAに持ってくるのはおかしい 画面サイズ毎にCSSで手軽にを切り替える、というのなら良い しかし、画面サイズ毎にインタラクションが違う部品が出てくると設計が破綻する 画面サイズ毎のがごちゃ混ぜになる コードが追えなくなり、バグの温床になる では、どうするか? 素直に画面サイズ毎、デバイス毎、あるいはインタラクション毎のReactコンポーネントを書けばいい 使いまわせる部品は、コンポーネントとして切り出して再利用する 歴史を紐解く 2011年頃、レスポンシブデザインが生まれた 当時のwebにはコンポーネントが存在しなかった 単体で複雑な状態遷移をするインタラクティブなパーツ

    CSSレスポンシブデザインをSPAで使うと破滅する - 橋本商会
    vanbraam
    vanbraam 2018/04/23
    SPA関係ないのでは;One-size-fit-all(正確にはone-design-fit-all-sizes)的なアプローチがUIでは難しい,という事は昔から知られていた話なので,むしろ今なぜそれが問題になるのかが不思議だったが,この記事で少し分かった気がした
  • GitHub - jgthms/javascript-in-14-minutes: Learn the basics of JavaScript in 14 minutes

  • JavaScript in 14 minutes

    Since you've already learned Web design in 4 minutes, it's time to dive into the Web's main programming language: JavaScript. It looks like you're on a mobile device tablet! 😱 But fear not! 😊 While this tutorial is not optimized for this platform, I still made it readable enough for you to enjoy. You should however revisit it on a desktop later if you can, to experience all the features! Anyway,

    JavaScript in 14 minutes
  • 独学の人には特にオススメ!JavaScriptの基礎が一通り、14分ちょいで学べるチュートリアル

    コンソール まずは、JavaScriptのコンソールを使用して、「Hello World!」を表示します。 コンソールの表示方法 Edge F12 Chrome command+option+J (win: ctrl+shift+J) Firefox command+option+K (win: ctrl+shift+K) Safari command+option+C Safariの場合はショートカットが他のアプリ(Alfred)に使用されている場合があるので、環境設定から「メニューバーに開発メニューを表示」をチェックすると、メニューバーからコンソールを表示できます。

    独学の人には特にオススメ!JavaScriptの基礎が一通り、14分ちょいで学べるチュートリアル
  • ECMAScriptの使い方

    プロポーザルのステージの進み方 2ヶ月に1度行われるTC39のミーティングでプロポーザルのステージを更新 ミーティングの議事録は tc39/tc39-notesで公開 毎年のECMAScriptをリリースするタイミング(6月)で、Stage 4のプロポーザルをマージ ECMAScript 20XXとしてリリース なぜ仕様策定プロセスが変わったのか ES2015以前: すべての仕様の合意が取れてからリリース ES2016以降: 合意が取れた仕様からリリース 変更理由: ECMAScriptのリリースに長い歳月がかかり言語の進化が停滞した 歴史的失敗: ES4では多くの変更を入れることを試みたが、TC39内でも意見が分かれ最終的に合意できなかった これにより言語の発展が数年間停滞した[^1] [^1]: Programming Language Standardization: Pattern

    vanbraam
    vanbraam 2018/03/06
    eshost, js-primer辺りは活用できる様になりたい;正しく表示されないのに絵文字(:zap:, :warning:, :begineer:, :house: 等)を使ってるのは何故なのだろう?
  • TypeScriptの型入門 - Qiita

    TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT

    TypeScriptの型入門 - Qiita
    vanbraam
    vanbraam 2018/02/19
    力作だし非常に参考になるけど,b:id:entry:357037982といい,"JavaScriptに型が無い"と言うのが流行っているのだろうか?JavaScriptは動的型付き言語.JavaScriptに型が無いと言うと,Rubyにも型が無い事になってしまう