Hello size coding fans. Today, I have something amazing to share: A tiny raycasting engine and city generator that fits in a standalone 256 byte html file. In this post I will share all the secrets about how this magical program works. Here’s my tweet that contains the code and a video of the output… A City in a Bottle 🌆 <canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3
Q by LivesenseをWordPress on EC2からHugo on Cloudflare Pagesに移行しました - LIVESENSE ENGINEER BLOG
はじめに 技術構成（before）と課題 技術構成（after）と選定の理由 改善したこと パフォーマンスの向上 デリバリー速度の向上 セキュリティ面でのリスク低下 大変だったこと 記事のマークダウン変換 段落分けと改行の区別 字下げ 書式の追加 Lintが必要になった 記事ごとのOGP画像周りの実装 URL変更に伴うリダイレクト設定 標準の検索機能がない おわりに はじめに 技術部の @mom0tomo , @etsxxx です。 技術部では、事業部横断的な仕事としてコーポレートサイトの運用も行っています。このたびWordPress on EC2で運用されてきた弊社のWebメディア（Q by Livesense）を、Hugo on Clouflare Pagesに移行しました。 q.livesense.co.jp 弊社のWordPress運用はやや特殊で、エンジニアがサーバーにSSHして
テスト自動化のために作られたIDE「Aqua」、JetBrainsが正式公開。Webインスペクタ、HTTPクライアント、テストランナー、デバッガーなど統合。個人向けは無料
テスト自動化のために作られたIDE「Aqua」、JetBrainsが正式公開。Webインスペクタ、HTTPクライアント、テストランナー、デバッガーなど統合。個人向けは無料 JetBrainsは、テスト自動化のためのテストコード作成や自動テストの実行などに最適化した統合開発環境「Aqua」の正式版を公開しました（β版登場時の機能紹介）。 Aquaはテスト自動化でよく使われるJava、Python 、JavaScript、TypeScript、Kotlin、SQLなどの言語と、Selenium、Playwright、Cypressなどの主要なフレームワークをサポート。 クラスやシンボルなどを認識するスマート検索や、安全な名前の変更と削除、メソッドの抽出、変数の導入、変数またはメソッドのインライン化などのリファクタリング支援機能も備えています。 JUnit、TestNG、Pytest、Jest、
アクセシビリティの祭典2024に「アクセシブルなリテールアプリの共創開発と生成AIによる情報アクセシビリティの早期解消に向けて」というテーマで登壇 | DevelopersIO
アクセシビリティの祭典2024に「アクセシブルなリテールアプリの共創開発と生成AIによる情報アクセシビリティの早期解消に向けて」というテーマで登壇 アクセシビリティに関するイベントである「アクセシビリティの祭典2024」のスポンサーセッションに「アクセシブルなリテールアプリの共創開発と生成AIによる情報アクセシビリティの早期解消に向けて」というテーマで登壇しました。その内容をご紹介しています。 はじめに アクセシビリティの祭典は、チームアイコラボが主催するイベントで、2024年は10回目の開催になるそうです。 クラスメソッドとしては、2021年からスポンサーとして応援させていただいています。 クラスメソッドは「アクセシビリティの祭典 2024」をゴールドスポンサーとして応援します 今年は「アクセシビリティの祭典10周年大感謝祭！」がテーマとのことで、スポンサーセッションの登壇者はそれぞれ「
JetBrains は約 1 年半前にテスト自動化用 JetBrains IDE である Aqua のプレビューバージョンをリリースし、それから Aqua は大きく進化しています。 Cypress と Playwright のサポートなどの重要な機能を追加し、 Selenium をサポートすることで、Aqua はテスト自動化プロジェクトに最適なツールとなりました。 今回、その Aqua が一般公開されました！ 特に EAP 参加者の皆さんからの信頼、サポート、そして貴重なフィードバックには感謝しています。おかげさまでほとんどの重大な問題を一般リリース前に解決することができました。 皆さんへの感謝とテストコミュニティ内の成長促進への取り組みのしるしとして、Aqua の個人用非商用利用の無料ライセンスを提供いたします。 商用ライセンスもご利用可能です。 詳細については、この記事を引き続き読み進
CVE-2024-4367 - Arbitrary JavaScript execution in PDF.js — Codean Labs
This post details CVE-2024-4367, a vulnerability in PDF.js found by Codean Labs. PDF.js is a JavaScript-based PDF viewer maintained by Mozilla. This bug allows an attacker to execute arbitrary JavaScript code as soon as a malicious PDF file is opened. This affects all Firefox users (<126) because PDF.js is used by Firefox to show PDF files, but also seriously impacts many web- and Electron-based a
power-assert-monorepo/packages/node at main · twada/power-assert-monorepo
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
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
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
Have you ever thought about why a specific piece of technology gets popular? Usually there's never a single reason, but I do have a theory that I think is one of the primary drivers. I call it The 5 O'Clock Rule. With The 5 O'Clock Rule, the level of abstraction for solving a problem will bubble up until it allows the average developer to stop thinking about the problem. Unfortunately, it doesn't
System tests have failed
When we introduced a default setup for system tests in Rails 5.1 back in 2016, I had high hopes. In theory, system tests, which drive a headless browser through your actual interface, offer greater confidence that the entire machine is working as it ought. And because it runs in a black-box fashion, it should be more resilient to implementation changes. But I'm sad to report that I have not found
Ajax通信とSOPについて - Qiita
今回は、Ajaxとそれに伴って学んだ同一オリジンポリシー（SOP)についてアウトプットしていきます。 Ajaxとは JavaScriptからHTTP通信ができるオブジェクト XMLHttpRequest を利用し、サーバ通信を行う技術のこと。 非同期でサーバとデータの通信を行うのでユーザビリティが向上するらしいです。 また、ページの遷移や再読み込みをしないで、DOMを書き換えて表示を変化させるため、処理スピードも早くなります。 Ajax通信の準備 htmlファイル 実装させたい機能に応じて作っておきます。 JSONファイル データフォーマットの一つ。Ajaxを用いたデータの送受信に使われており、今回もこちらを使用していきます。 昔はXMLHttpRequestオブジェクトの名前にもあるXMLが主流だったらしいけれど、最近はJSONに代わってきたとのこと。 この中に、オブジェクトなどの引っ張
Ship modern, server-rendered web apps at planet-scale, without managing any of the backend infrastructure. Full-stack Javascript frameworks like Angular and Next.js make it simpler to get the benefits of server-side rendering (improved SEO, faster initial load times) with the ease and familiarity of the tools we use to build frontends. However, because these frameworks need a server, deploying an
【AI】ChatGPTとAPIを使って網羅的なPubMed検索できるGPT「PubMed Searcher」 | EARLの医学ノート
TypeScript Custom GitHub Action Development Tips
GitHub Actions における JavaScript/TypeScript Custom Action の開発・運用知見を紹介します！ 2024-05-16 GitHub Actions Meetup Tokyo #3 にて発表 https://gaugt.connpass.com/event/317178/ 会場：株式会社サイバーエージェント Abema Towers YouTube 配信アーカイブ https://www.youtube.com/watch?v=mR684-oSAJw
Google I/O 2024で発表されたFirebase App HostingでNext.jsのSSRを試す
先日のGoogle I/O 2024でFirebaseの新機能が発表されました。 これを読んでいて気になったのが、App Hostingという機能です。どうやらAngularとNext.jsのSSRをサポートしてくれるようになったようです。 自分はboobyというOSSコントリビュートしやすそうなリポジトリを探せるサービスを過去にリリースしています。 これのホスティング先として最初に検討していたのがFirebase Hostingでした。が、「？SSRどうやって動かすんだ？」と思いながらデプロイのための調査をしていたところ、どうやらCloudRunなどのサーバーサイドランタイムも使いながらでなければ動かせないということに行きつきました。 これまでやってきたCSRのHostingと異なり色々と手間が増えるなという結論に至り、結果初期構築が楽なVercelにデプロイすることにしました。当時の奮
非依存で設定等もJavaScriptも不要、HTML要素にクリーンなプリセットスタイルを適用するCSSフレームワーク・「matcha.css」
matcha.css matcha.cssは非依存で設定等もJavaScriptも不要、HTML要素にクリーンなプリセットスタイルを適用するCSSフレームワークです。説明が上手くできないのですが、柔軟性のあるCSSリセットというイメージです。 デフォルトのブラウザスタイルシートと同様にHTML要素のスタイルを広範囲に設定したものですが、極力疑似要素を使うなど導入しても既存サイトに影響が出にくい配慮がなされており、多くのブラウザに対応できるようになっています。それだけでなく、カスタムビルドツールが用意されていて、自分のオリジナルmatcha.cssを作る事も可能です。 例えば以下のようなHTMLの場合 <nav> <ol> <li><a href="#">Viennoiseries</a></li> <li><a href="#">Tartelettes</a></li> <li><a hr
AWSを使用したアプリケーションのローカルテスト
AWSを使用したアプリケーションのテスト方法 AWSを使用しているアプリケーションの開発時に問題となるのは、どのようにテストを実施するかという問題が発生します。 この時の選択肢は次の通りとなります。 単体テスト時にAWSのモックを作成してテストを行う AWS上にテスト用の環境を用意してテスト時に接続してテストを行う LocalStackを使用してローカルにAWSサービスのエミュレーターを動かしてテストする 単体テスト時にAWSのモックを作成してテストを行う 単体テスト時にモックアップする方法はテストに都合のいいデータを返せるため容易にテストが行えます。 モックの作成に手間がかかりますし、思い込みでモックを作成してバグを作成する場合もありますが、Motoなどを用いることでこれらの問題は軽減できるでしょう。 ただし、あくまで単体テストでしか使用できません。例えば複数プロセスを連携するようなテス
At Evil Martians, we help dozens of fast-paced startups running on Ruby on Rails every year. We design, build, and iterate on products, working hand-in-hand with internal teams. In particular, Rails is our framework of choice for SaaS products, and we’ve contributed to the success of numerous teams including Fountain, Tines, Monograph, Mayhem, and many more, as they raised later stage rounds, turn
Google I/O で、昨年の I/O での発表以降、ベースラインがどのように進化しているかについてニュースを共有しました。ウェブ プラットフォーム ダッシュボード、RUM Archive との統合、RUMvision との今後の統合についても発表しました。この投稿では、講演で取り上げたすべてのリソースを 1 か所にまとめます。 ウェブ プラットフォーム ダッシュボードは、ウェブ プラットフォーム全体と個々の機能の相互運用性の過程を確認するための新しい方法です。これにより、ベースラインに含まれるようになります。詳細については、ウェブ プラットフォーム ダッシュボードの発表をご覧ください。 Baseline を日常的に使用するツールと統合することは、このプロジェクトのビジョンの一つでした。Google は、ユーザーがブラウザの互換性への対応について、あまり時間をかけて考える必要がないように
ラジオボタン、チェックボックス、ドロップダウンリスト、コンボボックスなどは、ユーザーの入力負荷を軽減させるために使用される選択型のUI要素です。これらは見た目や機能が似通っていることもあり、なんとなく使い分けている場合も多いのではないでしょうか。 しかしながら、状況と目的にあったUIを採用しなければ、入力負荷の軽減どころか逆にユーザビリティが低下し、入力エラーの原因になってしまうことさえあります。 選択式フォームを正しく設定すれば、ユーザーの入力の手間を省き、タイプミスから生じるエラーの防止が可能になります。選択肢がリストに格納されるタイプのUIは画面スペースの節約になり、よりシンプルで情報負荷の少ないレイアウトを可能にします。 業務システムのUIをより良くするためには、選択式フォームそれぞれの特性を理解し、状況に応じて適切にデザインしていきましょう。 選択式フォームの種類 ラジオボタン
Neovim 0.10 was the longest release cycle since the heady days of the 0.5 release. There are a ton of new features in this release (as well as some breaking changes), so be sure to check the full release notes. You can view the release notes directly in Nvim with :h news. The news file includes information on new features, deprecations, and breaking changes. I especially urge plugin authors to rea
GitHub、Dependabotの基本コンポーネントdependabot-coreをOSSとして利用可能に GitHubは2024年5月13日、リポジトリ内の依存関係を監視しチェックするツールDependabotの基本コンポーネントdependabot-coreを、MITライセンスにもとづくオープンソースとして利用可能にしたことを発表した。 dependabot-core is now open source with an MIT license -The Github Blog 📣 Dependabot is now open source!https://t.co/RXpQG38AiD — GitHub (@github) May 14, 2024 Dependabotは、リポジトリ内の依存関係のアップデートの有無を検知して、自動でプルリクエストを発行したり、アラートの通知を
概要 自社製品「プリザンター(Pleasanter)」のUIデザインを改善して先日無事にリリースすることができたので、新旧UIデザインの比較やプロジェクトの振り返りをざっくりまとめました。「プリザンターはデザインがちょっとダサいから敬遠していた」という方は、改めて利用をご検討いただければと思います。（無料で始められます！） - モダンな新UIを搭載した最新バージョンを発表！プリザンターが、より見やすく、使いやすくなりました！ | Pleasanter はじめに プリザンターは業務システムとして多くの現場で活用されており、これまではユーザ業務を実現するための機能開発が優先して行われていました。UIデザインについては情報システム部門のユーザには好評な一方で、「レガシーである」「ダサい」といった意見もありました。こういったモダンなUIデザインを期待するユーザの声を受けて、UIデザインの改善を行い
Previous slideNext slideToggle fullscreenOpen presenter view An mruby for WebAssembly Presentation by Uchio Kondo self.introduce! Uchio Kondo from Fukuoka.rb Infra Engineer @ Mirrativ, Inc. livestreaming & "live" gaming Translator of "Learning eBPF" Ruby and WebAssembly Code sample background rule: Ruby.has :red, :background (window.JavaScript || TypeScript).then("yellow"); Rust::<BackGround>::pur
玄関の施錠チェッカーの続き - あっきぃ日誌
地味にブックマーク方面で反応があって面白かった反面、仕掛け自体は翌朝にデッドボルトにセロハンテープで貼り付けたテグスが外れてしまいました。 akkiesoft.hatenablog.jp ブコメではカメラで画像認識などというコメントも散見されましたが、部材コストと消費電力とかかる手間で余裕で勝てるので、あとは信頼性を高めるだけです（？？？）私を誰だと思っているんだ、CD-ROMドライブに毎朝カーテンを開かせるような異常者なんだぞ。 あと、テグスが見えないから色をつけてほしいってなんだ。目立たせないように実装してるんだから当然じゃん。 サムターンに3Dプリントで工作がどうとかいうのも、サムターンを持つときの触感を変えないことという、かなり冒頭に書かれた要件が見落とされていて、Xの見すぎで140文字以上は読めないのか！？と思ったけれど、わかりやすく簡潔に書いてない自分が悪いだけなのかもしれませ
5月11日(土)に開催されたTSKaigi2024に、エムスリーエンジニアリンググループはリフレッシュメントスポンサーとして協賛しました。リフレッシュメントコーナーでは、レッドブル・ラムネ・焼き菓子等々を提供しておりましたが、その中でも一際目立っていたであろうものが....『難読コードクイズ付き』のコアラのマーチ！ ！ リフレッシュメントブース ということで今回は、TSKaigiでリフレッシュメントクイズとして出題したコードクイズの解説をお送りします。 自己紹介 初めまして、今年の4月から24卒の新卒として入社しました池奥(@Selria1)です！ エンジニアリンググループのデジスマチームに所属しています。 今まではもっぱらウェブフロントばかり触っていましたが、入社してからはメンターさんやチームの方々の助けを借りながら、バックエンドやインフラも幅広く挑戦中です。 好きなことはハッカソン！学
Chrome 125で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートでは、今まではJavaScriptを使用しないと実装できなかったアンカーのポジションをCSSだけで設定できるようになりました。また、新しい関数やスクロールバーのカラースキームなど、Web制作者は要チェックです！ New in Chrome 125 Chrome 125 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるアンカーのポジション CSSのステップ値関数 round(), mod(), rem() 明度がほぼ100%または0のOklabおよびOklchカラーの不連続性を除去 スクロールバーのカラースキーム はじめに 5/15にリリースされたChrome 125で4
State of HTML 2023
While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. After all once you've learned about <div>s and <h>s 1 through 6, what else is there to know? Quite a lot, as it turns out! Once again we drafted Lea Verou to put her in-depth knowledge of the web platf
「JetBrains」の各種IDE、AIコード補完機能をローカルで使用可能に：クラウドベースのAI支援機能の懸念点をカバー クラウドベースのAIアシスタントを利用して著作権やデータプライバシーの問題を回避するというトレンドがますます広がっている。そうした中、「JetBrains」が「GitHub Copilot」に先んじてローカルでのAIコード支援機能を実装した。本記事ではそのメリットを解説する。 JetBrainsが開発する各種IDE（統合開発環境）の大半に、ローカルAI（人工知能）コードオプションが組み込まれた。これは、コードの全行を提案することを目的にトレーニングされた小さな言語モデルを、ローカルで動かすものだ。コードの正確性をチェックする組み込み機能が、同社IDEの有償サブスクリプションを利用するユーザーに提供されるようになる。 こうした機能は、2024年4月上旬にリリースされたバ
Flutter/DartのWebAssemblyコンパイル機能が安定版に。より高速でスムーズなユーザー体験などを実現
Flutter/DartのWebAssemblyコンパイル機能が安定版に。より高速でスムーズなユーザー体験などを実現 Googleは、日本時間5月15日から開催中のイベント「Google I/O 2024」で、Dart言語とそのアプリケーションフレームワークであるFlutterの最新版となるDart 3.4/Flutter 3.22で、WebAssemblyコンパイル機能が安定版になったと発表しました。 Flutterは単一コードでiOS/Android対応のネイティブアプリ開発を可能にするフレームワークとして登場し、現在ではMac、Windows、そしてWebアプリケーションも単一コードでカバーするクロスプラットフォーム対応を目指して開発が進められています。 WebAssemblyへのコンパイルで実行速度が約2倍から3倍に これまでFlutterでWebアプリケーションを構築した場合、ア
This page will give you an introduction to the new experimental React Compiler and how to try it out successfully. These docs are still a work in progress. More documentation is available in the React Compiler Working Group repo, and will be upstreamed into these docs when they are more stable. React Compiler is a new experimental compiler that we’ve open sourced to get early feedback from the com
We've been building a bridge. You can hear Ryan talk about this announcement at React Conf 🎥 For nearly 4 years we've been working on Remix, a fullstack framework built on web standards to help you build better websites and applications. React Router has always been Remix's largest dependency after React itself. The two projects are so closely aligned that we updated React Router to include Remix
When a single-page application needs to fetch data from a remote source, it needs to do so while remaining responsive and providing feedback to the user during an often slow query. Five patterns help with this. Asynchronous State Handler wraps these queries with meta-queries for the state of the query. Parallel Data Fetching minimizes wait time. Fallback Markup specifies fallback displays in marku
GitHub - noway/htb: Htb.js — a 50-line HTML template engine that uses JavaScript syntax.
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
State of HTML 2023
While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. After all once you've learned about <div>s and <h>s 1 through 6, what else is there to know? Quite a lot, as it turns out! Once again we drafted Lea Verou to put her in-depth knowledge of the web platf
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
City In A Bottle – A 256 Byte Raycasting System
テスト自動化用 IDE の Aqua が一般公開！ | The Quality Assurance Blog
SPAは万能じゃない。「革新的」と言われているPWAはどこがすごいのか？ | レバテックラボ（レバテックLAB）
Release Release v1.7.0 · axios/axios
Why React Query?
2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023
Introducing Firebase App Hosting
Evil Martians: Rails Startup Stack
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
速度・出力量・コスト効率最強の、Gemini 1.5 Flash！
ウェブの最新情報 | Blog | web.dev
選択式フォームをより使いやすくするポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
What's New in Neovim 0.10 | g.p. anders
GitHub、Dependabotの基本コンポーネントdependabot-coreをOSSとして利用可能に | gihyo.jp
自社製品のUIデザインを改善した話【Pleasanter】 - Qiita
An mruby for WebAssembly
TSKaigiのスポンサーです、リフレッシュクイズの解答解説をお送りします - エムスリーテックブログ
Web制作者は要チェック！ Chrome 125で新しく追加された4つのCSSの機能
「JetBrains」の各種IDE、AIコード補完機能をローカルで使用可能に
React Compiler – React
Merging Remix and React Router
Data Fetching Patterns in Single-Page Applications
Google I/O 2024の発表内容を簡単にわかりやすくまとめてみました。 - smileブログ