<?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: Brett Nelson</title>
    <description>The latest articles on DEV Community by Brett Nelson (@brettmn).</description>
    <link>https://dev.to/brettmn</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%2F3743%2FvIxyxHUf.jpg</url>
      <title>DEV Community: Brett Nelson</title>
      <link>https://dev.to/brettmn</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/brettmn"/>
    <language>en</language>
    <item>
      <title>Around the Web – 20190913</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Fri, 13 Sep 2019 13:00:16 +0000</pubDate>
      <link>https://dev.to/brettmn/around-the-web-20190913-3hhf</link>
      <guid>https://dev.to/brettmn/around-the-web-20190913-3hhf</guid>
      <description>&lt;p&gt;And now for somethings to read (or watch) over the weekend, if you have some spare time that is.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.gooddaysirpodcast.com/229"&gt;Way Basic&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Good Day, Sir! Show&lt;/strong&gt;  – Jeremy Ross – In this episode, we discuss Salesforce’s new ad campaign, WeWork IPO, Uber continuing to invest in their Uber Freight division, Larry Ellison lawsuit over NetSuite acquisition, JetBrains developer survey, and the recent Apple Event announcements.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.amazon.com/gp/product/B07S395RWD/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;amp;tag=wipdevelope05-20&amp;amp;creative=9325&amp;amp;linkCode=as2&amp;amp;creativeASIN=B07S395RWD&amp;amp;linkId=4977e7c13aaa6a8e1c11ac6e259b8f35"&gt;Logitech MX Master 3 Advanced Wireless Mouse&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;I’ve been getting annoyed by my Magic Mouse so I think I will give this one a try when it becomes available. I have the first generation of it and still use it occasionally so I have high hopes for it.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://css-tricks.com/caniuse-and-mdn-compatibility-data-collaboration/"&gt;Caniuse and MDN compatibility data collaboration&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;CSS-Tricks&lt;/strong&gt;  – Sep 10, 12:51 PM – Easily manage projects with monday.com Second only to ‘silly GIFs,’ I’d guess screenshots of caniuse are the most common slide graphic at web conferences. It’s become the ultimate source for looking at web compatibility data in the hearts and minds…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.netlify.com/docs/cli/"&gt;Command Line Tools&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Netlify&lt;/strong&gt;  – Netlify’s command line interface (CLI) lets you deploy sites or configure continuous deployment straight from the command line. The new 2.0 version of our Node-based CLI was rebuilt from the ground up to help improve the site building experience.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://medium.com/poka-techblog/simplify-your-javascript-use-some-and-find-f9fb9826ddfd"&gt;Simplify your JavaScript – Use .some() and .find()&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;poka-techblog&lt;/strong&gt;  – Etienne Talbot – Sep 4, 4:10 AM – Following the insane amount of views on my article on.map(),.reduce(), and.filter(), I thought I should share two more array methods that are useful tools in a JavaScript developer’s arsenal:.some() and.find(). This array method helps you determine…&lt;/p&gt;

&lt;h2&gt;
  
  
  Till Next Week
&lt;/h2&gt;

&lt;p&gt;Want to share something? Let me know by leaving a comment below or emailing &lt;a href="//mailto:brett@wipdeveloper.com"&gt;brett@wipdeveloper.com&lt;/a&gt;  or following and tell me on &lt;a href="https://twitter.com/BrettMN"&gt;Twitter/BrettMN&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Don’t forget to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt; to receive free the &lt;a href="https://wipdeveloper.com/"&gt;WIPDeveloper.com&lt;/a&gt; weekly newsletter every Sunday&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/around-the-web-20190913/"&gt;Around the Web – 20190913&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>blog</category>
    </item>
    <item>
      <title>LWC – Copy to Clipboard Button</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Wed, 11 Sep 2019 13:00:34 +0000</pubDate>
      <link>https://dev.to/brettmn/lwc-copy-to-clipboard-button-49pj</link>
      <guid>https://dev.to/brettmn/lwc-copy-to-clipboard-button-49pj</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/Bn-K7BXlHQU"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Hi, I’m Brett with WIPDeveloper.com. The other day I saw a question about how to create a copy to clipboard button in lightning web components. So I took a crack at it. And this is what I came up with.&lt;/p&gt;

&lt;p&gt;I’ve created a component that has mark up the &lt;code&gt;lightning-card&lt;/code&gt; that has a title of Copy to Clipboard, with two text fields, one to copy, and one just paste it in so you can see it and a button that should copy the text.&lt;/p&gt;

&lt;p&gt;The markup is pretty straightforward and has an input for the copy input for the pasting and then the button to call copy to clipboard.&lt;/p&gt;

&lt;p&gt;In the JavaScript. The one method Copy to Clipboard currently does nothing. So we can click this all we want and then paste it and nothing will happen. I mean, it’s pasting spaces right now, but what we want have to do is copy the contents of this input. We’re going to do this by first getting input. So we’ll have to find the the&lt;/p&gt;

&lt;p&gt;&lt;code&gt;copy-me&lt;/code&gt; text which has the class of &lt;code&gt;copy-me&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;So query against the &lt;code&gt;template.querySelector&lt;/code&gt; and that’s going to be &lt;code&gt;.copy-me&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Now that we have a reference to the input. We’re going to select it. So &lt;code&gt;select&lt;/code&gt; should highlight the text&lt;/p&gt;

&lt;p&gt;So let’s try it, save this and what should happen when we refresh the page and click the button &lt;code&gt;Copy Me!&lt;/code&gt; should get selected.&lt;/p&gt;

&lt;p&gt;I did see some mentions that this might not work on some browsers. So to account for that, we’re also going to use &lt;code&gt;setSelectionRange&lt;/code&gt;. We want to be the first character all the way to the end. So&lt;/p&gt;

&lt;p&gt;we’re just making some high number.&lt;/p&gt;

&lt;p&gt;Now we don’t have to worry necessarily worry if the browser that it gets implemented or used in doesn’t follow the select option.&lt;/p&gt;

&lt;p&gt;Now we want to use the &lt;code&gt;Copy&lt;/code&gt; command. And who do we use &lt;code&gt;document.execCommand&lt;/code&gt; and then the string of the command type that we want in this case &lt;code&gt;copy&lt;/code&gt;. So&lt;/p&gt;

&lt;p&gt;&lt;code&gt;document.execCommand&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Copy.&lt;/p&gt;

&lt;p&gt;Save this&lt;/p&gt;

&lt;p&gt;format it.&lt;/p&gt;

&lt;p&gt;Then save it.&lt;/p&gt;

&lt;p&gt;Now, when we refresh the page and press the press the copy button, it should highlight and now we should be able to paste copy me into this second text box. And it works.&lt;/p&gt;

&lt;p&gt;And it doesn’t we can change this to something else. Press copy and then paste it over here. And we can paste it in We can make the text here literally anything and copy the text and paste, paste.&lt;/p&gt;

&lt;p&gt;Go. That’s it.&lt;/p&gt;

