<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: npx hiroppy😶</title>
    <description>The latest articles on Forem by npx hiroppy😶 (@about_hiroppy).</description>
    <link>https://forem.com/about_hiroppy</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F73454%2F83a74ab8-6055-4b13-ae5a-4c4b4b333e92.GIF</url>
      <title>Forem: npx hiroppy😶</title>
      <link>https://forem.com/about_hiroppy</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/about_hiroppy"/>
    <language>en</language>
    <item>
      <title>Fusuma which can create slides with MarkDown easily has been released.🎉</title>
      <dc:creator>npx hiroppy😶</dc:creator>
      <pubDate>Wed, 08 May 2019 23:43:26 +0000</pubDate>
      <link>https://forem.com/about_hiroppy/fusuma-which-can-create-slides-with-markdown-easily-has-been-released-3ii</link>
      <guid>https://forem.com/about_hiroppy/fusuma-which-can-create-slides-with-markdown-easily-has-been-released-3ii</guid>
      <description>

&lt;p&gt;&lt;a href="https://github.com/hiroppy/fusuma" rel="noopener noreferrer"&gt;hiroppy/fusuma&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Fusuma?
&lt;/h2&gt;

&lt;p&gt;Fusuma is a CLI providing development environment, production build, deploying, exporting as PDF, and etc.&lt;br&gt;
fusuma is a bridge which converts MarkDown to HTML, also it wraps configure(e.g. babel, webpack) like create-react-app.&lt;/p&gt;
&lt;h2&gt;
  
  
  Features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Development environment (webpack-dev-server)&lt;/li&gt;
&lt;li&gt;Production environment (including optimization)&lt;/li&gt;
&lt;li&gt;Deploys to GitHub Pages&lt;/li&gt;
&lt;li&gt;Exports as PDF&lt;/li&gt;
&lt;li&gt;Supports for SNS and OGP&lt;/li&gt;
&lt;li&gt;Presenter mode&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can get cool slides just doing the following.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;npm i fusuma &lt;span class="nt"&gt;-D&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;npx fusuma init
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;mkdir &lt;/span&gt;slides &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s1"&gt;'# Hello😄'&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; slides/title.md
&lt;span class="nv"&gt;$ &lt;/span&gt;npx fusuma build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fubjrrbrqlmz8bgqi38bm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fubjrrbrqlmz8bgqi38bm.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;just write in MarkDown and execute with CLI😍&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Slide Library
&lt;/h2&gt;

&lt;p&gt;Fusuma uses WebSlides which have many components and css-classes and so beautiful.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://webslides.tv/#slide=1" rel="noopener noreferrer"&gt;WebSlides - Making HTML Presentations Easy&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Please see the sample slides.😍&lt;br&gt;
Also, you can overwrite WebSlides's CSS.&lt;/p&gt;
&lt;h2&gt;
  
  
  Writing in MarkDown
&lt;/h2&gt;

&lt;p&gt;If you write below, you'll get slides which have 2 pages.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gu"&gt;## First Slide&lt;/span&gt;
Hi!
&lt;span class="p"&gt;-&lt;/span&gt; -
&lt;span class="gu"&gt;## Second Slide&lt;/span&gt;
Hi!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Expansion
&lt;/h2&gt;

&lt;p&gt;You can extend JavaScript and CSS to overwrite WebSlides.&lt;/p&gt;

&lt;h2&gt;
  
  
  Presenter Mode
&lt;/h2&gt;

&lt;p&gt;Fusuma has the mode for presenters. The image below is for presenters.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fuf4oa81lhfotar0q7536.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fuf4oa81lhfotar0q7536.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Fusuma is compatible with &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API" rel="noopener noreferrer"&gt;Presentation API&lt;/a&gt;, but you can also use this mode if you use browsers which don't have Presentation API because Fusuma can fallback to using localstrage.&lt;/p&gt;

&lt;h3&gt;
  
  
  Presenter Note
&lt;/h3&gt;

&lt;p&gt;If you write on the slide as follows, you can see this as the note.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&amp;lt;!-- note
Hi!
--&amp;gt;

&lt;span class="gu"&gt;## Hello😁&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Sample Slide and Repository
&lt;/h2&gt;

&lt;p&gt;slide: &lt;a href="https://hiroppy.github.io/fusuma/intro" rel="noopener noreferrer"&gt;https://hiroppy.github.io/fusuma/intro&lt;/a&gt;&lt;br&gt;
repo: &lt;a href="https://github.com/hiroppy/fusuma/tree/master/samples/intro" rel="noopener noreferrer"&gt;https://github.com/hiroppy/fusuma/tree/master/samples/intro&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;I think that Fusuma is useful when you want to create slides quickly.✨&lt;/p&gt;

&lt;p&gt;Enjoy😍&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>slide</category>
      <category>react</category>
      <category>markdown</category>
    </item>
  </channel>
</rss>
