<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jacob</title>
    <description>The latest articles on DEV Community by Jacob (@jspizziri).</description>
    <link>https://dev.to/jspizziri</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F304571%2Fb254a648-ffa2-4fbd-a45c-3514d6a812c8.jpeg</url>
      <title>DEV Community: Jacob</title>
      <link>https://dev.to/jspizziri</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jspizziri"/>
    <language>en</language>
    <item>
      <title>Shutting Down Marianberry</title>
      <dc:creator>Jacob</dc:creator>
      <pubDate>Thu, 26 Dec 2019 00:00:00 +0000</pubDate>
      <link>https://dev.to/jspizziri/shutting-down-marianberry-25gi</link>
      <guid>https://dev.to/jspizziri/shutting-down-marianberry-25gi</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--M1RbCDcf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://jspizziri.com/images/marianberry-2-small.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--M1RbCDcf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://jspizziri.com/images/marianberry-2-small.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Dear Friends,&lt;/p&gt;

&lt;p&gt;Marianberry was a project I started as a way for my wife and me to more easily practice NFP with the Creighton method. It's been a labor of love over the last 2 years as it was something I really believed in. For a variety of reasons outlined below, Marianberry will be shutting down for good January 31st, 2019. Thank you for using Marianberry. It's been fun.&lt;/p&gt;

&lt;p&gt;To see why we're shutting down, and what it means for you please read on.&lt;/p&gt;

&lt;p&gt;God bless, Jacob Spizziri&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Are You Shutting Down?
&lt;/h2&gt;

&lt;h4&gt;
  
  
  1. A Cease &amp;amp; Desist
&lt;/h4&gt;

&lt;p&gt;The Pope Paul VI Institute has asked me to cease and desist my efforts on Marianberry, as it incorporates some of their work. Despite my efforts to work with them to make Creighton a better place, including offering to donate the Marianberry platform to their organization they seem intent on ensuring that Creighton never leverages the power of technology. It would be wrong of me to pretend as though this wasn't deeply frustrating for me; however, I'm sure that they have their user's best intentions at heart, albeit misguided from my perspective.&lt;/p&gt;

&lt;h4&gt;
  
  
  2. Increasing Costs &amp;amp; Growing Needs
&lt;/h4&gt;

&lt;p&gt;As Marianberry has grown over the years, there's been an increasing number of users with an increasing number of needs. Marianberry is really a team of just one person: me, and as such it's been increasingly difficult to give it the attention it deserves, as it's relegated to my free time, which is becoming less and less (especially now that I'm a Father 🎉). Moreover, it actually costs money to keep Marianberry running, which has been something my wife and I have been happy to do util now, however with the growing costs it's something we've discerned we no longer want to do.&lt;/p&gt;

&lt;h2&gt;
  
  
  What do I do Now?
&lt;/h2&gt;

&lt;h4&gt;
  
  
  1. Migrate Your Data
&lt;/h4&gt;

&lt;p&gt;Please make sure you download all your data from Marianberry before it shuts down. I will be archiving the data and keeping it stored for 6 months after Marianberry's shutdown to help anyone who wasn't notified of the shutdown in time to get their data.&lt;/p&gt;

&lt;h4&gt;
  
  
  2. Find An Alternative
&lt;/h4&gt;

&lt;p&gt;As outlined above, I believe that the Pope Paul VI Institute will never allow for or provide a digital platform for their method, despite there being rumors or suggestions that it will happen. Their actions in this instance and numerous past instances support that in my opinion. As a result, I firmly believe that the Creighton Method as we know it now is going to be completely left behind in the next decade. My advice would be to change methods now, to a method which is going to provide such support. &lt;a href="https://femmhealth.org/"&gt;My recommendation would be FEMM&lt;/a&gt; (this is what my wife and I will be switching to). FEMM is based on solid research, is available on Android and iOS, and is, more importantly a company which I strongly believe is ethical, pro-family, pro-woman, and pro-life.&lt;/p&gt;

</description>
      <category>internet</category>
      <category>projects</category>
    </item>
    <item>
      <title>Inbox Zero</title>
      <dc:creator>Jacob</dc:creator>
      <pubDate>Fri, 19 Jul 2019 00:00:00 +0000</pubDate>
      <link>https://dev.to/jspizziri/inbox-zero-4831</link>
      <guid>https://dev.to/jspizziri/inbox-zero-4831</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--BBcPB55h--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://jspizziri.com/images/inbox-zero.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--BBcPB55h--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://jspizziri.com/images/inbox-zero.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Want the TL;DR version? Click here. Okay, for the rest of you, here we go:&lt;/p&gt;

