Part Four in my ongoing "job board" coding series (others here, here and here): Coding a bot to look for jobs for you. Facebook recently announced their chatbots thing: Chatbots are not that super new, but more fuel is now on the fire and chatbots are probably app-killers - So let's make our own super simple one!
The beautiful thing about React is the syntax and structure is very similar, regardless of platform — so the React Native for devices code is very similar to any web based version.
For this app we have 2 files: Index and Results. The app is only a single feed on one page, but I have broken the App into two components to keep the “pages” in separate files (as well as being better practice).
First we import the modules of React Native that we are going to use (above). Then we will "import" our Results page (below). The Results page we will create later.
var Results = require('./Results');
The index page is used simply as a navigation stack container. Our app only has one page, so this is fairly simple. We use React and NavigatorIOS as our "router": we give the page a title and set the contents (component) as our Results page (the one we imported above).
The first method calls fetchData when the component has mounted, this is important. The fetchData() method then will use fetch API (More info here about this). All it does is call the Github API url we set above, parses the JSON response and places it in the dataSource variables we set in the Constructor, which will automagically create our Listview of jobs using the iOS Listview component. Magic! We also set the loaded state to true, because now we do have our data.
So, in order to let users know we are actually loading data, and the app hasn't crashed, we use a small method which shows a loading icon while the data is being fetched, and is triggered by our constructor "loaded" variable. For now just define these "renderings", which are called in turn in the main React.render method at the end.
This method makes use of various React components that will translate into Native ones. You can look up these React components with the Native link I pasted earlier, but briefly: Touchable highlight is a link, the web equivalent of the <a> tag; the View tag is the equivalent of the web <div> (a container) and Text might roughly translate to <span>, I guess - We can't say the coding world doesn't keep us on our toes!
The elements in curly braces are references to our styles component that applies the "css" to the view: eg. styles.container will refer to the styles object we define at the end. React uses objects to hold styling data. And the second type of data in our curly braces are the job list results: eg. job.title. Job is the object Github return to us. You can see what Github returns to us from their page here
Now we can pull the awaiting render methods together in the main method: When the data has loaded we call the ListView component (otherwise we show the "loading" component) and we pass to it the datasource, the Jobs View object we created and the stylings as "props", thusly:
Hello. Today I was chatting with a developer friend about - well, developer tech. Sometimes you just don't realise you've found dev link gold until someone else isn't aware of them. So I passed him some links, and I paste them here too - for all my developer friends out there.
When I was building my "first" real web app. I used a lot of resources: blogs and tutorials from other developers and the developer community in general. Without these resources there would have been no hope. So I feel it necessary to immediately give back some of what I received and write a brief-ish post about the broad development process behind monospace.gallery: a simple web app.
Yesterday I finally released the beta of my first lean SaaS project: monospace.gallery. The basic idea pivoted as I developed it, and finalised into One Click Portfolios for Dribbblers.
The idea is that a creative on the Dribbble community can login directly through their Dribbble account and get a nice, responsive portfolio layout with their work in their own vanity url.
It's a very simple app. My main aim was basically to become "fluent" in building quick apps. The strategy, then, was broken down into selecting the best technology & methodology for expressing this "fluency": in short, I chose a Node based framework called Meteor for super slimline development, and some features of the "Lean" Movement for streamlining the actually process.
It turned out to be a natty combination, because Meteor allows you to very quickly develop "concepts" and roll them out, so it works well with the Lean method of MVP and iteration.
I'm as minimalist a developer as I am a designer, and I have to say I'm well pleased with the limited amount of lines of code that were needed to put this app together: I'm guessing less than 300 lines of code (excluding libraries and frameworks of course). Distilled still further with preprocessors: namely; Jade, Stylus and Coffeescript.
I wrote a short post on its development How I built my web app, because I am sure there are designers and developers out there who will find the info useful: I know I found many similar resources useful while I was building it.
I’ve switched to Semplice as my go to WordPress CRM platform. I won’t call it a “theme”, because it isn’t really. As they say, it’s a toolkit. They don’t design the site for you.
Semplice really is the "designers best kept secret", just as they sell it, because, you know, it basically just puts the good-old twitter bootstrap grid features into WP: And a designer needs nothing else. All he needs is a container and an image to fill it with.
Semplice is great for simple custom pages, and portfolios and the like - it uses industry standard tools - but it’s weak on the blog layout tools: If you want a better blog layout other than the default you will need to add your custom css, and do some tweaking on the actual grid, in the html editor.
The custom css is easy. There is a box for it. But what if you want to change the grid? Well, it's not so tough. Semplice uses bootstrap (v2) so all we need to do is go into the Appearance -> Editor and change the classes on the blog layouts we want.
For example: I didn't like the default 8 columns grid layout on the blog, so let’s change the default 8 column span blog layout for 6 columns: 8 is too long, 6 is Goldilocks.
Open the editor and the format-standard.php file, then look for the span8 offset2 class. Change it for span6 and offset3.
Of course, change it for whatever tickles your fancy. Er.. that’s it. Have a nice day now.
UPDATE: I've updated to version 2.0 and they seem to have changed the blog formatting (and lost my changes). I looked under-the-hood and found they have moved the widths to some invisible option that is inaccessible. So, for now, I needed to actually hack the code until they make the option available: For you information I changed the format-standard.php file and commented out the line with the option altogether and manually added my span6 as above. Pretty crude, but their discussion forums are impenetrable. Hope they fix this. This is the line you need to comment out for now:
I'm currently in the middle of a serverside nightmare trying to setup various Ghost blogs on one server. Between nginx confs, ports & Ghost configs - well, I'm just having a great time. What the frick is going on?
The awesome thing about the command line is the intimate relationship you build up with the internet (as opposed to the world wide web). Not to mention the time saving... Why open a browser, navigate to github, click here and there to create a repo, when it can be done in one line from the prompt?
Today I am going to explain how to create the simplest Package for use with Meteor. I had a little trouble pushing out a simple template from a package to the app, so today I’m going to explain how it’s done.
Arguably what makes Vim the greatest tool for web development is the breadth of its customisation: It's like having an exo-suit for development - used correctly it does most of the heavy lifting.
Macros are the articulations that make code "lifting" a breeze. If you don't know what Macros are, they allow you to "record" a series of actions and re-perform those with a keystroke. Imagine being able to "record" going to the gym - then, instead of going again the next day you simple hit a key and it is done - with all the benefits, and without a second wasted. Isn't that power?
The environment in which you write is important (I'm not talking about Starbucks, but the user interface). Typography is important. Design is important. Let's add some typography to the WordPress fullscreen editor and write better (a spurious claim, but I like it).
What do jQuery, JSON, Node.js, Backbone.js, oAuth and API development have in common? They are currently sucking up all my learning time as I develop a very simple web app idea that I want to open up. So much time I can't even continue the Greek theme I had in mind for this post beyond the title - I know there is something in it...
Just a quick post to state again: Grid frameworks and responsive websites are not synonymous. For the record, you don't need a responsive grid framework, like Twitter's Bootstrap, to make a site responsive.
This is just a quick snippet for developers who have had problems setting up Jetpack locally.
Jetpack was recently updated to include a developers mode, because previously it required a connection to a WordPress.com account. All you need to do to activate Jetpack locally, without connecting to wordpress.com is the following:
Add the following line - possibly best below the WP_DEBUG line.
And save the file. Don't forget to change that on the live version!
Designers love colours, and are therefore discouraged by the monotony of the terminal window and words like "security". But let's face it, you're probably going to need this at some point. So, today let's look at WordPress security.
This is a designer staple - an inner shadow, so simple to do in Photoshop, used to be not so simple to do in CSS. But with the magic of CSS3 it's all gravy. Copy paste this standard gem of a snippet, or create a sass mixin and attach it to your selector (as any sane person would do). Read more