俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
"クソコード"は人格攻撃ではないのか｜qsona
これは仮説というか自分がこうだという話なのだが、自分のアイデンティティを侵食されると怒りが湧く。たとえば、自分が非常に大事にしている価値観に対して、同僚から「君のその価値観は間違っている」と言われたり、あるいは、作品とか、経歴とか、家族とか、そういう自分自身と非常に密になっていて同一視されるようなものをけなされたら、腹が立つということだ。 プログラマーにとって、ソースコードというのは一つの作品だ。仮に経験が浅い開発者であっても、あるいは経験が浅いからこそ、1行1行に時間をかけて考えながら作りあげる。それに対してこれはクソコードだと言われたらどうだろうか。考えてみる。 よく、クソコードというのはコードがクソだと言っているのであって、お前がクソだと言ってるわけではないから切り離して考えるべきだという言説がある。僕はこれには微妙に賛同できない。その人が生み出したコードは、少なくともその人のいくぶ
はじめに こんな人が役に立つ記事 コーディング業務の効率を上げたい。 コーディングに関するチートシートを知りたい。 打つのもめんどいからコピペでなんとかしたい（笑） 今回は、コーディングに役立つチートシートをまとめました。 VSCODEチートシート エンジニアなら必ず使うであろうVsCodeのショートカットチートシート。これはよく使ってます！ HTML系のチートシート集 HTMLに関するチートシートをまとめてみました。 HTML5 タグチートシート HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、 PDFでダウンロードできます。 HTML5 入れ子チートシート HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート 特殊文字一覧：HTMLで使え
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 - エンジニアHub｜Webエンジニアのキャリアを考える！
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 PWAをテーマにしたコミュニティ「PWA Night」を運営する菅家大地さんが、既存のWebアプリをPWA化する簡単な実装方法を解説します。 はじめまして、菅家（@kan_dai）といいます。普段は株式会社TAMという会社でフロントエンドをメインに、クライアントのWebサイト制作やWebサービスの開発をしています。PWA（Progressive Web Apps）をテーマにしたコミュニティ「PWA Night」の運営もしています。 さて、2018年ごろからPWAという言葉を聞く機会が多くなってきました。2019年現在、毎月コンスタントにPWAに関する仕事の相談を受けるようになっており、PWAへの関心の高まりを感じます。日本経済新聞やスマートフォン版Yahoo! Japanといった有名サービスでの
コーディングのようにノートを取る技術 - Qiita
はじめに 何かを学習するとき、ノートを取っているでしょうか？ 小学生の頃や中学生・高校生の時の「ノート」は紙に手書きだったかと思います。 しかし、最近になってからはパソコンを使ってノートを取る、という選択肢が増えました。 その変遷の中で生まれたパーソナル・ナレッジ・マネジメント(Personal Knowledge Management) という考え方があります。 その考え方を共有できたらと思います。 直感的なデジタルノート術の原罪 ケース1: ひたすらに手を動かす 学生の頃、黒板に書かれた内容をそのまま必死にノートに写している人がいたのを覚えていますか？ また、その人は成績が高かったでしょうか？ たいていの場合、成績は乏しい人が多かったと思います。自分もそのタイプでした。 手を動かすだけのノート術の不幸な点は、「考える」というアクティビティが行われないため、本当の意味で筋肉を動かすだけと
これはなに 自分がここ2年ほど趣味として競技プログラミングをやった経緯と感想です。いわゆるプログラマの定年と呼ばれる35歳を過ぎてから始めたのですが、思ったよりも楽しめました。自分のようなシニアと呼ばれるプログラマが競プロに興味を持ってくれたらいいなと思って書きました。 競技プログラミング（競プロ）とは 競技プログラミング（以後、競プロ）は、プログラミングをして順位を競うコンテストです。コンテストはたいていオンラインで毎週のように開かれており、誰でも参加できます。形式としては、与えられた時間内にいくつかの問題を解くコードを提出して、その正解数と提出までにかかった時間を競うというものです。たいていは、コードの実行時間および使用メモリに制限があり、その制限内で実行できるコードを書く必要があります。またコードが正解かどうかは出題者が用意したテストケースをパスするかどうかで判定されます。 多くのコ
JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。 Explore DOM Events https://domevents.dev/ ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると…… イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加して
OneDriveが“勝手に同期”仕様変更に相次ぐ懸念「メチャクチャに」翻弄されるユーザーも…実際に検証してみた | オタク総研
OneDriveが“勝手に同期”仕様変更に相次ぐ懸念「メチャクチャに」翻弄されるユーザーも…実際に検証してみた
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
新しい記事もよろしくやで！ 5歳娘「パパのReact、めっちゃ遅いね！」 とある平日 娘（5歳）「パパ、今日は何のお仕事してるの？」 ワイ「おお、娘ちゃん」 ワイ「今日はな、ショッピングサイトを作ってんのや」 今日のお仕事内容 ワイ「↓このデザインの通りに、コーディングをせなあかんのや」 娘「なるほどー」 娘「このショッピングサイトで商品を売りたい！っていうお店があったとして」 娘「そのお店の人が、最初にお店の情報を登録するためのページだね！」 ワイ「せやせや」 まずはデザインを眺めてみる ワイ「この店舗登録ページにはなぁ」 ワイ「↑こんな感じの」 ワイ「項目名と入力欄がセットになったパーツが何度も登場するから」 ワイ「そのためのコンポーネントを作ろうかなー、って」 ワイ「そう思ってたとこなんや」 娘「ふーん」 娘「ラベル付きテキストフィールド的なコンポーネントってことだね」 娘「どこまで
CORSの仕様はなぜ複雑なのか
Webアプリケーションを実装していると高確率で CORS の問題にぶつかります。CORSがどのようなものかはリンクしたMDNなど既存の解説を読むのが手っ取り早いと思いますが、「なぜそのように設計されたのか」という観点での説明はあまり見ないため、昔の資料の記述や現在の仕様からの推測をもとに整理してみました。 CORSとは 現代のWebはドメイン名をもとにした オリジン (Origin) という概念 (RFC 6454) をもとに権限管理とアクセス制御を行っています。その基本となるのが以下のルールです。 Same-origin policy (同一生成元ポリシー): 同じオリジンに由来するリソースだけを制御できる。 上記Wikipedia記事によるとSOPの概念は1995年のNetscape 2.02に導入されたのが最初のようです。当時のドキュメンテーションを読む限り、これはウインドウ越しに別
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
GAFAコーディング面接こんな感じでした（システムデザイン編） - yambe2002’s diary
前回の続きです。今回はシステムデザイン編。 実体験にもとづいて、なるべく雰囲気を再現しようとしてますが ・問題はすべて自作 ・人物、会話等はすべてフィクション なのでよろしくお願いします。実際の会話はNDAにより公開できません。 同じくらいの難易度の問題を、こんなレベルでやり取りして、最終的にはお祈りされました。 ~前回までのあらすじ~ GAFAのコーディング面接１回目を何とか乗り切ったyambe2002だが、休む間もなく次の面接が始まって辛い。 出題 ぼく「………」 面接官「あれ？yambe2002？大丈夫？」 ぼ「…はっ！ごめんちょっとボーっとしちゃった。大丈夫大丈夫。えーと、何だっけ？」 面「あー、分かる分かる！面接の連続で疲れるよねー！ぼくの時もそうだったよ」 ぼ「ははは…」 面「じゃもう一回言うね。ぼくからの問題はね、ミュージシャン名で検索すると、関係するコンサートの情報を表示す
もっと早くデザイナーに声をかけろ
SIerのインハウスデザイナーとして働いてるんだけど、うちの会社の業務フローがクソすぎてストレスが溜まっている。 あの、PMのみなさん、ていうか我が社の開発標準つくってるみなさん。 外部設計とか機能設計とか、「設計」ってついてる工程にデザイナーをアサインしてください。 デザインって「設計」っていう意味なので。 別に、知識マウントとか偉ぶってるとかでもなんでもないです。 外部設計も機能設計も社内のエンジニアがエクセルで作っているけど、なんでデザイナーを呼んでくれないんですか？ あなたたちがやってるそれ、デザインですよね？ そのくせエンジニアは、自分が設計書を作っていても「デザイン」をしているという自覚は全くない。 それどころか「自分にはセンスが無いから〜！」と変にデザイナーを持ち上げてくるんだけど、あなたたちのやってることもデザインですよ。 なのに、自分たちだけですっかり外部設計とか機能設計
エンジニアは顧客の要望をちゃんと聞こう 〜「うちの店でカレーを出したい」と言われたら？〜｜Katsuma Narisawa
こんにちは。SALESCOREのCTOの成澤です。 今日は、Webサービス開発に携わる方向けに「要望を正しく聞くのは大事だよ」という話を、飲食店の例え話で紹介します。 「うちの店でカレーを出したい」と言われたら飲食店のオーナーから「うちの店のメニューにカレーを加えたい。カレーを作る体制を整備してほしい」と相談されたとします。 敏腕料理人のあなたは何を考えるでしょうか？ 普通に考えたら「野菜と肉とルーを仕入れて、あとは鍋と包丁を用意して…」と考えるでしょう。 カレー作りに知見がある人なら「スパイスから手作りした方が美味しく作れる！スパイスを独自ルートで調達しよう！」なんてことも考えるかもしれません。 しかし、ここであなたがするべきことは、オーナーへの追加ヒアリングです。 どんな店なのか？ → 喫茶店かも 店内の調理設備は？ → 狭い厨房がちょっとあるだけ。調理器具もほとんどない スタッフの体
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 目次 1.はじめに 2.VSCodeの拡張機能紹介 3.コーディングのポイント 4.よく使われる英単語一覧 5.エラーとの向き合い方 6.テストで動作確認 7.検索の極意 8.公式ドキュメントに慣れる 9.リファクタリングでさらに読みやすく 10.資料作成で気をつけること 11.Gitで管理 12.よく使うLinuxコマンド一覧 13.仕事の進め方 14.プログラム以外で意識するところ 15.初心者こそ読んで欲しい本 16.まとめ 1. はじめに プログラミングは現代のデジタル社会において重要なスキルです。 AIがコードを書いてくれる時代ですが、それでも人の手によるプログラ
かつてWindowsでテキストファイルといえばシフトJIS形式のものが大半だった。しかし最近では、UTF-8形式のテキストファイルも普通に見かけるようになってきた。世の中はUTF-8が主流になりつつあると言っていいだろう。 しかし、WindowsでUTF-8を使うと、ちょっと困ったことがある。それは、エクスプローラーの検索欄などで用いるWindows Searchが、UTF-8にはしっかり対応していないのである。正確に言うと、Windows Searchはファイル先頭に「BOM」のあるUTF-8は認識して正確にインデックス化し、ファイルの全文検索が可能になるが、BOMのないUTF-8では正しくインデックス化できず、ファイルの全文検索はASCIIコードのみ可能で、日本語などの非ASCII文字では全文検索ができない。 同じ内容のテキストをUTF-8、UTF-8 BOM付き、UTF-16ビッグエ
開発室の雑談。営業側のマネージャが言うには 「今のプロジェクトで自動テストの導入を試みている話をしたら、XXXさんのところでも過去にいくつか導入を試みたけどもみんな上手くいかなかったって話になって」 なるほど？ まあ確かに自動テストはシステム開発にとって魅惑の技法ではあるものの、では導入がうまくいっているか？ というと普及率は低いと言わざるを得ない。私がお手伝いしたプロジェクトでは、元請け側から自動テストをやるお達しが来たわけだが、紆余曲折あって掛け声倒れのような状態になってしまった。 ビジネス書の煽りタイトルのような本件だが、古式ゆかしき受注生産の業務システム開発プロジェクトに自動テストを導入しようとして失敗する事例を聞いたので、僕なりに分析して見出した要素を挙げておこうと思う。 V字モデル ソフトウェア開発の手法としてV字モデルというものがある。 オーダーメイドでシステムを作るにあたっ
ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image
アメリカの電気自動車メーカー、テスラは電動のピックアップトラックを初めて公開しましたが、その性能をアピールしようとした発表会で窓ガラスが割れてしまう一幕があり、ねらいどおりとはいきませんでした。 「サイバートラック」と名付けられた、近未来的なデザインが特徴的なトラックは再来年から生産を始め、欧米や日本などで販売する予定で、イーロン・マスクＣＥＯは車体が防弾仕様になっているとアピールしました。 そして、極めて頑丈だという窓ガラスの耐久性を示すため、開発担当者が鉄の球を投げつける実演を行いましたが、球が当たると運転席の窓ガラスはクモの巣状に割れてしまいました。 これを見たマスク氏は「ちょっと強く投げ過ぎたかな」と苦笑いしたあと、やり直すよう指示しましたが、続く実演でも後部座席の窓ガラスが簡単に割れてしまいました。 マスク氏は「貫通はしなかったね」と述べ、その場を乗り切りましたが、頑丈なはずのト
USBが誕生したのは「奥さんのプリンタをつなげる手間にキレたから」 USBの設計当時を振り返る：“PC”あるいは“Personal Computer”と呼ばれるもの、その変遷を辿る（1/6 ページ） IBM PC、PC/AT互換機からDOS/Vマシン、さらにはArmベースのWindows PC、M1 Mac、そしてラズパイまでがPCと呼ばれている昨今。その源流からたどっていく大原雄介さんによる解説連載の第8回。前回はPCのアーキテクチャを巡るIntelとMicrosoftの動きを描いたが、今回はそこでIntelの取り組みの成果の一つとして挙げたUSBのお話である。 USBはいろいろ失敗もある（というか、現在進行形で失敗し続けている気もしなくはない）が、それでも大成功したインタフェースである。そして単にPCだけではなくマイコン（※1）などでも普通にサポートされるようになってきており、加えてP
こんにちは。「リーダブルコード」を先月読破して、感銘を受けた弁護士の人です。 なにに感銘を受けたかというと、「エンジニアが高級言語を効率的にコーディングするための工夫」は、契約という言語をコーディングするために援用できることがとても多いということです。 例えば、リーダブルコードは「関数には空虚な名前（tmpとかretvalとか）でなく、エンティティの実体に即した名前をつけよう！」と提案しています。 これめっちゃわかります！！！なぜなら、契約言語では当事者というクラスの表現のために「甲」「乙」という定義を未だに使います。そして、甲と乙を逆に書いてしまったままReviewを通過することが実際によくあります。オライリーさんには激怒されるでしょう。 しかし、よく考えると高級言語と契約言語が似ているのは当然だと思うようになりました。それは、どちらも「一定のインプットを入れると、必ず一定のアウトプット
Haskellコミュニティでは、ネットワーク関連を担当。 4児の父であり、家庭では子供たちと、ジョギング、サッカー、スキー、釣り、クワガタ採集をして過ごす。 不定期連載を始めます IIJ-II 技術研究所 技術開発室の山本です。私はプログラミング言語HaskellでHTTP/2とTLS 1.3を実装した後、もっぱらQUICを実装することに時間を費やしてきました。 ご存知の方もいらっしゃると思いますが、今年の5月にQUICの仕様がRFC9000として公開されました。このRFCは実によく書かれているので、読みこなせばQUICの全容が掴めるでしょう。 しかし仕様は膨大ですし、実際に実装してみて初めて腑に落ちることもあります。そこでこの機会に、実際にQUICを実装した経験者目線で、QUICの解説をしていきたいと思います。なんとなくTCP/IPを分かっている方が、ある程度QUICの理解ができることを
効率よくコーディングを進めるためにChatGPTを使ってみよう
この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSをChatGPTで生成してみよう H
「//このコメントを消したら動かない」は大体Shift_JISの2バイト目が原因で発生する - Qiita
TL;DR Shift_JISにしただけでコンパイラが通らなくなる恐ろしい事件とその回避法について。 \ (¥)のASCIIコードは0x5c 表、能は良くない UTF-8は神 2023/12/06追記 誤りがあったので訂正します。こんな読まれると思ってなかったので正直ちょっとびっくりしていますが、いろいろコメントありがとうございました。（ツイート等全て拝見しました。） Shift_JISが悪いわけではない（デフォルトのエンコーディング設定の問題）→追記しました UTF-8にはUTF-FSSという仕様でこの問題が回避されている→マジでタメになる知識ありがとうございます OSによってデフォルトのエンコーディング設定が異なるせいで、デフォルト環境での動作がOSにより異なる→なるほど？（調査中） CRLFとLF問題では→なるほど？（調査中） そんな問題何を今更→UTF-8が出てから生まれたからです
営業、受注、制作、納品、運用と、ウェブ制作の活動は長期に渡り、そのタスクの種類と量は膨大です。だからこそ、基本的なプロセスや使用するドキュメントなどを明確に定義しておかないと、サービスの品質が担当者により大きく変わることになります。 ベイジは社員がまだ5名の頃、各人に委ねた進め方によって以下のようなトラブルが頻発していました。 ミスが発生しても「次から気をつける」と精神論で終わらせてしまう 担当するディレクターやクリエイターによってタスクの抜け漏れが起きる 担当者それぞれが属人的な進め方をしてて品質が安定しない 役割が不明瞭なグレーゾーンのタスクが放置されてしまう 創造的な仕事の時間が、ルーチンや計画にないタスクに奪われてしまう 新しい社員が入る度に同じことを教えないといけない これら問題を解決するため、2014年頃からワークフローを整備するようになりました。ちなみに私が入社したのはこれ以
前振り 全国の暗号を使うエンジニアの皆さんこんにちは。今日は暗号移行とRSA暗号の話をしたいと思います。まず暗号を利用している皆さんであればCRYPTRECの「電子政府推奨暗号リスト」のことはご存じですよね！（言い切るw） CRYPTRECから2022年7月（昨年夏）に暗号強度要件（アルゴリズム及び鍵長選択）に関する設定基準（PDF直リンク）が公開されました。この中では暗号のセキュリティ強度で各種暗号と鍵長が整理されています。セキュリティ強度はビットセキュリティと呼ばれるビットサイズ（共通鍵暗号の場合のビット長）で区分されます。暗号アルゴリズムが違ってもセキュリティ強度で比較ができるということですね。例えば現在一般的に良く使われているセキュリティ強度は112ビットセキュリティが多く、これにはデジタル署名であればRSA暗号の2048ビットやECDSAのP-224等が含まれます。今日は公開鍵暗
Chrome 79以下や他ブラウザのデフォルト値。 Chrome 80からこの値を設定する場合、Secure属性も必須となる。 Aサイトに対し、Bサイトからどのようなリクエストがあっても、発行したサイトでCookieヘッダーに含める (Cookieを使用する) 図にすると以下のようになります。 Strict 外部サイトからのアクセスではCookieを送らない。 Lax 外部サイトからのアクセスはGETリクエストのときだけCookieを送る。 None 従来通りの動き。 【追記】なおChrome 80以降でSecure属性を付けずSameSite=Noneを指定した場合、set-cookie自体が無効になります。 セキュリティ上の効果 CSRF対策になります。 CSRF (クロスサイト・リクエスト・フォージェリ) とは、 WEBサイトがユーザー本人の意図した動作であることを検証していないため
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
こんにちは。 いつも通りのパーマをかけたらトイプードルみたいになった、どうも柴田です。 さてさて、昨年の11月26日に技術評論社さんより「武器になるHTML」というHTMLだけに特化した初学者向けの書籍を出版させて頂きました。 この記事を読んで下さっている方の中にも、すでに本書をお持ちの方もいらっしゃるかもしれませんね。 ご購入頂きありがとうございます！ ひょっとしたら、もう読み終えられた方もいらっしゃるかもですね。 ということで、本書が発売されて半年近く経ちますが、今更ながら、この本をどういう想いで書いて、どんな方に読んで頂きたいのかについて書いてみたいと思います。 目次 初学者の方に向けたHTMLだけの424ページ「とりあえずこう書いておきましょう」は、ありません一人でも多くの人が利用できるWebサイトを構築するために学校やスクールの先生が教科書としても使いやすいように中級者になっても
カチッとスイッチを押すタイプの扇風機の「切」ボタン、単純なのに思わず「おぉ！」と感嘆が漏れる賢い仕様だった「驚いた」「天才」
セキ技研＠FAマシンメーカー @sekigiken ワクワク•ドキドキのメカトロニクスの世界をあなたに/800種以上のロボット搬送機や自動組立設備を開発してきたFAマシンメーカー/中小企業向けにDX情報も発信します⏩/集まれFA設計者＆ITエンジニア/高専生応援企業/☺️📲詳しくはYouTubeへ/人にしかできない活動にもっと取り組める社会にする。 sekigiken.co.jp
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
ブラウザの作り方
リンク集 - Populating the page: how browsers work: https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work/ - How Browsers Work: Behind the scenes of modern web browsers: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ - Let's build a browser engine!: https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html/ - W3C: https://www.w3.org/ - WHATWG: https://html
昨今、継続的にプロダクト開発していくことが主流となり、Four Keysなどの開発パフォーマンスを測る指標なども出てきており開発生産性を向上させることが注目されています。 しかし、かつての開発現場では今では信じられないような開発生産性を爆下げするようなことをやっていました。 この記事では10年以上前に私が経験した開発生産性を爆下げする事例を書いていこうと思います。 (私が体験したことをベースに書いているので10年前は全てがこうだったということではないのでご留意ください ) 修正前のコードはコメントアウトで残す 当時、ウォーターフォールで開発していました。 ウォーターフォールでは開発工程とテスト工程が分かれています。 開発工程で一通りコーディングして、テスト工程で動作確認を行いバグを潰します。 問題はここからです。 とある現場では、テスト工程でバグを直すときにコードを破壊的に直すのではなく、
新しいHTTPメソッドを定義する「The HTTP QUERY Method」という提案仕様が議論されています。 もともとは、SEARCHメソッドという呼び名が候補としてあげられていましたが、長い議論ののち、一旦QUERYと呼ぶ方向となっております。最終的なFixについては、この draft 02の公開とともに改めてコンセンサスを求めた後に行われます。 QUERYメソッド 「GETリクエストにボディを付けたいという」という質問は長らく有りました。しかし、GETやHEADリクエストでボディをつけることは非推奨となっています (参考URL)。 そのような要望のなかで、リクエストでボディを含められる冪等性の保証された新しいHTTPメソッドが検討されました。それがQUERYメソッドです。冪等性があるため、ブラウザやProxyは自動でリトライすることができます。(なお、POSTはセマンティクス上冪等
akira_you on Twitter: "ブラウザのアドレスバーで検索できて便利やん。でもね、会社でつかうのはやめとき。 mDNSで同じLAN居る人全員に、このアドレス知りませんか？って検索ワードで聞きおるで。 Firefoxは検索窓がアドレスバーの右にあるからアドレス… https://t.co/zhn1fKxxe2"
ブラウザのアドレスバーで検索できて便利やん。でもね、会社でつかうのはやめとき。 mDNSで同じLAN居る人全員に、このアドレス知りませんか？って検索ワードで聞きおるで。 Firefoxは検索窓がアドレスバーの右にあるからアドレス… https://t.co/zhn1fKxxe2
技術的負債を抱えたレガシーコード。変なメソッド名と入り組んだロジック、リファクタリングするならどちらが先？（前編）
技術的負債を抱えたレガシーコード。変なメソッド名と入り組んだロジック、リファクタリングするならどちらが先？（前編） ソフトウェアの品質をテーマに研究をしている名古屋大学 森崎研究室は、ソフトウェアの技術的負債をなんらかの形で数値化する手法の研究の一環として、コードの読みにくさの原因となる要因などを分析した研究結果を発表するイベントをオンラインで開催しました。 今回発表された研究では、技術的負債を抱えたレガシーコードのリファクタリングで取り除かれた問題の90％以上が、メソッド名と実際の関数の動作が一致していない、あるいは関数名とコメントが矛盾しているなどの「命名的問題」、もしくは複雑で読みにくい多数の条件分岐や深いネストなどを抱えた「構造的問題」のいずれかであるという先行研究があることを踏まえ、どちらを優先してリファクタリングすると保守性や可読性が高くなるかを調査しています。 具体的には、命
はじめに 今回は無料でWeb制作周りの技術を学ぶことができるサービスをまとめました。 これからWeb制作の学習を始めていきたい人やプログラミングの基礎学習をしていきたい人におすすめのサービスなのでぜひ参考にしてみてください。 この記事の対象者 プログラミング初心者~中級者 Web制作を学びたい人 HTMLやCSSをより深めたい人 ポートフォリオを作りたい人 無料コーディング練習所 まずはじめに紹介するのはWebサイトを制作しながらコーディングスキルを身につけることができる無料コーディング練習所です。 こちらのサイトではデザインカンプが用意されており、基本的なコーディング方法から応用的な手法まで実際にWebサイトを制作しながら学ぶことができます。 準備編でがエディタの設定方法や拡張ツールといったコードを書くための基礎の基礎から丁寧に解説をしてくれています。 入門編~上級編ではWebサイトを作
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript で parseInt / parseFloat を使わない方が良い理由
【サボりたいエンジニア向け】コーディングに役立つチートシートまとめ - Qiita
中年プログラマの競プロ事始 - hydrakecat’s blog
JavaScriptのイベントの仕組みが一発で理解できるウェブアプリ「Explore DOM Events」レビュー
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
5歳娘「パパ、余分なpropsいっぱい書くんだね！」 - Qiita
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 - ICS MEDIA
【11万文字越え】プログラミング初心者に贈る即戦力ガイド - Qiita
BOMなしUTF-8によってWindowsでもたらされる困惑 (1/2)
なぜ自動テストの導入は失敗するのか？ - プログラマーの脳みそ
本当は速くならない「Webサイトの表示高速化アンチパターン」10選｜榊原昌彦
防弾仕様の車 窓ガラスに鉄球投げたら…割れた テスラ株価下落 | NHKニュース
USBが誕生したのは「奥さんのプリンタをつなげる手間にキレたから」 USBの設計当時を振り返る
もし「リーダブルコード」を弁護士が読んだら？ - MNTSQ Techブログ
QUICをゆっくり解説(1)：QUICが標準化されました | IIJ Engineers Blog
ベイジのウェブ制作ワークフロー2021年版（約100のタスクと解説） | knowledge / baigie
RSAの終わりの始まり - 暗号移行再び - Qiita
Chrome 80が密かに呼び寄せる地獄 ～ SameSite属性のデフォルト変更を調べてみた - Qiita
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
日本人プログラマー向けコーディングフォント「Bizin Gothic」が無償公開／「Ricty」でもお馴染みの「Inconsolata」と読みやすい「BIZ UDゴシック」をかけ合わせ
なぜHTMLだけなのか。拙著「武器になるHTML」の執筆を通して伝えたかったこと - Shibajuku
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
ほんとうにあった開発生産性が爆下がりする話 - Qiita
新しいHTTPメソッド、QUERYメソッドの仕様 - ASnoKaze blog
【2024年最新】Web制作周りを無料で学べる学習サービス集 - Qiita