One place for hosting & domains

      Started

      Getting Started on the Linode Platform


      Thank you for choosing Linode as your cloud hosting provider! This guide will help you sign up for an account and access Linode’s
      Cloud Manager
      , a browser-based control panel which allows you to manage your Linode virtual servers and services.

      1. Sign Up for an Account
      2. Navigate the Cloud Manager
      3. Create Your First Compute Instance
      4. Create Additional Services
      5. Understand Billing
      6. Explore Linode Guides

      Sign Up for an Account

      First, you need to create a Linode account to start using our services. If you already have a Linode account, you can skip to the next section.

      1. Click the Sign Up button at the top of this page.

        Note

        Sign up today
        and receive a $100 credit. This credit will be applied to any valid services used during your first 60 days.
      2. Enter your email address, a unique username, and a strong password. Alternatively, you can sign up using your existing Google or GitHub account.

      3. A confirmation email will be sent to your email address. Click the link to confirm your email and be taken to the next step.

      4. Enter your billing and payment information. A valid credit or debit card must be used when creating an account, though additional payment methods (like Google Pay and PayPal) are available once the account is active.

      Most accounts are activated instantly, but some require manual review prior to activation.

      Note

      Sending email: Newly created Linode accounts have restrictions on ports 25, 465, and 587 applied to Compute Instances, which prevent instances from sending email. If you’d like to send email on a Compute Instance, review the
      Running a Mail Server
      guide, then
      open a ticket
      with our Support team.

      Once your account has been created, consider enabling 2FA to prevent unauthorized access. Anyone that has access to your account may be able to delete your services, add new ones, and reset the root password on your Compute Instances to gain access to them. See
      Cloud Manager Security Controls
      for instructions on enabling 2FA. If you are logging in with a third party provider, consider adding 2FA through that provider.

      Linode’s
      Cloud Manager
      is the primary gateway to our platform. It enables you to manage your account, view your bills, add services, and much more. Here are some of the main sections you might want to look through:

      • Linodes
        : View a list of your Compute Instances. Clicking on one takes you to its details page, where you can power it on or off, reboot it, resize it, access the console, change its configuration, attach Block Storage volumes, and lots more.

      • Account
        : View your account, billing information, payment methods, and previous invoices. You can also add additional users to your account.

      • Help & Support
        : Search through our guides, find answers on the Community Site, or open a ticket to reach our 24/7 award-winning
        Support Team
        .

      For a full overview of the Cloud Manager and its core features, see the
      Overview of the Cloud Manager
      guide.

      Create Your First Compute Instance

      Compute Instances (also frequently called Linodes) are virtual machines that can be used for nearly any purpose. Many of our customers use them to host websites and web applications, but they can also be used for development workloads, game servers, big data processing, machine learning, scientific processing, and much more. They come in a few different types, including
      Shared CPU
      ,
      Dedicated CPU
      ,
      High Memory
      , and
      GPU
      . Each of these are tailored for certain workloads. See the guides below to learn more about creating a Compute Instance, configuring it after deployment, and securing it.

      Create Additional Services

      In addition to
      Compute Instances
      , Linode offers many other services that empower you to get the most out of cloud computing. Take a look through the list below to determine if any of them might be useful to you.

      Compute

      • LKE
        (Linode Kubernetes Engine): Managed Kubernetes clusters that simplify container orchestration.
      • Bare Metal
        (Coming soon): Dedicated single-tenant hardware for advanced workloads.

      Databases

      • Managed Databases
        : Reliable, performant, highly available, and fully managed database clusters to support production database workloads.

      Storage

      • Block Storage
        : Scalable, high-speed, fault-tolerant, and portable (detachable) storage volumes used to add additional storage to a Compute Instance.
      • Object Storage
        : S3-compatible object storage service that can be used independently of a Compute Instance.
      • Backups
        : Fully managed automatic daily, weekly, and biweekly backups of your Linode Compute Instances.
      • Images
        : Create preconfigured disk images (or upload image files) that can be rapidly deployed to new or existing Compute Instances.

      Networking

      • NodeBalancers
        : Managed cloud-based load balancing service used with Compute Instances to enable high availability and horizontal scaling.
      • Cloud Firewalls
        : A free cloud-based firewall service that can be used to secure any Compute Instance.
      • DNS Manager
        : A free comprehensive domain and DNS management service for Linode customers.
      • VLANs
        : Private L2 networks to secure traffic between Compute Instances.

      Understand Billing

      Linode services are billed to your primary payment method at the end of each month (or when your accrued charges reach your billing limit). This means you can continuously add, modify, and remove services throughout the month and, after the month is over, you receive an invoice for the hourly usage of each service up to the monthly cap. In affect, billing is post-paid and pro-rated. See the below resources for more billing information and detailed hourly and monthly pricing.

      Keep in mind that charges will accrue for any active service, even if it is powered off or otherwise not in use. This includes Compute Instances that have been powered off as well as any service you might have added to the account but are not using.

      Explore Linode Guides

      Linode offers extensive documentation. This not only includes guides for our core products and services, but general guides on Linux, the command-line, networking, security, version control, databases, and much more. Learn how to deploy a WordPress One-Click App, run a VPN, install a file storage platform, or even host a website using Object Storage. Whatever cloud computing use cases you have in mind, you can likely do it on Linode and our guides are a great place to start.



      Source link

      Angular Animations: Get Started


      Web animations add dynamic graphics and effects to a web page. Movement on a web page communicates information to users and adds visual interest. Animation on a web page is typically achieved by changing the state of an HTML element over time. For example, an HTML element’s color or position can change as a result of user interaction on a web page. Most popular web frameworks offer animation support that simplifies animating elements on your web pages or applications. This guide shows you how to get started creating animations using the Angular web framework.

      Setup the Angular Project

      1. Follow the steps in our
        Getting Started with Angular
        guide to install Node.js, the Node Version Manager (nvm), and Angular. As a result of following those steps, you should have a directory named example-app in your home folder.

      2. In your Angular project’s root application module, enable the animations module by importing the BrowserAnimationsModule as shown in the following code:

        File: /home/username/example-app/src/app/app.module.ts
         1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        
        import { NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';
        import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
        
        @NgModule({
          imports: [
            BrowserModule,
            BrowserAnimationsModule
          ],
          declarations: [ ],
          bootstrap: [AppComponent]
        })
        export class AppModule { }
            

        The bootstrap key bootstraps the component that contains the majority of your animation code. You create this code in the next section.

      Angular Animation Example

      The example Angular code used in this guide animates the transition between two background colors contained within a <div> HTML element.

      Add Metadata to Angular Component

      In your preferred text editor, open your Angular application’s /home/username/example-app/src/app/app.component.ts file and add the animations metadata property to the declared component. The majority of the code used to animate the <div> element is contained in the animations metadata option.

      File: /home/username/example-app/src/app/app.component.ts
       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
        styleUrls: ['app.component.css'],
        animations: [
            //Add the animations metadata option
        ]
      })
      ...
          

      The HTML that is animated is stored in the component’s HTML template which is the ./app.component.html file. You add the HTML code to this file in the next section.

      Note

      Ensure that the top of your app.component.ts file includes the following import statements.

      File: /home/username/example-app/src/app/app.component.ts
      1
      2
      
      import { Component } from '@angular/core';
      import { trigger, state, style, animate, transition } from '@angular/animations';

      Create the Angular Component HTML Template

      Your Angular project already contains a component HTML template file. The app.component.ts component file points to the location of the ./app.component.html file in the templateURL metadata. In this section, you add the HTML to animate with Angular.

      1. Open your Angular project’s /home/username/example-app/src/app/app.component.html file and delete all of the example boilerplate code.

      2. Add the example HTML template code as shown below:

        File: /home/username/example-app/src/app/app.component.html
        1
        2
        3
        4
        5
        6
        7
        
        <h1>Angular Animation Example</h1>
        
        <div (click)="changeState()" [@changeDivColor]=currentState >
          <h2>A Heading Contained in a Div</h2>
          <p>Click inside the Div to view the div's background color change using an Angular animation.</p>
        </div>
            

        The HTML template adds a <div> element that gets animated. For now, the <div> does not call any of the functionality that enables the <div> to be animated. You add this in the next section.

      3. Run the Angular local server with the following command:

         ng serve
        
      4. Navigate to http://localhost:4200 in a browser window and you should see the rendered HTML.

      Add an Angular Animation Trigger

      In this section, you add an Angular animation trigger. The trigger is used to bind the animation code and behavior to the HTML element that you want to animate. The animation trigger contains the animation states that define the div’s background color state change.

      Open the component file and add the trigger() function to the animations metadata object.

      File: /home/username/example-app/src/app/app.component.ts
       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      
      @Component({
        selector: 'app-root',
        templateUrl: './div-animation.component.html',
        styleUrls: ['./app.component.css'],
        animations: [
          trigger('changeDivColor', [
              //Animation states are added here.
          ])
        ]
      })
      ...
          

      In the example above, changeDivColor is the animation trigger. This trigger can now be called in your Angular component template. You complete that step in one of the following sections. The next section shows you how to add animation states to your component.

      Add Angular Animation States

      Angular animation states specify the change that you want to apply during your animation. For the example, the <div> background color’s state should change from one color to another. You use Angular’s state() function to name the state and define the element’s CSS styles that are associated with the state.

      Open the component file and add the two state() functions to the changeDivColor state of the trigger() function as shown below:

      File: /home/username/example-app/src/app/app.component.ts
       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      
      @Component({
        selector: 'app-root',
        templateUrl: './div-animation.component.html',
        styleUrls: ['./app.component.css'],
        animations: [
          trigger('changeDivColor', [
            state('start', style({
              border: '5px outset blue',
              backgroundColor: 'green',
              textAlign: 'center'
            })),
            state('end', style({
              border: '5px outset blue',
              backgroundColor: 'lightgreen',
              textAlign: 'center'
            })),
          ])
        ]
      })
      ...
          

      The state functions assign a name to each state and provide their associated styles. The start state uses a background color of green, while the end state uses a background color of light green.

      Add Angular Animation Transitions

      Now, you need to define the Angular animation’s transitions from one state to another. To do this, you use the transition() function.

      Open the component file and add the transition() function to the end of the trigger() function as shown below:

      File: /home/username/example-app/src/app/app.component.ts
       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      
      ...
      @Component({
        selector: 'app-root',
        templateUrl: './div-animation.component.html',
        styleUrls: ['./app.component.css'],
        animations: [
          trigger('changeDivColor', [
            state('start', style({
              border: '5px outset blue',
              backgroundColor: 'green',
              textAlign: 'center'
            })),
            state('end', style({
              border: '5px outset blue',
              backgroundColor: 'lightgreen',
              textAlign: 'center'
            })),
            transition('start <=> end', animate('1000ms'))
          ])
        ]
      })
      ...
          

      The updated code above creates a state-to-state transition. The first state transition goes from the start state to the end state, while the second transition does the opposite. This state transition allows you to toggle between both states each time a user clicks on the bound HTML element (the <div> element). The transition() function uses the animate() function to specify the timing for the transition.

      Add the Toggle Function

      Now that your animation is defined, you need to add a function that can detect the <div> state and toggle between the two states.

      Add the following toggleState() function to your AppComponent class. The AppComponent class is located below the @Component decorator.

      File: /home/username/example-app/src/app/app.component.ts
       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      
      ...
      export class AppComponent {
        title = 'example-app';
      
        divState = 'start';
      
        toggleState() {
          this.divState = this.divState === 'start' ? 'end' : 'start';
        }
      }
          

      The code above adds a divState variable that stores the current toggle state of the <div>. The toggleState() function uses a conditional ternary operator to update the value of divState depending on its current value.

      Now that your animation code and toggle functionality is in place, you need to update the Angular HTML template to bind everything together. You complete this in the next section.

      Bind the Animation Trigger to the HTML Component Template

      In this section, you bind the animation trigger you created in the previous steps to the <div> element.

      1. Open your HTML component template and add the animation trigger to the <div>. You also add a click event that invokes the toggleState() function you added to the AppComponent class declaration.

        File: /home/username/example-app/src/app/app.component.html
        1
        2
        3
        4
        5
        6
        7
        
        <h1>The div element</h1>
        
        <div (click)="toggleState()" [@changeDivColor]=divState>
          <h2>This is a heading in a div element</h2>
          <p>This is some text in a div element.</p>
        </div>
            

        Notice that the @changeDivColor trigger binding is set to the value of the divState variable. This enables the div to begin in the start toggle state. You are now ready to view your animation.

      2. Navigate to http://localhost:4200 in a browser window and you should see the rendered HTML.

        Angular rendered green HTML div.

        Click inside the <div> container and you should see the animated background color transition from green to light green and vice versa, with each click.

        Angular rendered light green HTML div.

      Conclusion

      This guide showed you how to use the Angular framework to get started creating animations. Angular’s
      triggers
      ,
      states
      , and
      transitions
      help you animate elements on a web page. The basic example included in this guide provides a foundation that you can use to
      create more advanced animations
      using the Angular query() and stagger() functions.

      More Information

      You may wish to consult the following resources for additional information
      on this topic. While these are provided in the hope that they will be
      useful, please note that we cannot vouch for the accuracy or timeliness of
      externally hosted materials.



      Source link

      Getting Started With Svelte


      How to Join

      This Tech Talk is free and open to everyone. Register below to get a link to join the live stream or receive the video recording after it airs.

      Date Time RSVP
      November 3, 2021 11:00 a.m.–12:00 p.m. ET / 3:00–4:00 p.m. GMT

      About the Talk

      Let’s learn one of the newest JavaScript frameworks that has quite the simple syntax.

      Discover how Svelte helps you write less code, brings reactivity to JavaScript, and compiles your code to tiny, framework-less vanilla JS so that your app starts fast and stays fast.

      What You’ll Learn

      • How to use Svelte
      • Why Svelte is different than React or Vue
      • Why Svelte is easy to write

      This Talk is Designed For

      JavaScript developers that want to learn one of the newest popular frameworks.

      Resources

      Svelte docs



      Source link