&lt;p&gt;If you want to be effective in your job or even maybe your life, you &lt;strong&gt;need&lt;/strong&gt; to be effective at email. But it can be maddening! You're getting floods of emails constantly, how do you keep them straight? How do you not get stressed? How do make sure you're getting everyone the answers they need? How do you make sure you don't forget something?&lt;/p&gt;

&lt;p&gt;Enter: Inbox Zero, an email management &lt;em&gt;strategy&lt;/em&gt; that can work with pretty much any email provider.&lt;/p&gt;

&lt;h4&gt;
  
  
  You before Inbox Zero
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/3o7522WMYYkseyBo1G.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/3o7522WMYYkseyBo1G.gif" alt="Santa Drowning In Mail"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  You after Inbox Zero**
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/ErdfMetILIMko.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/ErdfMetILIMko.gif" alt="Baby Ninja"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;**Note: inbox zero will not magically make you able to do a backflip&lt;/p&gt;

&lt;h2&gt;
  
  
  How Does it Work?
&lt;/h2&gt;

&lt;p&gt;Inbox Zero is pretty simple. The basic idea is that at any given point in time, your inbox should contain 0 emails. That's the goal: zero, zilch, zip. &lt;strong&gt;We want no emails 0 our inbox!&lt;/strong&gt; Before you freak out, the below concept will easily help you achieve this.&lt;/p&gt;

&lt;p&gt;The first thing that we do is we start thinking about our emails in 3 distinct categories:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Emails that are actionable immediately.&lt;/li&gt;
&lt;li&gt;Emails that are non-actionable.&lt;/li&gt;
&lt;li&gt;Emails that are actionable, but not immediately (actionable at some future point).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; By "actionable" here, we mean emails that require &lt;em&gt;you&lt;/em&gt; to do something with them (or in other words to take some action).&lt;/p&gt;

&lt;p&gt;Then change your behavior:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Archive any email that is non-actionable.&lt;/li&gt;
&lt;li&gt;Archive any email that you just responded to.&lt;/li&gt;
&lt;li&gt;Snooze any email that are actionable at some future point.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Deep Dive
&lt;/h2&gt;

&lt;p&gt;If at this point you get it, no need to read further. There's just more juicy details below.&lt;/p&gt;

&lt;h4&gt;
  
  
  Emails that are actionable immediately
&lt;/h4&gt;

&lt;p&gt;Really, this is the only kind of email that you should &lt;em&gt;actually&lt;/em&gt; be concerned with. These are the emails that require you to do something. So what do you do? Take the necessary action. Respond with the answer to someones question, etc.&lt;/p&gt;

&lt;p&gt;Once you've done this these emails are now considered part of "Non-actionable" category. Why? Well... because you've just taken the action that was needed, and the ball is no longer in your court.&lt;/p&gt;

&lt;h4&gt;
  
  
  Emails that are non-actionable
&lt;/h4&gt;

&lt;p&gt;These emails are done 🎊. They could be spam emails, marketing emails, or even the emails we just responded to in from the first category. We still want to keep them around for historical purposes, so we don't delete them, however we need to get them out of our inbox. What do we do?&lt;/p&gt;

&lt;p&gt;We &lt;strong&gt;ARCHIVE&lt;/strong&gt; them. This gets them out of your inbox, and out of your face!&lt;/p&gt;

&lt;p&gt;Don't know how to archive an email? Here, &lt;a href="https://lmgtfy.com/?q=how+to+archive+emails+in+gmail&amp;amp;s="&gt;this may help&lt;/a&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Emails that are actionable, but not immediately
&lt;/h4&gt;

&lt;p&gt;A lot of the time these are the worst offenders for cluttering up our inbox and creating stress:&lt;/p&gt;

&lt;p&gt;We get an important looking email, we open it and read through it only to find that it is important, but not until next week, or some time in the future where we need to do something (respond/perform some task and then let someone know, etc.). So now we have this email, which is marked as "read" sitting in our inbox, and slowly being buried alive. Quite naturally this creates stress in a normal human. We need to make a mental note, or some sort of note to make sure we &lt;strong&gt;don't forget about that email&lt;/strong&gt; until next Wednesday or whenever.&lt;/p&gt;