&lt;p&gt;If you want to make a copy, using Copy to Clipboard button and the lightning web component that would be one way to do it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Links
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard"&gt;Interact with the clipboard&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"&gt;HTMLInputElement.select()&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange"&gt;HTMLInputElement.setSelectionRange()&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  That’s it for now.
&lt;/h2&gt;

&lt;p&gt;Remember to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt;  and you can get updated with any new information we have on WIPDeveloper.com.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/lwc-copy-to-clipboard-button/"&gt;LWC – Copy to Clipboard Button&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>video</category>
      <category>lwc</category>
      <category>salesforce</category>
      <category>webcomponents</category>
    </item>
    <item>
      <title>LWC – Using Events to Pass Data to a Parent Component</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Mon, 09 Sep 2019 13:00:27 +0000</pubDate>
      <link>https://dev.to/brettmn/lwc-using-events-to-pass-data-to-a-parent-component-5543</link>
      <guid>https://dev.to/brettmn/lwc-using-events-to-pass-data-to-a-parent-component-5543</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/KUbwqxG-M1E"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Hello, I’m Brett with WIPDeveloper.com. Last time, we pass data from a parent component to a child component by assigning it to an attribute. Now I’d like to pass data from a child component to a parent component. But since we can’t assign to a attribute on the parent component, we have to use an event.&lt;/p&gt;

&lt;p&gt;We are going to generate an event in the child component, and then the parent component, we will handle it similar to the way we would handle a button click event or any other event that’s generated by the DOM. So from the parents point of view, it’s going to look similar for how it’s handled, but the child is going to be creating a new event, and the parent will receive it. And we’ll be able to use that data in the parent component.&lt;/p&gt;

&lt;p&gt;I’m going to just start by adding a place to put the information we get from the child in the parent component. So just going to add another lightning card, and I’m going to call, I’m gonna save it in a property on the parent called child data and display it in this lightning card, course, to do that, we will have to add a property. And we will need to track it so that we can see that it updates. So important to track attribute, our track decorator, so we can decorate the child component. So that’s a portion of what we need to handle from the parent in the child markup, we’re going to add a button. So before we do that, let’s make it so that they don’t loop together.&lt;/p&gt;

&lt;p&gt;Gonna put the previous content in a paragraph tag, and there’s a button underneath.&lt;/p&gt;

&lt;p&gt;And I’m gonna have it cause a child event. And I bind to an event in the JavaScript called cause child event.&lt;/p&gt;

&lt;p&gt;This is going to be the entire content of our child’s markup. So in our class for that we need to create the cause child event handler.&lt;/p&gt;

&lt;p&gt;So here, we have a method called class child event. And this is going to create, it’s going to do dispatch, a new event dispatch event is tied into the lightning element. So we can call it directly from this dispatch event. And what it’s looking for is a custom event. So we’re going to create a new custom event, we have to give it a name. So this custom event is going to be the name that we’re looking for on the parent event or on the parent in the parent on the element. So we’re going to give it a name, child event, all lowercase.&lt;/p&gt;

&lt;p&gt;Make that a little bigger, so it’s easier see. So it does look a little odd not doing camera case, but we’re going to make a new custom event called create, we’re going to dispatch a new customer event called Charlie man. Now, if we look and our page, we can see our button, and we can click it, but nothing happens. That’s because we aren’t handling it. Let’s add a handler on our first one, we’re going to use the on we’re going to preface the event we’re looking for with on and then remember, it’s all lowercase so on child event, and then we’re going to have a handler do something with it.&lt;/p&gt;

&lt;p&gt;Have a handle child event. And then in our JavaScript, we will have to create the handler. Right now I’m going to just put sound data equals because we aren’t, we aren’t actually passing any data right now. So this is just to prove that we aren’t getting the event. Refresh the page. Now I’m going to click this first cause child event. And we’ll get we got the event and we can see the timestamp. But let’s make it so that it lines up by giving it some padding.&lt;/p&gt;

&lt;p&gt;Don’t need that extra slash, refresh the page. There now it has some padding. But all we’re doing is verifying that this was because this timestamp has been created and apparent. So we know the event was received. We’re just not passing I’m going to data right now. And pass data, we would pass in a second property for our custom event from the child. And it’s going to be an object with a detail property. And we’re just going to pass it a string, we call it I’m going to have the string so from child have it pass the time&lt;/p&gt;

&lt;p&gt;do it to the local string now. So now when I once this deploys, and we refresh the page will get an error. And that error says no, doesn’t look like we got in there now. But now when we click the event, it’ll send this detail to this detail will be available in the handler. But access that we have to have it accept an event. And we can do event&lt;/p&gt;

&lt;p&gt;detail and assign the value that we’re passing.&lt;/p&gt;

&lt;p&gt;Now we see that are from child is passing a really weird to local string.&lt;/p&gt;

&lt;p&gt;Not the best. Just get rid of that for now, we can see that our child is sending the event and we are now displaying the information from it in the parent. But if we click the other child, nothing happens. Because we aren’t listening for the event on the parent. We’ve only added added the handle child event on the first one, but if we add it to the second one&lt;/p&gt;

&lt;p&gt;and try it again. We can see that we can receive events from both children. And that is how we can pass data from a child component to a parent component.&lt;/p&gt;

&lt;h2&gt;
  
  
  Links
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events_create_dispatch"&gt;Create and Dispatch Events&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events_handling"&gt;Handle Events&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  That’s it for now.
&lt;/h2&gt;

&lt;p&gt;Remember to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt;  and you can get updated with any new information we have on WIPDeveloper.com.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/lwc-using-events-to-pass-data-to-a-parent-component/"&gt;LWC – Using Events to Pass Data to a Parent Component&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>video</category>
      <category>lwc</category>
      <category>salesforce</category>
      <category>webcomponents</category>
    </item>
    <item>
      <title>Around the Web – 20190906</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Sat, 07 Sep 2019 04:02:41 +0000</pubDate>
      <link>https://dev.to/brettmn/around-the-web-20190906-4f5c</link>
      <guid>https://dev.to/brettmn/around-the-web-20190906-4f5c</guid>
      <description>&lt;p&gt;And now for somethings to read (or watch) over the weekend, if you have some spare time that is.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.gooddaysirpodcast.com/228"&gt;Old Day Code&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Good Day, Sir! Show&lt;/strong&gt;  – Jeremy Ross – In this episode, we discuss some of our highlights from the Winter ’20 Release Notes including Visual Studio Code remote development support, access to the Recycle Bin in Lightning, Lightning Web Components available as open-source, field-level…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://bigassforce.com/field-keysets"&gt;Building a Set from any field&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;bigassforce.com&lt;/strong&gt;  – The most performant way to get a set of IDs is already well known: We can also build sets from ANY string field, in a one-liner without a loop: The first thing to note is that we are using an Aggregate Query and not just ordinary SOQL. We combine…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://jvns.ca/blog/2019/09/06/how-to-put-an-html-page-on-the-internet/"&gt;How to put an HTML page on the internet&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Julia Evans&lt;/strong&gt;  – Sep 6, 3:56 PM – One thing I love about the internet is that it’s SO EASY to put static HTML websites on the internet. Someone asked me today how to do it, so I thought I’d write down how really quickly! All of my sites are just static HTML and CSS. My web design…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://dev.to/camerenisonfire/10-intriguing-public-rest-apis-for-your-next-project-2gbd"&gt;10 Intriguing Public REST APIs For Your Next Project&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Imago Dev&lt;/strong&gt;  – The notion of working on side projects gets thrown out a lot amongst the programming community. It can be intimidating sitting in front of a blank code editor wondering what to build. Hosts of blog posts have been written recommending building…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://blog.mozilla.org/blog/2019/09/03/todays-firefox-blocks-third-party-tracking-cookies-and-cryptomining-by-default/"&gt;Today’s Firefox Blocks Third-Party Tracking Cookies and Cryptomining by Default – The Mozilla Blog&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Mozilla&lt;/strong&gt;  – Feb 21, 2018, 11:34 AM – Today, Firefox on desktop and Android will — by default — empower and protect all our users by blocking third-party tracking cookies and cryptominers. This milestone marks a major step in our multi-year effort to bring stronger…&lt;/p&gt;

