DEV Community: Tim Bogdanov

Setting up Laravel Cashier (Managing Subscriptions)

Tim Bogdanov — Sun, 11 Dec 2022 01:58:04 +0000

Install the Laravel Cashier package by running composer require laravel/cashier in your terminal.
Add the Laravel\Cashier\CashierServiceProvider::class to the providers array in your config/app.php file.
Run the php artisan vendor:publish --provider="Laravel\Cashier\CashierServiceProvider" command to publish the package's configuration file to your application.
Add the Billable trait to your user model, which will give your users the ability to manage their subscriptions.
Add the necessary columns to your users table by running the php artisan migrate command.
In your user model, define a plan attribute that specifies the name of the subscription plan your users can subscribe to.
In your application's subscription logic, you can use Laravel Cashier's methods to create subscriptions, manage plans, and handle billing. For example, you can use the subscription() method to retrieve the user's current subscription, and the newSubscription() method to create a new subscription for the user.

I hope this helps! Let me know if you have any other questions.

Show & Hide Passwords with React

Tim Bogdanov — Thu, 08 Oct 2020 21:07:08 +0000

Understanding React useState Hook

To understand the work around of showing and hiding password string inside of an input field we must first understand the useState hook.

Elements state inside of basic React apps is managed by something called a useState hook. Bodies of data like javascript objects, arrays, string, booleans, etc. can be stored inside of a useState variable.

For example:

const [showPassword, setShowPassword] = useState(false)

In the example above we assign showPassword to false by default. After that comes the setter variable. We can use that whenever someone clicks on a button/icon to reveal the password.

For example

const [showPassword, setShowPassword] = useState(false)

const togglePass = (e) => {
  e.preventDefault() // Important! If you don't include this your page will refresh

  setShowPassword(!showPassword)
}

return (
<>
  <form>
    <input type='password' />
    <button onClick={togglePass}>Toggle Password</button>
  </form>
</>
)

As you can see from the example above, we have a function that set the showPassword to the opposite of what it currently is -- if its true set it to false, if its false set it to true.

After that we have a simple form field with one input and a button. The onClick on the button is set the the togglePass function. So whenever you click on the button it will perform the simple task of switching it from true to false and vice-versa.

This is where the magic happens. As you probably noticed, we hard coded the type on input in the code above. Lets fix that.

const [showPassword, setShowPassword] = useState(false)

const togglePass = (e) => {
  e.preventDefault() // Important! If you don't include this your page will refresh

  setShowPassword(!showPassword)
}

return (
<>
  <form>
    <input type={showPassword ? 'password' : 'text'} />
    <button onClick={togglePass}>Toggle Password</button>
  </form>
</>
)

Using a ternary operation we can set a conditional statment. In plain English it reads as follows:

If showPassword is true, then set the input type to password. If it is not true (false), then set the input type to text.

With these few lines of code we can easily create a show and hide for a password form field in React!

The 5 Best Code Editors For Web Development

Tim Bogdanov — Tue, 22 Sep 2020 03:58:14 +0000

Panic

Recently Panic released their new text editor called Nova which reminded me of a short period of time at some point when I had a chance to use one of their text editors called Coda 2. Which prompted me to look back and remember all the text editors that I've had a chance to interact with. This is that list.

Based on a report from software.com these are the rating gives to 3 of the 5 text editors that I mention in this article.

1 Visual Studio Code

This has got to be my favorite by far, and unless someone creates something that absolutely outgrowns the VS Code community, I do not plan on switching anytime soon.

2 Sublime Text 3

This text editor for quite a long time was my go to. I've tried every popular package there is but unfortunately support for then does not live up to my and many others standards, which is why I made the switch over 6 months ago.

3 Atom by Github

I've tried Atom for about a month, but for some reason it just didn't work out for me. Something about it felt odd.

4 Nova by Panic

Way back when I was first introduced to web development, I was shown Code 2 by my brother. I had no clue what I was doing when I was creating those HTML and CSS files but it quickly sparked my interest. Panic has come out with a new Text editor a few days ago called Nova, and I'll definitely be giving it a try.

5 Brackets

Years ago while still learning to code I somehow came across brackets and as far as I can remember, their tag line was 'made completely in javascript' (at the time I had not the slightest clue was this javascript was, but I liked the sound of it).

Vector Illustration

Dribbble Giveaway

Tim Bogdanov — Mon, 21 Sep 2020 17:52:19 +0000

I recently received a dribbble invite to give away. I'll be giving it away tomorrow. If you'd like a chance to win it, please send me an email to tim.the.bogdanov@gmail.com with 1 or more pieces of your work to be considered.

Multi-Step Sign Up Process with React

Tim Bogdanov — Fri, 18 Sep 2020 21:22:22 +0000

Finished result: Multi-Step Sign Up Process

Setting up the UserForm container

I usually start all my react projects by running
npx create-react-app my-app. After I've taken care of that I'll start by creating a UserForm.js file. this will house all of our components for each step in the multi-step sign up process.

if you have ES7 React/Redux/GraphQL/React-Native snippets
installed, just type rafce and hit tab. This will create a simple react arrow function component template. Like so:

import React from 'react'

const UserForm = () => {
  return (
    <div>

    </div>
  )
}

export default UserForm

Once that is set up, lets start by create a state object that will hold out step number and each detail we'd like to collect. Like so:

