<?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>Forem: Alan Montgomery</title>
    <description>The latest articles on Forem by Alan Montgomery (@93alan).</description>
    <link>https://forem.com/93alan</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%2F132633%2Fe585a1a7-6d54-4b0c-904b-d55109e95067.jpeg</url>
      <title>Forem: Alan Montgomery</title>
      <link>https://forem.com/93alan</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/93alan"/>
    <language>en</language>
    <item>
      <title>React Hooks useState tutorial in 10 minutes</title>
      <dc:creator>Alan Montgomery</dc:creator>
      <pubDate>Sat, 10 Oct 2020 18:29:08 +0000</pubDate>
      <link>https://forem.com/93alan/react-hooks-usestate-tutorial-in-10-minutes-269</link>
      <guid>https://forem.com/93alan/react-hooks-usestate-tutorial-in-10-minutes-269</guid>
      <description>&lt;p&gt;Hey there!&lt;/p&gt;

&lt;p&gt;I've just released my 5th youtube video, and decided to get started on a React series, in no particular order as it'll build up over time. I've started with the useState hook, which we can use with functional components in React.&lt;/p&gt;

&lt;p&gt;Let me know what you think!&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/icrrnFSjg8c"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Push and Pop array methods in JavaScript tutorial (First video with my face 😮)</title>
      <dc:creator>Alan Montgomery</dc:creator>
      <pubDate>Thu, 08 Oct 2020 20:13:53 +0000</pubDate>
      <link>https://forem.com/93alan/push-and-pop-array-methods-in-javascript-tutorial-first-video-with-my-face-4o6a</link>
      <guid>https://forem.com/93alan/push-and-pop-array-methods-in-javascript-tutorial-first-video-with-my-face-4o6a</guid>
      <description>&lt;p&gt;I've just posted my 4th YouTube video 🙂 explaining the use of the Push and Pop array methods in JavaScript!&lt;/p&gt;

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

&lt;p&gt;Let me know what you think and please give it a like and if you enjoy it &lt;a href="https://bit.ly/alanmontgomerycoding" rel="noopener noreferrer"&gt;subscribe&lt;/a&gt; for more in the future.&lt;/p&gt;

&lt;p&gt;I'm enjoying making these 😎&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>I just started a YouTube on coding tutorials</title>
      <dc:creator>Alan Montgomery</dc:creator>
      <pubDate>Fri, 02 Oct 2020 00:26:44 +0000</pubDate>
      <link>https://forem.com/93alan/i-just-started-a-youtube-on-coding-tutorials-54m2</link>
      <guid>https://forem.com/93alan/i-just-started-a-youtube-on-coding-tutorials-54m2</guid>
      <description>&lt;p&gt;Nice to meet you all.&lt;/p&gt;

&lt;p&gt;I'm Alan - I have around 8 professional years of experience under my belt now. I consider myself a full stack developer but at the moment my full time role is Mobile Team Lead for a leading provider of local government software.&lt;/p&gt;

&lt;p&gt;On my day to day I code using ReactJS with the Ionic Framework to create our cross platform mobile apps.&lt;/p&gt;

&lt;p&gt;I've always wanted to start a youtube channel, with my own name, and introduce myself as myself, teaching what I know best: to code.&lt;/p&gt;

&lt;p&gt;I've just went ahead and got stuck in and put out my first quick coding tutorial on Javascript forEach loops.&lt;/p&gt;

&lt;p&gt;Check it here and let me know what you think:&lt;br&gt;
&lt;a href="https://youtu.be/yTLD4GNs1dA" rel="noopener noreferrer"&gt;📹 forEach array loop method - Javascript tutorial in under 5 minutes 👈&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fym278tdbyaa184ue2m8h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fym278tdbyaa184ue2m8h.png" alt="Foreach in JavaScript" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I'd appreciate a like and a comment (and even a sub) to help me get going!&lt;/p&gt;

