<img src="https://cosmicjs.imgix.net/573585d0-9d41-11e7-9022-cf144d5fea2d-goran-ivos-307271.jpg" style="width: 100%;" class="fr-fic fr-dib">We are excited to announce our Developer Program (in private beta) which gives developers the opportunity to join us in our mission to help others build apps faster using Cosmic. If you would like to contribute <a href="https://www.cosmicjs.com/apps">Apps</a>, <a href="https://www.cosmicjs.com/extensions">Extensions</a> and <a href="https://www.cosmicjs.com/blog">Articles</a> to help others learn and build using Cosmic, you can request access to join the Developer Program in Your Account Settings &gt; Developer Dashboard area. &nbsp;Once added to our developer community, you will be able to contribute content to show off the cool things you can build using Cosmic and get compensated for quality contributions. &nbsp;More active developers will have the opportunity to work on various projects that come our way. We look forward to seeing what you build and learning about how you build apps faster using Cosmic! &nbsp;For more information, please reach out to us in <a href="https://www.cosmicjs.com/community">our Slack community</a>, <a href="https://twitter.com/cosmic_js">on Twitter</a>, or by emailing us at <a href="mailto:build@cosmicjs.com">build@cosmicjs.com</a>.

Introducing the Developer Program

<img src="https://cosmicjs.imgix.net/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png" style="width: 100%;" class="fr-fic fr-dib"> In this <a href="https://www.cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> Developer Spotlight, we sat down with Ben Packer, a web developer who focused on natural language processing prior to turning his talents toward web development for non-profit initiatives. Ben serves as the Director of Technology for <a href="https://brandnewcongress.org" rel="noopener noreferrer" target="_blank">Brand New Congress</a>, an initiative aiming to elect 535 new members of Congress. &nbsp;Check him out on <a href="https://twitter.com/ben_pr_packer" rel="noopener noreferrer" target="_blank">Twitter</a> or <a href="https://www.linkedin.com/in/benpaulryanpacker/" rel="noopener noreferrer" target="_blank">LinkedIn</a>, and enjoy the Q/A. How long have you been building software? I&#39;ve been programming for 4 years now, but only full-time professionally for 3 months since I graduated college. I&#39;ve done a bit of everything, previously focusing on natural language processing before turning to web development. What is your preferred development stack? I&#39;ve used lots of MERN (MongoDB, Express, React, Node), but have recently made the switch to Elixir + Phoenix + Postgres, which is what I&#39;ve done all of my Cosmic based development with. Despite the JS in the Cosmic name, Elixir&#39;s been a great fit due to its built-in in-memory storage solution, called &quot;ets&quot; (Erlang Term Storage). This, combined with Cosmic&#39;s web-hooks, has let me serve Cosmic-based pages very quickly out of a cache without managing a separate external Redis or Memcached instance. You can find our Elixir Cosmic wrapper and cache solution <a href="https://github.com/BrandNewCongress/cosmic_ex">here</a>. What past projects are you most proud of and why? My work with <a href="https://brandnewcongress.org" rel="noopener noreferrer" target="_blank">Brand New Congress</a> and <a href="https://justicedemocrats.com" rel="noopener noreferrer" target="_blank">Justice Democrats</a> has been building the tools required to effectively run a large scale and modern grassroots political campaign. I feel very fortunate that I get to focus and do this political work full-time, rather than volunteer and split my headspace as many developers do. Before working with Brand New Congress and Justice Democrats, I developed an open source online meeting platform called <a href="https://github.com/ben-pr-p/assemble" rel="noopener noreferrer" target="_blank">assemble</a>, which uses WebRTC technology to bring the experience of breakout groups common in physical meetings to your browser. Talk a little bit more about your process for building apps. How is building apps for political or idealogical causes different than other client work? I&#39;m also very happy that I&#39;m able to develop all of these solutions in the open with an A-GPL license attached. Once our tools are mature and ready to be re-purposed, we&#39;ll have reduced the costs of running grassroots political campaigns for other organizations and future campaigns, who will be able to self-host what we&#39;ve developed at a fraction of the cost of traditional campaign software services. What are some technologies you are excited about that you are using today, or want to learn more about? Cosmic has made it much easier for me to enable the non-programming parts of our organization to configure the software I make, and to edit the content on our websites. Our use of it has evolved beyond a CMS to a general admin interface &ndash; we use it to <a href="https://github.com/BrandNewCongress/cosmic-shortener">manage a url shortener</a>, as a user whitelist for internal tools, to specify changing webhooks, etc. With Cosmic, after I recognize that a particular component of our website or process will need to change, I can implement a mechanism for that component to be edited or configured in a matter of minutes.I don&#39;t think that development for political causes is too different than more typical development &ndash; we move quickly, things break sometimes, etc. What may be different is that we have volunteers who contribute their own amount of time and/or expertise. If you have experience with Elixir, React, Node.js, or setting up AWS-based workflows and you want to help elect a congress full of individuals who support medicare for all, massive investment in our infrastructure and renewable energy, and refuse to take corporate money, send me an email at <a href="mailto:ben@justicedemocrats.com">ben@justicedemocrats.com</a> and we&#39;ll find the best way for you to help.Our internal tools are built using React, Ant.Design (a React UI toolkit), and communicate with our server over Phoenix Channels (websockets), creating a snappy user experience. Staff members and volunteers will end up spending a lot of their time in these tools, contacting our supporters, managing events, etc., and so it&#39;s important that they&#39;re performant, with as few pain points as possible.For our world facing websites, I&#39;d like to bring as much of the new web as I can to the political space. A lot of the things we&#39;re encouraging supporters to do are collective action problems &ndash; individually ineffective, but collectively powerful, and it&#39;s one&#39;s belief that you&#39;re all working alongside others that gives you the confidence to try. However, people are also overworked and worried about the future, including not only the future of our political system but also their next two weeks.So, it&#39;s my hope that in the coming months we&#39;ll be able to design experiences that not only inspire a sense of participation and belonging in collective political action, but that we&#39;ll be able to deliver those experiences while you&#39;re riding a bus and surfing the web on your friend&#39;s old Android phone.To learn how you can contribute Apps, Articles and Extensions to the <a href="https://www.cosmicjs.com/community" rel="noopener noreferrer" target="_blank">Cosmic Community</a>, contact us at <a href="mailto:support@cosmicjs.com">support@cosmicjs.com</a>.

