barba.js
Create badass, fluid and smooth transition between your website's pages.
ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition
日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
拝啓 Google様、JavaScriptとJSONで動的に変化するページをインデックスしてください - Qiita
[ { "id": 1, "title": "ページ１", "description": "これはページ１のディスクリプションです", "contents": "これはページ１の本文です" }, { "id": 2, "title": "ページ２", "description": "これはページ２のディスクリプションです", "contents": "これはページ２の本文です" }, { "id": 3, "title": "ページ３", "description": "これはページ３のディスクリプションです", "contents": "これはページ３の本文です" } ] $(window).on("load", function() { //URLパラメータ(id)の値を取得 var id = myGetQuery("id"); //data.jsonのidとURLパラメータのidとを
1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～ - Qiita
概要 Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。 本稿では、node.js環境での開発を前提としたWebフロントエンド開発で Font Awesome5 を使う時のポイントを説明します。Font Awesomeはv5になってフロントエンド開発との連携機能が大幅強化され、お手軽にJavaScriptのバンドルにフォントを埋め込むことができます。 Font Awesomeのアイコンを使う（バンドルする）には以下の3ステップを踏みます。 Font Awesome を npm でインストールして、 JavaScriptのコードで必要なアイコンだけを import して Font Awesomeの必要最小限が含まれるように w
13 Games in ≤ 13kB of JavaScript · js13kGames 2018 | The GitHub Blog
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
Chrome 別タブ 開発者ツール 最初から - Qiita
こんなことはありませんか？ ChromeでDevToolsを使って解析しているのに、別タブが開いてしまって 何のリクエスト投げて遷移してるか見れない ロード時に実行されるJSをデバッグできない みたいな。 開発中だと自分で作ってたりするので、あまり問題にならないのですが 運用後に発覚したバグの調査とか、急に担当者がいなくなった、 とかそんな事案が年に１回くらい発生します。 地味に方法を見つけるのに時間がかかってしまったので （開発者ツールを別タブで開く記事ばかりヒットするので） 自分がググった時の単語を記事のタイトルにしました。 設定自体は５クリックくらいでできます。 DevToolsのSettingsから [Preferences]→[Network]→[Preserve log]をONにして [Preferences]→[DevTools]→[Auto-open DevTools fo
Web Audio APIの闇 - Qiita
HTML5でゲームやリッチなコンテンツを作る上で欠かせない「Web Audio API」 しかしコイツがなかなか・・・モバイルでの特殊実装やメモリ使用量まわりで色々と闇を抱えていて・・・ ということで闇を見つけ次第、検証結果や対処方法など記録を残していきます。 iOS SafariはBGMなどの自動再生ができない iOS Safariは以下ようなコードでサウンドの自動再生ができない const AudioContext = window.AudioContext || window.webkitAudioContext; const ctx = new AudioContext(); const request = new XMLHttpRequest(); const url = 'https://zprodev.github.io/web-audio-test/assets/Campf
curtains.js | Home
What is it ? Shaders are the new front-end web development big thing, with the ability to create very powerful 3D interactions and animations. A lot of very good javascript libraries already handle WebGL but with most of them it's kind of a headache to position your meshes relative to the DOM elements of your web page. curtains.js was created with just that issue in mind. It is a small vanilla Web
JavaScriptで画像処理するなら「Jimp」が便利 | 綺麗に死ぬITエンジニア
現在JavaScriptは、ブラウザで使用されるのはもちろんのこと、サーバーサイドでWebサーバーとして動作したり、はたまた開発者のPCで各種開発ツールとして動作したりしており、様々な場面で利用されています。 そこで今回は、そのどちらでも使える、Node.jsとブラウザJavaScriptの両方に対応した画像処理ライブラリ「Jimp」を紹介したいと思います。 「Jimp」とはJimpは、外部またはネイティブの依存関係が全くない、完全にJavaScriptで記述されたNode.js用の画像処理ライブラリです。ライセンスはMITライセンスで、オープンソースで開発されています。 以下のnpmコマンドでインストールできます。 var Jimp = require("jimp"); // "lenna.png"を開く Jimp.read("lenna.png", function (err, len
ウェブアプリをソースごとパクる業者に対する対策 - Qiita
こんにちは。みなさんもウェブアプリをリリースしたあとに同業者にソースごとパクられたことってありますよね。難読化しても難読化されたまま同業者のサーバで動くので困ったものです。そこで、私がとった解析しずらい対策をまとめてみたいと思います。 前提 多機能な画面をJavaScriptでゴリゴリ作ったのにもかかわらず、HTMLやCSS、JavaScriptファイル一式を自社サーバにまるごとコピーして、ライセンス表記だけ書き換えて使うような業者を罠にはめるということを想定しています。 当然通信をリバースエンジニアリングする人もいるので、自社サーバでは防げないという前提です。 HTMLにはauthorメタタグ よくあるMETAタグで権利者を明記します。これは権利の主張もそうですが、JavaScript自体に権利者が認定した権利者でなければ無限ループを起こすという処理のためにも使用します。逆に、権利者が我
やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性 - Qiita
これ以上は長くなるため後述． Chromeは既に，Safariもようやく 上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み． しかしSafariが対応しておらず，世間的にはモチベーションの上がらない状況であった（やちまもその一人である）． Safariにおいて，Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである． 20ヶ月という永遠とも呼べる時を経て，2017/08/032にようやく In Development となったわけであった． だから何なのか SafariにService Workersの実装がなされると，一気にウェブアプリへの移行が進む可能性が大きい． ブラウザの制約が弱まり，ウェブアプリの不採
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hmongouachon/rgbKineticSlider: A fully customizable webgl slider based on PixiJs and Gsap
submitボタンのnameがsubmitだとsubmit()が効かない - Qiita
Pioneering Client-Side Protection Platform | Jscrambler
2019年までに見直しておきたい
CSS・JavaScriptの手法 - Speaker Deck
PWAのサンプルアプリを作ってみた
Workbox使ってVue.jsのPWA作ってみた - mya-ake.com
