エンターテイメント!!

遊戯王好きのJavaエンジニアのブログ。バーニングソウルを会得する特訓中。

HTML/CSS

【翻訳+意訳・要約】フロントエンド開発をマスターする: 包括的なロードマップ

※本記事は、ChatGPTによる意訳+翻訳を活用し、レイアウト調整したものです。 ※感想は、オリジナルです。 原文 意訳+要約 フロントエンド開発をマスターする: 包括的なロードマップ ChatGPTさんに聞いてみた Q:パフォーマンス最適化は、どのように学べばい…

【翻訳+意訳・要約】ウェブ開発におけるレイジー・ローディングの仕組み

※本記事は、Bardによる意訳+翻訳を活用し、レイアウト調整したものです。 ※感想は、オリジナルです。 原文 意訳+要約 ウェブ開発におけるレイジー・ローディングの仕組み Bardさんに聞いてみた Q:なぜユーザーエクスペリエンスが向上するのでしょうか? Q…

【翻訳+意訳・要約】ジュニアフロントエンド開発者に必要なスキルとは?✅ 👩‍💻

※本記事は、Bardによる意訳+翻訳を活用し、レイアウト調整したものです。 ※感想は、オリジナルです。 原文 意訳+要約 ジュニアフロントエンド開発者に必要なスキルとは?✅ ‍ フロントエンドエンジニアに必要なスキル 基礎スキル 応用スキル 特に重要なスキル…

【意訳+要約】Tailwindの代わりにUnoCSSを使うべき理由

※本記事は、ChatGPTによる意訳+翻訳を活用し、レイアウト調整したものです。 ※感想は、オリジナルです。 原文 意訳+要約 Tailwindの代わりにUnoCSSを使うべき理由 ChatGPTさんに聞いてみた Q:TailwindのHTMLが冗長になる理由は何ですか? Q:UnoCSSでは、…

【Bard意訳+翻訳】Front End Developer Roadmap

※本記事は、Bardによる意訳+翻訳を活用し、レイアウト調整したものです。 ※感想は、オリジナルです。 原文 Front End Developer Roadmap Bardによる意訳+翻訳 フロントエンドエンジニアとは、Webブラウザ上で動作するWebアプリケーションのユーザーインター…

From Idea to Design for Non-Designers の翻訳と読んでみての感想

経緯 なんか、すごいリアクションがいっぱいついてたから、気になって読んだ 原文 From Idea to Design for Non-Designers - DEV Community 翻訳 & 要約 インスピレーション 具体的なアイディアが思いつかない場合、他サイトを参考にする。以下デザインの参…

Webスクレイピング周りの調査結果まとめ

きっかけ webページ解析してみたくて、いろいろ調べた 調査内容まとめ 基本的に、jsoupってライブラリを使えば、webページの情報をオブジェクト化してくれる。 あとは、cssの知識と正規表現の知識があれば、データを引っ張ってこれることまでは確認できた。 …

【typescript移行】Typescriptで`'x' is not defined`

経緯 js→tsへの移行をしているのだが、掲題の通り'x' is not definedが発生していて、かなり悩んだ。。。 ts移行の記事は以下 suzaku-tec.hatenadiary.jp suzaku-tec.hatenadiary.jp suzaku-tec.hatenadiary.jp 内容 htmlからtsで定義したfunctionを呼び出し…

Bootstrap4でModalが表示されなくなった

現象 modalを用途によって表示するために、複数定義をしたあと、動作確認のためにmodalの表示を行ったら、既存のmodalが動かなくなった。。。 環境 jQuery v3.3.1 bootstrap v4.3.1 原因 おそらく、下記の箇所の記述で、画面上で1度に1個までが引っかかって…

2020/07/13週 気づきと振り返り これから苦行を積む日々を過ごす

業務こなしての問題・気づき SCCとは? ソース修正前後に start ~ end のコメントをするのに対する怒り 体育会系がIT業界を滅ぼす 現行踏襲 執務室は聖地? トイレは短時間に? 業務こなしての問題・気づき SCCとは? 現場が変わって、環境構築をした際に…

2020/05/25週 気づきと振り返り

業務こなしての問題・気づき bootstrap 雑記 在宅勤務 業務こなしての問題・気づき bootstrap bootstrapを使うようになったのだが、流行る理由が分かった気がする。 素でHTML書くより単純なのがいい。 問題は、学習コストが必要なことと、誰かが見たときに何…

【読書ノート】やさしく学べるWeb Components

まとめメモ Web Componentsとは 基本概念 構成技術 感想 まとめメモ Web Componentsとは 基本概念 Web Componentsとは、アプリ内でよく使うコンポーネントを、独自定義したHTMLを使っていつでも呼び出せる技術 HTML/CSS/JavaScriptを含めてコンポーネント化…

Angular + electron の環境構築

きっかけ 環境 実証 流れ angularの実行環境準備 electornのインストール main.jsの作成 Angularの設定変更 実行スクリプトの準備 実行 今回のソース 雑記 参考サイト きっかけ electronでUIフレームワークで何かいいものないかと探して、react/vueにたどり…

Vue.jsをvue-cliで試してみる

きっかけ 環境 詳細 Vue cliのインストール プロジェクト用意 とりあえず実行 バインディング appにApp.vueを設定している。 感想 きっかけ UI周りの実装が楽にならないか探して、vue.jsを知ったので試してみる。 react.jsも試したことはあるんだけど、覚え…

2019/03/18週 気づきと振り返り