Developer Spotlight: Ben Packer

<img src="https://www.cosmicjs.com/uploads/16fabe30-9a1d-11e7-8074-299a9406903d-web-design-and-development.jpg" style="width: 100%;" class="fr-fic fr-dib">In our latest installment of the <a href="https://www.cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> Developer Spotlight Series, we sat down with Matt Cain, a web developer who took a physics undergrad and spring-boarded into the world of Java, Rails and ultimately, programming language agnostic APIs. In addition to his day job of being a web application developer and writing code, Matt is a <a href="https://www.cosmicjs.com/community" rel="noopener noreferrer" target="_blank">Cosmic Contributor</a> and responsible for several apps and blogs in our ecosystem. Check him out on his <a href="http://mattcain.io/" rel="noopener noreferrer" target="_blank">portfolio site</a> or <a href="https://www.linkedin.com/in/mattcainpgh/" rel="noopener noreferrer" target="_blank">LinkedIn</a>, and enjoy the Q/A. How long have you been building software? I&#39;ve been seriously building software for about a year. When I was a kid I liked to play around building static sites in Frontpage (the good old days) but moved away from it. Still, I continued to follow the web development world in the background and about a year ago, around last October, I decided to dive in and get my hands dirty. With the Java and <a href="https://www.cosmicjs.com/knowledge-base/python-cms" rel="noopener noreferrer" target="_blank">Python</a> skills I picked up from my physics undergrad I was able to pick up <a href="https://www.cosmicjs.com/knowledge-base/javascript-cms" rel="noopener noreferrer" target="_blank">JavaScript</a> and <a href="https://www.cosmicjs.com/knowledge-base/ruby-on-rails-cms" rel="noopener noreferrer" target="_blank">Rails</a> pretty quickly and started working with &nbsp;their respective frameworks. What is your preferred development stack? I love full stack <a href="https://www.cosmicjs.com/knowledge-base/javascript-cms" rel="noopener noreferrer" target="_blank">JavaScript</a> with NoSQL. I love language agnostic APIs. If I can get away with it, I prefer using services like <a href="https://www.cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> as a database rather than something like MongoDB. I realize there are flaws inherent to those preferences but I&#39;m typically working by myself or in small teams, so keeping code in one language and data remote really reduces cognitive strain. What past projects are you most proud of and why? I always like to say my first real project is my favorite. I had spent a couple weeks learning Rails and some fundamental CS stuff and really wanted to build my own app. So I decided on a map data visualization app. I used Rails, jQuery, and hosted the maps with MapBox and basically learned everything as I went. The code&#39;s sloppy, it doesn&#39;t look great, but it was something that made me proud and encouraged me to keep going. Check the live website out here: <a href="http://pghmaps.mattcain.io/" rel="noopener noreferrer" target="_blank">http://pghmaps.mattcain.io/</a>. &nbsp;More recently, I was pretty satisfied with the <a href="https://www.cosmicjs.com/apps/premium-content-blog" rel="noopener noreferrer" target="_blank">Premium User Blog app</a> I built for <a href="https://www.cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>. Talk a little bit more about your process for building apps, who they&#39;re for, and how Cosmic has helped.&nbsp; I&#39;ve been building a lot of small apps and prototypes for mostly small businesses and entrepreneuers. So I like to deliver things fast. <a href="https://www.cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> being essentially a simple to use, one-stop-shop for everything I need to deploy is a blessing. What are some technologies you are excited about that you are using today, or want to learn more about? I&#39;m excited about using PWA&#39;s and integrating bots in sites more. I&#39;m very much looking foward to where AR goes.To learn how you can contribute Apps, Articles and Extensions to the <a href="https://www.cosmicjs.com/community" rel="noopener noreferrer" target="_blank">Cosmic Community</a>, contact us at <a href="mailto:support@cosmicjs.com">support@cosmicjs.com</a>.

