DEV Community: lucsan

Need a simple project to sharpen your skills?

lucsan — Wed, 24 Jul 2019 12:28:09 +0000

I often hear people saying they need a simple project but they are overwhelmed by all the options, well he's the simple guide to creating a simple project for your needs.

First you need a little bit of data, this is the internet after all, and its all about the infonation.

Don't 😰 sweat it, you don't want to spend ages searching the internet, finding heaps of data, parsing it, cleaning it, sorting it (unless your into Machine Learning), in stead make a simple table 📑.

It doesn't matter if your data is a piddly little 4 by 4 table of, say, fruit, price, weight, and img (with 4 fruits in it), this is sufficient data for any project, simply replace fruit with your favorite thing if you don't like fruit, you weirdo.

So armed with a 🍌 banana and 3 other fruit (🍎🥑🐷), the next part, while simple, is harder, you need to focus on the part of the job you want to demonstrate.

So, if you wish to demonstrate DB mastery, put the table in a database, for CSS magicians, just make the table in html then look at it in a browser, for programing gurus make the table an array or object or list, or directory, or data cluster.

Now look at your table and 🤔 think about what next? what do you want to achieve? A page listing your fruit 📰 and an individual page for each fruit? a 📊 graph of fruitiness?

For Database simply devise as many ways of getting your fruit data, for programming, as many was of manipulating your fruit data, and for front-end as many ways of presenting your fruit, as you can, then do a few of them.

🎈 At this point you have more or less completed your project, simple eh! 🎉

If your a front-ender, then sensibly you made your table into a set of html pages with the data written directly into the pages. maybe you used Sass or Less, well you can upload it all to github and make a github page which will run your site.

For the rest of us the matter of tool chain becomes more important, your luverly database with its tables and SQL statements that provide fruity 🍏 goodness in a variety of formats, can only be seen via a database viewer (ie: client), you probably want to display your 🍒 fruitformation on the webs as well. Similar may be said for programmers.

It depends on how much of the development sequence you want to demonstrate as all parts can be dealt with by a something else, to the extent you could create a project with bits found else where on the internet.