&lt;p&gt;This is where your email tool will help you out. Any modern email service will provide a "snooze" functionality, which effectively allows you to pick a date that you want that email to magically reappear in your inbox, as if it had just been sent to you.&lt;/p&gt;

&lt;p&gt;Here's how to &lt;a href="https://support.google.com/mail/answer/7622010?co=GENIE.Platform%3DDesktop&amp;amp;hl=en"&gt;do it with Gmail&lt;/a&gt; (for real this time).&lt;/p&gt;

&lt;p&gt;If your email provider doesn't have a "snooze" feature, well... I'm sorry, you're pretty much out of luck. When we have caveman tools we have to live like cavemen. I'd suggest switching email providers at this point.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR / Conclusion
&lt;/h2&gt;

&lt;p&gt;Think about our emails in 3 distinct categories:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Emails that are actionable immediately.&lt;/li&gt;
&lt;li&gt;Emails that are non-actionable.&lt;/li&gt;
&lt;li&gt;Emails that are actionable, but not immediately (actionable at some future point).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Then change your behavior:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Archive any email that is non-actionable.&lt;/li&gt;
&lt;li&gt;Archive any email that you just responded to.&lt;/li&gt;
&lt;li&gt;Snooze any email that are actionable at some future point.&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>productivity</category>
      <category>email</category>
    </item>
    <item>
      <title>Baby Cams &amp; Nest</title>
      <dc:creator>Jacob</dc:creator>
      <pubDate>Sat, 22 Jun 2019 00:00:00 +0000</pubDate>
      <link>https://dev.to/jspizziri/baby-cams-nest-4691</link>
      <guid>https://dev.to/jspizziri/baby-cams-nest-4691</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fjspizziri.com%2Fimages%2Ftest-screen.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fjspizziri.com%2Fimages%2Ftest-screen.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;My reflections after 7 months of using a Nest Indoor Cam as a baby monitor solution.&lt;/p&gt;

&lt;h3&gt;
  
  
  Problem: I need a baby cam... but they all suck.
&lt;/h3&gt;

&lt;p&gt;Baby cams are one of the many things that seem to still be stuck in the early 2000's technologically speaking. Moreover, who want's to spend $50-$100 on grabage hardware in software that has such a limited use-case you're just going to throw it away in a few years. So naturally, as a new father who is a tech professional, the standard baby cam products on the market weren't going to cut it.&lt;/p&gt;

&lt;p&gt;Here's the requirements:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Modern Hardware &amp;amp; Software that'll last several years&lt;/li&gt;
&lt;li&gt;A corresponding smartphone app to livestream video&lt;/li&gt;
&lt;li&gt;2 way audio support (we can hear baby, we can talk to baby if needed)&lt;/li&gt;
&lt;li&gt;Great Security (no creepers please)&lt;/li&gt;
&lt;li&gt;Do I need CCTV or a non-wifi enabled device? No. those are just security measures. If we find a camera that we can trust the security of, then we should be good to go.&lt;/li&gt;
&lt;li&gt;Something that can be repurposed and isn't pointless when baby's a little older&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Solution: Smart Cams
&lt;/h3&gt;

&lt;p&gt;Not a problem, a minimal amount of creative thinking and problem solving yielded &lt;strong&gt;the obvious answer. A smart cam.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Alright, I'm already bought into Nest ecosystem at this point with some Nest Protects and a Nest thermostat; so a Nest Cam it is. It's a solution that seems to check all the boxes. So here's what we'll get:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://store.google.com/us/product/nest_cam" rel="noopener noreferrer"&gt;Nest Indoor Cam&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;My old iPhone 6 (for the stand-alone monitor)&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.amazon.com/Spigen-Universal-Kickstand-Compatible-Cellphone/dp/B01LW6NN8T/ref=asc_df_B01LW6NN8T/" rel="noopener noreferrer"&gt;Spigen Kickstand&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Sure, it's a little more expensive, but for a solution that can be reused to solve other problems, it's a small price to pay.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Con's
&lt;/h3&gt;

&lt;h4&gt;
  
  
  You can't take them with you
&lt;/h4&gt;

&lt;p&gt;Ok. So you can take them with you, it's just not super convenient.&lt;/p&gt;

&lt;p&gt;The first time the grandparents want you to stay over at their house the panic sets in: "How will we make sure she isn't screaming? We can't easily take our smart cam with us?". My recommendation here is to just buy a super cheap audio monitor. It's good enough for a night or two here and there.&lt;/p&gt;




&lt;h4&gt;
  
  
  Bandwidth &amp;amp; Service Outages