&lt;h2&gt;
  
  
  Till Next Week
&lt;/h2&gt;

&lt;p&gt;Want to share something? Let me know by leaving a comment below or emailing &lt;a href="//mailto:brett@wipdeveloper.com"&gt;brett@wipdeveloper.com&lt;/a&gt;  or following and tell me on &lt;a href="https://twitter.com/BrettMN"&gt;Twitter/BrettMN&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Don’t forget to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt; to receive free the &lt;a href="https://wipdeveloper.com/"&gt;WIPDeveloper.com&lt;/a&gt; weekly newsletter every Sunday&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/around-the-web-20190906/"&gt;Around the Web – 20190906&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>blog</category>
    </item>
    <item>
      <title>Around the Web – 20190830</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Sat, 31 Aug 2019 01:52:20 +0000</pubDate>
      <link>https://dev.to/brettmn/around-the-web-20190830-1c64</link>
      <guid>https://dev.to/brettmn/around-the-web-20190830-1c64</guid>
      <description>&lt;p&gt;And now for somethings to read (or watch) over the weekend, if you have some spare time that is.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.gooddaysirpodcast.com/227"&gt;Stuffing JSON Everywhere&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Good Day, Sir! Show&lt;/strong&gt;  – Jeremy Ross – In this episode, we discuss options for automating data extracts from Salesforce to a CSV file, the usage of JSON for configuration data, and part 2/2 of Jeremy’s conversation with Shane McLaughlin.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.amazon.com/gp/product/B01MY7GHKJ/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;amp;tag=wipdevelope05-20&amp;amp;creative=9325&amp;amp;linkCode=as2&amp;amp;creativeASIN=B01MY7GHKJ&amp;amp;linkId=f9d9e9574e7296a9049dfe48ae6ddab7"&gt;Super Mario Odyssey&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;This has been a fun game to play with the kids and it gets dramatically more challenging with someone else controlling Cappy.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.pluralsight.com/courses/play-by-play-untangle-production-orgs-salesforce-dx-unlocked-packages"&gt;Play by Play: Sipping the Happy Soup – Untangle Production Orgs with Salesforce DX Unlocked Packages&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Pluralsight&lt;/strong&gt;  – Jun 13 – In this course, you’ll learn how to use Salesforce DX Unlocked Packages to overcome a major challenge of Org-based development – the infamous Metadata Happy Soup. See how to untangle unstructured metadata and convert it into a set of flexible and…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://wpandup.org/2019/08/dear-impostor-syndrome/"&gt;Dear Impostor Syndrome…&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;WP&amp;amp;UP&lt;/strong&gt;  – Aug 17, 5:35 AM – An honest, open and forthright letter written by me, to me, with the hope it will help you. We’ve known each other for a long time, and it’s been a problematic relationship, these conversations are never easy. I want to be honest and open about how…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://yashints.dev/blog/2019/08/25/native-lazyloading/"&gt;Native lazy loading is landed in Chrome&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Yashints&lt;/strong&gt;  – Aug 25 – Lazy loading resources is one of the important parts of web performance tuning, simply because offscreen resources can add a lot of weight to your page if loaded eagerly. I’ve gone through many tips and tricks in my image optimisation article which…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://daverupert.com/2019/08/what-i-like-about-eleventy/"&gt;What I Like About Eleventy&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;daverupert.com&lt;/strong&gt;  – Over the last month so, I’ve been working with Dr. Julian Jones to port some design system projects from Jekyll over to Eleventy, the feral possum of static site generators. Why undertake a whole replatforming initiative? Well, there were two…&lt;/p&gt;

&lt;h2&gt;
  
  
  Till Next Week
&lt;/h2&gt;

&lt;p&gt;Want to share something? Let me know by leaving a comment below or emailing &lt;a href="//mailto:brett@wipdeveloper.com"&gt;brett@wipdeveloper.com&lt;/a&gt;  or following and tell me on &lt;a href="https://twitter.com/BrettMN"&gt;Twitter/BrettMN&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Don’t forget to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt; to receive free the &lt;a href="https://wipdeveloper.com/"&gt;WIPDeveloper.com&lt;/a&gt; weekly newsletter every Sunday&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/around-the-web-20190830/"&gt;Around the Web – 20190830&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>blog</category>
    </item>
    <item>
      <title>LWC – Passing Data to a Child Component</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Wed, 28 Aug 2019 20:34:12 +0000</pubDate>
      <link>https://dev.to/brettmn/lwc-passing-data-to-a-child-component-4oh7</link>
      <guid>https://dev.to/brettmn/lwc-passing-data-to-a-child-component-4oh7</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/ia1KJ9IFS2Y"&gt;
&lt;/iframe&gt;
&lt;br&gt;
Hello, I’m Brett with WIPDeveloper.com. Last time, we added a child component to a custom lightning web component. This time, let’s try passing some information to the child component.&lt;/p&gt;

&lt;p&gt;This is going to look very similar to using the lightning web components that are provided by Salesforce because the syntax is virtually the same from the parents point of view, the child on the other hand, we have to prepare a little bit.&lt;/p&gt;

&lt;p&gt;So I have the child component down here in the lower portion of the screen. And what we’re going to do is go to the JavaScript, and we’re going to create a property current &lt;code&gt;ourProperty&lt;/code&gt;. Now we get so we can bind data to it from the parent, we have to use the API decorator. And for the API decorator, we have to import them from the LWC. So we’re importing it online five and using it to decorate &lt;code&gt;ourProperty&lt;/code&gt;. Now we save that there shouldn’t be any mission be any differences on our church, because page because we didn’t use any change in any market.&lt;/p&gt;

