cupper-hugo-theme/docs/patterns/coding/index.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Coding on Cupper</title>
    <link>https://thepaciellogroup.github.io/cupper/patterns/coding/</link>
    <description>Recent content in Coding on Cupper</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>en-us</language>
    
	<atom:link href="https://thepaciellogroup.github.io/cupper/patterns/coding/index.xml" rel="self" type="application/rss+xml" />
    
    
    <item>
      <title>Code blocks</title>
      <link>https://thepaciellogroup.github.io/cupper/patterns/coding/code-blocks/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://thepaciellogroup.github.io/cupper/patterns/coding/code-blocks/</guid>
      <description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Cupper will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
So, this&amp;hellip;
```html &amp;lt;button aria-pressed=&#34;false&#34;toggle me&amp;lt;/button ```  &amp;hellip; will result in this:
&amp;lt;button aria-pressed=&amp;quot;false&amp;quot;&amp;gt;toggle me&amp;lt;/button&amp;gt;  Note that the syntax highlighting uses a greyscale theme. Cupper is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.</description>
    </item>
    
    <item>
      <title>Demo embedding</title>
      <link>https://thepaciellogroup.github.io/cupper/patterns/coding/demo-embedding/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://thepaciellogroup.github.io/cupper/patterns/coding/demo-embedding/</guid>
      <description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
CodePen Cupper offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
&amp;#x7b;{% codePen VpVNKW %}}  This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
    </item>
    
    <item>
      <title>Writing inline demos</title>
      <link>https://thepaciellogroup.github.io/cupper/patterns/coding/writing-inline-demos/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://thepaciellogroup.github.io/cupper/patterns/coding/writing-inline-demos/</guid>
      <description>There are some issues with  Demo embedding, like the embeds not working offline. They also come with their own branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
Cupper offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
    </item>
    
    <item>
      <title>Color palettes</title>
      <link>https://thepaciellogroup.github.io/cupper/patterns/coding/color-palettes/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://thepaciellogroup.github.io/cupper/patterns/coding/color-palettes/</guid>
      <description>There&amp;rsquo;s no reason why your Cupper-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
&amp;#x7b;{% colors &#34;#111111, #cccccc, #ffffff&#34; %}}  The result is a one row strip showing each color supplied in order. The colors for Cupper are greyscale:</description>
    </item>
    
    <item>
      <title>Command line</title>
      <link>https://thepaciellogroup.github.io/cupper/patterns/coding/command-line/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://thepaciellogroup.github.io/cupper/patterns/coding/command-line/</guid>
      <description>Your pattern documentation may need to include commands for installing packages or using CLIs. Cupper offers the cmd shortcode for making code blocks look like terminal commands.
Here&amp;rsquo;s how you write it:
&amp;#x7b;{&amp;lt;cmd}} npm run start &amp;#x7b;{&amp;lt;/cmd}}  And here&amp;rsquo;s how it looks:
npm run start    The cmd shortcode currently only supports single commands. If you want to show multiple, successive commands use separate cmd blocks.
  </description>
    </item>
    
    <item>
      <title>File trees</title>
      <link>https://thepaciellogroup.github.io/cupper/patterns/coding/file-trees/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://thepaciellogroup.github.io/cupper/patterns/coding/file-trees/</guid>
      <description>Representing folder/file structures is simple and accessible in Cupper. Which is just as well, because some components may need to conform to a certain folder structure.
The file tree is described using a markdown nested list structure:
&amp;#x7b;{% fileTree %}} * Level 1 folder * Level 2 file * Level 2 folder * Level 3 file * Level 3 folder * Level 4 file * Level 3 folder * Level 4 file * Level 4 file * Level 3 file * Level 2 folder * Level 3 file * Level 3 file * Level 3 file * Level 2 file * Level 1 file &amp;#x7b;{% /fileTree %}}  This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers:</description>
    </item>
    
    <item>
      <title>Tested using...</title>
      <link>https://thepaciellogroup.github.io/cupper/patterns/coding/tested/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://thepaciellogroup.github.io/cupper/patterns/coding/tested/</guid>
      <description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.
Cupper provided a tested shortcode that lets you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs.
&amp;#x7b;{% tested using=&#34;Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge&#34; %}}  This outputs:</description>
    </item>
    
  </channel>
</rss>