Build an Appointment Scheduler Using React, Twilio and Cosmic

<img src="https://cosmicjs.imgix.net/6bdc0830-967d-11e7-9083-ad5a382c6904-tim-mossholder-174907.jpg" style="width: 100%;" class="fr-fic fr-dib">It is the mission of Cosmic to help development teams build apps faster, and we&#39;re always looking for new ways to speed up the development process. &nbsp;With this goal in mind, we are excited to announce that you can now use all of the Cosmic features in a full demo before signing up for an official Cosmic account. &nbsp;On the signup page you will now see an option to &quot;Skip this step&quot;.<img src="https://www.cosmicjs.com/uploads/6374e3a0-967e-11e7-9083-ad5a382c6904-Screen Shot 2017-09-10 at 6.18.25 PM.png" style="width: 404px; height: 189.88px;" class="fr-fic fr-dib">Add Buckets, Objects, Media and plug your dynamic content into your apps. &nbsp;When you are ready to save your account and save all demo data, simply click the &quot;Save Account&quot; button located in the main nav dropdown.<img src="https://www.cosmicjs.com/uploads/2225d580-967e-11e7-9083-ad5a382c6904-Screen Shot 2017-09-10 at 6.16.26 PM.png" style="width: 300px;" class="fr-fic fr-dib">If you have any questions please <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://www.cosmicjs.com/community">join our Slack community</a>.

Introducing Sign Up Later

