window | zip358.com

中の人が気づいていないパターンでお客様も気づいていない。 #京たけのこ

2022.12.11

おはようございます、日曜日の朝です😳。

この挙動はアウトかもだろというサイトを見つけました。恐らくですが中の人が気づいていないパターンでクライアント側も気づいていないパターンを発見してしまいましたが…。

京たけのこというサイトを参照すると、ページが表示された途端にページの下部まで勝手にスクロールされるという仕様になっています。何時からこのような事になっているか分かりませんが、至急直さないといけないような案件だと思います。これでは商品を買うのも一苦労かと思います🫠。

JavaScriptのコードを見てみると恐らくこのコードが悪さをしているようです…。

	// browser window scroll (in pixels) after which the "back to top" link is shown
	var offset = 300,
		//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
		offset_opacity = 1200,
		//duration of the top scrolling animation (in ms)
		scroll_top_duration = 700,
		//grab the "back to top" link
		$back_to_top = $('.cd-top');

	//hide or show the "back to top" link
	$(window).scroll(function(){
		( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
		if( $(this).scrollTop() > offset_opacity ) { 
			$back_to_top.addClass('cd-fade-out');
		}
	});

何故、こういう事が起きるかというとChromeさんのキャッシュが大きく影響していて、JSファイル等は最新のデータを取るように設定していないとブラウザ側のデータ処理を再現する仕様になっているからなのです、なので、毎回のように訪問している人には最新のJSファイルが適用されず昔のデータでページが動作して不具合に気づかないのです。

これは稀に起こるヒューマンエラーのようなものです。確認の怠りが原因ですけどね…なかなかChromeのキャッシュは強力なので、クロスブラウザーテストするのをお勧めします。

タグ

browser window, cd-fade-out&#39, cd-is-visible cd-fade-out&#39, cd-is-visible&#39, cd-top, function, gt, if, link, offset, offset_opacity, scroll, scroll_top, scrolling animation, scrollTop, this, var offset, window, 一苦労, 挙動,

物欲リスト：自分が欲しい物を列挙してみたら、自分の物欲を可視化できたかも！？

2021.11.23

Logging

昨日は雨がしとしとと高知県でも降っていましたが、今日はお天気になるのでしょうか？さてタイトル通り、自分が欲しい物を列挙してみました、また、欲しい理由なども書いています。ほしい商品の横に理由も書いています。

LG モニターディスプレイ?２４インチぐらい＊４台理由：ディスプレイを全て同じ製品に統一したいから。
iPhone14 まだ発売されていないけど・・・理由：そろそろ買い替えたい。
SONYの高級ヘッドホン理由：いまのヘッドホンがボロボロになってきているので
appleのAirPods三世代目理由：iPhoneには純正製品がベストだと思うから
ルーターwifi6対応の高性能の奴理由：もっとストレスフリーになりたいので。
4Kテレビ理由：親にプレゼント
マウスなるべく高いやつ理由：やはりそれなりに良いマウスがいいよね。
キーボードなるべく高いやつ理由：マウスと同じく。
指紋認証できるUSB機器 Windowsにログイン用理由：Windowsにログインするのが面倒くさいので。
エアコン理由：親にプレゼント
高性能の自作PC 理由：今のPCもある程度、高性能だけどインテルから高性能のCPUが出たと聞いたので。
Mac mini 理由：アプリ作るときに必要です。
MacBook Pro 理由：外で仕事するのに欲しい。

以上になりますね。全部、揃えていると中古車が買えちゃうじゃないかと思うぐらいのお値段になりますね。特にりんご商品は高い気がします、ノートは買わなくてもMac miniは買わないとなとは思っているですよ。

https://www.youtube.com/watch?v=XKfgdkcIUxw

こうやって自分の物欲リストを列挙してみましたが欲しい物はほぼ電化製品でした。あとは、映画のブルーレイなども欲しい物はありますが、電化製品よりかは欲求度は低い感じがします。

タグ

14, 24, 4, 6, AirPods, apple, iPhone, LG, SONY, USB, wifi, window, いま, キーボード, ストレスフリー, それなり, タイトル, ディスプレイ, テレビ, プレゼント, ベスト, ヘッドホン, ボロボロ, マウス, モニター, やつ, リスト, ルーター, 三, 今日, 全て, 列挙, 可視, 商品, 天気, 奴, 対応, 性能, 指紋, 昨日, 横, 機器, 物, 物欲, 理由, 発売, 純正, 統一, 自分, 製品, 親, 認証, 雨, 高知県, 高級,

Canvasで円がぐるぐる回る。

2019.03.09

Logging

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
    <canvas id="ctx" ></canvas>
    <script>
            "use strict";
            let x = 0,y = 0;
            let xs = 300,ys = 300;
            let xc = 1,yc = 1;
            let ctx = document.querySelector("#ctx");
            let canvas;
            ctx.width = window.screen.width;
            ctx.height = window.screen.height;
            if(ctx.getContext)
            {
               canvas = ctx.getContext("2d");
               setInterval(draw,77);
            }
            function draw(){
               canvas.beginPath();
               canvas.fillStyle = "#3399ff";
               canvas.arc(x,y,35,0,Math.PI*2,true);
               canvas.globalCompositeOperation = "xor";
               canvas.fill();
                x =((Math.sin (xc) * xs)) + 500;
                y =(Math.cos(yc) * ys) + 500;
                console.log(x + ":" + ctx.width);
                console.log(y + ":" + ctx.height);
                if(x < 0 || x > ctx.width)
                {
                   xs*=-1;
                }
                if(y < 0 || y > ctx.height)
                {
                    ys*=-1;
                }
                if(x<0)
                {
                    x=0;
                }
                if(y<0)
                {
                    y=0;
                }
                if(x > ctx.width)
                {
                    x=ctx.width;
                }
                if( y > ctx.height)
                {
                    y=ctx.height;
                }
                xc+=1
                if(xc>360)
                {
                    xc=0;
                }
                yc+=1
                if(yc>360)
                {
                    yc=0;
                }
            }
        </script>
</body>
</html>

Canvasでぐるぐる円を廻す。
ガラクタコードが少しあります、最初違うコードを書いていたので
これを可変していろいろお試しください。
https://zip358.com/tool/demo5/js/index-3.html

タグ

0, １, 300, body, Canvas, ctx, DOCTYPE, document, gt, head, Height, html, ID, let, lt, querySelector, screen, script, strict, use, Width, win, window, xc, xs, yc, YS, 円,

jQueryでローディングって検索すると何やらいろいろヒットしました。なるほど、そういう事なのか、以外にも短いコードで書けるだなということが分かって目から鱗が落ちました。ロードされるまでGif動画を表示させてロード後切り替えているだけなんだ。jQueryってすごいですね。ちなみにjQuery.event.add(window,”load”,function(){…} こう書けばデータが読み込まれた後に処理が実行されます。ちなみにこの場合、HTMLや画像などのデータが読み込まれるまでGif画像を表示させる方法ですが、非同期通信を行っている間、ローディングのGif画像を表示させて普通に切り替える事も可能なんだということで、BBSもどきにその機能をつけてみました。コメントが表示されるまでローディング画像を表示させています。
https://zip358.com/tool/BBS

タグ

AM, BBSもどき, function, Gif動画, Gif画像, html, jQuery.event.add, load, window, コード, コメント, データ, ローディング, ローディング画像, ロード後, 以外, 処理, 方法, 機能, 短いコード, 非同期通信, 鱗,

中の人が気づいていないパターンでお客様も気づいていない。 #京たけのこ

物欲リスト：自分が欲しい物を列挙してみたら、自分の物欲を可視化できたかも！？

Canvasで円がぐるぐる回る。

jQueryでローディングって検索すると。