VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
Markdown で技術書が書ける｜abechanta
ソフトウェアに関する記事やコラムを書くなら、Markdown 記法はとても良い選択です。見た目の統一感があり、覚えやすく、軽量です。 この「Markdown での書きやすさ」を物理書籍や電子書籍の執筆にも応用できたらな、、、 "W3C Paged Media Viewer" はそれを実現する、OSS の Visual Studio Code のエクステンションです。エクステンションを入れただけの超シンプルな環境を使って、手間いらずでサクッと技術書を執筆することができます。 以下に示すとおり導入は簡単です。 1. VS Code を起動します 2. CTRL + SHIFT + X とタイプして Extensions ビューを表⽰します 3. 検索ボックスに paged media と⼊⼒し、 W3C Paged Media Viewer あるいは abechanta.vscode-ext-
プログラミングを始める動機はどこにあるのか、の話 - たごもりすメモ
あるいは「高校生からはじめるプログラミング」の話。 こちらの本をKADOKAWA様からいただきました。ありがとうございます。なぜ自分に……*1などと思わなくもなかったけど、ありがたく眺めさせていただきました。今となってはこういうガチ初心者向けの教本を眺める機会なんて皆無だしなあ。 SAOのコンテンツ力が表紙/裏表紙と章立てのページに発揮されてるけど、他のページはごく普通のプログラミング教本で、特に中身との連携はなかった。これで売上とか変わるのかな。変わりそうだなあ。 で、ざらっと眺めたあと、タイミングよくプログラミングを始める動機ってなんなんだろうな、と思ったので、それに絡めて書く。 本の中身 最近のプログラミングの導入ってそもそも何をやるの、みたいなのがぜんぜん分かってなかったので、ちょっと新鮮だった。思えば技術要素を特定しない「プログラミング入門」の本というのは人生で初めて読んだかもし
The Way of the Gopher
I’ve dabbled in JavaScript since college, made a few web pages here and there and while JS was always an enjoyable break from C or Java, I regarded it as a fairly limited language, imbued with the special purpose of serving up animations and pretty little things to make users go “ooh” and “aah”. It was the first language I taught anyone who wanted to learn how to code because it was simple enough
『Runstant』作りました! 思いたったらすぐ開発, プログラミングに革命を... - Qiita
こんなん作りました. Runstant Runstant って？ ログイン不要でアクセスした瞬間からプログラミングを始められる エディタ & プレビューツールです. 名前は, run + instant からの造語で, インスタントラーメンのように一瞬でコーディングできて気軽に実行できるよって意味で名づけました. 特徴 instantly code ログインは不要! 即座にコーディングを始めることができます. Runstant は, ブラウザ上で高速に動作するエディタ&プレビューツールです. コードのハイライトや補完, オートインデント機能, vim や Emacs 対応といったコーディングに必要な機能をデフォルトで完備しています. instantly run コードを保存してみてください. 今までにない速度で実行結果を確認できます. サーバーを介さず, URL に情報を保存することにより
Codepad - Share Code Snippets, HTML5, CSS3, JS Demos
ActionScript Ajax AngularJS Apache AppleScript ASP.NET Bash C C# C++ Coffee CoffeeScript ColdFusion Command CSS Delphi Django ES6 GLSL Grunt Gulp HAML Haskell HTML iOS Jade Java JavaScript jQuery JSX Less LUA MDX MySQL Objective Other Pascal Perl PHP Plain text PowerShell Processing Progress Prolog Pseudocode Python Rails RegExr Ruby SASS Scala Scheme SCSS SmallBASIC Smarty SQL Stylus SVG Swift Ty
Demo: Pure CSS speech bubbles – Nicolas Gallagher
By Nicolas Gallagher The demo page for Pure CSS speech bubbles. For a detailed explanation view the CSS file. It is heavily commented. All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code. The basic bubble variants This only needs one HTML element. For example, <p>[text]</p>
JavaScript と PHP で画像をクロップ (切り抜き) する方法 - Web/DB プログラミング徹底解説
Web 画面上で画像を切り取るプログラムの作り方を説明します。 まずは出来上がりをご覧ください。ボタンを押すと右側に、切り取られた画像が表示されます。 これは単にその部分を「表示」しているだけではなく、切り取った部分だけの JPEG ファイルを作成してそれを表示しています。 このプログラムの作り方を解説します。が、いろいろな項目を知らないといけないので順を追って説明します。 プログラムの概要 まずはクライアント側は下図のようにいくつかの HTML 要素を重ね合わせています。 一番下にあるのは元画像。それに被さるのは同じ大きさの黒いレイヤーです。 これには透明度が設定されているので、一番下の画像が透けて見えます。 その上にクロップ領域を現す要素を配置しています。これは DIV 要素であり、 この要素の背景画像として元画像が指定されています。画像の内側一部を背景画像と するには backgro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - cssanimation/css-animation-101: Learn how to bring animation to your web projects
CSS Arrow Please - By Simon Hoejberg - @shojberg