<section name="5160"><figure id="b1d7" name="b1d7"><img data-src="https://cdn-images-1.medium.com/max/2000/1*XxAYcVOk8A3lX-3Zg_KAEQ.jpeg" src="https://cdn-images-1.medium.com/max/2000/1*XxAYcVOk8A3lX-3Zg_KAEQ.jpeg" class="fr-fic fr-dii"></figure> A couple of weeks ago I wrote an article about <a href="https://codeburst.io/making-a-dynamic-static-website-with-gulp-what-i-learned-3ae98e012879" rel="nofollow" target="_blank">building a static website with Gulp, and why it&rsquo;s so fantastic</a>,
as well as a couple of things I learned on the way.But one of the things I failed to touch on was how to manage dynamic content with static websites. In a dynamic website, pulling locale data is often taxed with multiple AJAX requests, as well as the time it takes to process the data
being pulled from the remote server.But what if I told you there is a faster, and more optimized way to bundle the language data for your small web-application? And what if, I also told you that you can use a remote Content Management System (CMS), that can manage your website&rsquo;s content?</section><iframe src="https://giphy.com/embed/11fqVcfGb7UU3m" width="100%" height="300" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe><section name="fbcf"><h3 id="cbfc" name="cbfc">Enter Cosmic&nbsp;JS</h3><figure id="56ab" name="56ab"><figcaption>Do you want to know &mdash; what&hellip;. it&hellip;. is?</figcaption></figure><a href="https://www.cosmicjs.com" target="_blank">Cosmic</a>&nbsp;is an API-first CMS system made to help bridge the gap between developers and editors. Unlike WordPress or Drupal, the Cosmic API lives <a href="https://css-tricks.com/what-is-a-headless-cms" rel="noopener noreferrer" target="_blank">independently from your code</a>. This allows it to be implemented in a&nbsp;numerous amount of ways to accomplish an <a href="https://www.cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">awesome amount of things.</a>There are several benefits to this (which you can read in detail about <a href="https://www.cosmicjs.com/why-cms-api" rel="nofollow">here</a>), but the one I will be focusing right now will be the flexibility it can give us when approaching unique challenges.One of these challenges that we can overcome is trying to manage content on a static web-application. Because Cosmic at it&rsquo;s heart uses JSON data to deliver content to your website, we can take advantage of this to filter and embed the content
we need.Let me show you how it&rsquo;s done.</section><section name="9bbb"><h3 id="22e9" name="22e9"> Before we begin&hellip;</h3><figure id="6bcd" name="6bcd"><img data-src="https://cdn-images-1.medium.com/max/1600/1*-tf-L-8oeZROPxgQS-1q3A.png" src="https://cdn-images-1.medium.com/max/1600/1*-tf-L-8oeZROPxgQS-1q3A.png" class="fr-fic fr-dii"><figcaption style="text-align: center;">The Cosmic homepage (as of late 2017)</figcaption> </figure>If you intend on modifying the app content you&rsquo;ll have to <a href="https://www.cosmicjs.com/signup" rel="noopener noreferrer" target="_blank">create a Cosmic account</a>.
They offer free plans that you can use, as well as a 2 week trial to test it out without any restrictions.Regardless, you&rsquo;ll need to have a working development environment with <a href="https://nodejs.org" rel="noopener noreferrer" target="_blank">Node.js and npm installed</a>. We need it in order to run the <code>Gulp</code> build tooling as well as the development server. Once you have both Node.js and npm installed, we can begin working on the demo application.</section><section name="f63f"><h3 id="7836" name="7836">Installing the&nbsp;demo</h3>The demo GitHub project is located at <a href="https://github.com/cosmicjs/static-multi-language-app" rel="noopener noreferrer" target="_blank">cosmicjs/static-multi-language-app</a>. Either clone the repository with <code>git clone</code> or download the project manually using the download button on the repository page.Once the project is downloaded (and extracted if you downloaded an archive), <code>cd</code> into the project directory and then download the project dependencies with the command <code>npm install</code>. Once that is done, you should now be able to
build the project.Before we go through some the project details, build the developmentversion with the command <code>gulp dbuild</code>. The built application should then be available inside the <code>build/</code> directory.</section><section name="ddbe"><h3 id="2f5b" name="2f5b">Running the&nbsp;App</h3><figure id="354f" name="354f"><img data-src="https://cdn-images-1.medium.com/max/2000/1*majgLCowLnV6ODiQdhE65w.png" src="https://cdn-images-1.medium.com/max/2000/1*majgLCowLnV6ODiQdhE65w.png" class="fr-fic fr-dii"><figcaption style="text-align: center;">How the default application should look (set to es-MX)</figcaption> </figure>At this point, you&rsquo;d probably want to run the application locally. To do so, make sure the project is built and start the development server with <code>gulp server</code>. Your default browser should open with the web app, located by accessing <code>localhost:8080</code>on
your web browser.</section><section name="bd45"><h3 id="e307" name="e307">App structure</h3><figure id="687d" name="687d"><img data-src="https://cdn-images-1.medium.com/max/1200/1*kPqGbhJhK5WZ5A2m0BPNhQ.png" src="https://cdn-images-1.medium.com/max/1200/1*kPqGbhJhK5WZ5A2m0BPNhQ.png" class="fr-fic fr-dii"><figcaption style="text-align: center;">The default app structure</figcaption> </figure>The main structure of the application is split into two segments (like many web applications). There is the <code>build/</code> section, which contains the built project files, which also acts as the additional web root for our development server. And the <code>src/</code> section, which contains the source code for the project.Key files in the root project directory include the config.js file, which contains the configuration for both the Cosmic API fetcher script fetch.js, as well as the Gulp build-file gulpfile.js.&nbsp;The file fetch-utils.jscontains a helper function for filtering through specific objects.<blockquote id="638c" name="638c">The fetcher-utils is fairly powerful, and I&rsquo;m considering porting a more robust version to it&rsquo;s own mini npm module. Follow me on <a href="https://twitter.com/flynnbuckingham" rel="noopener noreferrer" target="_blank">Twitter</a> or <a href="https://github.com/flynnham" rel="noopener noreferrer" target="_blank">GitHub</a> if you&rsquo;d like updates about my open source projects.</blockquote>There is also a <a href="https://github.com/cosmicjs/static-multi-language-app/blob/master/README.md" rel="noopener noreferrer" target="_blank">README.md</a> if you&rsquo;d like more detailed explanations and examples of how to take advantage of the API provided in the app.</section><section name="ce12"><h3 id="6fb9" name="6fb9">Setting up for additional content</h3><figure id="fa74" name="fa74"><figcaption>Here is a code snippet from the configuration file config.js:</figcaption><pre class="prism">// The config.js file
module.exports = {
 // Cosmic specific configuration...
 lang: {
 defaultLocale: &#39;en-US&#39;
 },
 fetch: {
 file: &#39;src/cosmic-data.json&#39;,
 cache: false,
 NodeWhiteList: [&#39;locale&#39;, &#39;slug&#39;, &#39;content&#39;],
 NodeAllowedTags: [&#39;a&#39;, &#39;b&#39;, &#39;i&#39;, &#39;only-the-tags-you-want&#39;]
 }
}</pre></figure>The default language loaded by the application is specified in the <code>lang.defaultLocale</code> key, and is <code>en-US</code> by default. This means that it will attempt to load the language locale <code>en-US</code> when the application first loads unless other-wise specified.<figure id="6e6c" name="6e6c"><img data-src="https://cdn-images-1.medium.com/max/2000/1*foZ9pbHK95Jjg9wiGx_K3g.png" src="https://cdn-images-1.medium.com/max/2000/1*foZ9pbHK95Jjg9wiGx_K3g.png" class="fr-fic fr-dii"><figcaption style="text-align: center;">Dashboard &gt; Nodes &mdash; This is what it should look like. </figcaption></figure>If you activated the demo on the Cosmic website, you should already have a bucket populated with Nodes, which are the default type that the application uses. Each Node contains a specific inline string that gets parsed
by fetch.js to be embedded in your application.Creating a new Node with the Cosmic API is fairly simple. To create a new Node, simply click the button on the top right <code>+ Add Node</code>,&nbsp;and it should bring up a fairly simple UI that resembles something
like this:<figure id="2e8f" name="2e8f"><img data-src="https://cdn-images-1.medium.com/max/2000/1*Z1De90_YTd9NTpTFi9dfFQ.png" src="https://cdn-images-1.medium.com/max/2000/1*Z1De90_YTd9NTpTFi9dfFQ.png" class="fr-fic fr-dii"><figcaption style="text-align: center;">The UI for the Node creation interface.</figcaption> </figure>When creating a new Node (for multiple languages) it is best to first select a locale with the <code>Select Locale</code>&nbsp;drop-down. This ensures that your data gets loaded with the correct locale when the app loads.To name the Node, simply type a name into the <code>Node Title</code> field. A <code>Slug</code>field (which will be mentioned again later) should auto-populate as you are creating the Title of the Node. Note that you cannot create a new Node with the same <code>Slug</code>&nbsp;unless the locale is different. This
is to prevent accidental duplicate values within your app.Once that&rsquo;s done, enter in the content you&rsquo;d like your Node to represent. This should be consistent between locales of your app.<figure id="cf8d" name="cf8d"><img data-src="https://cdn-images-1.medium.com/max/2000/1*aen4TZDbxaT8OpFdkP5ntA.png" src="https://cdn-images-1.medium.com/max/2000/1*aen4TZDbxaT8OpFdkP5ntA.png" class="fr-fic fr-dii"><figcaption style="text-align: center;">A sample node.</figcaption> </figure>When done, make sure to publish the Node by clicking the <code>Publish</code>&nbsp;button located at the top right of the page.That&rsquo;s it. You&rsquo;ve created a new Node with the locale specified. For consistency, make sure to repeat this for each locale, so you have a set Node value for the locale specified.So, now that you have all the locales set for a particular slug, you can start including the newly available data into your static web application.To bundle the newly created Node, make sure you have an active internet connection. If you do, then run <code>gulp dbuild</code> or <code>gulp build</code> to fetch and embed the data into the bundle.js file located in <code>build/assets/bundle.js</code></section><section name="7c99"><h3 id="445a" name="445a">Adding static content to the&nbsp;markup</h3>I created two main ways of adding content to your static website. The first is a static method, which involves adding a custom <code>data-cosmic-node</code> attribute to your application. The string value of the attribute should be equivalent to the slug name generated by the Cosmic API.Navigate to the <code>src/html/main.html</code> and replace the default markup of :<pre class="prism">&lt;div class=&quot;app-container&quot;&gt;
 &lt;div class=&quot;cosmic-app&quot;&gt;
 &lt;h2 data-cosmic-node=&quot;button-press-prompt&quot;&gt;&lt;/h2&gt;
 &lt;div&gt;
 &lt;button id=&quot;add-button&quot; class=&quot;cosmic-app-button&quot;&gt;
 &lt;span data-cosmic-node=&quot;add-button&quot;&gt;&lt;/span&gt;
 &lt;/button&gt;
 &lt;button id=&quot;sub-button&quot; class=&quot;cosmic-app-button&quot;&gt;
 &lt;span data-cosmic-node=&quot;sub-button&quot;&gt;&lt;/span&gt;
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;h2 class=&quot;cosmic-app-current-count&quot;&gt;
 &lt;span data-cosmic-node=&quot;current-count&quot;&gt;&lt;/span&gt;
 &lt;span id=&quot;current-count&quot;&gt;&lt;/span&gt;
 &lt;/h2&gt;
 &lt;h3 id=&quot;count-message&quot;&gt;&lt;/h3&gt;
 &lt;/div&gt;
&lt;/div&gt;</pre>With this:<pre class="prism">&lt;div class=&quot;app-container&quot;&gt;
  &lt;h2 data-cosmic-node=&quot;this-is-a-sample-element&quot;&gt;&lt;/h2&gt;
&lt;/div&gt;</pre>Now simply rebuild the application with <code>gulp dbuild</code>. You should now get something that looks like this:<figure id="6556" name="6556"><img data-src="https://cdn-images-1.medium.com/max/2000/1*tKEkf9NSh2W87p7ShJVxLA.png" src="https://cdn-images-1.medium.com/max/2000/1*tKEkf9NSh2W87p7ShJVxLA.png" class="fr-fic fr-dii"><figcaption style="text-align: center;">This is what the updated app should look like.</figcaption> </figure>Assuming you made a Node for the locales appropriate for your app, you should see the contents of the element update whenever you switch locales. This is done through a element caching technique that searches the DOM for elements with the attribute data-cosmic-node,
and will attempt to each one with the matching language value (if it exists).</section><section name="d3ff"><h3 id="6b12" name="6b12">Adding dynamic content to your app</h3><iframe src="https://giphy.com/embed/fSMryuuE9QsBG" width="100%" height="288" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe>Obviously, a static implementation alone is not enough for a useful web app, and being somewhat seasoned in this area I knew exactly what needed to be done.I created a minimal language API for the application located at <code>src/js/lang.js</code>. It is not only responsible for caching and updating elements when the language changes, but it also provides methods that allows developers to manually get stored
language strings, as well as execute custom events whenever the language locale successfully changes.The documentation as well as a working implementation can be found within the demo itself (at <code>src/js/main.js</code>), in addition to the <a href="https://github.com/cosmicjs/static-multi-language-app/blob/master/README.md" rel="noopener noreferrer" target="_blank">README.md</a> file.But in case you&rsquo;d rather me explain it here, this is the simple rundown of methods that will help you manage locale state in the application.<h4 id="a755" name="a755"> CosmicLanguage.getString</h4>The method <code>CosmicLangauge.getString</code>method does exactly what it sounds like. It attempts to fetch a specific value of a Node from the stored content. If found, it will return the filtered HTML content for the currently selected
locale.Here is an example of the method at work at work inside of a closure:So, you can potentially loop this method, conditionally rendering different Node values depending on the conditions set forth by your logic. But as you may have figured, what would happen in the event that the locale changes throughout the app?<h4 name="1c8c"> </h4><h4 id="1c8c" name="1c8c">CosmicLanguage.addUpdateEvent</h4>As the name probably suggests, this is an event handler. Whenever a locale change event is invoked (via the <a href="https://github.com/cosmicjs/static-multi-language-app#static-content" rel="noopener noreferrer" target="_blank">loadFromLocale</a>&nbsp;method), an additional array of event handlers are also fired. These are bound with the aforementioned <a href="https://github.com/cosmicjs/static-multi-language-app#updating-the-language-and-rendering-events" rel="noopener noreferrer" target="_blank">addUpdateEvent</a>.<figure id="45fe" name="45fe"><figcaption>A simple example of the event handler in action.</figcaption></figure>While simple in practice, you&rsquo;ll most likely need this if you plan on setting any sort of dynamic multi-language content within your web app.&nbsp;<blockquote id="b637" name="b637"><a href="https://github.com/cosmicjs/static-multi-language-app/blob/master/src/js/main.js" rel="noopener noreferrer" target="_blank">The example on the official repository shows a slightly more advanced means of managing the content of an Element based on state</a>. I&rsquo;d recommenced that you go check it out to get a better feel of how to implement
the event.</blockquote></section><section name="4a4f"><h3 id="39ef" name="39ef">In closing&hellip;</h3>I could go on about the multiple ways to implement the mini language API I made. But the best way to learn is to simply throw yourself at it, and learn it at your own pace. Go ahead and try it out!Personally, I really enjoyed writing the language API. It felt cool to accomplish something new, and provide a means to help other developers build their own applications.</section>

How to Build a Multi-Language Static Website Without AJAX

We&#39;re excited to announce that we&#39;ve rolled out a new feature for users whose Buckets have a large number of Objects: Object Pagination. Instead of having to scroll indefinitely through a section of Objects, we&#39;ve added Pagination to the bottom of each page to help you navigate and more effectively manage your content within your Bucket.&nbsp;<img src="https://www.cosmicjs.com/uploads/f0145a30-8f2f-11e7-b19d-959437bbab39-wcN7SR6LI5.gif" style="width: 100%;" class="fr-fic fr-dib">This is another Community-requested feature to help you and your team Build Apps Faster. &nbsp;If you have any questions, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">connect with us on Twitter</a> and join other members of our Community in conversation on <a href="https://www.cosmicjs.com/community">our Slack channel</a>.

New Feature: Object Pagination

How to Build a Portfolio Platform App Using AngularJS

We&#39;re excited to announce you now have the ability to add metadata to your Bucket Media. &nbsp;It&#39;s easy and just takes a couple steps: 1. Go to the Media area in your Bucket located in Your Bucket Dashboard &gt; Media. &nbsp;Hover over the Media that you want to add metadata to and click &quot;Add Metadata&quot;. <img src="https://www.cosmicjs.com/uploads/6c37d590-8910-11e7-85fa-19e32a3becc0-media-metadata-table.png" style="width: 100%;" class="fr-fic fr-dib"> 2. Add your key / values to the Media and click &quot;Save Metadata&quot;.<img src="https://www.cosmicjs.com/uploads/74d3d050-8910-11e7-8fce-5f5cf6d6a606-media-metadata-modal.png" style="width: 100%;" class="fr-fic fr-dib"> 3. Your Media now has the metadata available via the media endpoint. <img src="https://www.cosmicjs.com/uploads/81593a40-8910-11e7-85fa-19e32a3becc0-media-metadata-api.png" style="width: 100%;" class="fr-fic fr-dib"> This is another Community-requested feature to help you and your team Build Apps Faster. &nbsp;If you have any questions, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">connect with us on Twitter</a> and join other members of our Community in conversation on <a href="https://www.cosmicjs.com/community">our Slack channel</a>.

New Feature: Media Metadata

You now have the ability to schedule your Objects for automatic publishing at a later date and time. &nbsp;You will notice next to the &quot;Publish&quot; button there is now a calendar button. &nbsp;Select your preferred publish date and time, then click Save Draft and your Object will be scheduled to publish automatically. <img src="https://www.cosmicjs.com/uploads/baf5ccb0-8833-11e7-b9c1-7769b7341ac1-publish-later.gif" style="width: 100%;" class="fr-fic fr-dib"> If you have any questions about this new feature, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and join the conversation with the Cosmic Community on <a href="https://www.cosmicjs.com/community">our Slack channel</a>.

New Feature: Scheduled Publishing

How to Build a Sticky Notes App Using React and Redux

<img src="https://cosmicjs.imgix.net/3d466850-868b-11e7-bf73-e3d192676a6d-joshua-fuller-328300.jpg" style="width: 100%;" class="fr-fic fr-dib">We&#39;re always trying to make the process of editing content easier. &nbsp;We just released an update that makes editing your content in your Cosmic Dashboard easier on the eyes. &nbsp;One of the goals of the update was to make the Object edit view design look less busy.&nbsp; Here&#39;s the old Object edit view: <img src="https://www.cosmicjs.com/uploads/3a63ad00-8686-11e7-993a-ad9fd34fbda3-Screen Shot 2017-08-21 at 10.34.05 AM.png" style="width: 100%;" class="fr-fic fr-dib"> Here&#39;s the new Object edit view: <img src="https://www.cosmicjs.com/uploads/a8c9cfa0-8685-11e7-993a-ad9fd34fbda3-bucket-design-updates.png" style="width: 100%;" class="fr-fic fr-dib"> A couple things we did to achieve this:1. We added more space to help the editing area &quot;breathe&quot;. 2. We removed the border around inputs and replaced them with a background color. &nbsp;This removed a lot of horizontal lines which were a distraction in the previous design. 3. We added more emphasis to the title as this is the only required field.We&#39;ve also applied this &quot;card&quot; style to the rest of the Bucket Dashboard pages. &nbsp;It is our hope that this design update will give you a more delightful experience as you manage content for your websites and apps using Cosmic.If you have any questions or comments on the updates please <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://www.cosmicjs.com/community">join our Slack community</a>.

Start building today