&lt;p&gt;I'm definitely going to continue this little "Mini series" on these very small topics to get my channel off the ground. I plan on covering all types of array methods in JavaScript and maybe some more basic fundamentals aswell. All with the same styled art for thumbnails and the same sort of process. 👏😀&lt;/p&gt;

&lt;p&gt;In contrast to that I want to create some videos where I'm coding a real project to give an insight into how I code and give tips throughout the video, for example building a calculator, notes app, etc etc.&lt;/p&gt;

&lt;p&gt;I'm also planning on reviewing UI frameworks, CSS frameworks, component libraries etc!&lt;/p&gt;

&lt;p&gt;I'm planning on a video per day at the moment 🧙‍♂️&lt;/p&gt;

&lt;p&gt;Thanks!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>showdev</category>
    </item>
    <item>
      <title>I created a Web Development beginners online course!</title>
      <dc:creator>Alan Montgomery</dc:creator>
      <pubDate>Sat, 01 Aug 2020 01:14:12 +0000</pubDate>
      <link>https://forem.com/93alan/i-created-a-web-development-beginners-online-course-5b1o</link>
      <guid>https://forem.com/93alan/i-created-a-web-development-beginners-online-course-5b1o</guid>
      <description>&lt;p&gt;After a long few months and a lot of hours of video tutorial creation and editing, I've released my very own online course:&lt;/p&gt;

&lt;p&gt;Web Development: Beginners Guide to Basics (HTML, CSS, JS).&lt;/p&gt;

&lt;p&gt;I'm a senior software developer, currently specialising in mobile app development where I lead my mobile team in work and have over 8 years experience, so I really wanted to share some knowledge that I've gained and I thought an online course would be perfect.&lt;/p&gt;

&lt;p&gt;There are around 30 lectures, 5 quizzes, and a bonus section where I teach responsive CSS with flex, as well as a step by step lecture creating a personal website from scratch.&lt;/p&gt;

&lt;p&gt;Each video is split between a presentation slide to explain what topic/aspects we will be covering then the most part is live coding where I show how to put it into practice, explaining in great detail.&lt;/p&gt;

&lt;p&gt;I've had around 15 sales already from promoting a bit on my private Facebook group (Web Development for Beginners -1.5k members) and on twitter.&lt;/p&gt;

&lt;p&gt;If you'd like to check it out, you can find it here;&lt;br&gt;
&lt;a href="https://beginnerwebdevelopment.com" rel="noopener noreferrer"&gt;https://beginnerwebdevelopment.com&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>tutorial</category>
      <category>webdev</category>
      <category>html</category>
    </item>
    <item>
      <title>IOS Form Toolbar / Assistant - HELP?!</title>
      <dc:creator>Alan Montgomery</dc:creator>
      <pubDate>Tue, 23 Jul 2019 13:30:36 +0000</pubDate>
      <link>https://forem.com/93alan/ios-form-toolbar-assistant-help-4ni2</link>
      <guid>https://forem.com/93alan/ios-form-toolbar-assistant-help-4ni2</guid>
      <description>&lt;p&gt;Hey,&lt;/p&gt;

&lt;p&gt;I'm developing a PWA in ReactJS (Not ReactNative).&lt;/p&gt;

&lt;p&gt;I've ran into a potential issue which I want to get your thoughts on. It's to do with the "Form Toolbar" or the "Form Assistant" which is shown above the keyboard on IOS devices.&lt;/p&gt;

&lt;p&gt;Is there any way I can remove this or prevent this from showing without going Native? It's interrupting the flow of some of my select inputs and date inputs and I want to completely get rid of it.&lt;/p&gt;

&lt;p&gt;I've searched around and not been very successful - Hopefully someone can help out, Thank you!&lt;/p&gt;