&lt;/h4&gt;

&lt;p&gt;The Nest Cam App is apparently not built for continuous video streaming for extended periods of time. After about 45min of streaming on the app, there's an error which takes you out of the stream and you need to click back into it. The big problem with this is that if you're not paying attention and restart the stream when this occurs, your device thinks that it's not being used and goes to sleep. This means that you might think you're monitoring baby, but actually your device is sleeping, so if there's any screaming or movement going on, you're going to be completely unaware of it.&lt;/p&gt;

&lt;p&gt;It's possible that this is a network connectivity issue; however, we have average internet (a mid-grade cable package). When you're downstairs streaming Netflix because baby is finally asleep and your monitor keeps going out because of the you apparently don't have enough bandwith to support both video streams and whatever else is randomly going on on your network, it kind of harshes the let's-finally-spend-some-hang-time-as-a-couple-vibe that you just had going for you.&lt;/p&gt;

&lt;p&gt;Additionally, Nest goes down... a lot... (looking at you Google 😠). Perhaps this has been a particularly frustrating 12 months for Nest &amp;amp; Google, but they've had a pretty significant service outage at least once a quarter if not more, and quite frankly, I'm over it.&lt;/p&gt;

&lt;p&gt;This has been probably the single &lt;strong&gt;most&lt;/strong&gt; frustrating thing about using the Nest Cam in this capacity.&lt;/p&gt;




&lt;h4&gt;
  
  
  Internet Dependency
&lt;/h4&gt;

&lt;p&gt;That's right, it needs a connection to the internet. No internet. No worky. No monitor.&lt;/p&gt;

&lt;p&gt;So that means when your electric provider decides to do some work on the power lines or there's a storm in the area and screws up your cable: No monitor.&lt;/p&gt;

&lt;p&gt;This leads into my second largest beef with the Nest Cam.&lt;/p&gt;




&lt;h4&gt;
  
  
  Cloud Storage Only
&lt;/h4&gt;

&lt;p&gt;If you want to access historical video with your Nest Cam, your out of luck unless you want to pay a ba-gillion dollars for their cloud storage service. So that means you get realtime only with a some occasional completely useless still images when it detects activity.&lt;/p&gt;

&lt;p&gt;Nest does &lt;strong&gt;not&lt;/strong&gt; give you the option to stream your video to a local storage device on your local network. Which again, is not only frustrating because they want you to take out a second mortgage to get video streaming, but it would also greatly alleviate the issues mentioned above with the bandwidth and internet outages.&lt;/p&gt;

&lt;h3&gt;
  
  
  If I Did It Over Again
&lt;/h3&gt;

&lt;p&gt;If I were going to do it over again I'd add 2 requirements to my original list:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Modern Hardware &amp;amp; Software that'll last several years&lt;/li&gt;
&lt;li&gt;A corresponding smartphone app to livestream video&lt;/li&gt;
&lt;li&gt;2 way audio support (we can hear baby, we can talk to baby if needed)&lt;/li&gt;
&lt;li&gt;Great Security (no creepers please)&lt;/li&gt;
&lt;li&gt;Do I need CCTV or a non-wifi enabled device? No. those are just security measures. If we find a camera that we can trust the security of, then we should be good to go.&lt;/li&gt;
&lt;li&gt;Something that can be repurposed and isn't pointless when baby's a little older&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Local streaming &amp;amp; Local Storage&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Get a cheap audio monitor for travel&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The local streaming would solve bandwidth issues, and provide a better service where I could scrub to earlier in a day and see exactly what was going on without having to pay Nest every month.&lt;/p&gt;

&lt;p&gt;This is what my shopping list would look like:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://store.google.com/us/product/nest_cam" rel="noopener noreferrer"&gt;Nest Indoor Cam&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;My old iPhone 6 (for the stand-alone monitor)&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.amazon.com/Spigen-Universal-Kickstand-Compatible-Cellphone/dp/B01LW6NN8T/ref=asc_df_B01LW6NN8T/" rel="noopener noreferrer"&gt;Spigen Kickstand&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.synology.com/en-global/products" rel="noopener noreferrer"&gt;A Synology&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Probably something from their "Value Series" like the DS418play or DS218play&lt;/li&gt;
&lt;li&gt;Something Like a &lt;a href="https://www.amazon.com/Foscam-Security-Surveillance-Detection-Available/dp/B07DJ5RSTM/" rel="noopener noreferrer"&gt;FosCam&lt;/a&gt; or an &lt;a href="https://www.amazon.com/dp/B0145OQTPG/" rel="noopener noreferrer"&gt;Amcrest Cam&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The Synology is a little expensive sure, but they're awesome, and multi purpose. They can be used for network file storage, computer backups, a dropbox replacement, aaaand they have something called "Surveillance Staton" built into them, that'll record video streamed from an IP cam.&lt;/p&gt;