&lt;p&gt;So let’s add that to our markup, refresh it, there should be just a dash, because we’re not actually setting our property.&lt;/p&gt;

&lt;p&gt;Now, let’s add in our parent component on the upper right hand corner or side of the screen, we’re going to duplicate the child component and we’re going to add &lt;code&gt;our-property&lt;/code&gt;, we will assign a value to it.&lt;/p&gt;

&lt;p&gt;Save that, and we should get two components over here, one that says child dash out from parent and when it says child dash now.&lt;/p&gt;

&lt;p&gt;Since it is decorated with the API decorator, and we aren’t trying to expose it through one of the targets. Because even if we were trying to expose it through the targets, I don’t know which one would work in this case. So to set a default value we will use will assign a proper assignment value in the JavaScript file. This might cause if you’re using lightning debug mode, might see some warnings about setting the property. But this is the way instead of default value that I know of right now.&lt;/p&gt;

&lt;p&gt;Now set the default is from child and we can refresh the page. And we should have two components child from parent child from child and that is how we pass data from our parent component to our child component and how to set the property as a default value.&lt;/p&gt;

&lt;h2&gt;
  
  
  That’s it for now.
&lt;/h2&gt;

&lt;p&gt;Remember to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt;  and you can get updated with any new information we have on WIPDeveloper.com.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/lwc-passing-data-to-a-child-component/"&gt;LWC – Passing Data to a Child Component&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>video</category>
      <category>lwc</category>
      <category>salesforce</category>
      <category>webcomponents</category>
    </item>
    <item>
      <title>LWC – Using a Child Component</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Mon, 26 Aug 2019 13:00:58 +0000</pubDate>
      <link>https://dev.to/brettmn/lwc-using-a-child-component-3lo8</link>
      <guid>https://dev.to/brettmn/lwc-using-a-child-component-3lo8</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/A3GxlsZGXjE"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Hi, I’m Brett with WIPDeveloper.com, I wanted to take a quick look at using a child component and a custom Lightning web component.&lt;/p&gt;

&lt;p&gt;So the first thing we have to do is make a component to hold the child component. So I’m going to make a new lightning web component.&lt;/p&gt;

&lt;p&gt;I’m going to call this one parent. And then I will make a new one. The first thing we’re going to do is give it some markup. Give it a title of parent. So we know where we so we can see it on the page. And I misspelled parent, so let’s change that, or let me spell component.&lt;/p&gt;

&lt;p&gt;So I’m going to deploy this, it doesn’t have the proper targets. So&lt;/p&gt;

&lt;p&gt;first, I’m going to take the targets from the other one just so I don’t have to.&lt;/p&gt;

&lt;p&gt;Deploy it.&lt;/p&gt;

&lt;p&gt;Now we have to add a tour page. So refresh our list of components.&lt;/p&gt;

&lt;p&gt;Drop it in there. So momentarily saw, it’s a child component, and that’s because of a dry run I did earlier. Now we refresh our page, we should see our parent component.&lt;/p&gt;

&lt;p&gt;Now, we need to add a child component. So let’s go to to add a new Lightning web component called child.&lt;/p&gt;

&lt;p&gt;And we’re going to mark this one as exposed, create it, give it some HTML. Going to give it a panning around small.&lt;/p&gt;

&lt;p&gt;Now, this is deployed to our org, but we have to get it so that it shows up in the body of the parent component. And so what we need to do in the parent component is we’re going to add it like we would a normal HTML element.&lt;/p&gt;

&lt;p&gt;So all custom web components require two names separated by or two words separated by a dash in the tag. Since we’re using Lightning Web Components, all our tags are prefixed with the namespace. So our child component that has one name is actually has a prefix of our namespace. So in this case, it’s &lt;code&gt;c&lt;/code&gt;, and then &lt;code&gt;c-child&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;And we’ve added our child component to our parent component when we refresh the page again.&lt;/p&gt;

&lt;p&gt;We will see our child of course it doesn’t look very good. Why does it not look very good?&lt;/p&gt;

&lt;p&gt;Oh, because it’s outside of the card.&lt;/p&gt;

&lt;p&gt;Oops.&lt;/p&gt;

&lt;p&gt;No, it’ll be inside the card. Everything will be fine.&lt;/p&gt;

&lt;p&gt;Now it’s our&lt;/p&gt;

&lt;p&gt;Doesn’t look fine, the child isn’t padded enough.&lt;/p&gt;

&lt;p&gt;Wrong. Oops. Wrong autocomplete.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;slds-p-around_small&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Refresh the page.&lt;/p&gt;

&lt;p&gt;There padding is a little better. Why don’t we make that medium&lt;/p&gt;

&lt;p&gt;Now we can see the child lined up with parent.&lt;/p&gt;

&lt;p&gt;And there you go. We are now using a child component in our parent component.&lt;/p&gt;

&lt;h2&gt;
  
  
  That’s it for now.
&lt;/h2&gt;

&lt;p&gt;Remember to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt;  and you can get updated with any new information we have on WIPDeveloper.com.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/lwc-using-a-child-component/"&gt;LWC – Using a Child Component&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>video</category>
      <category>lwc</category>
      <category>salesforce</category>
      <category>webcomponents</category>
    </item>
    <item>
      <title>Around the Web – 20190823</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Fri, 23 Aug 2019 18:56:40 +0000</pubDate>
      <link>https://dev.to/brettmn/around-the-web-20190823-25lo</link>
      <guid>https://dev.to/brettmn/around-the-web-20190823-25lo</guid>
      <description>&lt;p&gt;And now for somethings to read (or watch) over the weekend, if you have some spare time that is.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.gooddaysirpodcast.com/226"&gt;Spamming the Debug Log&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Good Day, Sir! Show&lt;/strong&gt;  – Jeremy Ross – In this episode, we discuss various things learned as an ISV, the usefulness of IDEs and browser debug tools, jest, Salesforce’s acquisition of ClickSoftware, shareholder value, public/private/hybrid clouds, Salesforce’s decision to tone down its…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.amazon.com/gp/product/B07HCZ7LPW/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;amp;tag=wipdevelope05-20&amp;amp;creative=9325&amp;amp;linkCode=as2&amp;amp;creativeASIN=B07HCZ7LPW&amp;amp;linkId=16700e7aeefaf82a3b37653a573a2dcb"&gt;New Super Mario Bros. U Deluxe – Nintendo Switch&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;We have been having fun playing this as a family. Even when the level ends with the youngest killing everyone as he runs off the screen…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://github.com/toddhalfpenny/sf-confetti-block-chrome"&gt;SF Confetti Block Chrome&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Chrome browser extension to hide all Salesforce celebration confetti. This is built for grumpy folk like me, who don’t want to see confetti, and has been made as there is no way to turn it off on a per user basis. This extension…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://medium.com/creme-de-la-crm/awesome-sfdx-plugins-the-repo-8e99d408752"&gt;Awesome SFDX Plugins: the Repo&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;creme de la crm&lt;/strong&gt;  – Chris Stegall – Aug 22, 5:01 AM – Developing for Salesforce is a key part of the platform’s powerful flexibility. On top of robust out-of-the-box functionality and seemingly-limitless configuration options, coding your own solutions to unique business-needs is what really elevates…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://techcrunch.com/2019/08/21/how-to-protect-and-clean-your-apple-card/"&gt;How to protect and clean your Apple Card&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;TechCrunch&lt;/strong&gt;  – Brian Heater – Aug 21, 8:23 AM – First of all, keep it out of the light. It hates bright light, especially sunlight, it’ll kill it. Second, don’t give it any water, not even to drink. But the most important rule, the rule you can never forget, no matter how much it cries, no…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://gedd.ski/post/service-workies-chapter4/"&gt;Service Workies Ch4 – Cache&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Geddski&lt;/strong&gt;  – Service Workies chapter 4 is released and ready to play! In chapters one through three you’ve learned the Service Worker basics — how to manage lifecycles, react to events, and intercept requests. You’ve got the fundamentals down. You’ve…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://css-tricks.com/using-relpreconnect-to-establish-network-connections-early-and-increase-performance/"&gt;Using rel=’preconnect’ to establish network connections early and increase performance&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;CSS-Tricks&lt;/strong&gt;  – Aug 19, 6:05 PM – Easily manage projects with monday.com Adding rel=preconnect to a  informs the browser that your page intends to establish a connection to another domain, and that you’d like the process to start as soon as possible. Resources will load…&lt;/p&gt;