&lt;p&gt;See screenshot&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpg5myek22v1296x5jimk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpg5myek22v1296x5jimk.png" width="800" height="322"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ios</category>
      <category>webdev</category>
      <category>help</category>
      <category>react</category>
    </item>
    <item>
      <title>Side Hustle Projects - Here's mine, what's yours?</title>
      <dc:creator>Alan Montgomery</dc:creator>
      <pubDate>Sat, 15 Jun 2019 22:27:11 +0000</pubDate>
      <link>https://forem.com/93alan/side-hustle-projects-here-s-mine-what-s-yours-1c4g</link>
      <guid>https://forem.com/93alan/side-hustle-projects-here-s-mine-what-s-yours-1c4g</guid>
      <description>&lt;p&gt;Hey,&lt;/p&gt;

&lt;p&gt;So I recently listened to an awesome podcast on SyntaxFM which was strongly around "Side Hustles". - basically a side project that you're working on aside from your main development job.&lt;/p&gt;

&lt;p&gt;I thought I'd jump on here and get everyone involved and see if anyone has a side hustle.&lt;/p&gt;

&lt;p&gt;I have only really launched mine after alot of self disbelief in it but it's finally here and I'm offering a free eBook as an incentive to gain interest and future potential customers.&lt;/p&gt;

&lt;p&gt;Im going to launch my first online educational course, which will be aimed at beginners starting off in web development, focusing on HTML, CSS and JS. In depth, 20+ lectures which I've started recording already.&lt;/p&gt;

&lt;p&gt;Here's the intro and free ebook;&lt;br&gt;
&lt;a href="https://free-ebook.thetechteacher.info/" rel="noopener noreferrer"&gt;https://free-ebook.thetechteacher.info/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let me know what you think of the e-book.&lt;/p&gt;

&lt;p&gt;What's your side hustle?? &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>sideprojects</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Understanding states in ReactJS</title>
      <dc:creator>Alan Montgomery</dc:creator>
      <pubDate>Wed, 30 Jan 2019 23:10:49 +0000</pubDate>
      <link>https://forem.com/93alan/understanding-states-in-reactjs-35l8</link>
      <guid>https://forem.com/93alan/understanding-states-in-reactjs-35l8</guid>
      <description>&lt;p&gt;Hi there - this is my first post and it's aimed at beginners to get an insight into the states in components.&lt;/p&gt;

&lt;p&gt;In ReactJS it's very useful to use the state in a component.&lt;/p&gt;

&lt;p&gt;We would first declare and initiate our state in our &lt;em&gt;constructor&lt;/em&gt; e.g;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;Manipulated&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we had a further function or piece of code that needed to &lt;em&gt;alter&lt;/em&gt; or &lt;em&gt;update&lt;/em&gt; the state of a component then we would use the &lt;em&gt;setState&lt;/em&gt; e.g;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;componentWillReceiveProps&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;NewProps&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;MyBool&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;NewProps&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ManipulativeBool&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;Manipulated&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;MyBool&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;em&gt;setState&lt;/em&gt; will also trigger a &lt;em&gt;re-render&lt;/em&gt; of any DOM elements that will be affected by this state variable.&lt;/p&gt;

&lt;p&gt;The states in a component then become very useful when we are rendering our content in the render method to determine what to do based on certain criteria like this;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;Manipulated&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Manipulated&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;Manipulated&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Our&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="nx"&gt;has&lt;/span&gt; &lt;span class="nx"&gt;been&lt;/span&gt; &lt;span class="nx"&gt;manipulated&lt;/span&gt;&lt;span class="o"&gt;!&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&amp;gt; : &amp;lt;p&amp;gt;Our state is still false&amp;lt;/&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this simple example we will output and render different content based on the state of the Manipulated Boolean we have set up.&lt;/p&gt;

&lt;p&gt;If the Boolean is true then only then will it render and allow our content &lt;em&gt;Our state has been manipulated&lt;/em&gt; to successfully be rendered and shown. And in other cases it will remain as &lt;em&gt;Our state is still false&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;This is just an insight into the powerful functionality you can have by using states in ReactJS and hopefully this is a short little trick for people who are just beginning.&lt;/p&gt;

</description>
      <category>react</category>
      <category>state</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
