Explore DOM EventsThere are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.
UNIX & Linux コマンド・シェルスクリプト リファレンス
目次 当サイトについて bash シェルスクリプト入門 -シェルスクリプトのいろは- コマンド Tips シェルスクリプト Tips 変数を使用する 配列を使用する 入力と出力 if 文と test コマンド for 文の使用方法 while 文の使用方法 case 文の使用方法 関数の使用方法 引数を処理する 終了ステータス シグナルと trap コマンド フィルタを使用した文字列操作 1 フィルタを使用した文字列操作 2 日付を取得する 文字コードと改行コード シェルスクリプトのデバッグ AWK リファレンス (Deprecated) シェルスクリプト ライブラリ 『ether.sh』 お知らせ Bluesky を始めました @sunone.me 変更履歴 2023.10.07 ページ内リンクを修正した。 2021.02.01 このサイトに「もう 1 ページ追加しよう」と思ってから、も
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
MDN Web Docs
Resources for Developers, by DevelopersUnited in love //////////// //////////// //////////// //////////// //////////// //////////// //////////// ++++++ ++++++ ++++++ ++++++ ++++++ ++++++ ++++++{{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} ../../ ../../ ../../ ../../ ../../ ../../ ../../<></><></><></><></><></><></><></><></><></><></><><
repub - MarkdownからePub3ファイルを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webになぜこれほどコンテンツが増えたかと言えば、かつては手打ちだったHTMLがオーサリングツールによって簡単に編集できるようになったり、CMSで特別なソフトウェアを用意することなくコンテンツが作れるようになったことが大きいでしょう。なるべく敷居を下げないといけません。 今回紹介するrepubはMarkdownファイルからePubファイルを作成します。これは電子書籍コンテンツを作る敷居が一気に下がりそうです。 repubの使い方 repubを実行するところです。Markdownファイルさえ指定すればOKです。 $ repub 1.md Title: NCMBのテスト Creator: Atsushi Nakatsugawa Language: ja ?Published "NCMB
はじめに · An Introduction to Elm
Elm について (はじめに) Elm は JavaScript にコンパイルできる関数型プログラミング言語です。 ウェブサイトやウェブアプリケーションを作るのに役立ちます。Elm はシンプルであること、簡単に使えること、高品質であることを大切にしています。 このガイドは以下のことを目指します。 Elm によるプログラミングの基礎を身に着けてもらうこと The Elm Architecture を使ってインタラクティブなアプリケーションを作る方法をお見せすること あらゆる言語で使える法則やパターンを重視すること 最終的にはあなたには Elm を使って素晴らしいウェブアプリをただ作れるようになるだけでなく、Elm をうまく使えるようになるための核となるアイディアやパターンを理解してもらえればと思います。 Elm に対して様子見の立場である方も、Elm をちょっと試してみて実際に何かプロジェク
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか - Qiita
9月15日(土) DNSについて追記しました。バックエンド？今はクラウドがきっと上手くやってくれるので深く考える必要は無いんですよ（知らないので書けません😔） 問題のツイート 面接の質問で「ブラウザを立ち上げてページが表示されるまでの仕組みを全て知ってる限り説明してください」ってのをやると結構Web系の知識どれだけあるか分かると思ってる — 🍛🍺 (@tan_go238) September 10, 2018 解釈 今回は「ChromeのURL欄に入力してからページが表示されるまで」をやります。ブラウザの起動云々はWeb系の話じゃないと信じてます。 1. HTTPリクエストが飛ぶ HTTP2のヘッダ圧縮技術に全て書いてありました。 (追記)下のリクエストヘッダはテキストで書かれていますが、実際にはこれをバイナリにしたものが飛んでいるとのことです。segfoさんありがとうございます！
HTML / CSS / JavaScript（jQuery）でビンゴゲームを作成 - てらこやわーく
ビンゴゲームデモページ まずは何はともあれ完成品を見てみましょう。ルーレットを回す際に音が出ますのでご注意を。 >> JavaScriptでビンゴゲーム ソースコードは、記事最後にGitHubのURLが貼っていますのでそちらを参照してください。それでは解説。 ビンゴゲームの数字をランダムに表示するプログラム プログラム教室のJavaScriptの授業で、何か課題を出したいなと思い、せっかくプログラムを習っているので実用的なものをと考えイベントなどで使えるようにビンゴゲームを作成することにしました。jQueryを使ってなるべくシンプルに作成しようと思います。まずは完成イメージは以下のような感じで。 スタートボタンを押すと、一番上のボックスに数字がドラムロールっぽく動作して、もう一度ボタン（ストップにテキスト変更）を押すとランダムな数字が選択されて、下に並んでいるその数字の背景色と文字色が変わ
コードはわずか384bytes！HTML/CSS/JavaScript対応、ブラウザからすぐに利用できる超軽量エディタ -TinyEditor
data:text/html,<body oninput="document.querySelector('iframe').srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{float:right;width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=JS id=j></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=HTML id=h></textarea><iframe> data:text/html,
Tips and tricks of the docker captains
Docker Captain Adrian Mouat will present a grab bag of tips and tricks for getting the most out of Docker. These tips are aimed at avoiding common pitfalls, addressing common misunderstandings and making common operations easier. Topics covered will include: - Build Processes - Security - Volumes - Databases - Orchestration - Debugging and Maintenance - Calling Docker from Docker Whilst aimed prim
【保存版】プログラミングで何を学べばどんなアプリを作れるのかまとめてみました。｜Dai
追記） プログラミング教育・就活などについてツイッターでも発信しています。この記事を読んで興味を持っていただけた方がぜひフォローよろしくお願いします！ ------------------------------------------------------------------------- プログラミングで「これ創りたい！」というときに何を学んだらいいのか創りたいもの別にまとめてみました。 主にAidemy, Progate, noteのチュートリアルの教材をまとめた記事になります。これから学習するルートに従って勉強を始めると、創りたいアプリができるようになると思います。全体像はこんな感じになります。 ①Webページを創りたい まずはWebページの作り方です。お店のホームページなどを作るためには、以下の言語を学ぶ必要があります。 ・HTML ・CSS ・JavaScript ・jQ
Incunabula - 印刷用のMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownはHTMLに限らず、様々な場面で使われるようになっています。PDFで出力されることもあります。しかしHTMLは印刷には向いていないフォーマットであり、MarkdownからPDF出力した場合も同様です。 そこで使ってみたいのがIncunabulaです。印刷を前提としたMarkdownエディタです。 Incunabulaの使い方 エディタとしては二画面方式になります。 KaTeXという数式ライブラリに対応しています。 --- でページ分割を行います。 Incunabulaはページ分割を手動で行うようになっていますが、将来的には自動改ページになるようです。また、印刷用のCSSがあたっているなど、印刷を前提とした仕組みになっています。論文やレポートを書くのに適したエディタに
VueJS と「Drag/Drop」を触ってみて、小さいサンプルを作ります。
おひさしぶりです。 技術支援チームのトゥオンと申します。 近年にWeb Applicationが発展して、DeveloperがFrontEndのフレームワークを気にしています。そして、大きなIT企業はJS フレームワークを発表しました。例えば、React JS (Facebook), Angular JS(Google), Vue JS(Google)です。 最近、仕事でFrontEndのタスクが増えてきていて、一つのJSフレームワークを勉強したいと思いますので、 VueJSを選びました（選んだ理由が特にないです、検索した時にVueJSがすぐに出ましたので、選びました）。 勉強するときに実際に体験しないと、忘れしやすいと思いますので、前回に紹介したこと（「ウェブ開発におけるDrag/Dropについて」）と含めて、小さいタスク管理ツールを開発します。皆さんと一緒にやりましょうか。 やりましょ
マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように
マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように Mozillaは、マイクロソフト、Google、W3C、サムスンなどと協力して、それぞれのブラウザなどに対応した技術解説のドキュメントを一本化し、Mozilla Developer Networkの「MDN web docs」にまとめて掲載する取り組みを開始したと発表しました。 Webブラウザに関するHTMLやCSS、APIなどの機能の解説は、そのWebブラウザを開発するベンダのWebサイト、例えばマイクロソフトならMSDN（Microsoft Develpers Network）、GoogleならChromeのWebサイト、MozillaならMDN（Mozilla Developer Network）のWe
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
Markdown形式で書いた記事やレポートをPDF形式で配布する - ジンジャー研究室
あまりまとまってる記事がないので書いた。 やりたいこと Markdownでさらっと書いた記事を社内に共有したい。 しかしMarkdownだと色々問題がある。 標準的なビュアがない PC環境によって見え方が変わる 画像などを含めるためにZIPなどで共有する必要があり読む側が面倒 Gistでもいいが、GistだとprivateにしてもURLがバレたら普通に外から見えるので実質public。 というわけで、PDF１ファイルにまとめたい。 スタイルを含んだHTML１ファイルでも良さそうだが、フォントがOSによって変わったり、Webフォントだとしてもオフライン時に崩れる問題があるので、やはりPDFが理想。 Markdownの下準備 PDFに変換する前にやっておくと良いかもしれないこと。 目次の自動生成 ある程度長い場合は目次が作りたくなる。 Node.js環境ならdoctocというツールが使える。
【連載】基礎の基礎から学ぶ、Webプログラミング超入門 [4] CSSの書き方
前回HTMLファイルの作り方、書き方について解説しました。 今回は、HTMLと同様にWebページ作成において欠かせないCSSの書き方を解説していきます。フォームやボタンの色、形、位置などを変更していきますが、具体的にどう変わっていくのか確認しながら自分でもコーディングしてみてください。 CSSとは CSS(Cascading Style Sheets)はHTML文書内で定義された要素に対して、文字の色や大きさなど主に外観に関する指定を行います。また音声による読み上げなど、見た目に関するもの以外の設定を行う機能も一部存在します。 以前は外観に関する設定もHTMLで行うことができましたが、現行のHTML5ではCSSを使用するのが基本となっています。そのためWebサイトを作成するには必須と言えます。 CSSのファイルの作り方 CSSファイルそのものには宣言文などはありません。テキストエディタでフ
![【連載】基礎の基礎から学ぶ、Webプログラミング超入門 [4] CSSの書き方](https://cdn-ak-scissors.b.st-hatena.com/image/square/998cc677ff9edad6c03634443d29f6090869b191/height=288;version=1;width=512/https%3A%2F%2Fnews.mynavi.jp%2Fitsearch%2F2017%2F07%2F17%2Fwp4%2FWebProg300-250.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年6月30日)
https://creative-tweet.net//blog/2018/04/beginning-vuejs.html
