<?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: Dave Cranwell</title>
    <description>The latest articles on DEV Community by Dave Cranwell (@davecranwell).</description>
    <link>https://dev.to/davecranwell</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%2F3291%2Fa8c4eecb67af99ea2747de44be61a35b.jpeg</url>
      <title>DEV Community: Dave Cranwell</title>
      <link>https://dev.to/davecranwell</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/davecranwell"/>
    <language>en</language>
    <item>
      <title>Scam protection using a Raspberry Pi to perform caller ID and risk-assess incoming calls</title>
      <dc:creator>Dave Cranwell</dc:creator>
      <pubDate>Thu, 29 Apr 2021 11:06:33 +0000</pubDate>
      <link>https://dev.to/davecranwell/scam-protection-using-a-raspberry-pi-to-perform-caller-id-and-risk-assess-incoming-calls-2nd0</link>
      <guid>https://dev.to/davecranwell/scam-protection-using-a-raspberry-pi-to-perform-caller-id-and-risk-assess-incoming-calls-2nd0</guid>
      <description>&lt;p&gt;My dad is getting on and isn't super tech-savvy. In fact some nice Indian gentlemen liberated a few hundred pounds from him in exchange for unlocking his own computer for him. Twice.&lt;/p&gt;

&lt;p&gt;I'm doing all the reeducation I can, but as a mostly-offline person he has a lot to cover. For example, the idea that staff from a reputable megacorp would benevolently, and for no explained reason, phone you up out of the goodness of their hearts, because your computer - your computer amongst billions - had a virus...this is not at all suspicious to a huge percentage of the population.&lt;/p&gt;

&lt;p&gt;Since these events I've become obsessed with ways of helping Dad. I've spent months of my life watching &lt;a href="https://www.youtube.com/channel/UCBNG0osIBAprVcZZ3ic84vw"&gt;Jim Browning's&lt;/a&gt; scam exposure videos. I wrote plain-english notes to be kept next to his phone on how to identify scam calls. Still he got sucked in on futher occasions and only managed to avoid serious loss because he &lt;em&gt;doesn't have an Amazon account&lt;/em&gt;. I've even resorted to blacklisting &lt;em&gt;all&lt;/em&gt; his calls. This means the only calls allowed through must be manually white-listed. But you've guessed it, that whitelist must be managed online, using a badly architected React webapp, with no thought to information architecture or simplicity, that Dad doesn't want to use.&lt;/p&gt;

&lt;p&gt;The number of malicious calls he receives is clearly well beyond what British Telecom's pathetic Call Protect systems can keep up with. Scammers can change their numbers at will thanks to unscrupulous telecoms companies selling new ones, so BT and any other spam prevention system will always be playing catch-up.&lt;/p&gt;

&lt;h2&gt;
  
  
  Landline users are lagging behind
&lt;/h2&gt;

&lt;p&gt;What BT can't do themselves, however, crowds can. Websites have cropped up like &lt;a href="//who-called.co.uk"&gt;who-called.co.uk&lt;/a&gt; in which anyone can search for a number to find what others have said about it. And, having tirelessly compared my dad's phone records against services like this, they are mostly very accurate. But of course, my dad isn't going to check these sites - his computer is turned off at the wall.&lt;/p&gt;

&lt;p&gt;Caller blocking devices do exist, but these are post-hoc. If you receive a call you don't like only &lt;em&gt;then&lt;/em&gt; you block it. Most aren't even web-capable.&lt;/p&gt;

&lt;p&gt;Mobile phones often ship with caller identification packages, but landlines are still hugely popular in the older generations. &lt;strong&gt;What consumers are missing is a centralised, democratised, orchestrated effort, to cut off dangerous callers at a handset level&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This is essentially what I've attempted, as a little passion project:&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://github.com/davecranwell/badcaller"&gt;Badcaller&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;With a Raspberry Pi, a tiny USB Modem, some code and a few tedious hours trying to understand the &lt;a href="https://en.wikipedia.org/wiki/Hayes_command_set"&gt;Hayes AT Commands set&lt;/a&gt;, I've got a reasonable first draft of a box that can be placed beside the phone and can both identify and danger-check every phone call received. The big omission right this moment, is a screen. The "Badcaller" system is for now a browser-based display of your incomming calls and their danger. But this requires you to have a PC, or a phone - this isn't going to help Dad just yet. My next step would be to add a small screen, then perhaps a housing. Raspberry Pi's can be reasonably easily put into a "Kiosk mode" and when that's viable, I hope to test it with him.&lt;/p&gt;

&lt;p&gt;The interface is dead simple and hopefully completely unquestionable:&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/ZEpWjLxKbnA"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Development (ongoing)
&lt;/h2&gt;

