<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Dropbox on Ash Tewari</title><link>https://www.tewari.info/tag/dropbox/</link><description>Recent content in Dropbox on Ash Tewari</description><generator>Hugo -- gohugo.io</generator><language>en-US</language><lastBuildDate>Wed, 06 Feb 2013 17:32:50 +0000</lastBuildDate><atom:link href="https://www.tewari.info/tag/dropbox/feed.xml" rel="self" type="application/rss+xml"/><item><title>The Site44 Workflow</title><link>https://www.tewari.info/2013/02/06/the-site44-workflow/</link><pubDate>Wed, 06 Feb 2013 17:32:50 +0000</pubDate><guid>https://www.tewari.info/2013/02/06/the-site44-workflow/</guid><description>&lt;p&gt;A light weight development workflow with real-time website deployment.&lt;/p&gt;&#10;&lt;p&gt;I recently built &lt;a class="link" href="http://ash.site44.com/hero.html" target="_blank" rel="noopener"&#10; &gt;a sample website&lt;/a&gt; to illustrate &lt;a class="link" href="http://blog.appliedis.com/2013/02/04/bootstrap-with-less/" target="_blank" rel="noopener"&#10; &gt;how clean, semantic html&lt;/a&gt; markup can be maintained when using &lt;a class="link" href="http://twitter.github.com/bootstrap/index.html" target="_blank" rel="noopener"&#10; &gt;Bootstrap&amp;rsquo;s&lt;/a&gt; &lt;a class="link" href="http://twitter.github.com/bootstrap/scaffolding.html#gridSystem" target="_blank" rel="noopener"&#10; &gt;grid system&lt;/a&gt;. The solution is to use a &lt;a class="link" href="http://lesscss.org" target="_blank" rel="noopener"&#10; &gt;css pre-processor&lt;/a&gt; to incorporate Bootstrap&amp;rsquo;s &lt;a class="link" href="http://lesscss.org" target="_blank" rel="noopener"&#10; &gt;LESS&lt;/a&gt; based &lt;a class="link" href="http://twitter.github.com/bootstrap/extend.html#built-with-less" target="_blank" rel="noopener"&#10; &gt;mixins&lt;/a&gt; into your own .less files and push the Bootstrap instructions down into your stylesheets. There are two ways to &amp;ldquo;compile&amp;rdquo; .less stylesheets - use a &lt;a class="link" href="http://winless.org/" target="_blank" rel="noopener"&#10; &gt;stand-alone LESS compiler&lt;/a&gt; or use &lt;a class="link" href="https://github.com/cloudhead/less.js" target="_blank" rel="noopener"&#10; &gt;less.js&lt;/a&gt;. I found it very convenient to use &lt;a class="link" href="https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js" target="_blank" rel="noopener"&#10; &gt;less.js&lt;/a&gt; (note that it is not recommended in production deployment). As I started working on developing the sample code I found it a bit cumbersome to work with an entire web application project in Visual Studio, considering I was working with some really simple sample client-side html, css. As I craved for an alternative, I stumbled on to a development workflow that is incredibly simple and a lot of fun. I call it the Site44 workflow. Site44 turns your dropbox folders into websites. And it is awesome! Here is what you do -&lt;/p&gt;&#10;&lt;p&gt;1. Sign into &lt;a class="link" href="http://www.site44.com" target="_blank" rel="noopener"&#10; &gt;Site44.com&lt;/a&gt; using your &lt;a class="link" href="http://www.dropbox.com" target="_blank" rel="noopener"&#10; &gt;dropbox&lt;/a&gt; credentials.&lt;/p&gt;&#10;&lt;p&gt;2. Create a new site (all you have to do is come up with a name). I named it &amp;ldquo;ash&amp;rdquo;. A sub-folder with this name will show up in your &lt;a class="link" href="http://www.dropbox.com" target="_blank" rel="noopener"&#10; &gt;dropbox&lt;/a&gt; folder.&lt;/p&gt;&#10;&lt;p&gt;&lt;a class="link" href="https://www.tewari.info/wp-content/site44-dropbox-folder.png" &gt;&lt;img loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://www.tewari.info/wp-content/site44-dropbox-folder.png"&gt;&lt;/a&gt;&lt;/p&gt;&#10;&lt;p&gt;3. Drag this folder to your &lt;a class="link" href="http://www.github.com" target="_blank" rel="noopener"&#10; &gt;Github&lt;/a&gt; for Windows screen and drop it there to create a github repo in that folder and &lt;a class="link" href="https://github.com/ashtewari/ash.site44.com" target="_blank" rel="noopener"&#10; &gt;push it to github&lt;/a&gt;.&lt;/p&gt;&#10;&lt;p&gt;&lt;a class="link" href="https://www.tewari.info/wp-content/site44-to-github.png" &gt;&lt;img loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://www.tewari.info/wp-content/site44-to-github.png"&gt;&lt;/a&gt;&lt;/p&gt;&#10;&lt;p&gt;4. Smile and write code.&lt;/p&gt;&#10;&lt;p&gt;As you save your code. The changes are deployed in real-time to your website. You commit to your github repo as you please. If you revert to a different version/branch of our code from your git repo, that version will be deployed (almost) instantly to your website. I wish there was a .site44ignore feature in &lt;a class="link" href="http://www.site44.com" target="_blank" rel="noopener"&#10; &gt;Site44&lt;/a&gt;, just like .gitignore. That will allow me to keep my .git folder (and some other files) from getting published to the website. Other than that, this worked out really well for me.&lt;/p&gt;&#10;&lt;p&gt;I wrote about the experience of extending Bootstrap with LESS here : &lt;a class="link" href="http://blog.appliedis.com/2013/02/04/bootstrap-with-less/" target="_blank" rel="noopener"&#10; &gt;Bootstrap with LESS&lt;/a&gt;.&lt;/p&gt;&#10;&lt;p&gt;Hat tip to &lt;a class="link" href="http://www.justinsaraceno.com/" target="_blank" rel="noopener"&#10; &gt;Justin Saraceno&lt;/a&gt; for introducing me to &lt;a class="link" href="http://www.site44.com" target="_blank" rel="noopener"&#10; &gt;site44&lt;/a&gt;.&lt;/p&gt;&#10;</description></item></channel></rss>