&lt;p&gt;I'd connect my IP cam up to my Synology, and I'd be off.&lt;/p&gt;

&lt;p&gt;Hope you found this helpful!&lt;/p&gt;

</description>
      <category>nest</category>
      <category>babycam</category>
      <category>dadstuff</category>
    </item>
    <item>
      <title>Angular + Cordova</title>
      <dc:creator>Jacob</dc:creator>
      <pubDate>Sat, 21 Jul 2018 00:00:00 +0000</pubDate>
      <link>https://dev.to/jspizziri/angular-cordova-1nej</link>
      <guid>https://dev.to/jspizziri/angular-cordova-1nej</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mGzboPwr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://jspizziri.com/images/banner-angularjs.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mGzboPwr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://jspizziri.com/images/banner-angularjs.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Lets port a new angular project to Cordova without using Ionic or NativeScript. &lt;strong&gt;Why?&lt;/strong&gt; Because those frameworks can sometimes be too opinionated and constraining. By the end of this article, you'll have a functioning angular/cordova project which will be as loosely coupled with Cordova as possible. You'll be able to conform to the angular style conventions, and install whatever plugins, frameworks, or libraries you desire. (e.g. bootstrap, ng-bootstrap, pug, etc.)&lt;/p&gt;

&lt;p&gt;First, I'd like to &lt;a href="https://www.becompany.ch/en/blog/2016/10/19/creating-apache-cordova-app-with-angular2"&gt;give credit to this post&lt;/a&gt; as it's what got me heading in the right direction however I found it to be a little incomplete.&lt;/p&gt;

&lt;p&gt;You can find the demo source code &lt;a href="https://github.com/jspizziri/hello-cordova"&gt;here&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Ok. Lets Get Started.&lt;/strong&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  1. Setup A Vanilla Angular App
&lt;/h3&gt;

&lt;p&gt;First we're going to create a vanilla angular 6 project called &lt;code&gt;hello-cordova&lt;/code&gt; with the following command: &lt;code&gt;ng new hello-cordova&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Some things you may want to do at this point would be to install and configure things like &lt;code&gt;bootstrap&lt;/code&gt; &amp;amp; &lt;code&gt;ng-bootstrap&lt;/code&gt; or any other angular library's you're interested in working with.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Basic Cordova Setup
&lt;/h3&gt;

&lt;p&gt;Now that we have a basic angular app running with &lt;code&gt;npm start&lt;/code&gt; we're going to create some basic scaffolding to setup our cordova build.&lt;/p&gt;