&lt;h2&gt;
  
  
  Till Next Week
&lt;/h2&gt;

&lt;p&gt;Want to share something? Let me know by leaving a comment below or emailing &lt;a href="//mailto:brett@wipdeveloper.com"&gt;brett@wipdeveloper.com&lt;/a&gt;  or following and tell me on &lt;a href="https://twitter.com/BrettMN"&gt;Twitter/BrettMN&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Don’t forget to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt; to receive free the &lt;a href="https://wipdeveloper.com/"&gt;WIPDeveloper.com&lt;/a&gt; weekly newsletter every Sunday&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/around-the-web-20190823/"&gt;Around the Web – 20190823&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>blog</category>
    </item>
    <item>
      <title>LWC – Avoid HTMLElement Properties</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Thu, 22 Aug 2019 21:45:14 +0000</pubDate>
      <link>https://dev.to/brettmn/lwc-avoid-htmlelement-properties-2bp6</link>
      <guid>https://dev.to/brettmn/lwc-avoid-htmlelement-properties-2bp6</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/tIIMbzUlK0w"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Hello, I’m Brett with WIPDeveloper.com. Last time, we talked about using it as a property in our Lightning web component, and how it was causing an error when the Lightning Debug Mode was enabled. Asking on Twitter did get a response from Kevin V. who works at Salesforce and is one of the architects behind Lightning Web Components. And it seems that all the HTMLElement properties are automatically hooked up to lightning elements, or the LightningElement in LWC.&lt;/p&gt;

&lt;p&gt;So if you look at this is on the MDN Docs or Mozilla docs, you can look at all the property names that we probably should be avoiding. So that’s this list over here. And I was playing around with it. And I was able, and I’m not saying you should do this, some of these will actually work somewhat. Like you, you use content editable and try to bind to it, it won’t throw an error. But it doesn’t actually pass the value to the template. Inner text does pass the value to the template. But it’s probably best to avoid anything that is declared as a property on the HTMLElement. side now, since it isn’t actually listed over here, should be right before &lt;code&gt;innerText&lt;/code&gt;. It’s actually declared on the Element. So not only should you avoid all of these, which probably makes sense, you should avoid all the properties declared in the base Element. And those are listed also on the MDN website. So if you were to list them on your site, or in your JavaScript, it’d be a pretty big list. So almost 115 properties to avoid.&lt;/p&gt;

&lt;p&gt;Now, if I uncomment one of these, like, I don’t know, &lt;code&gt;accessKey&lt;/code&gt; and apply it. We will see refreshing the page. But I do get that error. So best to avoid any of the properties to find on HTMLElement and the Element one working with Lightning Web Components. They might be working in a rule for linting to prevent you from being able to save it. So I will include a list below. So if you are having a problem with this, you might stumble upon this and understand why.&lt;/p&gt;

