何がjQueryを負債たらしめているのかを考察する | yamanoku Advent Calendar 2023
何がjQueryを負債たらしめているのかを考察する この記事はyamanoku Advent Calendar 2023の12日目の記事になります。 現代のフロントエンド技術的負債の要因となっているものはいくつかあると思いますが、その中でも共通で「jQuery」が挙げられるかなと思っています。長期間運営されているサービスであればまだまだ現役なのではないでしょうか？かくいうウチもそうです！ 2023年現在でのフロントエンド開発であれば今は新規でjQueryを選択肢としてあげることはほとんどないと思っていますが、今よりもJavaScriptのサポートが貧弱だったころ、かつてのブラウザ間の齟齬を吸収する点で大変重宝されていたようです。 JavaScript自体が進化してきたのもあり、jQueryでできた表現が単体のJavaScriptとWeb APIとで表現できるようになってきている1ので
うるう日にしか発生しないバグ
昨日うるう日にしか発生しないバグに遭遇した。Javascriptを書く人には有名な話だとは思うので大して面白くはないかもしれないが一応メモ。 詳しくは書けないがバグが発生した関数の仕様としてはざっくりと下記のような感じ。 対象の年月日が基準日の1年前から1年後の間に含まれる場合はtrueを返しそうでない場合はfalseを返す 引数として2020-12-24というフォーマットの文字列が渡される(判定対象の日) 引数として2021-01-01というフォーマットの文字列が渡される(+-1年の基準日) Javascriptで書く (例) 対象の日: 2024/10/10 基準日: 2024/01/28 この時、trueになる範囲は2023/01/28 ~ 2025/01/28。なので2024/10/10はtrue。2023/01/28も2025/01/28もtrueになる。閉区間。 とあるコードの
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
commenthol/date-holidays: worldwide holidays
world-wide holidays in gregorian calender This module provides dates of holidays for various countries, states and regions by type while considering the applicable timezone. The features are: calculation of public, bank and observance holidays for different countries, state, region, following ISO 3166-2 consideration of timezones for holiday checks consideration of start and end time dependent on
date-holidays という祝日ライブラリが良い意味で狂っていた - hnwの日記
世界には色々なマニアがいるなーという話を紹介します。 先日Node.jsで使える祝日ライブラリを探していたところ、複数の国や地域の祝日に対応しているライブラリ date-holidays を見つけました。 commenthol/date-holidays: worldwide holidays このライブラリは本稿執筆時点で143ヶ国379地域の祝日に対応しています。この時点で頭がおかしい（ほめ言葉）のがわかると思うんですが、さらに凄いのがこれらの祝日をすべてYAMLで定義しており、このYAMLが変態的だという点です。 YAMLによる祝日の定義例 どう凄いかは実際のYAMLを見た方が早いと思うので、例を紹介します。下記は日本の祝日の定義の一部です。 01-15: name: en: Coming of Age Day jp: 成人の日 active: - from: 1948-07-20
RustでWebフロントエンド開発はできるのか？ - 0x90
Rust Advent Calendarの13日めです。 イントロダクション Rustを語るときしばしば「RustはWebフロントエンド開発もできる」ということが言われます。もちろん、RustはLLVMフロントエンドであり（LLVMから見てClangっぽく見えるように頑張っている）、emscriptenを使うことで用意にasm.js/wasmにできるわけですが、そこにとどまらずRust自体がオフィシャルにemscriptenバックエンドをサポートしています。更にごく最近、LLVM自体のwasm backendもサポートされました。 さて、では実際RustでWebフロントエンド開発はできるのでしょうか。もちろん、コストの掛かる何らかの特別な処理を行うためにJavascriptからRustの関数を呼び出したり、あるいはこちらの方がされているように、emscriptenのOpenGL imple
Clearing cache in the browser
Andrew Betts (@triblondon) is a web developer and principal developer advocate for Fastly, working with developers across the world to help make the web faster, more secure, more reliable and easier to work with. He founded a web consultancy which was ultimately acquired by the Financial Times, led the team that created the FT's pioneering HTML5 web app, and founded the FT's Labs division. He is a
編集者が最近のフロントエンド技術に初挑戦して仕事用アプリを作ったので見て - nomolkのブログ
つくったもの 原稿の締切と進捗を管理するシステムです。 これが画面の全体像のキャプチャです。モザイクが多くてよくわからないので、ちょっと説明を加えたのが下の画像です。 上のほうに、その日と翌日の掲載予定記事が出ます。その下にカードのような感じで表示されているのが、各原稿の締切／進捗管理です。 カードは締め切り日順に表示されていて、各カードの内容はこんな感じになっています。締め切りを本人に伝えたかどうかとか、ネタのメモを書き込むことができます。ステータスは未入稿・チェック中・リライト中・入稿済みの4種類があり、手で更新します。 この日は三土さんの締切で、まだ原稿が入稿されていないことがわかりますね。（三土さん晒してすいません。この記事は無事掲載されました） 締切1週間前とか、超過とか、状況によってカード自体の色も変わって気づきやすくなっています。 背景 僕はデイリーポータルZ(以下、DPZ)
WebDNNのサンプルとコードの解説に挑戦 - のんびりしているエンジニアの日記
皆さんこんにちは。 お元気ですか。師走の12月らしく締め切りに追われています。 この記事は「Deep Learning フレームワークざっくり紹介 Advent Calendar 2017」第7日目です。 qiita.com DeepLearningフレームワークの１つ、WebDNNのご紹介をします。 このフレームワークを調べたきっかけとして、「MakeGirls.moe」があります。 MakeGirls.moeは萌画像生成のWebサービスで、WebDNNを使用して提供しているようです。 make.girls.moe WebDNN WebDNNは東京大学 原田・牛久研究室が作成した深層学習モデル(DNN)を ウェブブラウザ上で高速実行するためのオープンソースフレームワークです。 次のサイトのアワードに掲載されるほど、良いソフトウェアでもあります。 Open source software
bfcache について覚えて帰ってもらいます。（転載） - oogatta のブログ
動作サンプル消しちゃったの直しました。 以下の内容は、『 mixi Engineers' JavaScript Advent Calendar 2012 』の12月19日分として投稿したものの転載です。内容に差異はありません。 bfcache について覚えて帰ってもらいます。 こんばんは。日々、一体お兄ちゃんだけど愛さえあれば関係ないのかどうなのか、そこのところについて確認作業を怠らないものです。 今日、偶然にもこれを閲覧してしまったみなさまには、近代ブラウザの誇る謎機能、 bfcache について覚えて帰っていただきます。どうぞよろしくお願いいたします。 bfcache （正式名称なのか、別名なのか定かではありませんが Back-Forwad Cache とも呼ばれます）をおもむろに Google さんに検索いただくと、権限のありそうな回答は Using Firefox 1.5 cach
JavaScriptで群れの動きを表現する - Qiita
はじめに この記事はGoodpatch Advent Calendar2日目の記事です。 今日は12/18ですが、2日目の記事を書く人が色々あって急遽書けなくなってしまったので、僕が代打で書く事にしました。 今回はGoodpatchのエンジニアが隔週で行なっている社内勉強会（その名もテクみ勉強会）で発表した内容ですが、「群れ」について書きたいと思います。 そもそも「群れ」とは一体何なのか 「群れ」についてWikipediaには以下のように書かれています。 群れは集団と言う数で淘汰（自然選択）の圧力に対抗しようとした生存戦略の一つ（個体ではすぐに天敵に食べられてしまうが、集まることで天敵を寄せ付けないなど）であると考えられる一方、群れで行動することで、生殖の面でも有利に働くと考えられている。 集団的自衛権然り渋谷のハロウィン然り、群れを成す事で他を圧倒し、自らが生き残るための生存戦略なのです
リクルートテクノロジーズのフロントエンド開発 2016 - from scratch
前書き このエントリーは Recruit Engineers Advent Calendar の 1日目の記事です。 www.adventar.org リクルートテクノロジーズのフロントエンド開発 リクルートテクノロジーズではいくつもの並行するタスクが走っていて、プラットフォーム基盤と呼ばれる基盤技術開発とインフラソリューションと呼ばれるインフラ開発、後はアプリケーション開発支援などのタスクが存在します。 アプリケーション開発支援の中でもウェブフロントエンド開発は目下のところ重要タスクとされており、色んなやり方をトライアルしています。 基本的には、 React Redux Node.js という組み合わせでフロントエンド開発をしています。 主には以前 ubb.jp というイベントで発表したこの資料に記載されている内容でやっていますが、諸々補足します。 リッチなウェブアプリケーションを作るた
JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]
「ピクシブ株式会社 Advent Calendar 2015」の24日目の記事です。こんにちは、今年8月からピクシブに入社した新米の@_furoshikiです。入社直後は、古くなって大変なことになっているJavaScriptのコードを、そーっと触る系エンジニアをやっていました！ 私はピクシブに入る前から、オフィスの一部を借りて「東京Webパフォーマンス」という趣味丸出しなイベントを開催しています。その中で扱ったテーマのひとつである「requestIdleCallback」が、古いJavaScriptのコードにUIをブロックされ、荒んでいた私の心を救ってくれました！ 今回、このrequestIdleCallbackというブラウザの新機能について、pixiv insideのブランド力を信じて、日本に多く広まるよう宣伝してみようかとおもいます！ そもそも、ブラウザのなにが問題なのか？ Windo
![JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9816ce1456c701bc9ca8189c4a1992fe7883d36e/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fcf5f8e7e9c0572236d914a69de729574796d371d%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fd%252Fdevpixiv%252F20151217%252F20151217010303.jpg)
FluxのActionとStoreをちゃんと分ける話 - pixiv inside [archive]
ピクシブ株式会社 Advent Calendar 2015、19日目の記事です。 qiita.com こんにちは、愛らしくも憎らしいJavaScriptを書いてご飯を食べている @geta6 です。業務では pixiv Sketch というサービスの開発や運営に携わっています。 pixiv Sketchでは、node.jsとReact/Fluxibleを使用してサーバーとクライアントを同じコードベースで動作させるIsomorphicな構成を採用しています。 このプロジェクトでコードレビューをしていて、チームメンバーがつまずきやすいと感じたのが『FluxにおけるActionとStoreのどちらに何を実装するべきか』という点でした。 そこで、本日は『ActionとStoreとの適切な責務の持たせ方』について話をしたいと思います。 ReactとFluxについておさらい 今年の4月にこんなスライド
![FluxのActionとStoreをちゃんと分ける話 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f406d9ad5e12aa72c3776150d7ea658abaac040/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fbc92d107234fdc58fbae32acb90f7eb19738e3dc%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fg%252Fgeta6%252F20151218%252F20151218175826.png)
JavaScriptレンダリングサーバーSplashでスクレイピング - orangain flavor
これはクローラー／Webスクレイピング Advent Calendar 2015の9日目の記事です。 本記事では、Scrapinghub社*1が開発しているSplashというオープンソースソフトウェアを紹介します。 github.com JavaScriptを使ったページからスクレイピングする方法としては、PhantomJSとSelenium/CasperJSなどの組み合わせが一般的ですが、これらとは少し違う手段として使えるかもしれないソフトウェアです。 私自身Splashを最近知ったばかりで、軽く探した限りでは日本語の情報もないので、調査しつつSplashの使いドコロを探ってみたいと思います。 Splashとは READMEには以下のように書かれています。 Splash is a javascript rendering service with an HTTP API. It's a
[JavaScript Advent Calendar 2014 No.6] navigator.onLine in Blink
06 Dec 2014 [JavaScript Advent Calendar 2014 No.6] navigator.onLine in Blink これはJavaScript Advent Calendar 2014の6日目の記事です。 コードを追いながら話を進めるので、いたるところにgithubへのリンクが貼ってあります。リンクを開きながら読んでいただけると理解の助けになるかと思います。 navigator.onLine 知ってる？ navigator.onLineは、ブラウザにおいて通信状態を取得するためのプロパティ。HTML5仕様ではこのへんに書いてある。 The navigator.onLine attribute must return false if the user agent will not contact the network when the user f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Deno 用のフロントエンド開発ツール packup について
Inouetakuya
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Reactの入門方法(個人の感想