Resources like Netlify (Amazon), Firebase (Google), and Glitch (don't know) provide webspace and tool chain. With Netlify you can use AWS lambda functions, and with Firebase the Google equivalent, and of course, you can use all three together in some way (ie: get Glitch to call an AWS lambda function and use Firebase user login).

It may be that you can simply drag and drop your project into any of these. Alternately you can use your favorite database to html program which automatically generates web pages based on the database structure. Simply put, you can find a tool to do the jobs you don't want to. (proviso: this rule is only good for small projects, and you may spend a lot of time learning new tools).

💻 Here's an example of a small project I recently put together, with a simple stack.

I chose Netlify (over firebase) for no reason xept I needed one or other. Code in github (obvo) , simple taskrunner in npm (using node scripts).

If your interested https://github.com/lucsan/SpockScissorsPaper for the engine and https://spockpaperscissors.netlify.com/ to see the web app. The code for the app is at (rspalator running in React https://github.com/lucsan/ReactScissorsPaper)

For my little bit of data I remembered a project I devised a few years back a 🎲 Rock Paper Scissors engine which is given a set of items, and returns the result of pitching 2 items against each other. It takes any number of items, but defaults to 7.

This project alone is quite nice from a TTD perspective and might replace fizz-buzz (5s n 7s) for variety, ironically I haven't implemented tests as I wanted the engine for the data. This also allows me to have a dependency (the RPS engine), thus creating a build chain.

Then I created a React project which uses the RPS engine, in other words, a website which lets you play RPS.

Code bases on github. Netlify configured to run node build scripts on master update, (and, as and when, I'll get Travis involved too). If you wanted to add more backend then perhaps add a login (or an old school high score board, with just the 3 letters) saved to some db or other (or file).

For front-end there is plenty in the mechanics and the display of the game. I added some base bootstrap files, but you cold go mad with SASS, Grunt, etc.

Again the trick here is the simplicity of the data you use, and where you want to demonstrate skills, for Dev Ops just have lots of things which need to be connected, for backend make sure you add in a database, and maybe a shopping basket, for middle ware add in customer forms, room bookings etc, for front-end make sure your 3 pages look abso spanking.

The real trick is to focus on the part (skill) you want to demonstrate, or just go organically, I have a little table what do I do with it? I know I'll present it well, then I know, I'll add customers, a shopping basket, tax, discounts, discounts on bulk, unavailable goods notification, email updates on the state of the fruits, a database for customer queries about fruit, and their availability, tests for whatever, a build chain to put it all together, in short, whatevs you need/want/are excited to do with your little bit of data.

Hope this in some simple way helps you clarify your thoughts on your next project.

🛠 Bulding a node web server in 50 lines of code

lucsan — Fri, 28 Jun 2019 15:06:21 +0000

SimpServ simple Server is a, small footprint, node js, web Server, in a single page of javascript, which is exciting.

The code is available at: https://github.com/lucsan/simpserv/blob/master/simpserv.js

You can just copy the file to a 🍰 desired location, or if you like, do the whole npm git thing and 👽 clone or 🍴 fork, or 🥄 spoon from the remote repo https://github.com/lucsan/simpserv .

It's purpose is to provide a 💨quick and 💩dirty local dev server for js, html and css.

For this 📃recipe we will require some node packages from the basic nodejs library.

const http = require('http')
const url = require('url')
const fs = require('fs')

Thus you will need nodejs installed on your machine. I will let you have the fun of working out 😱 how to do that.

There is simple configuration in the file,

const config = {
  port: '8080', // And any port you like.
  root: '', // If you want to server files from a different location to where you started node.
  autoload: true, // Auto loads a window in the default browser.
  index: 'index.html', // You need an index.html in your root.
}

The 🚂'engine' is started when start() is called via the command line using node or npm.

📄For example:

node simpserv.js, or (if you have the package.json) npm run serv

The start function is quite simple. A server (http.createServer().listen()) is created and told to listen intently to the browser.

The onRequest() function is gently injected into createServer making the request.on event handler available, which waits eagerly to receive input (ie: a uri) from its loving browser.

function start () {
  http.createServer(onRequest).listen(config.port)
  console.log('SimpServ running')
  function onRequest(request, response) {
    request.on('error', function(err){ console.log('err ', err) })
    router(request, response)
  }
}

Every time the request.on event receives a new uri it eagerly passes it to the router function.

The router function is so super-duper it handles everything else. In a larger project this might be included as a module, anyway, here it is ...

const router = (request, response) => {
  let filename = url.parse(request.url).pathname
  filename = filename.replace('/', '')
  if (filename == '') filename = config.index
  let path = (config.root == '' ? filename : `${config.root}/${filename}`)
  let bits = path.split('.')
  let ext = bits[bits.length - 1]
  let ct = 'text/html;'
  if (ext == 'css') ct = 'text/css;'
  if (ext == 'js') ct = 'text/javascript;'

  fs.readFile(path,  (err, page) => {
    if (err) console.log(err)
    response.writeHead(200, { 'Content-Type': `${ct}charset=utf-8` })
    if (page) {
      response.write(page)
    } else {
      response.write('Error')
    }
    response.end()
  })
}

In the first few lines we extract essence of path from root uri,

ie: root = / or '', anything after the / is considered to be path.

eg:
https://localhost/myproject/ = / or ''

https://localhost/myproject/index.html = index.html

https://localhost/myproject/some/place = some/place

We use index.html as the default file if the path is empty, but you could make this any file you like.

Next we inspect the path for extension types. In this case we only care about css and js, which is not so very caring of us at all, but, other extensions can be catered for (eg: php).
The desired MIME type is inserted into ct

Finally readfile is called, passing in the path, and it serves the referenced file (which should be in, or relative, to the root or node running folder), if it can find it, else, errors out. 🤖 does not compute.

This bit of code:

if (process.platform == 'win32') {
  require('child_process')
    .exec(`start http://localhost:${config.port}`)
}

Opens a page in the default browser pointing at / or /index.htm, it only works on Windows, but you can find the equivalent for other OS's. This is a nice touch, though technically not part of the simple server as such.

As you can see you could easy-peasy begin to modify this code for nefarious purposes (php, data endpoint), or to make it more comprehensive (and complex), or adapt it to a specific purpose (much as 🖌illustrated by the existing code).

Here is a code snippet to respond to an API endpoint:

if (path.indexOf('/customer') > -1) {
  if (path.indexOf('/name') > -1) filepath = '/customerName.html'
  if (path.indexOf('/address') > -1) filepath = '/customerAddress.html'
}

and is inserted here:

if (ext == 'js') ct = 'text/javascript;'
  // --- Insert filepath adapters here --- //
fs.readFile(path,  (err, page) => { ...

Now when you visit /customer/name the file customerName.html is returned, but this could just as easily be some json data, or filepath could resolve to html returned from a function.

  filepath = myDataHtml('getSome')

🏄‍Surfs up Dudes🌊