【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る - Qiita
【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作るMarkdownVisualStudioCodeDraw.ioMarpvega TL;DR Visual Studio Code上で、Markdownから、こんな感じのデッキを生成できるようにします。 使用したファイル類は、GitHub tomo-makes/marp-styles にまとめました。 きっかけ 叩き台となる資料がなく、急ぎプレゼンをする機会があり、Marpで作成した 内輪では使っていたが、多くの目に触れるのは初めてで、もう少しデザインを調整したいと思った 今後も使いまわせるものを、スニペット、およびサンプルテーマ化しておこうと思い立った ついでにいろいろな図表の生成とデッキへの入れ方、必要そうな配色、素材のリンクをまとめておきたい Marpとは Marp: Markdown
visual studio codeにおけるMarpの使い方
Marpはマークダウン記法を使用してプレゼンテーションスライドを簡単に作成できるツールである。ルールを守れば既存のマークダウンファイルをスライド形式で表示することが可能。 visual studio code上でMarpを使うための拡張機能が提供されており簡単に使用することができる。 拡張機能のインストール まずは以下から拡張機能をインストール 以降でmdファイルをMarpとして記述するための記法について説明する。 マークダウンファイルをMarpとして認識させる mdファイルの1行目に以下を追記する。 上記の記述がMarpとして認識させるフラグとなる。 フラグを立てた状態でvs codeデフォルトのマークダウンプレビューで表示すると、 スライド形式で表示される。falseにすることで通常のmdファイルプレビューに簡単に切り替えることができる。 スライド区切り ---でスライドを区切ることが
2023年モダンCSSの最新トレンド
Demo https://codepen.io/tonkotsuboy/pen/JjmYWmw レスポンシブ対応で、 画像の縦横比を変えたい aspect-ratio いろんなアスペクト比で画像を表示したい アスペクト比とは 従来: padding ハック .box::before { content: ""; display: block; padding-top: calc(100% * 9 / 16); /* 56.25% */ } @media (width <= 500px) { .box::before { padding-top: calc(100% * 3 / 4); } } 現在: aspect-ratio プロパティ .item { aspect-ratio: 16 / 9; } @media (width <= 500px) { .item { aspect-rati
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
テストの自動化とテスト駆動開発
組織としてテスト自動化に取り組むべき理由と、手段としてのテスト駆動開発を紹介する講演資料です。以下のような内容です。 ねらい： ・主に顧客向けの業務システム(B2B)を開発している、 ・プロジェクトベース、ウォーターフォールプロセスが主流の開発現場や運用保守の現場にいる、 ・マネージャーのかたに向け、 ・テスト自動化が自分たちのメリットになると納得してもらい、 ・その道筋として2つのアプローチを紹介して、 - テスト駆動開発 - ペアプログラミング ・組織的・長期的に取り組む価値を感じてもらう アジェンダ: 1.自動化したい理由 2.必要な人材を考える 3.テスト自動化の端緒 ～テスト駆動開発について～ 4.深めつつ広げる鍵 ～ペアプログラミングについて～ 5.見る夢について
ベイジ社内勉強会資料：コロナショックから学べること
冨山和彦さんの『コロナショック・サバイバルー日本経済復興計画』を参考に、個人的な考え・解釈を加味し、社内の若いスタッフにも学びが得られるようまとめた、社内勉強会用のスライドです。原著には書かれてない、そこからは逸脱した話も含まれています。詳しくは原著をお読みください。
20190725-vuejs-application-testing-with-why
Yusuke Iinuma Working at GMO Pepabo, Inc.A staff of Vue.js Japan User Group おしながき発表のゴール現場のVue.jsアプリなぜテストを書くのかテストを書く理由と対応投資対効果のいいテストをする指針まとめ発表のゴール現場のVue.jsアプリなぜテストを書くのかテストを書く理由と対応投資対効果のいいテストをする指針まとめ発表の対象者 テスティングフレームワークなどのツールの使い方はわかるが、 実際の開発でどのように使えばいいのか悩んでる人 🎊 現場に合ったテストについて考えるきっかけになれば 🎊話すこと テストはなぜ必要なのかテストするときの指針の紹介現場で行ってるテストの事例話さないこと コードレベルでのテスト実装方法発表のゴール現場のVue.jsアプリなぜテストを書くのかテストを書く理由と対応投資対効果のいいテ
Headless CMS - Qiita
グラフィカルユーザインタフェースなしで デバイス上で動作することができるソフトウェアである。 このようなソフトウェアは、入力を受け取り、 ネットワークなどを介して出力を提供します。 Wikipedia - Headless software ※ https://en.wikipedia.org/wiki/Headless_software Headless CMSとは （ デカップルドアーキテクチャとも言われる ） 言葉から推測すると ※VIEWなどのプレゼンテーション機能なし 利用されている場所 CMSを提供するアプリで積極的に推進 Plone (Python) Drupal (PHP) WordPress (PHP) など Headless CMSの実現 ・ フロントエンドとバックエンドの分離 (decouple) ・ REST API準拠のストレージバックエンドの作成 (APIファー
処理の共通化とコンポーネントの分割/分類/粒度について
じまぐ @nakajmg Frontend Engineer at PixelGrid Inc. + 副業 （元DMM.comラボ 7年前？
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさらです。 直近のプロジェクトはまさにそんなプロジェクトでした。 本セッションではアトミックデザインのエッセンスを用いてコンポーネント分割の指針を示し、 またコンポーネント実装時に注意すべき事柄についてお話します # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib
GitHubだけで超高機能なスライド資料が作れる「GitPitch」の使い方を徹底解説！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上のGitHubでMarkdown（マークダウン）ファイルを作成し、そのまま超高機能なスライド資料に変換してくれるサービスのご紹介です！ もちろん、自分でMarkdownファイルを用意してpushするだけでもOKなのですが、今回はコンソール画面などは使わずにすべてブラウザだけで完結できる方法をご紹介致します。 【 GitPitch 】 ■「GitPitch」の基本的な使い方！ それでは、実際に簡単なスライド資料を作ってみましょう！ まず最初に、自分のGitHubアカウントでログインし、新規のリポジトリを作成しましょう！ 「① リポジトリ名」は好きな名前を付けてください。 画面下にある「② チェックボックス」をONにしてから「③ Create repository」ボタンをクリックしましょう。 すると、自動的に「README.md
フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-
フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-
使い倒そう Visual Studio Code!!! ~ここからはじめる基本のキ~
はじめてのAzure Web App for Containers! �-コンテナの基礎から DevOps 環境の構築まで-
プレゼンスライドに関してのアレコレ：「だんだん文字を抜いていく」｜鷹野 雅弘
いわゆるフラッシュプレゼン（*）のスライドの作成においては「文字を抜いていく」という意識が不可欠。サンプルで解説してみます。 セリフ（口頭で話す内容）をそのまま記入した例スライド内のテキストボックス内に自動折り返しで文字を入力しただけの状態。 これを、グラフィックデザインでは「ナリユキ」といいます。この場合だと「好きなのは」というカタマリが分断されてしまうので、読むスピード（＝理解のスピード）が落ちてしまいます。 プレゼンのスライドは、ある意味、すべてがキャッチコピー。 「読んでから理解する」のではなく、ポスターのように一瞬で「すっと入ってくる」ようにするためには、改行のケアが不可欠です。 なお、行間も調整されていないため、上下の行が、つながっているのか、別のアイテムなのか、「パッと見」で判断できません。 ナリユキをやめて文節で改行ナリユキをやめて、文節で改行した例です。行間も調整していま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ふつうのプログラマのふつうの設計
Slidev
ユーザーを中心に考えながら事業目標にもしっかりコミットするための
チームづくり
[Japanese] Vue 3.0 Updates @ VueFes Japan![[Japanese] Vue 3.0 Updates @ VueFes Japan](https://cdn-ak-scissors.b.st-hatena.com/image/square/20892113a9ee6fb6e44b30d005a6e7c8a1dcc048/height=288;version=1;width=512/https%3A%2F%2Flh7-us.googleusercontent.com%2Fdocs%2FAHkbwyIU3NewHyXj6XiJpAsf2nJXjGPggexUqOEFojsCuPGFOGzYnvOrHWHTSIcfdnPG_Q4cvIkuVq7horz_6I5k3mC72b3EYgaadzxHZnjt1i4n4cjlgeA%3Dw1200-h630-p)
エンジニアのためのスライドデザイン実践講座 / How to design presentations for engineers
スライド作成のチェックポイント / WordCamp Ogijima 2018 slideguide_jp
