すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
CS50x 2021
This is CS50x 2021, an older version of the course. See cs50.harvard.edu/x for the latest! Welcome Introduction to the intellectual enterprises of computer science and the art of programming. This course teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engine
CS50 for Japanese: コンピュータサイエンスの入門 – 当ウェブサイトは、Creative Commons ライセンスに基づいて管理されています。
お知らせ: 2022/9/1 CS50 を活用した非営利／協賛企業による「コロナ学生支援」プロジェクトを実施中 ▼ 学生の方へ：CS50 の学習（履修証明書の取得）を一緒に取り組むプロジェクト CS50日本語版の翻訳コントリビューターである CODEGYM が主催する、非営利／無償のプロジェクト「CODEGYM Academy (外部リンク)」は、昨年に続き2022年度（春/秋）も、キャリア選択を控えた学生に対し、以下の企業の協賛により無償で17週間のプログラミング教育カリキュラムを提供します。 CODEGYM Academy 協賛企業（2022年） https://codegym.jp/academy/ 今年度のエントリーは締め切りました — ようこそ！ このページは、ハーバード大学 CS50 の日本語版翻訳プロジェクトのページです。当サイトのドメインに掲載されているコンテンツは、Cre
フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
GitHub - styled-system/styled-system: ⬢ Style props for rapid UI development
Add style props that hook into your own theme Quickly set responsive font-size, margin, padding, width, and more with props Influenced by constraint-based design system principles Typographic scale Spacing scale for margin and padding Works with any color palette Works with most css-in-js libraries, including styled-components & emotion Used in Rebass, Reflexbox, and the Priceline Design System "T
Pretty Diff - The difference tool
☰Application Menu ⛶Toggle Fullscreen Pretty Diff - Austin Cheney Access the old Pretty Diff tool. Written 12 August 2023 I lived in Afghanistan for nearly 2 years for two separate US Army deployments. I write this just over 14 years after first stepping foot in Afghanistan. Travel Living and Waiting On the first Afghanistan deployment I was constantly traveling, and travel in Afghanistan was rough
PostCSS - a tool for transforming CSS with JavaScript
Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. :fullscreen { }CSS input:-webkit-full-screen { } :-ms-fullscreen { } :fullscreen { }CSS output PostCSS Preset Env, lets you convert modern CSS into something most browsers can understand, determining the polyfills you need
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
これはかなり気になる！スタイルシートの可能性が広がるReact.jsのCSS版のようなスクリプト -Descartes | コリス
「React: CSS in JS」からインスピレーションを得て、CSSをJavaScriptで記述し、スタイルの定義、変数・関数の利用、レスポンシブやスクロールなどのイベントに動的に値を生成できるスクリプトを紹介します。 Descartes Descartes -GitHub 上記ページではクリックする度に、背景色の値が動的に適用されています。 Descartesの特徴 Descartesの使い方 Descartesの特徴 DescartesはSassやLessのようなCSSプリプロセッサの良い点を取り入れ、CSSをJSONとして記述するとどうだろうと始めたオープンソースのプロジェクトです。スタイルのセットだけでなく、DOMへのアクセスや基本的なイベントリスナーに対応しています。 Descartesの書式は、SassやLessに似ています。 Descartesの基本スタイル パフォーマン
htmlPy · HTML5-CSS3-Javascript based GUI library in Python
htmlPy is a wrapper around PySide's QtWebKit library. It helps with creating beautiful GUIs using HTML5, CSS3 and Javascript for standalone Python applications. It is built on Qt which makes it highly customizable and cross-platform. htmlPy is compatible with both Python2 and Python3. It can be used with any python library or environment like django, flask, scipy, virtualenv etc. You can use front
Atom Flight Manual
CompanyEngineeringProductSunsetting AtomWe are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022. January 30, 2023 Update: Update to the previous version of Atom before February 2 On December 7, 2022, GitHub detected unauthorized access to a set of repositories used in the planning and development of Atom. After a thorough investigation, we hav
Mozilla Foundation - Web Literacy
In today’s digital world, knowing how to read, write, and participate online is a foundational skill next to reading, writing, and arithmetic. At Mozilla, we call this Web Literacy. Combined with 21C Skills, these digital-age skills help us live and work in today’s world.People everywhere should have the knowledge they need to tap into the full power of the Internet -- and to use it to make their
New 3DSブラウザのゲーム開発向けJavaScript API対応具合チェック - ABAの日誌
Newニンテンドー3DS インターネットブラウザーの主な仕様を見ると HTML4.01/HTML5/XHTML1.1/Fullscreen/Gamepad/SVG/WebSocket/Video Subtitle/ WOFF/Web Messaging/Server-Sent/Web Storageの一部/XMLHttpRequest/ canvas/Video/DOM1-3/ECMAScript/CSS1/CSS2.1/CSS3 の一部 のウェブ標準に対応していると書いてある。旧3DSの仕様と比べるとだいぶリッチに見える。特にFullscreenとGamepadに対応しているならゲーム開発向けに使えるんじゃないのかね、と思って少し調べた。 Fullscreen これ本当に対応しているの？ document.documentElement.webkitRequestFullScreen()
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
Awesome Cursor - a jQuery plugin for using FontAwesome icons as custom CSS cursors
In your terminal: npm install jquery-awesome-cursor In your web page: <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css"> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/jquery-awesome-cursor/dist/jquery.awesome-cursor.min.js"></script></pre> If you plan on using jquery-awesome-cursor with a different icon font, you can skip th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Unibeautify · The Universal Code Beautifier
Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron
zencode.in
Sencha Labs — Open Source projects which push the limits of HTML5, CSS3, and JavaScript