&lt;p&gt;I originally stumbled across what looks like a silver bullet device for caller ID, the &lt;a href="https://www.artech.com.tw/en/product/detail/110"&gt;Artech AD102&lt;/a&gt;. This is a &lt;a href="https://en.wikipedia.org/wiki/Human_interface_device"&gt;HID&lt;/a&gt; device though, not serial like a USB modem and requires DLLs to use. The &lt;a href="https://www.npmjs.com/package/node-hid"&gt;node-hid&lt;/a&gt; package looked a plausible candidate here, but it became rapidly clear that the AD102 must be switched into a kind of "open for questions" mode to get responses out of it, mandating use of the DLLs. Those DLLs are only avaialble for Windows, have no source and can't seem to be recompiled into Linux Shared Objects (or if they can it was well beyond this web developer's capabilities). I considered &lt;a href="https://developer.microsoft.com/en-us/windows/iot/"&gt;Windows IoT&lt;/a&gt; too, which might have helped with the DLL, however Raspberry Pis use ARM processors and, from what I could gather, this would also require the DLL be recompiled. I eventually gave up with the AD102 entirely.&lt;/p&gt;

&lt;p&gt;Discovering that USB modems do Caller ID was a breakthrough. I even found comments on a modem on Amazon, from someone happily confirming that it worked really well for using AT commands to get the caller ID! I'm clearly not alone.&lt;/p&gt;

&lt;p&gt;Modems are FSMs, so I required no cajoling to give &lt;a href="https://xstate.js.org/docs/"&gt;XState&lt;/a&gt; a try as I've had my eye on it for a while and I'm only slightly familiar with &lt;a href="http://machina-js.org/"&gt;Machina&lt;/a&gt;. Check out the amazing, interactive &lt;a href="https://xstate.js.org/viz/"&gt;visualisations&lt;/a&gt; you can do with XState.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://containrrr.dev/watchtower/"&gt;Watchtower&lt;/a&gt; was also a very convenient discovery and is more suited to non-prod orchestration for which K8s would be overkill.&lt;/p&gt;

&lt;p&gt;This is, of course, a doomed project in a way. The best outcome I could possibly achieve - making all scam calling untenable at a global level - would make this project/product useless. But it would be nice if someone else wanted to help and give it a shot. Let me know if you do! &lt;/p&gt;

&lt;p&gt;Read more about the project on the &lt;a href="https://github.com/davecranwell/badcaller"&gt;Github page&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Originally posted at &lt;a href="https://davecranwell.com/2021/04/28/raspberry-pi-telephone-caller-id.html"&gt;https://davecranwell.com/2021/04/28/raspberry-pi-telephone-caller-id.html&lt;/a&gt;&lt;/p&gt;

</description>
      <category>node</category>
      <category>raspberrypi</category>
      <category>fraudprevention</category>
      <category>xstate</category>
    </item>
    <item>
      <title>Template Literal expressions within the Template tag seem like a missed opportunity</title>
      <dc:creator>Dave Cranwell</dc:creator>
      <pubDate>Fri, 11 Jan 2019 12:41:46 +0000</pubDate>
      <link>https://dev.to/davecranwell/template-literals-within-the-template-tag-seem-like-a-missed-opportunity-1deh</link>
      <guid>https://dev.to/davecranwell/template-literals-within-the-template-tag-seem-like-a-missed-opportunity-1deh</guid>
      <description>&lt;p&gt;Template Literals are amazing, but I've lately found they make everything look like a proverbial nail, particularly when it comes to updating large blocks of HTML dynamically.&lt;/p&gt;

&lt;p&gt;I'm still working in an environment which is mostly backend, where Perl generates HTML from templates, on top of which we add progressively enhanced javascript components. &lt;/p&gt;

&lt;p&gt;When both your back and front end need to be able to generate common UI patterns based on a pattern library, it becomes frustrating to have to define the HTML source for each UI pattern in multiple places (once in Perl, once in JS).&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;&amp;lt;template&amp;gt;&lt;/code&gt; tag could be useful. The backend can generate the HTML required for the component (e.g each Todo item in the Todo list) and the JS can use that HTML template to generate each new todo item. &lt;/p&gt;

&lt;p&gt;But the only way of dynamically inserting values into that template, that I'm aware of, is with the extraordinarily clumsy use of CSS selectors in the template content. (see: &lt;a href="https://blog.teamtreehouse.com/creating-reusable-markup-with-the-html-template-element"&gt;https://blog.teamtreehouse.com/creating-reusable-markup-with-the-html-template-element&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;Wouldn't it make so much more sense, now Template Literals are in every major browser, to add support within the &lt;code&gt;&amp;lt;template&amp;gt;&lt;/code&gt; API for expressions? e.g&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;template&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"test-template"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    hello ${where}
&lt;span class="nt"&gt;&amp;lt;/template&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;tmpl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;test-template&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// where "MAGIC" is some means of supplying data as json &lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tmpl&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;cloneNode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;MAGIC&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Web Components have the &lt;code&gt;&amp;lt;slot&amp;gt;&lt;/code&gt; system, but that requires the adoption of a much larger tech. And, yes, there's always Mustache/Handlebars et al, but again that's adding to the JS payload. Yes we also use React, but upgrading everything to React isn't always possible.&lt;/p&gt;

&lt;p&gt;Am I alone in trying to make this work? Anyone found a framework-free or framework-lite solution for this?&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>javascript</category>
      <category>templating</category>
      <category>patterns</category>
    </item>
  </channel>
</rss>