Developer Spotlight: Matt Cain

In our latest installment of the <a href="https://www.cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> Developer Spotlight Series, we sat down with Garrett Sibinga, a web application designer and developer focusing on HTML, CSS and JavaScript. In addition to designing and writing code, Garrett travels and actually wrote this piece from a cafe on a ferry on the North Sea (pictured below). Check him out on his site <a href="http://garrett.is/" target="_blank">Garrett.is</a> or <a href="https://www.linkedin.com/in/jgsibinga/" rel="noopener noreferrer" target="_blank">LinkedIn</a>, and enjoy the Q/A.<img src="https://www.cosmicjs.com/uploads/92020f30-9963-11e7-bb10-1d2d57c848bf-unnamed.jpg" style="width: 100%;" class="fr-fic fr-dib"> How long have you been developing software? I&#39;ve been working in web development since 2013, so four years now. In most industries this isn&#39;t a whole lot of time, but when I think about some of the web technologies that we were excited about in 2013 I can&#39;t believe how outdated they sound. It&#39;s a landscape that is constantly changing, and with the exception of a few things the industry basically rewrites itself every few years. What drew you to Cosmic? Well, I think it was sort of precisely this thing -- the necessity for a certain amount of flexibility in an industry where the only thing that is certain is change. A programming language agnostic CMS seemed like a really appealing idea. I think I&#39;ve always sort of thought of myself as a language agnostic developer. It&#39;s not that I don&#39;t read certain languages better or feel more comfortable writing with the syntax of some languages, but I think as a general approach it is best not to get too attached. That&#39;s why I love the idea of a platform that works with a wide range of languages, where you can use the best languages or libraries depending on the project. What is your preferred development stack? I started out programming in Java, learned Python for some courses and projects I took on, picked up some Ruby along the way, and worked with a MAMP stack with WordPress for a while. Even if you fall in love with a language there are no guarantees that it will be widely used in 2 years, or even 2 months. I think you learn to adapt as a developer, and these experiences add to your baseline for learning and understanding new languages. It&#39;s all part of an exercise improving your code literacy in my view. I&#39;m new to Node.js, but I&#39;ve really been enjoying the flexibility and speed that it allows so far, and look forward to seeing where this new adventure leads. What projects are you most proud of and why? For development projects, I built a world clock app that used the Flickr API to pull images based on your location. It is part of an art piece which has showed at a couple of museums, and just closed out a show at the <a href="http://cphco.org/en/" rel="noopener noreferrer" target="_blank">Copenhagen Contemporary in Denmark</a>. This was one of my first experiences working with API&#39;s in a JavaScript environment, and I really enjoyed working with external data so I guess in a way it was a precursor to working with Cosmic. How does Cosmic improve your process for building software? Cosmic is great for me because it allows me to entirely separate my code from my content. This is a wonderful feature because it really streamlines the process of creating web apps that aren&#39;t tied to one particular instance. I have also really enjoyed using <a href="http://www.cosmic-staging.com/features" rel="noopener noreferrer" target="_blank">Imgix</a> to serve different sizes of images -- being able to add query strings for size to your image url&#39;s straight into your template is awesome and really powerful. It&#39;s a great way to build applications that perform really well at a wide range of screen sizes by serving only the content sizes that you need. The added bonus of integrated version control through <a href="https://github.com/cosmicjs" rel="noopener noreferrer" target="_blank">GitHub</a> means that you are able to work very quickly to develop clean and concise codebases. What technologies are you excited about right now? I&#39;m excited about npm and Node because they are new to me, but really they are exciting because they open up a whole new realm of possibilities with npm&#39;s libraries and frameworks. Most notably among these is React, because of the added speed
bonus of being able to develop for multiple platforms at the same time. I&#39;m also looking forward to integrating asynchronous javascript into more of my projects because it&#39;s scary fast.When Garrett&#39;s not building new apps on the Cosmic platform he occasionally updates his website: <a href="http://garrett.is/" target="_blank">Garrett.is</a>. If you are interested in connecting you can find him on <a href="http://linkedin.com/in/jgsibinga" rel="noopener noreferrer" target="_blank">LinkedIn</a> or hit him up with an <a href="mailto:garrett.sibinga@gmail.com" rel="noopener noreferrer" target="_blank">email</a>.

Developer Spotlight: Garrett Sibinga

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>.

Start building today