Wednesday, February 15, 2017
React Powered by Bootstrap!
#This tutorial is on how to run React JS and Bootstrap
1. First you will need to read this page (here)|https://react-bootstrap.github.io/getting-started.html
2. Then you will have to open this page (here)|https://react-bootstrap.github.io/components.html
#Now You Can Get Coding
1. This Tutorial Makes A Couple Of Assumptions:
- You Created This App With `$ create-react-app app_name`
-
Saturday, January 21, 2017
React on NodeJS for Beginners
React on Node for Beginners: Build a basic Macintoshes App
The app you will be building here is pretty generic (on purpose for simplicity). It takes from a JS file with a JSON set in it as a fake database as a starting point for your content. You could always connect this to a real database later it is a proof of concept.In our databank as it is referred to in this tutorial we have a list of our favorite Macintosh computers throughout time. We then have this list displaying via react on port 8080 via a node server.
$ mkdir your_app && cd your_app
$ npm init (press return multiple times
$ touch webpack.config.js
$ mkdir -p src/static src/static/css src/components src/data
$ touch src/static/index.html
$ touch src/data/databank.js
index.html file that will serve our forthcoming webpack.js file.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Best Macs - A Universal JavaScript demo application with React</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="main"></div>
<script src="/js/bundle.js"></script>
</body>
</html>
JSON file that will serve as a database, we’ll call it databank, because its not-quite-a-database but it’s good enough.// src/static/databank.js
const databank = [
{
'id': 'mactwo-ci',
'name': 'Macintosh IIci',
'country': 'united states',
'birth': '1989',
'price': '$6269',
'cpu': 'moto 68030 25mhz',
'image': 'https://en.wikipedia.org/wiki/File:Macintosh_IIci.png',
'link': 'https://en.wikipedia.org/wiki/Macintosh_IIci'
},
{
'id': 'mactwo-fx',
'name': 'Macintosh IIfx',
'country': 'united states',
'birth': '1990',
'price': '$9900',
'cpu': 'moto 68030 40mhz',
'ram': '4 MB',
'max-ram': '128 MB',
'image': 'https://en.wikipedia.org/wiki/File:Macintosh_IIfx.png',
'link': 'https://en.wikipedia.org/wiki/Macintosh_IIfx'
},
{
'id': 'macse-30',
'name': 'Macintosh SE30',
'country': 'united states',
'birth': '1989',
'price': '$4369',
'cpu': 'moto 68030 16mhz',
'ram': '1 MB',
'max-ram': '128 MB',
'image': 'https://en.wikipedia.org/wiki/File:Macintosh_IIfx.png',
'link': 'https://en.wikipedia.org/wiki/Macintosh_SE/30'
},
];
export default databank;
databank.js which is told to the IndexPage.js (forthcoming).// src/components/DataPreview.js
// I preview your data from your databank.js so your IndexPage.js knows what to show
import React from 'react';
import { Link } from 'react-router';
export default class DataPreview extends React.Component {
render() {
return (
<Link to={`/hardware/${this.props.id}`}>
<div className="data-preview">
<h2 className="name">{this.props.name}</h2>
</div>
</Link>
);
}
// the almighty IndexPage.js
import React from 'react';
import DataPreview from './DataPreview'
import databank from '../data/databank';
export default class IndexPage extends React.Component {
render() {
return (
<div className="home">
<div className="data-selector">
{databank.map(databankData => <DataPreview key={databankData.id} {...databankData} />)}
</div>
</div>
);
}
}
The final file we will do is our template. We will reference our nav. bar and our index.JS in this file. And finally we will do the now bar or menu file.
// components/NavBar.js
import React from 'react';
import { Link } from 'react-router';
import databank from '../data/databank';
export default class NavBar extends React.Component {
render() {
return (
<nav className="data-menu">
{databank.map(menuData => {
return <Link key={menuData.id} to={`/hardware/${menuData.id}`} activeClassName="active">
{menuData.name}
</Link>;
})}
</nav>
);
}
}
// components/Template.js
export default class Template extends React.Component {
render() {
return (
<div className="app-container">
<header>
<Link to="/">
<img className="logo" src="/img/logo-apple-logo.png"/>
</Link>
</header>
<div className="app-content">{this.props.children}</div>
<footer>
<p>
This is a demo app to showcase universal rendering and routing with <strong>React</strong> and <strong>Express</strong>.
</p>
</footer>
</div>
);
}
}
So let’s get the computers page. Clearly if your app is something other than computers you will insert the noun which you are listing from your databank instead of computers so it will not be confusing.
//components/ComputerPage.js
// src/components/AthletePage.js
import React from 'react';
import { Link } from 'react-router';
import NavBar from './NavBar';
import databank from '../data/databank';
export default class ComputerPage extends React.Component {
render() {
const id = this.props.params.id;
const data = databank.filter((databank) => databank.id === id)[0];
if (!data) {
return <div> not found dude :( </div>;
}
return (
<div className="computer-full">
<NavBar/>
<div className="computer">
<div className="item-container">
<h2 className="name">Welcome to the {data.name}</h2>
</div>
</div>
<div className="navigateBack">
<Link to="/">« Back to the index</Link>
</div>
</div>
);
}
}
Remember you will put this file in your components directory.
// src/components/AppRoutes.js
import React from 'react';
import { Router, hashHistory } from 'react-router';
import routes from '../routes';
export default class AppRoutes extends React.Component {
render() {
return (
<Router history={hashHistory} routes={routes} onUpdate={() => window.scrollTo(0, 0)}/>
);
}
}
If you are familiar with the rails is should bring them back some serious memories. Although it is not as strict as a rails app will be with routes.
Pay attention! This one goes one directory level up – not in your components directory.
// src/routes.js
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import Template from './components/Template';
import IndexPage from './components/IndexPage';
import ComputerPage from './components/ComputerPage';
// import NotFoundPage from './components/NotFoundPage';
const routes = (
<Route path="/" component={Template}>
<IndexRoute component={IndexPage}/>
<Route path="hardware/:id" component={ComputerPage}/>
</Route>
);
export default routes;
// src/client.js
import React from 'react';
import ReactDOM from 'react-dom';
import AppRoutes from './components/AppRoutes';
window.onload = () => {
ReactDOM.render(<AppRoutes/>, document.getElementById('main'));
};
webpack.config.js way back in your application's root folder, run a $ webpack -w, or you will have to recompile your sources every single time, not fun:// webpack.config.js
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'src', 'client.js'),
output: {
path: path.join(__dirname, 'src', 'static', 'js'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: path.join(__dirname, 'src'),
loader: ['babel-loader'],
query: {
cacheDirectory: 'babel_cache',
presets: ['react', 'es2015']
}
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
mangle: true,
sourcemap: false,
beautify: false,
dead_code: true
})
]
};
webpack game. Let's run Webpack in Watch mode so that when we make changes to any of our JS asset's webpack will recompile on the fly, do this from the application's root directory.
$ webpack -wHTTP-server Node module you do that like so from your application root directory:$ node_modules/.bin/http-server src/static
- watch your directory structure
- your syntax may be so messed up that it crashes
$ webpack -wif you do watch yourwebpack error messagesand restart$ webpack -w JSON notation can be tricky, use a good editor and watch for errors there, plus hyphens(-)are going to pwn your dataset if they are in thekeyposition of yourkey-valuepairs
React on Node for Beginners: Build a basic Macintoshes App
React on Node for Beginners: Build a basic Macintoshes App
The app you will be building here is pretty generic (on purpose for simplicity). It takes from a JS file with a JSON set in it as a fake database as a starting point for your content. You could always connect this to a real database later it is a proof of concept.
In our databank as it is referred to in this tutorial we have a list of our favorite Macintosh computers throughout time. We then have this list displaying via react on port 8080 via a node server.
$ mkdir your_app && cd your_app
$ npm init (press return multiple times
$ touch webpack.config.js
$ mkdir -p src/static src/static/css src/components src/data
$ touch src/static/index.html
$ touch src/data/databank.js
src/static/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Best Macs - A Universal JavaScript demo application with React</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="main"></div>
<script src="/js/bundle.js"></script>
</body>
</html>
// src/static/databank.js
const databank = [
{
'id': 'mactwo-ci',
'name': 'Macintosh IIci',
'country': 'united states',
'birth': '1989',
'price': '$6269',
'cpu': 'moto 68030 25mhz',
'image': 'https://en.wikipedia.org/wiki/File:Macintosh_IIci.png',
'link': 'https://en.wikipedia.org/wiki/Macintosh_IIci'
},
{
'id': 'mactwo-fx',
'name': 'Macintosh IIfx',
'country': 'united states',
'birth': '1990',
'price': '$9900',
'cpu': 'moto 68030 40mhz',
'ram': '4 MB',
'max-ram': '128 MB',
'image': 'https://en.wikipedia.org/wiki/File:Macintosh_IIfx.png',
'link': 'https://en.wikipedia.org/wiki/Macintosh_IIfx'
},
{
'id': 'macse-30',
'name': 'Macintosh SE30',
'country': 'united states',
'birth': '1989',
'price': '$4369',
'cpu': 'moto 68030 16mhz',
'ram': '1 MB',
'max-ram': '128 MB',
'image': 'https://en.wikipedia.org/wiki/File:Macintosh_IIfx.png',
'link': 'https://en.wikipedia.org/wiki/Macintosh_SE/30'
},
];
export default databank;
// src/components/DataPreview.js
// I preview your data from your databank.js so your IndexPage.js knows what to show
import React from 'react';
import { Link } from 'react-router';
export default class DataPreview extends React.Component {
render() {
return (
<Link to={`/hardware/${this.props.id}`}>
<div className="data-preview">
<h2 className="name">{this.props.name}</h2>
</div>
</Link>
);
}
Now we have all the dependencies that the index page will need let’s go out and do the index page. Keep in mind this is the react jS index page.
// the almighty IndexPage.js
import React from 'react';
import DataPreview from './DataPreview'
import databank from '../data/databank';
export default class IndexPage extends React.Component {
render() {
return (
<div className="home">
<div className="data-selector">
{databank.map(databankData => <DataPreview key={databankData.id} {...databankData} />)}
</div>
</div>
);
}
}
Now it’s time to think about your navbar and the template for your entire app. There is no way we are doing this by hand. Let’s be thankful that react JS is smart enough to take the objects in our databank.JS fil in our navbar for us.
The final file we will do is our template. We will reference our nav. bar and our index.JS in this file. And finally we will do the now bar or menu file.
// components/NavBar.js
import React from 'react';
import { Link } from 'react-router';
import databank from '../data/databank';
export default class NavBar extends React.Component {
render() {
return (
<nav className="data-menu">
{databank.map(menuData => {
return <Link key={menuData.id} to={`/hardware/${menuData.id}`} activeClassName="active">
{menuData.name}
</Link>;
})}
</nav>
);
}
}
// components/Template.js
export default class Template extends React.Component {
render() {
return (
<div className="app-container">
<header>
<Link to="/">
<img className="logo" src="/img/logo-judo-heroes.png"/>
</Link>
</header>
<div className="app-content">{this.props.children}</div>
<footer>
<p>
This is a demo app to showcase universal rendering and routing with <strong>React</strong> and <strong>Express</strong>.
</p>
</footer>
</div>
);
}
}
I lied there will be two more pages. A computers page which will display the info on all of the parts of your databank for each object. And you need to finesse your routes.JS page in order to tell your react application about all of these nifty things that you have just created underneath the components folder.
So let’s get the computers page. Clearly if your app is something other than computers you will insert the noun which you are listing from your databank instead of computers so it will not be confusing.
`` //components/ComputerPage.js
// src/components/AthletePage.js import React from ‘react’; import { Link } from ‘react-router’; import NavBar from ‘./NavBar’; import databank from ‘../data/databank’;
export default class ComputerPage extends React.Component { render() { const id = this.props.params.id; const data = databank.filter((databank) => databank.id === id)[0]; if (!data) { return
not found dude :(
;
}
return (
<div className="computer-full">
<NavBar/>
<div className="computer">
<div className="item-container">
<h2 className="name">Welcome to the {data.name}</h2>
</div>
</div>
<div className="navigateBack">
<Link to="/">« Back to the index</Link>
</div>
</div>
);
}
} ```
One more thing is that there will be an out Apple routes component file to which she will import your routes JS file. While it was rather generic and basically just set up your environment for your react JS application. One important thing to note is the line about importing the reactor router. You will either specify hashhistory or browserhistory based on whether or not you are running in development or production respectively.
Remember you will put this file in your components directory.
// src/components/AppRoutes.js
import React from 'react';
import { Router, hashHistory } from 'react-router';
import routes from '../routes';
export default class AppRoutes extends React.Component {
render() {
return (
<Router history={hashHistory} routes={routes} onUpdate={() => window.scrollTo(0, 0)}/>
);
}
}
Let’s get to your regular routes page. If you are familiar with the rails is should bring them back some serious memories. Although it is not as strict as a rails app will be with routes. Here because your routes Jay asked file will go in your S RC directory one level up not in your components directory.
// src/routes.js
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import Template from './components/Template';
import IndexPage from './components/IndexPage';
import ComputerPage from './components/ComputerPage';
// import NotFoundPage from './components/NotFoundPage';
const routes = (
<Route path="/" component={Template}>
<IndexRoute component={IndexPage}/>
<Route path="hardware/:id" component={ComputerPage}/>
</Route>
);
export default routes;
You know how in a node JS application you will have your server.JS file? Well since this is a reactive application you will need a client.JS file as an entry point for your app to run. Remember this will go in the same directory as your routes.JS file.
// src/client.js
import React from 'react';
import ReactDOM from 'react-dom';
import AppRoutes from './components/AppRoutes';
window.onload = () => {
ReactDOM.render(<AppRoutes/>, document.getElementById('main'));
};
Here is the dread of every react developer setting up your web pack.Jazz file. Now I will tell you an important secret. What you want to do here is make sure that when you are developing to run web pack in a watching mode. In order to do that after paste the following in your webpack.config.js way back in your application's root folder, run a $ webpack -w, or you will have to recompile your sources every single time, not fun:
// webpack.config.js
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'src', 'client.js'),
output: {
path: path.join(__dirname, 'src', 'static', 'js'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: path.join(__dirname, 'src'),
loader: ['babel-loader'],
query: {
cacheDirectory: 'babel_cache',
presets: ['react', 'es2015']
}
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
mangle: true,
sourcemap: false,
beautify: false,
dead_code: true
})
]
};
If you are reading this congratulations. The last thing you want to do is fire up your Application via a HTTP-server Node module you do that like so from your application root directory:
$ node_modules/.bin/http-server src/static
A couple of beginner notes to watch:
- watch your directory structure
- your syntax may be so messed up that it crashes
$ webpack -wif you do watch yourwebpack error messagesand restart$ webpack -w JSON notation can be tricky, use a good editor and watch for errors there, plus hyphens(-)are going to pwn your dataset if they are in thekeyposition of yourkey-valuepairs
Sunday, December 27, 2015
Want to get back to the 5GB iCloud Free Storage account after you have upgraded to the 20GB Price Tier?
iCloud write up
Want to get back to the 5GB iCloud Free Storage account after you have upgraded to the 20GB Price Tier?
on the Phone go to settings
choose iCloud
choose change storage plan
choose downgrade
choose 5gb Free
choose to Delete Photo Library (this is a big mistake and will disallow you from being able to purge your library and start over)
receive warnings about how long your photos will be available for I think it's 25days from your downgrade date.
go to your OS X Computer, with Safari, log into iCloud.com and go to Photos. Select a photo and try to delete it, impossible the Trash Can will be greyed out.
Also of note there will be a yellow error message at the top of this page telling you about your 20 something day timer. You are essentially in a black hole. With the exception that you can download photos if you have to.
Help!? How do I purge?
On the Phone, because Deleting Photo Library is a mistake and sends you into a 25 day waiting period in which you can’t purge your Photo Library…
Call Apple Tech Support, it took me 7 times to get through.
Explain a bunch of things to them and that you want to purge your Photo Library. Have them tell you the following:
go to iCloud Settings
go to Storage (okay, whatever)
go to Manage Storage (yes manage storage)
click on iCloud Photo Library
click re-enable photo library (its way down at the bottom a text link)
Now log into iCloud.com from a computer running Safari, NOT Chrome, and go to Photos.
Click-select one photo to check if the Trash Can Symbol will no longer be greyed out? If it is able to Delete, you can proceed.
Try to click-select delete all 7,000 something photos. I don’t suggest this seemed like overkill and the web app did not like this. Refresh the page, see all the photos still there.
So, try to find the sweet spot of photos to select that will actually delete. For me it was around 600.
Click-select photos. Click a photo at the start of a selection zone, hold shift and click one roughly 400-700 photos away, you can repeat without using your selection and get a proper updated status of number of photos selected. Click the “trash can” and wait until the bottom of the screen reads that there are x number of fewer photos. Very important to keep your eye focused at the bottom of the page where you will see some javascript-status-type notification about how many photos are in there, and if it’s working on deleting or finished, or what.
Reload the page after each try to make sure your deletes are actually deleted. A good way to get your bearings is to see what the total number of photos is in the repo.
Now that your iCloud.com Photos are set go ahead and purge out your settings on your devices.
Grab your Phone
iCloud settings again, enable everything BUT keychain
Switch to the computer
go to Internet accounts
enable all options in iCloud (except keychain back to my mac find my mac)
speaking of iCloud settings, go to Photos section. Tick iCloud Photo Library and My Photo Stream.
open Photos.app
quit Photos.app
diable all Photos settings
open Photos.app
quit Photos.app
go to settings in Photos.app tick off iCloud Photo Library sub of Optimise Mac Storage and My Photo Stream
try not to be concerned with the Downloading 6,254 items statement
Quit Photos.app
Run disk permissions
Disable all Photos Items in iCloud and in settings within Photos.app
Quit Photos.app
Quit Internet Accounts
Delete actual Photo Library found in ~/Pictures/Photos Library
Enable the aforementioned settings in Internet Accounts settings
Run Photos.app, and create a new photo library (since you erased the former one) and in Photos.app settings use the aforementioned settings.
Check sync settings on iPhone. Untick all photo related settings on iPhone. Watch photo library number of items return to the actual number of photos on the device.
Now turn on all proper iCloud Photo settings on your device.
Now everything is working as expected however in the Photos.app settings pane the iCloud Photo Library is still reporting a massive download of 6,253 items when iCloud.com/photos is correctly reporting there are 83 photos.
Hoping a restart fixes this. Actually a restart doesn't fix this. The issue is all of the photos in the Trash bin are still there because you have not chose to Empty Trash from iCloud.com Photos in your browser. Do this.
Then run Photos.app on your MacBook. Click over to Preferences and now it will report a proper amount of photos needed to sync.
Monday, December 21, 2015
How to properly setup your cloud accounts on iOS and OS X General idea. Turn everything on in all accounts which you use. The things that are junk will reveal themselves and you can delete content in junky areas you don't use. Example, can you say Googles Notes sync. Nobody uses this. Since its enabled, go to your notes and clean it up. Erase all the random Google notes and your iPhone hits the web. Cleaned up on your phone, cleaned on the cloud. Breathe a sigh of relief.
General idea. Turn everything ON in all accounts which you use.
The things that are junk will reveal themselves and you can delete content in junky areas you don't use. Example, can you say Googles Notes sync. Nobody uses this. Since its enabled, go to your notes and clean it up. Erase all the random Google notes and your iPhone hits the web. Cleaned up on your phone, cleaned on the cloud. Breathe a sigh of relief.
Which device do I use?
I have a MacBook Pro and an iPhone 6s (regular size). Smartphones have gotten so good that there is now so much overlap between the two devices that it can be confusing what to do on what device. Here are some guidelines.
iPhone
Siri is a still a gamble, but it is good for exactly one thing. Press and hold the home button and say 'weather'.
What about 'call so and so'? Sorry Merlin Mann. I tried to use my telephone like it was 2015 but it thought I wanted to 'call restorative yoga' instead.
Let's get back to hey Siri, enable it. Check. Say hey Siri. Check. Have a brand new iPhone 6s understand that you are initiating a query, sometimes. Meh, maybe I have to retrain the voice model, or better yet just give up.
Evernote
Thank god for the iPhone being able to run any and all of the common calendars tasks and email servers. Productivity apps are still in their infancy and have cross platform repercussions that heavily effect how you use your (laptop) computer or computers.
Say you like iCloud mail? Well it looks like you are enabling your iCloud account and setting up a profile in Mail.app on you El Capitan system. Like gmail? Well you can pipe that through your Mail.app as well, but what if you like Contacts not getting imported and strange new fields co mingling between you iCloud account and gmail account. Well you shouldn't have checked off that switch. Hmmm. Verdict avoid and use Google Chrome. Does this remind you of your parents broken Windows PC with Firefox installed on it because Internet Explorer mysteriously stopped working one day? Probably, but what does that tell you?
Let's get back to Evernote. It's entirely its own ecosystem and runs identically on whatever device in which its being used. Things are in the same places on iOS OSX, webapp and Windows. I haven't looked for it on Linux. Their EULA states that they don't data mine, but even if they do/did I would feel comfortable using it. I have camera phone pictures of receipts from at least four years ago still showing up in the Evernote "file system" I cobbled together years ago. Which is a pretty game good track record considering the following:
I have screwed up and lost files in my Dropbox account tens of times over in that timespan.
God knows what has happened in my OneDrive account.
OwnCloud installation that I kept for all of one day.
GoogleDrive has things in it, but what they are or how long they have been there is something of a mystery to me.
Flickr, which I tried but gave up after an album or two.
iCloud Drive because on El Captain they promised us it would be different this time. Hello $.99 a month sign up to utilize. I could write another post on this scam alone. Does apple really need $12 a year from everyone?
So all and all that leaves us with Evernote
It works because it's a closed system, it works cross platform because it's the same everywhere. It works because you control what you put in it. Let's elaborate on that.
The Gmail problem.
Remember ten years ago how you used to send your self files as attachment to your gmail account. That was fun and slick and innovative right? Kind of. But then you got six trillion spams and applied to 12 jobs, and won some crap on eBay (or sold some crap on eBay ) and then couldn't find your awesome file or note you sent to yourself anymore. Probably because you deleted it because you realized you overwhelmed yourself. Well you did the right thing by doing that, that was a stupid idea in the first place, shame on you.
Would you out you important photos, scans of receipts, noted you took while on the phone with a client comics you wanted to read, hot babes phone numbers in with an uncontrollable stream of information? No. That's why you don't put that stuff in your Gmail. Win Evernote.
What about NVAlt and Notational Velocity and DevonThink?
NVAlt is very neat and fast from a end user perspective. But I have a computer and a phone. And wtf does the NVAlt database do? And what happens if I sync to Dropbox wrong. And what happens if I move things around in the NV alt file folder the way I want them. Well chances are any of these slips of the knife could completely fuck up all of your notes. No thanks. If your a zen master when it comes to self control and don't really need your notes on you phone in sync with your OSX computer then maybe this is for you.
DevinThink.
I originally learned of this from MacPowrUsers podcast. And in theory it's awesome. But in reality Evernote makes more sense.
Evernote is free in most cases. $5 a month for high use. (Which is something like a 2-3 year payout after purchase using DevonThink for all of your platforms and then getting it to sync.)
Evernote syncs with all your devices because their sync is obvious. When you create a new notebook you are asked, "do you want it to be a cloud synced notebook?" If you don't you can use the software to store however much your computer can hold for free. I'm not entirely sure how you would go about backing up that info (manually, outside of Evernote's cloud) but it would be a cool thing to look into.
DevinThinks UI makes me feel like I am working on some sick hybrid of that MacOS7.5 Lotus CC Mail program from 1995 and Macromedia Director.
Monday, October 12, 2015
How to Setup an Open VPN Box
Three major components to get this one working: 1. OpenVPN, 2. UFW 3. Client.ovpn File
First let's take care of installing OpenVPN on your NIX based OS. This is a DigitalOcean centric tutorial which I followed, and henceforth followed with my DigitalOcean box, but presumably it would work on anything running Linux. Boot up any old Ubuntu Box. I built mine on the back of a DigitalOcean, Ubuntu, WordPress on 14.04. Your going to have to read two tutorials, one to install OpenVPN on your box, and the second one you can just skim, its to learn a little about UFW. Follow the first tutorial here to setup your keys, install OpenVPN and install and briefly configure UFW: https://www.digitalocean.com/community/tutorials/how-to-set-up-an-openvpn-server-on-ubuntu-14-04.
The following info can either be obtained by sifting through the comments of the above article, and or reading various man pages or just reading my blog further. So heres a key thing they left out above, immediately following the tutorial, reboot your server or nothing will work. Kinda important yeah? I hope you know how but if you don't a garden variety sudo shutdown -r now works.
Gather up your collage of Client.ovpn, ca.cert, client1.crt, and (be careful exposing your) client1.key; put them in a safe place.
Assuming you want to VPN your OS X Machine, go ahead and download Tunnelbick (open source) (Downloads) and point it to your Client.ovpn file. Connect and you're now browsing in an encrypted manner. Congratulations.
Subscribe to:
Posts (Atom)