&lt;p&gt;First let's make sure we have the cordova cli installed: &lt;code&gt;npm install -g cordova&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Now let's create a basic cordova app. We're going to create the cordova app in a &lt;code&gt;cordova&lt;/code&gt; subdirectory and give it an id of &lt;code&gt;com.hellocordova.www&lt;/code&gt; and a name of &lt;code&gt;Hello Cordova&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cordova create cordova com.hellocordova.www "Hello Cordova"
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Now let's add some git tracking files to ignore some build files and keep directories:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;touch cordova/.gitignore
touch cordova/www/.gitkeep
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;And add the following to &lt;code&gt;cordova/.gitignore&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;node_modules
www/*
!www/.gitkeep
platforms
plugins
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Finally, let's add the iOS platform. To add platforms (and plugins) we'll want to make sure we're in the &lt;code&gt;cordova&lt;/code&gt; directory and then run the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cordova platform add ios
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  3. Add Scripts
&lt;/h3&gt;

&lt;p&gt;In the &lt;strong&gt;root&lt;/strong&gt; directory of our project (not the one in the &lt;code&gt;cordova&lt;/code&gt; folder), lets add some basic scripts to the &lt;code&gt;package.json&lt;/code&gt; to automate a few things:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"clean": "rm -rf dist cordova/www/* &amp;amp;&amp;amp; touch cordova/www/.gitkeep",
"build:cordova": "npm run clean &amp;amp;&amp;amp; ng build --base-href=. --output-path=cordova/www",
"cordova:prepare": "cd cordova &amp;amp;&amp;amp; rm -rf platforms plugins node_modules &amp;amp;&amp;amp; npm ci &amp;amp;&amp;amp; cordova prepare &amp;amp;&amp;amp; cd ..",
"cordova:build:ios": "npm run build:cordova &amp;amp;&amp;amp; cd cordova &amp;amp;&amp;amp; cordova build ios &amp;amp;&amp;amp; cd ..",
"cordova:emulate:ios": "npm run cordova:build:ios &amp;amp;&amp;amp; cd cordova &amp;amp;&amp;amp; cordova emulate ios &amp;amp;&amp;amp; cd ..",
"open:xcode": "open $(find ./cordova/platforms/ios -name '*.xcworkspace')"
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;We're also going to modify the &lt;code&gt;build&lt;/code&gt; script to be the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"build": "ng build --base-href=/"
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;This will give you the following utilities:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;npm run cordova:prepare&lt;/code&gt; - Other devs should be able to run this script to initialize the Cordova app in their environment.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;npm run open:xcode&lt;/code&gt; - Run this to easily open the project in Xcode&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;npm run cordova:build:ios&lt;/code&gt; - Run this to rebuild the iOS project&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;npm run cordova:emulate:ios&lt;/code&gt; - Run this to run an iOS emulator of the project&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. Performance Improvements (400ms delay)
&lt;/h3&gt;

&lt;p&gt;Yes. Now let's remove &lt;a href="https://stackoverflow.com/questions/39902055/web-app-feels-less-responsive-when-added-to-iphones-home-screen"&gt;the infamous 400ms delay&lt;/a&gt; that iOS defaults on webview clicks. We're going to add &lt;a href="https://github.com/ftlabs/fastclick"&gt;FastClick.js&lt;/a&gt; to our angular app.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ npm i fastclick
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Add the following to the top of your &lt;code&gt;src/main.ts&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import * as FastClick from 'fastclick';

// attach FastClick.js
FastClick.attach(document.body);
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; this should be added to main.ts as close to the top as possible so it executes immediately.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Initializing Plugins
&lt;/h3&gt;

&lt;p&gt;Now if you want to install other plugins you'll need to configure them. This can be done in the &lt;code&gt;ngOnInit()&lt;/code&gt; of your &lt;code&gt;app.component.ts&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { CordovaService } from './service/cordova.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  constructor(protected _cordovaService: CordovaService) {}

  public ngOnInit(): void {
    this._cordovaService.initialize();
  }
}

// src/app/service/cordova.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class CordovaService {

  protected hasBegunInitialization: boolean = false;

  constructor() {}

  public initialize(): void {
    // listen for 'deviceready' event in case it hasn't
    // already been fired during application bootstrap
    document.addEventListener('deviceready', () =&amp;gt; {
      window['isDeviceReady'] = true;
      this.init();
      console.log('deviceready fired after bootstrap finish');
    }, false);

    // check if 'deviceready' has already fired during
    // application bootstrap.
    if (window['isDeviceReady'] === true) {
      this.init();
      console.log('deviceready fired before bootstrap finish');
    }
  }

  protected init(): void {

    // lock initialization
    if (this.hasBegunInitialization) {
      return;
    }

    this.hasBegunInitialization = true;

    // do init stuff here
  }
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Make sure you add a provider for the &lt;code&gt;CordovaService&lt;/code&gt; class.&lt;/p&gt;

&lt;h3&gt;
  
  
  Troubleshooting
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Error: Cannot read property 'replace' of undefined&lt;/code&gt; run &lt;code&gt;cd platforms/ios/cordova &amp;amp;&amp;amp; npm install ios-sim&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  - &lt;a href="https://stackoverflow.com/questions/42830752/ionic-2-images-not-displaying-on-device"&gt;Images/assets not showing up?&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Whitescreen of death?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cordova doesn't like &lt;code&gt;&amp;lt;base href="/"&amp;gt;&amp;lt;/base&amp;gt;&lt;/code&gt;, instead use &lt;code&gt;&amp;lt;base href="."&amp;gt;&amp;lt;/base&amp;gt;&lt;/code&gt; for your cordova distributions. This typically isn't what you want for your web distribution however as it can mess with your routing.&lt;/li&gt;
&lt;li&gt;If you're having this issue please take a look at the Add Scripts section and take a look at the &lt;code&gt;--base-href&lt;/code&gt; flags.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>angular</category>
      <category>angular2</category>
      <category>cordova</category>
    </item>
  </channel>
</rss>
