1558280825
How to build an authentication in Angular using Firestore
Most of the application we build require some kind of Authentication and the simplest and fastest way to get started with that is by using the Firestore. Firestore is a flexible, scalable database for mobile, web and server development.
WHAT YOU WILL LEARN
In this article, you will learn to develop a fully functioning authentication system in Angular using Firestore. We will be using the official tool for Angular and Firebase integration – AngularFire. AngularFire allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Real-time Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database.
PREREQUISITES
In order to follow along with this tutorial please ensure you have downloaded and installed the Angular IDE. Ensure that the latest version of Angular CLI is installed on your computer. You also need a Google account to be able to sign in to Firebase Console, where you will be creating the app which we will work with, in this tutorial.
CREATE AN ANGULAR PROJECT AND A FIREBASE APP
We’ll be using the latest version of all the tech libraries and stacks as at the time of this writing. Navigate to File -> New -> Angular Project. Then choose to Create a New Project with the following, versions of software as is in the screenshot below.
Create a New Angular Project from Angular IDE
After setting up the project to use the versions and giving it a Project name of AngularAuth click finish to create and install, this will ideally take some time, depending on how fast your internet is, so be patient.
Create a New Angular Project from Angular IDE
Once the project is created, the next thing to do is create an app in Firebase, so navigate to the Firebase Console and then click on Add Project to create a new project. Give it a name, I’ll call mine AngularAuth, then click on Create Project afterward.
Now after the project has been created, you will be redirected to the project’s overview page, there you are meant to choose the option – **_Add Firebase to your web app. _**On clicking that, you will get a pop up with all the info such as API key that you need to be able to interact with your newly created Firebase app from the Angular application that we created in Angular IDE. That’s it for now with Firebase, let’s go back to the Angular IDE to create some components.
We need a Homepage, Login page, and Sign Up page to showcase how our Authentication is working. So we need to create an Angular component for each of these pages. We will use one of the features that make Angular IDE so awesome, the Create Component shortcut, Navigate to File -> New -> **Component**to create a new component.
Give the first component a name – homepage as in the screenshot below and uncheck the Create Component with Unit Test flag, because Unit Testing is beyond the scope of this tutorial,but we can leave the Generate Component using the prefix location flag, which is the default from Angular. The prefix is simply the word that goes before the selector of every component you generate with the CLI. If you want to know more about it or change the prefix, read more about it on this StackOverflow question here.
Click Finish when you are done. This will automatically run the command **_ng g component homepage –spec false _**in Angular IDE’s terminal.
Now let us run our app to confirm everything is working. Go into the Angular IDE and type the command ng serve
On running ng serve I got the following error
~/Workspaces/Dunebook/AngularAuth $ ng serve You seem to not be depending on "@angular/core". This is an error.
If you got that same error, run npm install to install the npm packages required to get your app up and running. Check out this page to install yarn, if you don’t have it yet. After running npm install successfully, the ng serve command will now run successfully. Visit this link to see your app working.
Now, let’s go ahead and remove the default content that came with the new application. Navigate to src/app/app.component.html to see the code. Select all content of this file and delete it. When you hit save and check your browser now, the page should be blank. The app.component.html file now becomes the new base/host for our homepage. Go ahead and add the selector of the homepage component there. To do that, type the following code (for some unknown reason I could not paste the code so I’ll attach the screenshot). Save it now and your site should reload to show the content of homepage.component.html.
The app-homepage is the selector for the homepage component we created earlier.
Next, we will create the other two components needed to run the app and then install AngularFire2 and Firebase. Run the following commands to do that.
ng g c login --spec false && ng g c signup --spec false && npm install firebase angularfire2
The above command will create a LoginComponent, SignupComponent and then install firebase and angularfire2 npm packages.
Now, with the installed npm packages we need configure our Firebase application to enable it to be able to communicate with your Angular application.
Firebase Config set up for Angular Authentication
First, we will import the AngularFire modules to the app.module.ts file. My app.module.ts file looks like this after the new config is added. The lines in bold need to be added to your app.module.ts
When you click on **Add Firebase to your web app **you should get a pop up similar to the image below.
Firebase Auth Config for Authentication in Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
// Copy the firebaseConfig from your created project on the firebase console. Here, click on the project name and then on the project dashboard, click on Add firebase to your web app. Replace the values below with yours, values below will not work for you because I have removed some characters from it.
const firebaseConfig = {
apiKey: 'AIzaSyAywNGLBVmlk98jwaeqsFdm1hNMQ',
authDomain: 'angularauth-502.firebaseapp.com',
databaseURL: 'https://angularauth-502.firebaseio.com',
projectId: 'angularauth-502',
storageBucket: 'angularauth-502.appspot.com',
messagingSenderId: '11240551'
};
@NgModule({
declarations: [
AppComponent,
HomepageComponent,
LoginComponent,
SignupComponent
],
imports: [
BrowserModule,
FormsModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFireAuthModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Next, we will set up the Authentication methods, by clicking on the Authentication link described in the screenshot above. Once there, enable Sign-in for Email/Password and Google and then save. To enable for other providers you need an API key and API secret. Which can be easily generated by visiting the developers’ section of each of the providers.
Click on the Database on the sidebar at Firebase and then click on TRY FIRESTORE BETA. Then click ENABLE.
Enabling Firestore Firebase Database
Upon creation of the Database, check the Rules tab and make sure the content is similar to this:
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
As at the time of this writing. There was a bug in the Firebase npm package, the following errors were displayed in the console. And according to this thread on Github, we need to downgrade Firebase to version 4.8.0 and upgrade AngularFire to version 5.0.0-rc.5. Remove the ^ at the beginning of the versions so as to download the exact version that we want. After changing it run yarn install to change the version.
"angularfire2": "5.0.0-rc.5-next", "firebase": "4.8.0",
Take note that if you are using a version of Firebase and AngularFire that is higher, you might not need to make these changes. The versions causing the errors are Firebase version 4.8.1 and AngularFire 5.0.0-rc.4.
With these changes effected correctly, the errors should be gone. Now let’s go ahead and use AngularFire and Firebase in our project. First, we need to create a service file which will serve all the methods that we need to login and logout. Go to the Angular IDE and follow the direction as described in the screenshot below.
Creating a New Service in Angular IDE
Creating a New Service and giving it a name in Angular IDE
Now, let’s go to the auth.service.ts file and add some code to it.
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';
@Injectable()
export class AuthService {
constructor(
private afAuth: AngularFireAuth,
private router: Router) {}
login(email: string, password: string) {
this.afAuth.auth.signInWithEmailAndPassword(email, password)
.then(value => {
console.log('Nice, it worked!');
this.router.navigateByUrl('/profile');
})
.catch(err => {
console.log('Something went wrong: ', err.message);
});
}
emailSignup(email: string, password: string) {
this.afAuth.auth.createUserWithEmailAndPassword(email, password)
.then(value => {
console.log('Sucess', value);
this.router.navigateByUrl('/profile');
})
.catch(error => {
console.log('Something went wrong: ', error);
});
}
googleLogin() {
const provider = new firebase.auth.GoogleAuthProvider();
return this.oAuthLogin(provider)
.then(value => {
console.log('Sucess', value),
this.router.navigateByUrl('/profile');
})
.catch(error => {
console.log('Something went wrong: ', error);
});
}
logout() {
this.afAuth.auth.signOut().then(() => {
this.router.navigate(['/']);
});
}
private oAuthLogin(provider) {
return this.afAuth.auth.signInWithPopup(provider);
}
}
The first thing we need to do after creating a Service method is to add it to the providers array in the app.module.ts file, then after that we need to create routes for the components we created earlier and also create two more components, the EmailComponent and ProfileComponent. Use the same method we used to create components earlier to create those components. Your app.module.ts file should now look like this (The most significant changes are highlighted in bold):
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppComponent } from './app.component';
import { AuthService } from './auth.service';
import { HomepageComponent } from './homepage/homepage.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { ProfileComponent } from './profile/profile.component';
import { AppRoutingModule } from './app-routing.module';
import { EmailComponent } from './email/email.component';
const firebaseConfig = {
apiKey: 'AIzaSyAywNGLBVmlk98dkqahOj1hNMQ',
authDomain: 'angularauth-502.firebaseapp.com',
databaseURL: 'https://angularauth-502.firebaseio.com',
projectId: 'angularauth-502',
storageBucket: 'angularauth-502.appspot.com',
messagingSenderId: '1124055'
};
@NgModule({
declarations: [
AppComponent,
HomepageComponent,
LoginComponent,
SignupComponent,
ProfileComponent,
EmailComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFireAuthModule
],
providers: [ AuthService ],
bootstrap: [AppComponent]
})
export class AppModule { }
Next, we’ll create the AppRoutingModule where we will create our routes. Create a file app-routing.module.ts in the src/app folder, then fill it up with the following content.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ProfileComponent } from './profile/profile.component';
import { SignupComponent } from './signup/signup.component';
import { EmailComponent } from './email/email.component';
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'email-login', component: EmailComponent },
{ path: 'signup', component: SignupComponent },
{ path: 'profile', component: ProfileComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Now let’s go ahead and work in our LoginComponent file navigate to the login/login.component.ts, the method we will use there is the googleLogin().
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private authService: AuthService) { }
ngOnInit() {}
loginGoogle() {
this.authService.googleLogin();
}
}
And fill up the component file, login.component.html like so:
Angular Authentication with Firestore Login Form
Before we go ahead and verify that everything is working, we need to change the content of the app.component.html file:
Replace
<app-homepage></app-homepage> with <code><router-outlet></router-outlet>
We should also add some styling to the form by editing the src/styles.css file, add the following css code to it:
body {
background: #E2E4E6;
padding-top: 4em;
}
.form-container {
background: white;
padding: 3.5em;
width: 500px;
position: fixed;
left: 45%;
margin-left: -250px;
}
button {
padding: 0.5em;
width: 100%;
cursor: pointer;
margin-bottom: 15px;
font-size: 1.3em;
}
.google {
border: 1px solid #95989A;
background: #fff;
background-size: 25px;
}
.email {
background: #ECECEC;
background-size: 25px;
}
.create-account-txt {
text-align: center;
display: block;
margin: 15px 0;
}
.auth-btn {
background: #3B8598;
color: white;
}
input.input-txt {
background: #fff !important;
padding: 0.5em 1em;
font-size: 1.3em;
border: 1px solid #BBBBBB;
width: 90%;
margin-bottom: 1em;
}
Now the login page looks like this:
Angular Firebase Authentication Email Login Form
Log in with Google Account now works, next, we will implement Logging in with Email and then after that, work on the Signup form. Navigate to the email/email.component.ts file:
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-email',
templateUrl: './email.component.html',
styleUrls: ['./email.component.css']
})
export class EmailComponent implements OnInit {
constructor(
private authService: AuthService) { }
ngOnInit() {}
onSubmit(formData) {
if (formData.valid) {
console.log(formData.value);
this.authService.login(
formData.value.email,
formData.value.password
);
}
}
}
Next, let’s navigate to the email/email.component.html file and add the following (I’m adding the screenshot of the template because it’s been interpreted incorrectly):
Angular Authentication with Firestore Email Login Form
The login form now looks like this:
Angular Firebase Authentication Email Login Form
Next, let’s work on the Signup form and its component:
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
constructor(public authService: AuthService) { }
ngOnInit() {}
onSubmit(formData) {
if (formData.valid) {
console.log(formData.value);
this.authService.emailSignup(
formData.value.email,
formData.value.password
);
}
}
}
And then the template:
Angular Firebase Authentication Email Sign up Form
Lastly, the profile component which is the simplest of all, there we just need to add a Sign Out button that will take the user back to the Login Page.
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
constructor(public authService: AuthService) { }
ngOnInit() {}
signOut() {
this.authService.logout();
}
}
Angular Firebase Authentication Profile Page
Conclusion
There’s still room for improvement, we can check the state of the current user and guard the profile page so that a stranger can’t go to User’s profile without Logging in. If you are reading this, you’ve probably navigated your way through this tutorial successfully.
Originally published on dunebook.com
#angular #firebase
What is GEEK
Buddha Community
1667425440
Pdf2gerb: Perl Script Converts PDF Files to Gerber format
pdf2gerb
Perl script converts PDF files to Gerber format
Pdf2Gerb generates Gerber 274X photoplotting and Excellon drill files from PDFs of a PCB. Up to three PDFs are used: the top copper layer, the bottom copper layer (for 2-sided PCBs), and an optional silk screen layer. The PDFs can be created directly from any PDF drawing software, or a PDF print driver can be used to capture the Print output if the drawing software does not directly support output to PDF.
The general workflow is as follows:
- Design the PCB using your favorite CAD or drawing software.
- Print the top and bottom copper and top silk screen layers to a PDF file.
- Run Pdf2Gerb on the PDFs to create Gerber and Excellon files.
- Use a Gerber viewer to double-check the output against the original PCB design.
- Make adjustments as needed.
- Submit the files to a PCB manufacturer.
Please note that Pdf2Gerb does NOT perform DRC (Design Rule Checks), as these will vary according to individual PCB manufacturer conventions and capabilities. Also note that Pdf2Gerb is not perfect, so the output files must always be checked before submitting them. As of version 1.6, Pdf2Gerb supports most PCB elements, such as round and square pads, round holes, traces, SMD pads, ground planes, no-fill areas, and panelization. However, because it interprets the graphical output of a Print function, there are limitations in what it can recognize (or there may be bugs).
See docs/Pdf2Gerb.pdf for install/setup, config, usage, and other info.
pdf2gerb_cfg.pm
#Pdf2Gerb config settings:
#Put this file in same folder/directory as pdf2gerb.pl itself (global settings),
#or copy to another folder/directory with PDFs if you want PCB-specific settings.
#There is only one user of this file, so we don't need a custom package or namespace.
#NOTE: all constants defined in here will be added to main namespace.
#package pdf2gerb_cfg;
use strict; #trap undef vars (easier debug)
use warnings; #other useful info (easier debug)
##############################################################################################
#configurable settings:
#change values here instead of in main pfg2gerb.pl file
use constant WANT_COLORS => ($^O !~ m/Win/); #ANSI colors no worky on Windows? this must be set < first DebugPrint() call
#just a little warning; set realistic expectations:
#DebugPrint("${\(CYAN)}Pdf2Gerb.pl ${\(VERSION)}, $^O O/S\n${\(YELLOW)}${\(BOLD)}${\(ITALIC)}This is EXPERIMENTAL software. \nGerber files MAY CONTAIN ERRORS. Please CHECK them before fabrication!${\(RESET)}", 0); #if WANT_DEBUG
use constant METRIC => FALSE; #set to TRUE for metric units (only affect final numbers in output files, not internal arithmetic)
use constant APERTURE_LIMIT => 0; #34; #max #apertures to use; generate warnings if too many apertures are used (0 to not check)
use constant DRILL_FMT => '2.4'; #'2.3'; #'2.4' is the default for PCB fab; change to '2.3' for CNC
use constant WANT_DEBUG => 0; #10; #level of debug wanted; higher == more, lower == less, 0 == none
use constant GERBER_DEBUG => 0; #level of debug to include in Gerber file; DON'T USE FOR FABRICATION
use constant WANT_STREAMS => FALSE; #TRUE; #save decompressed streams to files (for debug)
use constant WANT_ALLINPUT => FALSE; #TRUE; #save entire input stream (for debug ONLY)
#DebugPrint(sprintf("${\(CYAN)}DEBUG: stdout %d, gerber %d, want streams? %d, all input? %d, O/S: $^O, Perl: $]${\(RESET)}\n", WANT_DEBUG, GERBER_DEBUG, WANT_STREAMS, WANT_ALLINPUT), 1);
#DebugPrint(sprintf("max int = %d, min int = %d\n", MAXINT, MININT), 1);
#define standard trace and pad sizes to reduce scaling or PDF rendering errors:
#This avoids weird aperture settings and replaces them with more standardized values.
#(I'm not sure how photoplotters handle strange sizes).
#Fewer choices here gives more accurate mapping in the final Gerber files.
#units are in inches
use constant TOOL_SIZES => #add more as desired
(
#round or square pads (> 0) and drills (< 0):
.010, -.001, #tiny pads for SMD; dummy drill size (too small for practical use, but needed so StandardTool will use this entry)
.031, -.014, #used for vias
.041, -.020, #smallest non-filled plated hole
.051, -.025,
.056, -.029, #useful for IC pins
.070, -.033,
.075, -.040, #heavier leads
# .090, -.043, #NOTE: 600 dpi is not high enough resolution to reliably distinguish between .043" and .046", so choose 1 of the 2 here
.100, -.046,
.115, -.052,
.130, -.061,
.140, -.067,
.150, -.079,
.175, -.088,
.190, -.093,
.200, -.100,
.220, -.110,
.160, -.125, #useful for mounting holes
#some additional pad sizes without holes (repeat a previous hole size if you just want the pad size):
.090, -.040, #want a .090 pad option, but use dummy hole size
.065, -.040, #.065 x .065 rect pad
.035, -.040, #.035 x .065 rect pad
#traces:
.001, #too thin for real traces; use only for board outlines
.006, #minimum real trace width; mainly used for text
.008, #mainly used for mid-sized text, not traces
.010, #minimum recommended trace width for low-current signals
.012,
.015, #moderate low-voltage current
.020, #heavier trace for power, ground (even if a lighter one is adequate)
.025,
.030, #heavy-current traces; be careful with these ones!
.040,
.050,
.060,
.080,
.100,
.120,
);
#Areas larger than the values below will be filled with parallel lines:
#This cuts down on the number of aperture sizes used.
#Set to 0 to always use an aperture or drill, regardless of size.
use constant { MAX_APERTURE => max((TOOL_SIZES)) + .004, MAX_DRILL => -min((TOOL_SIZES)) + .004 }; #max aperture and drill sizes (plus a little tolerance)
#DebugPrint(sprintf("using %d standard tool sizes: %s, max aper %.3f, max drill %.3f\n", scalar((TOOL_SIZES)), join(", ", (TOOL_SIZES)), MAX_APERTURE, MAX_DRILL), 1);
#NOTE: Compare the PDF to the original CAD file to check the accuracy of the PDF rendering and parsing!
#for example, the CAD software I used generated the following circles for holes:
#CAD hole size: parsed PDF diameter: error:
# .014 .016 +.002
# .020 .02267 +.00267
# .025 .026 +.001
# .029 .03167 +.00267
# .033 .036 +.003
# .040 .04267 +.00267
#This was usually ~ .002" - .003" too big compared to the hole as displayed in the CAD software.
#To compensate for PDF rendering errors (either during CAD Print function or PDF parsing logic), adjust the values below as needed.
#units are pixels; for example, a value of 2.4 at 600 dpi = .0004 inch, 2 at 600 dpi = .0033"
use constant
{
HOLE_ADJUST => -0.004 * 600, #-2.6, #holes seemed to be slightly oversized (by .002" - .004"), so shrink them a little
RNDPAD_ADJUST => -0.003 * 600, #-2, #-2.4, #round pads seemed to be slightly oversized, so shrink them a little
SQRPAD_ADJUST => +0.001 * 600, #+.5, #square pads are sometimes too small by .00067, so bump them up a little
RECTPAD_ADJUST => 0, #(pixels) rectangular pads seem to be okay? (not tested much)
TRACE_ADJUST => 0, #(pixels) traces seemed to be okay?
REDUCE_TOLERANCE => .001, #(inches) allow this much variation when reducing circles and rects
};
#Also, my CAD's Print function or the PDF print driver I used was a little off for circles, so define some additional adjustment values here:
#Values are added to X/Y coordinates; units are pixels; for example, a value of 1 at 600 dpi would be ~= .002 inch
use constant
{
CIRCLE_ADJUST_MINX => 0,
CIRCLE_ADJUST_MINY => -0.001 * 600, #-1, #circles were a little too high, so nudge them a little lower
CIRCLE_ADJUST_MAXX => +0.001 * 600, #+1, #circles were a little too far to the left, so nudge them a little to the right
CIRCLE_ADJUST_MAXY => 0,
SUBST_CIRCLE_CLIPRECT => FALSE, #generate circle and substitute for clip rects (to compensate for the way some CAD software draws circles)
WANT_CLIPRECT => TRUE, #FALSE, #AI doesn't need clip rect at all? should be on normally?
RECT_COMPLETION => FALSE, #TRUE, #fill in 4th side of rect when 3 sides found
};
#allow .012 clearance around pads for solder mask:
#This value effectively adjusts pad sizes in the TOOL_SIZES list above (only for solder mask layers).
use constant SOLDER_MARGIN => +.012; #units are inches
#line join/cap styles:
use constant
{
CAP_NONE => 0, #butt (none); line is exact length
CAP_ROUND => 1, #round cap/join; line overhangs by a semi-circle at either end
CAP_SQUARE => 2, #square cap/join; line overhangs by a half square on either end
CAP_OVERRIDE => FALSE, #cap style overrides drawing logic
};
#number of elements in each shape type:
use constant
{
RECT_SHAPELEN => 6, #x0, y0, x1, y1, count, "rect" (start, end corners)
LINE_SHAPELEN => 6, #x0, y0, x1, y1, count, "line" (line seg)
CURVE_SHAPELEN => 10, #xstart, ystart, x0, y0, x1, y1, xend, yend, count, "curve" (bezier 2 points)
CIRCLE_SHAPELEN => 5, #x, y, 5, count, "circle" (center + radius)
};
#const my %SHAPELEN =
#Readonly my %SHAPELEN =>
our %SHAPELEN =
(
rect => RECT_SHAPELEN,
line => LINE_SHAPELEN,
curve => CURVE_SHAPELEN,
circle => CIRCLE_SHAPELEN,
);
#panelization:
#This will repeat the entire body the number of times indicated along the X or Y axes (files grow accordingly).
#Display elements that overhang PCB boundary can be squashed or left as-is (typically text or other silk screen markings).
#Set "overhangs" TRUE to allow overhangs, FALSE to truncate them.
#xpad and ypad allow margins to be added around outer edge of panelized PCB.
use constant PANELIZE => {'x' => 1, 'y' => 1, 'xpad' => 0, 'ypad' => 0, 'overhangs' => TRUE}; #number of times to repeat in X and Y directions
# Set this to 1 if you need TurboCAD support.
#$turboCAD = FALSE; #is this still needed as an option?
#CIRCAD pad generation uses an appropriate aperture, then moves it (stroke) "a little" - we use this to find pads and distinguish them from PCB holes.
use constant PAD_STROKE => 0.3; #0.0005 * 600; #units are pixels
#convert very short traces to pads or holes:
use constant TRACE_MINLEN => .001; #units are inches
#use constant ALWAYS_XY => TRUE; #FALSE; #force XY even if X or Y doesn't change; NOTE: needs to be TRUE for all pads to show in FlatCAM and ViewPlot
use constant REMOVE_POLARITY => FALSE; #TRUE; #set to remove subtractive (negative) polarity; NOTE: must be FALSE for ground planes
#PDF uses "points", each point = 1/72 inch
#combined with a PDF scale factor of .12, this gives 600 dpi resolution (1/72 * .12 = 600 dpi)
use constant INCHES_PER_POINT => 1/72; #0.0138888889; #multiply point-size by this to get inches
# The precision used when computing a bezier curve. Higher numbers are more precise but slower (and generate larger files).
#$bezierPrecision = 100;
use constant BEZIER_PRECISION => 36; #100; #use const; reduced for faster rendering (mainly used for silk screen and thermal pads)
# Ground planes and silk screen or larger copper rectangles or circles are filled line-by-line using this resolution.
use constant FILL_WIDTH => .01; #fill at most 0.01 inch at a time
# The max number of characters to read into memory
use constant MAX_BYTES => 10 * M; #bumped up to 10 MB, use const
use constant DUP_DRILL1 => TRUE; #FALSE; #kludge: ViewPlot doesn't load drill files that are too small so duplicate first tool
my $runtime = time(); #Time::HiRes::gettimeofday(); #measure my execution time
print STDERR "Loaded config settings from '${\(__FILE__)}'.\n";
1; #last value must be truthful to indicate successful load
#############################################################################################
#junk/experiment:
#use Package::Constants;
#use Exporter qw(import); #https://perldoc.perl.org/Exporter.html
#my $caller = "pdf2gerb::";
#sub cfg
#{
# my $proto = shift;
# my $class = ref($proto) || $proto;
# my $settings =
# {
# $WANT_DEBUG => 990, #10; #level of debug wanted; higher == more, lower == less, 0 == none
# };
# bless($settings, $class);
# return $settings;
#}
#use constant HELLO => "hi there2"; #"main::HELLO" => "hi there";
#use constant GOODBYE => 14; #"main::GOODBYE" => 12;
#print STDERR "read cfg file\n";
#our @EXPORT_OK = Package::Constants->list(__PACKAGE__); #https://www.perlmonks.org/?node_id=1072691; NOTE: "_OK" skips short/common names
#print STDERR scalar(@EXPORT_OK) . " consts exported:\n";
#foreach(@EXPORT_OK) { print STDERR "$_\n"; }
#my $val = main::thing("xyz");
#print STDERR "caller gave me $val\n";
#foreach my $arg (@ARGV) { print STDERR "arg $arg\n"; }Download Details:
Author: swannman
Source Code: https://github.com/swannman/pdf2gerb
License: GPL-3.0 license
1592807820
How To Set Up Two-Factor Authentication in cPanel
What is 2FA
Two-Factor Authentication (or 2FA as it often referred to) is an extra layer of security that is used to provide users an additional level of protection when securing access to an account.
Employing a 2FA mechanism is a vast improvement in security over the Singe-Factor Authentication method of simply employing a username and password. Using this method, accounts that have 2FA enabled, require the user to enter a one-time passcode that is generated by an external application. The 2FA passcode (usually a six-digit number) is required to be input into the passcode field before access is granted. The 2FA input is usually required directly after the username and password are entered by the client.
#tutorials #2fa #access #account security #authentication #authentication method #authentication token #cli #command line #cpanel #feature manager #google authenticator #one time password #otp #otp authentication #passcode #password #passwords #qr code #security #security code #security policy #security practices #single factor authentication #time-based one-time password #totp #two factor authentication #whm
1598940617
Install Angular - Angular Environment Setup Process
Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.
- Installing Node.js and npm
- Installing Angular CLI
- Creating workspace
- Deploying your First App
In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!
Install Angular in Easy Steps
For Installing Angular on your Machine, there are 2 prerequisites:
- Node.js
- npm Package Manager
Node.js
First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js
Download and Install Node.js version suitable for your machine’s operating system.
Npm Package Manager
Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:
- npm -v
Installing Angular CLI
- Open Terminal/Command Prompt
- To install Angular CLI, run the below command:
- npm install -g @angular/cli
· After executing the command, Angular CLI will get installed within some time. You can check it using the following command
- ng --version
Workspace Creation
Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:
- Using CLI
- Using Visual Studio Code
1. Using CLI
To create a workspace:
- Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
- Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
- Ng new YourAppName
- After running this command, it will prompt you to select from various options about the CSS and other functionalities.
- To leave everything to default, simply press the Enter or the Return key.
#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli
1622798007
Angular 12 + Spring Boot: JWT Authentication example | Spring Security
In this tutorial, I will show you how to build a full stack Angular 12 + Spring Boot JWT Authentication example. The back-end server uses Spring Boot with Spring Security for JWT Authentication & Role based Authorization, Spring Data JPA for interacting with database. The front-end will be built using Angular 12 with HttpInterceptor & Form validation.
Related Posts:
– Angular 12 + Spring Boot: CRUD example
– Angular 12 + Spring Boot: File upload example
– Spring Boot, MongoDB: JWT Authentication with Spring Security
Contents [hide]
- JWT (JSON Web Token)
- Angular 12 Spring Boot Authentication example
- Screenshots
- Demo
- Flow for User Registration and User Login
- Spring Boot & Spring Security for Back-end
- Overview
- Technology
- Project Structure
- Implementation
- Angular 12 for Front-end
- Overview
- Technology
- Project Structure
- Implementation
- Conclusion
- Further Reading
#angular #full stack #spring #angular #angular 12 #authentication #authorization #jwt #login #registration #security #spring boot #spring security #token based authentication
1620729846
Why Use WordPress? What Can You Do With WordPress?
Can you use WordPress for anything other than blogging? To your surprise, yes. WordPress is more than just a blogging tool, and it has helped thousands of websites and web applications to thrive. The use of WordPress powers around 40% of online projects, and today in our blog, we would visit some amazing uses of WordPress other than blogging.
What Is The Use Of WordPress?
WordPress is the most popular website platform in the world. It is the first choice of businesses that want to set a feature-rich and dynamic Content Management System. So, if you ask what WordPress is used for, the answer is – everything. It is a super-flexible, feature-rich and secure platform that offers everything to build unique websites and applications. Let’s start knowing them:
1. Multiple Websites Under A Single Installation
WordPress Multisite allows you to develop multiple sites from a single WordPress installation. You can download WordPress and start building websites you want to launch under a single server. Literally speaking, you can handle hundreds of sites from one single dashboard, which now needs applause.
It is a highly efficient platform that allows you to easily run several websites under the same login credentials. One of the best things about WordPress is the themes it has to offer. You can simply download them and plugin for various sites and save space on sites without losing their speed.
2. WordPress Social Network
WordPress can be used for high-end projects such as Social Media Network. If you don’t have the money and patience to hire a coder and invest months in building a feature-rich social media site, go for WordPress. It is one of the most amazing uses of WordPress. Its stunning CMS is unbeatable. And you can build sites as good as Facebook or Reddit etc. It can just make the process a lot easier.
To set up a social media network, you would have to download a WordPress Plugin called BuddyPress. It would allow you to connect a community page with ease and would provide all the necessary features of a community or social media. It has direct messaging, activity stream, user groups, extended profiles, and so much more. You just have to download and configure it.
If BuddyPress doesn’t meet all your needs, don’t give up on your dreams. You can try out WP Symposium or PeepSo. There are also several themes you can use to build a social network.
3. Create A Forum For Your Brand’s Community
Communities are very important for your business. They help you stay in constant connection with your users and consumers. And allow you to turn them into a loyal customer base. Meanwhile, there are many good technologies that can be used for building a community page – the good old WordPress is still the best.
It is the best community development technology. If you want to build your online community, you need to consider all the amazing features you get with WordPress. Plugins such as BB Press is an open-source, template-driven PHP/ MySQL forum software. It is very simple and doesn’t hamper the experience of the website.
Other tools such as wpFoRo and Asgaros Forum are equally good for creating a community blog. They are lightweight tools that are easy to manage and integrate with your WordPress site easily. However, there is only one tiny problem; you need to have some technical knowledge to build a WordPress Community blog page.
4. Shortcodes
Since we gave you a problem in the previous section, we would also give you a perfect solution for it. You might not know to code, but you have shortcodes. Shortcodes help you execute functions without having to code. It is an easy way to build an amazing website, add new features, customize plugins easily. They are short lines of code, and rather than memorizing multiple lines; you can have zero technical knowledge and start building a feature-rich website or application.
There are also plugins like Shortcoder, Shortcodes Ultimate, and the Basics available on WordPress that can be used, and you would not even have to remember the shortcodes.
5. Build Online Stores
If you still think about why to use WordPress, use it to build an online store. You can start selling your goods online and start selling. It is an affordable technology that helps you build a feature-rich eCommerce store with WordPress.
WooCommerce is an extension of WordPress and is one of the most used eCommerce solutions. WooCommerce holds a 28% share of the global market and is one of the best ways to set up an online store. It allows you to build user-friendly and professional online stores and has thousands of free and paid extensions. Moreover as an open-source platform, and you don’t have to pay for the license.
Apart from WooCommerce, there are Easy Digital Downloads, iThemes Exchange, Shopify eCommerce plugin, and so much more available.
6. Security Features
WordPress takes security very seriously. It offers tons of external solutions that help you in safeguarding your WordPress site. While there is no way to ensure 100% security, it provides regular updates with security patches and provides several plugins to help with backups, two-factor authorization, and more.
By choosing hosting providers like WP Engine, you can improve the security of the website. It helps in threat detection, manage patching and updates, and internal security audits for the customers, and so much more.
#use of wordpress #use wordpress for business website #use wordpress for website #what is use of wordpress #why use wordpress #why use wordpress to build a website