const initialState = {
  // Step counter will start at step 1 by default
  step: 1,

  companyName: '',
  companyEmail: '',
  companyPhone: '',

  cardholderName: '',
  cardNumber: '',
  expMonth: '',
  expYear: '',
  securityCode: '',
  address: '',
  address2: '',
  city: '',
  state: '',
  zip: '',
};

And inside the UserForm component set the state:

// Initialize form state with initialState object
const [form, setForm] = useState(initialState);

Next we'll need 2 functions that will handle the button click of Next Step and Previous Step:

  // Proceed to the next step
  const nextStep = (e) => {
    setForm({ ...form, step: form.step + 1 });
  };

  // Go back to previous step
  const previousStep = () => {
    setForm({ ...form, step: form.step - 1 });
  };

Next we need to use the switch and case and set up a sase statement for each step.:

// You can create as many steps as your like and store them in separate components.
switch (form.step) {
    case 1:
      return (
        <FromUserDetails
          nextStep={nextStep}
          handleInput={handleInput}
          form={form}
        />
      );

    case 2:
      return (
        <FormPersonalDetails
          nextStep={nextStep}
          previousStep={previousStep}
          handleInput={handleInput}
          form={form}
        />
      );

    case 3:
      return <FormSuccess />;

    default:
      return;
  }

Make sure to pass in the nextStep and previousStep functions into each step component. Also don't forget to create a Finished Component to let the user know that they completed the process.

Inside of each step component you can set up the inputs and handle changes.

Vector Illustration

Full-Stack Youtubers to Follow 🏃 — From Beginner Expert

Tim Bogdanov — Fri, 18 Sep 2020 06:22:03 +0000

Everyone Starts Somewhere

Everyone single one of us had a beginning. Learning to code can be tough and frustrating. My journey started in 2014 when I learned about a youtube channel that would change my life forever. This is a life of the Youtubers that guided me along in discovering new technologies and learning them from the ground up.

This list does not in anyway reflect the order of my least and most favorite.

#1 TheNewBoston

I guess you could say Bucky Roberts introduced me to Web Development. For the longest time I'd follow every single one of his videos and frankly he deserves everything that has brought be to where I am today.

#2 Codecourse (Formally Php Academy)

#3 adamthedev

#4 Ben Awad

#5 Colt Steele

#6 Dev Ed

#7 Fireship

#8 freeCodeCamp.org

#9 Harry Wolff

#10 CodingWithChandler

Vector Illustration

Custom VS Code Theme

Tim Bogdanov — Fri, 18 Sep 2020 04:59:47 +0000

Recently I came across an article on Dev.to talking about how to create your own VS Code Extensions. This was somewhat news to me, in the back of my mind I understood that most extensions are created by a community but I never looked into the process.

This is where Black Sand was born. For over 40 hours of tinkering and playing around with the VS Code Theme JSON file.

Feel free to Download and Contribute!

React JS

HTML

CSS

Vector Illustration

Why VS Code? (Setup)

Tim Bogdanov — Wed, 16 Sep 2020 21:15:03 +0000

Why VS Code?

VS Code is one of if not the most poplular free text editor on the market. In a survey done in 2019, over 4.9 million developers use VS Code.

In the past, when I was just introduced to web development I quickly learned about Sublime Text 2. Sublime was ok, it was my go to text editor for a long time, but it lacked a community. Sure there was something called the Sublime Package Control but it was quite limited and still is. And often you'd find a package you like only to find out that the package has not been updated for the paste 2-3 years.

About a half year ago I learned about VS Code. I've heard about it before that but for some reason I refused to look at it. I am a macOS user and hearing about a Microsoft product did not resonate with me.

I enjoy using VS Code for 3 simple reasons.

VS Code is Free.
VS Code offers integrations with GitHub.
VS Code has an enormous library of community create packages, themes, etc.

My VS Code Setup

My theme for choice for a while now has been CodeSandbox Black this theme tries to replicate the default theme for CodeSandbox. I'm a sucker for dark themes! 😜

As Many of you, I use over 10 - 15 VS Code extensions on a daily basis. Here are a few of them.

Conclusion

While there are many other worthy mentions, I'll keep this list short. If you'd like a full list of my extensions, feel free to ask.

DEV Community: Tim Bogdanov

Setting up Laravel Cashier (Managing Subscriptions)

Show & Hide Passwords with React

Understanding React useState Hook

For example:

For example

The 5 Best Code Editors For Web Development

Panic

1 Visual Studio Code

2 Sublime Text 3

3 Atom by Github

4 Nova by Panic

5 Brackets

Dribbble Giveaway

Multi-Step Sign Up Process with React

Setting up the UserForm container

Full-Stack Youtubers to Follow 🏃 — From Beginner Expert

Everyone Starts Somewhere

#1 TheNewBoston

#2 Codecourse (Formally Php Academy)

#3 adamthedev

#4 Ben Awad

#5 Colt Steele

#6 Dev Ed

#7 Fireship

#8 freeCodeCamp.org

#9 Harry Wolff

#10 CodingWithChandler

Custom VS Code Theme

React JS

HTML

CSS

Why VS Code? (Setup)

Why VS Code?

My VS Code Setup

Auto Close Tag

Auto Rename Tag

Bracket Pair Colorizer 2

GitLens - Git supercharged

Conclusion