業務こなしての問題 WebviewでUnable to open asset URL 雑記 縦長ディスプレイ 業務こなしての問題 WebviewでUnable to open asset URL 読み込もうとするHTMLがないから起こってるっぽい。 原因がよく分からないが、Android Studioのインスタントランが原因…

2019/03/04週 気づきと振り返り

業務こなしての問題 gradleのプロキシ設定 手順書の適時 CSSで存在しないURLへアクセス ヒヤリハット 別ブランチへコミット 雑記 アイディア ノートとボールペンでイライラ 部下との面談 パイロットのフリクション 先週は、書くネタが思いつかなかった。。。…

【書評】最新JavaScript開発〜ES2017対応モダンプログラミング

まとメモ JavaScript解説 ECMAScript JavaScriptから言語仕様を抽出した規格。 ブラウザ操作のAPIであるDOM等を除いたものが定義されている。 Node.js 非同期 Google V8 Node.jsの登場でJavaScriptがCLIとして動くようになった。 JavaScriptの使われ方とその…

2018/12/03週 気づきと振り返り

業務こなして思ったこと Androidのパフォーマンス計測はどうすればいいのか? MacのSafariでAudioタグのcrossoriginが効かない safariでのWebAudioAPI 雑記 思いついた名言 業務こなして思ったこと Androidのパフォーマンス計測はどうすればいいのか? Andro…

Advent Calendar 2018 Node.jsまとめ

感想・まとめ・メモ 12月1日 12月2日 12月3日 12月4日 12月5日 12月6日 12月7日 12月8日 12月9日 12月10日 12月11日 12月12日 12月13日 12月14日 12月15日 12月16日 12月17日 12月18日 12月19日 12月20日 12月21日 12月22日 12月23日 12月24日 タスク Node.j…

CSS Advent Calendar 2017 チラ見まとめ

随時更新予定 CSS Advent Calendar 2017 公式サイト CSS Advent Calendar 2017 - Qiita CSSに関わることならなんでも ・CSS設計 ・PostCSS ・cssnext ・SCSS ・Sass 内容・感想 [12/01] ユーザーが予測可能なスワイプするレスポンシブTableスタイル ユーザー…

Markdownエディタをelectronで試し実装

きっかけ 業務でテキストメモは残すけど、あまりにも散在しすぎるので、タグ検索できるようなメモ帳が欲しくなったから作り始めた。 Github GitHub - IkarashiToshio/markdeck 現状 なんとかMarkdownのリアルタイムプレビューが出来るレベルまで持ってきた。…

SwiftでWebViewアプリ

きっかけ Swiftでいろいろアプリを作っているが、なかなか言語が覚えられない。 ネイティブ系のエンジニアではないからかもしれない。 WebViewを使えば、楽できるのではないかと思い、実施に至る。 環境情報 $> SW_VERS ProductName: Mac OS X ProductVersio…

cssファイルの外部化

HTMLへの読み込み方法 linkタグを使って外部ファイルを使う。 <link>-HTML5タグリファレンス 使用例 <link rel="stylesheet" type="text/css" href="${ファイルパス}"> 参考サイト スタイルシート[CSS]/CSSの基本/外部ファイルにまとめて設定する - TAG index</link></link>

Tabulator概要

Tabulator olifolkerd.github.io GitHub - olifolkerd/tabulator: A table generation JQuery UI Plugin 概要 高機能なテーブルが作成できると聞いて、試してみたくなった。 REST-fullなwebページ作成の補助につながる気がしたので、気になった。 あとは、Ex…

Progressive Web Apps の概要

きっかけ HTML5 ConferenceでProgressive Web Appsって単語が出てきたが、単語の意味が分からなかったので、調査した。 HTML5 Conferenceの内容は、下記記事でまとめてある。 suzaku-tec.hatenadiary.jp Progressive Web Apps Progressive Web Appsとは? ウ…

HTML5j Conference 2016 参加報告

公式サイト events.html5j.org 開催概要 公式転用 項目名 内容 イベント名称 HTML5 Conference 開催日時 2016年9月3日(土)10:00 ~ 19:30(予定)(受付開始 9:30) 募集人数 1,600名 対象者 Web開発者、Webデザイナー 会場 東京電機大学 千住キャンパス(…

Pandocを使ったMarkdownからGithub風のHTML作成

環境準備 Pandoc のインストール Releases · jgm/pandoc · GitHub 最新版の Pandoc-x.yy.z-windows.msi をダウンロード&インストール 使い方 基本 pandoc <元となるファイル> -o <出力ファイル> 「-o」は、出力ファイルの拡張子を見て、自動判断してくれるの…

JJUG CCC 2016 Spring 参加報告

公式サイトリンク JJUG CCC 2016 Spring | 日本Javaユーザーグループ 受講セッション 日本Javaユーザーグループ定例総会 GH-1 Type Annotation for Static Program Analysis F-2 Thymeleaf 3 を使ってみよう! AB-3 Javaでつくる技術ドキュメントのバリデー…

CSS3のFlexboxの基礎知識

Flexboxとは? Flexboxとは、柔軟なボックスレイアウトを可能にするCSSの仕様のこと。 正式名称は、「CSS Flexible Box Layout Module」 使い方 cssにdisplay: flex;を設定するだけ。 以下、サンプル。 <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="./test.css"> </head> <body> <nav> <ul class="main-nav"> <li><a href="#" class="logo">Logo</a></li></ul></nav></body></html>