How to do web development only on mobile
Tags: javascript, webdev, android
Published: 2021-12-11 12:18:50

			
<p>Hey there today I am sharing how I created <a href="http://notableapp.github.io">boosted notes</a> in mobile only. </p>
<h2 id="sharing-topics">Sharing topics</h2>
<ol>
<li>Apps to use ( <a href="#apps-to-use">@apps-to-use</a> ) </li>
<li>Console for mobile </li>
<li>Hosting via mobiles (in next blog)</li>
</ol>
<h2 id="apps-to-use">Apps to use</h2>
<p>There are many code editors on mobile I'll share two of them. </p>
<ol>
<li>Treb edit<br>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrsbFN6GFcEF51PDuOT7EoMSBDEKijhhShUA&amp;usqp=CAU" alt="TrebEdit app logo" width="80" height="80"> <br>
Teb edit is best app to use for web development on mobile. <br>
PROS:-<br>
Better syntax highlight<br>
Better app experience<br>
JavaScript console<br>
CONS:-<br>
No local server </li>
<li>Spck<br>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-RT3N4YlPB6P9CNAlsthNGNiiub5R1BDZIw&amp;usqp=CAU" alt="Spck code" width="80" height="80"><br>
Spck is better to use if you are working with git.<br>
PROS:-<br>
Support git<br>
Zip file extraction<br>
Intellisense<br>
Local server support<br>
CONS:-<br>
No better responsiveness.</li>
</ol>
<h2 id="console-in-mobile">console in mobile</h2>
<p>You can use <a href="https://github.com/liriliri/eruda">eruda console</a> which is very simple to use in mobile.</p>
<h3 id="lets-try-it">Let's try it</h3>
<ul>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled="" style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked=""> <del>First open any website on you browser</del> (you've already opened this page)</li>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled="" style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> Enter following code in address bar</li>
</ul>
<pre><code class="js language-js hljs language-javascript"><span class="hljs-attr">javascript</span>:(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">var</span> script = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'script'</span>); script.<span class="hljs-property">src</span>=<span class="hljs-string">"//cdn.jsdelivr.net/npm/eruda"</span>; <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">appendChild</span>(script); script.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { eruda.<span class="hljs-title function_">init</span>() } })();</code></pre>
<h4 id="demo-images-of-console">demo images of console</h4>
<p><img src="https://raw.githubusercontent.com/SGI-CAPP-AT2/SGI-CAPP-AT2.github.io/main/blogs/How%20to%20do%20web%20development%20only%20on%20mobile/eruda%20console%20button.jpg" alt="image of eruda button"></p>
<hr>
<p><img src="https://raw.githubusercontent.com/SGI-CAPP-AT2/SGI-CAPP-AT2.github.io/main/blogs/How%20to%20do%20web%20development%20only%20on%20mobile/eruda%20console%20screenshot.jpg" alt="image of console eruda"></p>