&lt;h2&gt;
  
  
  Properties to Avoid
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;accessKey&lt;/li&gt;
&lt;li&gt;attributes&lt;/li&gt;
&lt;li&gt;childElementCount&lt;/li&gt;
&lt;li&gt;children&lt;/li&gt;
&lt;li&gt;classList&lt;/li&gt;
&lt;li&gt;className&lt;/li&gt;
&lt;li&gt;clientHeight&lt;/li&gt;
&lt;li&gt;clientLeft&lt;/li&gt;
&lt;li&gt;clientTop&lt;/li&gt;
&lt;li&gt;clientWidth&lt;/li&gt;
&lt;li&gt;currentStyle&lt;/li&gt;
&lt;li&gt;firstElementChild&lt;/li&gt;
&lt;li&gt;id&lt;/li&gt;
&lt;li&gt;innerHTML&lt;/li&gt;
&lt;li&gt;lastElementChild&lt;/li&gt;
&lt;li&gt;localName&lt;/li&gt;
&lt;li&gt;name&lt;/li&gt;
&lt;li&gt;namespaceURI&lt;/li&gt;
&lt;li&gt;nextElementSibling&lt;/li&gt;
&lt;li&gt;onfullscreenchange&lt;/li&gt;
&lt;li&gt;onfullscreenerror&lt;/li&gt;
&lt;li&gt;openOrClosedShadowRoot&lt;/li&gt;
&lt;li&gt;outerHTML&lt;/li&gt;
&lt;li&gt;prefix&lt;/li&gt;
&lt;li&gt;previousElementSibling&lt;/li&gt;
&lt;li&gt;runtimeStyle&lt;/li&gt;
&lt;li&gt;scrollHeight&lt;/li&gt;
&lt;li&gt;scrollLeft&lt;/li&gt;
&lt;li&gt;scrollLeftMax&lt;/li&gt;
&lt;li&gt;scrollTop&lt;/li&gt;
&lt;li&gt;scrollTopMax&lt;/li&gt;
&lt;li&gt;scrollWidth&lt;/li&gt;
&lt;li&gt;shadowRoot&lt;/li&gt;
&lt;li&gt;slot&lt;/li&gt;
&lt;li&gt;tabStop&lt;/li&gt;
&lt;li&gt;tagName&lt;/li&gt;
&lt;li&gt;contentEditable&lt;/li&gt;
&lt;li&gt;contextMenu&lt;/li&gt;
&lt;li&gt;dataset&lt;/li&gt;
&lt;li&gt;dir&lt;/li&gt;
&lt;li&gt;hidden&lt;/li&gt;
&lt;li&gt;innerText&lt;/li&gt;
&lt;li&gt;isContentEditable&lt;/li&gt;
&lt;li&gt;lang&lt;/li&gt;
&lt;li&gt;nonce&lt;/li&gt;
&lt;li&gt;offsetHeight&lt;/li&gt;
&lt;li&gt;offsetLeft&lt;/li&gt;
&lt;li&gt;offsetParent&lt;/li&gt;
&lt;li&gt;offsetTop&lt;/li&gt;
&lt;li&gt;offsetWidth&lt;/li&gt;
&lt;li&gt;onabort&lt;/li&gt;
&lt;li&gt;onanimationcancel&lt;/li&gt;
&lt;li&gt;onanimationend&lt;/li&gt;
&lt;li&gt;onanimationiteration&lt;/li&gt;
&lt;li&gt;onauxclick&lt;/li&gt;
&lt;li&gt;onblur&lt;/li&gt;
&lt;li&gt;oncancel&lt;/li&gt;
&lt;li&gt;oncanplay&lt;/li&gt;
&lt;li&gt;oncanplaythrough&lt;/li&gt;
&lt;li&gt;onchange&lt;/li&gt;
&lt;li&gt;onclick&lt;/li&gt;
&lt;li&gt;onclose&lt;/li&gt;
&lt;li&gt;oncontextmenu&lt;/li&gt;
&lt;li&gt;oncopy&lt;/li&gt;
&lt;li&gt;oncuechange&lt;/li&gt;
&lt;li&gt;oncut&lt;/li&gt;
&lt;li&gt;ondblclick&lt;/li&gt;
&lt;li&gt;ondurationchange&lt;/li&gt;
&lt;li&gt;onended&lt;/li&gt;
&lt;li&gt;onerror&lt;/li&gt;
&lt;li&gt;onfocus&lt;/li&gt;
&lt;li&gt;ongotpointercapture&lt;/li&gt;
&lt;li&gt;oninput&lt;/li&gt;
&lt;li&gt;oninvalid&lt;/li&gt;
&lt;li&gt;onkeydown&lt;/li&gt;
&lt;li&gt;onkeypress&lt;/li&gt;
&lt;li&gt;onkeyup&lt;/li&gt;
&lt;li&gt;onload&lt;/li&gt;
&lt;li&gt;onloadeddata&lt;/li&gt;
&lt;li&gt;onloadedmetadata&lt;/li&gt;
&lt;li&gt;onloadend&lt;/li&gt;
&lt;li&gt;onloadstart&lt;/li&gt;
&lt;li&gt;onlostpointercapture&lt;/li&gt;
&lt;li&gt;onmousedown&lt;/li&gt;
&lt;li&gt;onmouseenter&lt;/li&gt;
&lt;li&gt;onmouseleave&lt;/li&gt;
&lt;li&gt;onmousemove&lt;/li&gt;
&lt;li&gt;onmouseout&lt;/li&gt;
&lt;li&gt;onmouseover&lt;/li&gt;
&lt;li&gt;onmouseup&lt;/li&gt;
&lt;li&gt;onpaste&lt;/li&gt;
&lt;li&gt;onpause&lt;/li&gt;
&lt;li&gt;onplay&lt;/li&gt;
&lt;li&gt;onpointercancel&lt;/li&gt;
&lt;li&gt;onpointerdown&lt;/li&gt;
&lt;li&gt;onpointerenter&lt;/li&gt;
&lt;li&gt;onpointerleave&lt;/li&gt;
&lt;li&gt;onpointermove&lt;/li&gt;
&lt;li&gt;onpointerout&lt;/li&gt;
&lt;li&gt;onpointerover&lt;/li&gt;
&lt;li&gt;onpointerup&lt;/li&gt;
&lt;li&gt;onreset&lt;/li&gt;
&lt;li&gt;onresize&lt;/li&gt;
&lt;li&gt;onscroll&lt;/li&gt;
&lt;li&gt;onselect&lt;/li&gt;
&lt;li&gt;onselectionchange&lt;/li&gt;
&lt;li&gt;onselectstart&lt;/li&gt;
&lt;li&gt;onsubmit&lt;/li&gt;
&lt;li&gt;ontouchcancel&lt;/li&gt;
&lt;li&gt;ontouchstart&lt;/li&gt;
&lt;li&gt;ontransitioncancel&lt;/li&gt;
&lt;li&gt;ontransitionend&lt;/li&gt;
&lt;li&gt;onwheel&lt;/li&gt;
&lt;li&gt;outerText&lt;/li&gt;
&lt;li&gt;style&lt;/li&gt;
&lt;li&gt;tabIndex&lt;/li&gt;
&lt;li&gt;title&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Links
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Element"&gt;Element on MDN&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement#Properties"&gt;HTMLElement on MDN&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://twitter.com/diervo?ref_src=twsrc%5Etfw"&gt;@diervo&lt;/a&gt; was right: &lt;code&gt;id&lt;/code&gt; and all HTMLElement properties are automatically hooked up to LightningElement. See &lt;a href="https://t.co/4JOB4pVv8f"&gt;https://t.co/4JOB4pVv8f&lt;/a&gt;. The fix is to use variable names that don't collide with props on HTMLElement.&lt;/p&gt;

&lt;p&gt;— Kevin Venkiteswaran (@KevinV11n) &lt;a href="https://twitter.com/KevinV11n/status/1163683197617467393?ref_src=twsrc%5Etfw"&gt;August 20, 2019&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  That’s it for now.
&lt;/h2&gt;

&lt;p&gt;Remember to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt;  and you can get updated with any new information we have on WIPDeveloper.com.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/lwc-avoid-htmlelement-properties/"&gt;LWC – Avoid HTMLElement Properties&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>video</category>
      <category>lwc</category>
      <category>salesforce</category>
      <category>salesforcedeveloper</category>
    </item>
    <item>
      <title>LWC – Id Property with Lighting Debug Enabled Issue</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Mon, 19 Aug 2019 13:00:25 +0000</pubDate>
      <link>https://dev.to/brettmn/lwc-id-property-with-lighting-debug-enabled-issue-3l7j</link>
      <guid>https://dev.to/brettmn/lwc-id-property-with-lighting-debug-enabled-issue-3l7j</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/VW6mp38wVrU"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Hello, I’m Brett with WIPDeveloper.com. The other day while developing a Lightning web component, I ran into this issue where when importing the Salesforce user ID and assigning it to a property in the component called ID. And this is a very simple component, because that’s all it’s doing in the JavaScript. And all it’s doing in the HTML is displaying the ID. Now, this is pretty straightforward. You think there shouldn’t be any issues. And there’s not it’s loaded on the page.&lt;/p&gt;

&lt;p&gt;The issue arises when you enable lightning debug mode. So if I go into the debug mode, and enable it, and refresh the page with component on it, I start seeing this, &lt;code&gt;render threw an error in 'c:importUserId Trial' [Assert, Violations: Failed to construct '&amp;lt;c-import-user-id-trial&amp;gt;': The results must not have attributes.]&lt;/code&gt; and took a while to figure it out. And saw some responses on Twitter about this. I thought the issue was with the important statement itself. Obviously, it was working before I turn on lightning debug mode. So if I turn it off, and refresh the page, it works again. But if I want the debug modem, that’s not a solution. So I’m going to enable it, make sure it’s still an issue. And it is. Now, I’m going to change the property name from it to something else. So thanks to you, user, Id save it, push this and refresh the page. Maybe a second time.&lt;/p&gt;

&lt;p&gt;Oh, I should update the HTML template.&lt;/p&gt;

&lt;p&gt;Refresh the page. We can now see RTD ID. And we can open up the developer console in the browser and see that we are in lightning debug mode, because we get all those wonderful messages from Salesforce. Yay. So if if you are encountering the renderer threw an error, assert violation check to see if you have any properties that are called just ID, ID and adjust accordingly. It’s to my understanding, not supposed to be something that’s prevented. Based on some of the responses I saw. It’s not supposed to be an issue, unless is an API decorated attribute but that is not the case that I encountered.&lt;/p&gt;

&lt;h2&gt;
  
  
  That’s it for now.
&lt;/h2&gt;

&lt;p&gt;Remember to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt;  and you can get updated with any new information we have on WIPDeveloper.com.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/lwc-id-property-with-lighting-debug-enabled-issue/"&gt;LWC – Id Property with Lighting Debug Enabled Issue&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>video</category>
      <category>lwc</category>
      <category>salesforce</category>
    </item>
    <item>
      <title>LWC – Getting Data from Apex</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Fri, 16 Aug 2019 21:27:50 +0000</pubDate>
      <link>https://dev.to/brettmn/lwc-getting-data-from-apex-3m8f</link>
      <guid>https://dev.to/brettmn/lwc-getting-data-from-apex-3m8f</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/-_Ru-A6455A"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Hi, I’m Brett with WIPDeveloper.com. Last time we learned about getting data using the wire service so that we could get information from Salesforce without having to write any server side code or Apex. This time, we’re going to take a look at retrieving data from Salesforce by calling an Apex class and having it return the data in a format that we want.&lt;/p&gt;

&lt;p&gt;To start with, I have duplicated the component that we had at the end of using the wire service. And it looks the same because it’s exactly the same right now. And we will start by changing the only HTML change between the two. We are going to change using wire service to using Apex.&lt;/p&gt;

&lt;p&gt;And we’ll save that deploy, make sure that we do have two different components on the page.&lt;/p&gt;

&lt;p&gt;Looks like it’s done.&lt;/p&gt;

&lt;p&gt;So there we go, the bottom one is using Apex, or it will be.&lt;/p&gt;

&lt;p&gt;So we don’t need to make any other changes with the HTML. So we’ll close that out. Before we get started with the JavaScript file, let’s take a look at the class we’re going to use, we’re going to use a class called firstComponentController.&lt;/p&gt;

&lt;p&gt;It declares one static method called &lt;code&gt;init&lt;/code&gt;, and it has decorated with the aura enabled and is using cachable equals true.&lt;/p&gt;

&lt;p&gt;It’s going to return this map that is a string and object and we query for the user ID that’s provided. Or we query for the user ID that we get from user info dot get user ID. And if we do find the user, we add that to the return object as the user and then we set the success to true and we return theuser object. So that’s all that apex, it’s pretty simple. You probably need more than this in your own code.&lt;/p&gt;

&lt;p&gt;Now to access that in the lightning web component, we are going to get rid of &lt;code&gt;getRecord&lt;/code&gt; because we aren’t going to use that what we will use is we use,&lt;/p&gt;

&lt;p&gt;we will import&lt;/p&gt;

&lt;p&gt;&lt;code&gt;init&lt;/code&gt; actually from Salesforce Apex&lt;/p&gt;

&lt;p&gt;first component init.&lt;/p&gt;

&lt;p&gt;Just there you saw me using the autocomplete for that is part of the Visual Studio Code plugins. So I don’t have to type the whole thing out with did some of the work for me. And we use &lt;code&gt;init&lt;/code&gt; instead of the he &lt;code&gt;getrecord&lt;/code&gt; handler.&lt;/p&gt;

&lt;p&gt;And we don’t need, we’re going to actually get rid of all that.&lt;/p&gt;

&lt;p&gt;We will pass that into our wire handler. And then we’ll have that decorate the method. We’re going to call it &lt;code&gt;handleInit&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;And we’ll have it deconstruct the results so that we can get the error&lt;/p&gt;

&lt;p&gt;and the data.&lt;/p&gt;

&lt;p&gt;Whoops, did not be the type out the data.&lt;/p&gt;

&lt;p&gt;And in this function, we will just&lt;/p&gt;

&lt;p&gt;Well, what do we want to do? I like to add a little. Since we’re playing around with it, I’m going to add a window console log here.&lt;/p&gt;

&lt;p&gt;So when we’re looking at it in the debug statements, we can know where it was.&lt;/p&gt;

&lt;p&gt;And I’m going to pass in the air and the data so that those are logged out.&lt;/p&gt;

&lt;p&gt;Now, first thing we should do is actually check to see if there is an error.&lt;/p&gt;

&lt;p&gt;So we’ll use&lt;/p&gt;

&lt;p&gt;if error which, which JavaScript is.&lt;/p&gt;

&lt;p&gt;If that object exists, it’ll behave. It’ll act like a true statement and go into this section of code. And we’re going to just log it to the console.&lt;/p&gt;

&lt;p&gt;And it would help if I could spell.&lt;/p&gt;

&lt;p&gt;And then we will.&lt;/p&gt;

&lt;p&gt;We’re going to do else/if.&lt;/p&gt;

&lt;p&gt;Else if there’s data, we’re going to set the data on.&lt;/p&gt;

&lt;p&gt;We don’t have a user yet. We can get rid of the userID, but&lt;/p&gt;

&lt;p&gt;this.user&lt;/p&gt;

&lt;p&gt;data dot user&lt;/p&gt;

&lt;p&gt;and what do we do if that’s not right?&lt;/p&gt;

&lt;p&gt;Let’s just add a little final statement,&lt;/p&gt;

&lt;p&gt;just let us know that we got to the wrong part of the code.&lt;/p&gt;

&lt;p&gt;Do here, else is spelled wrong.&lt;/p&gt;

&lt;p&gt;There we go. So now when the wire service calls &lt;code&gt;init&lt;/code&gt; in our Apex code, the handler is going to&lt;/p&gt;

&lt;p&gt;log the error message and the data object at the start of the method. And then we’ll check if there’s an error message because most likely, this will end up as a null in the console. But it’ll log, something went wrong to the browser console window. If nothing goes wrong, and there is data, we set the data dot user onto the this class. Let’s get rid of the user ID right now.&lt;/p&gt;

&lt;p&gt;We set the user in this class so that we can access it in the template. And then we, if there’s no error and there’s no data, start wonder what’s going on. Just most likely, that will never happen.&lt;/p&gt;

&lt;p&gt;One thing that’s different&lt;/p&gt;

&lt;p&gt;is we don’t actually need all these checks when we want to do because we don’t have user data that fields named value to go down. What we want to do is just check&lt;/p&gt;

&lt;p&gt;we got so what we’re doing here is we’re checking to see if&lt;/p&gt;

&lt;p&gt;does this user exist? If does we return the user name, otherwise, we return an empty string&lt;/p&gt;

&lt;p&gt;And we do that so that&lt;/p&gt;

&lt;p&gt;we’re just checking this so we don’t accidentally try going for the name when the before the users populated because that could throw errors and just be easier if we don’t do that. And now let’s see if we have it in.&lt;/p&gt;

&lt;p&gt;deploy this to Salesforce.&lt;/p&gt;

&lt;p&gt;See if we get a name that’s not look like we have a name. What did we do wrong?&lt;/p&gt;

&lt;p&gt;Oh, let’s go to think we need to track this. So a tracking decorator on the user. And that means we have to import it.&lt;/p&gt;

&lt;p&gt;So we import it from LWC. And we decorate the user and will deploy this&lt;/p&gt;

&lt;p&gt;Let’s see if this loads first.&lt;/p&gt;

&lt;p&gt;Here we go, are we have our users name, we don’t have the rest of the values because right now we are still checking for the user data fields on all the others.&lt;/p&gt;

&lt;p&gt;I’m going to copy and paste the return statement from the name so that it’s&lt;/p&gt;

&lt;p&gt;no, let me just have to just copy and paste that over and over versus typing it out every time.&lt;/p&gt;

&lt;p&gt;And right now, that means all of them would be name, but we don’t want to&lt;/p&gt;

&lt;p&gt;change the email one. If I could spell correctly to email, and the company name to&lt;/p&gt;

&lt;p&gt;you guessed that company name. And don’t hold on for the suspense. But phone is going to return the user phone.&lt;/p&gt;

&lt;p&gt;deploy this, go back to our page and refresh it.&lt;/p&gt;

&lt;p&gt;There you go. We have our company name at the top. We have the username, the fake phone number.&lt;/p&gt;

&lt;p&gt;WIPdeveloper.com is the company name again, and the email address of the user. So we’re returning the same values from our Apex controller as we have seen them on the screen using the same template except for updating the label as we used for the wire service. So that’s pretty slick. Of course we aren’t using built in functionality for from Salesforce anymore. So we will have to be responsible for maintaining any changes that we with how that logic is handled.&lt;/p&gt;

&lt;h2&gt;
  
  
  That’s it for now.
&lt;/h2&gt;

&lt;p&gt;Remember to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt;  and you can get updated with any new information we have on WIPDeveloper.com.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/lwc-getting-data-from-apex/"&gt;LWC – Getting Data from Apex&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>video</category>
      <category>javascript</category>
      <category>lwc</category>
      <category>salesforce</category>
    </item>
    <item>
      <title>Around the Web – 20190816</title>
      <dc:creator>Brett Nelson</dc:creator>
      <pubDate>Wed, 14 Aug 2019 21:30:32 +0000</pubDate>
      <link>https://dev.to/brettmn/around-the-web-20190816-2mh7</link>
      <guid>https://dev.to/brettmn/around-the-web-20190816-2mh7</guid>
      <description>&lt;p&gt;And now for somethings to read (or watch) over the weekend, if you have some spare time that is.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://salesforceway.com/podcast/salesforce-ide/"&gt;Create a Salesforce IDE – Illuminated Cloud&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Salesforce Way&lt;/strong&gt;  – Scott Wells, the author of Salesforce IDE, Illuminated Cloud, is an accomplished software architect and developer with over two decades of experience in all aspects of the software development process. Scott Wells joins to talk about why and how he…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.nuget.org/packages/DeveloperForce.Force/2.1.0"&gt;DeveloperForce.Force 2.1.0&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;NuGet Gallery&lt;/strong&gt;  – The DeveloperForce.Force NuGet provides a.NET library for interacting with Salesforce Lightning REST APIs. For projects that support PackageReference, copy this XML node into the project file to reference the package. The NuGet Team does not…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://wespeter.com/posts/ios13-pwa-improvements/"&gt;iOS 13 PWA Improvments&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;wespeter.com&lt;/strong&gt;  – Aug 10, 5:00 PM – I just installed the iOS 13 public beta on my iPhone today and wanted to see what improvements are in store for Progressive Web Apps (PWAs) running on iOS. There’s still a lot to dig into, but I wanted to capture my initial findings here. I’ll try…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://css-tricks.com/all-the-new-es2019-tips-and-tricks/"&gt;All the New ES2019 Tips and Tricks&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;CSS-Tricks&lt;/strong&gt;  – Aug 13, 7:32 AM – Easily manage projects with monday.com The ECMAScript standard has been updated yet again with the addition of new features in ES2019. Now officially available in node, Chrome, Firefox, and Safari you can also use Babel to compile these features to…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.lencoded.com/blogpost/jamstack"&gt;JAMstack, what is it and should I use it?&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;lencoded&lt;/strong&gt;  – I recently built my own website and blog (this one). This was my first time working from scratch on a proper web development project, and I think from the following search history we can all agree that I knew basically nothing (we all have to start…&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.wired.com/story/null-license-plate-landed-one-hacker-ticket-hell/"&gt;How a ‘NULL’ License Plate Landed One Hacker in Ticket Hell&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Wired&lt;/strong&gt;  – Brian Barrett – Aug 13, 5:51 PM – Joseph Tartaro never meant to cause this much trouble. Especially for himself. In late 2016, Tartaro decided to get a vanity license plate. A security researcher by trade, he ticked down possibilities that related to his work: SEGFAULT, maybe, or…&lt;/p&gt;

&lt;h2&gt;
  
  
  Till Next Week
&lt;/h2&gt;

&lt;p&gt;Want to share something? Let me know by leaving a comment below or emailing &lt;a href="//mailto:brett@wipdeveloper.com"&gt;brett@wipdeveloper.com&lt;/a&gt;  or following and tell me on &lt;a href="https://twitter.com/BrettMN"&gt;Twitter/BrettMN&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Don’t forget to sign up for &lt;strong&gt;&lt;a href="https://wipdeveloper.com/newsletter/"&gt;The Weekly Stand-Up!&lt;/a&gt;&lt;/strong&gt; to receive free the &lt;a href="https://wipdeveloper.com/"&gt;WIPDeveloper.com&lt;/a&gt; weekly newsletter every Sunday&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://wipdeveloper.com/around-the-web-20190816/"&gt;Around the Web – 20190816&lt;/a&gt; appeared first on &lt;a href="https://wipdeveloper.com"&gt;WIPDeveloper.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>blog</category>
    </item>
  </channel>
</rss>
