DEV Community: Dan Englishby

The Complete JSON Tutorial – Quickly Learn JSON

Dan Englishby — Tue, 26 May 2020 10:51:25 +0000

JavaScript Object Notation or more commonly known as it’s abbreviated name JSON is extensively used throughout all kinds of applications. Its purpose is to streamline communications, most commonly between a browser and a server. Although having said this, it’s perfectly normal for this to work the opposite way around too.

You will inevitably fall upon JSON one time or another during your developer journey and this article hopes to give you a content-know-how to work with it.

Some Background
A Basic Introduction
JSON Data Types
JSON Formatting
Basic Example
Nested JSON
Advanced Example
Managing JSON With JavaScript
Working With The Console
Summary

Some Background

JSON is a major part of the JavaScript programming language, it uses go far and beyond the imaginable eye. Discovered in March 2001 and Catering for over 40 languages, yes 40! JSON, with the right library, can be used in almost every programming language you’ve heard of.

This technology even has its own website, which lists all the libraries that can bootstrap your application with JSON. In addition, there are some technical diagrams to provide an insight into how this great communication helper works.

A Basic Introduction

JSON is quite easy to use when you get your head around it, it’s nothing more than simple text structured in a certain way. If you’ve never seen it in the flesh before, then this is a good time to show a small example. Here is what it can look like –


    {
        "SiteName": "CodeWall",
        "ArticleName": "JSON Tutorials",
        "Revision": 1
    }

As you can see from the example, it’s just as stated, simple text, formatted with quotations, separated by colons and comma’s and completely wrapped in some braces. It can get more advanced with bigger data, but we will go through that in detail within this article too.

JSON Data Types

JavaScript Object Notation can handle nearly every data type you could possibly need it too. This, of course, makes it an extremely powerful tool, being able to handle arrays and objects in itself is super-cool. Let’s go through the data types with some small examples showing how they would look in a working application.

String


    {
        "StringDataType": "String"
    }

Object


    {
        "ObjectDataType": {
            "myObj": "ObjectData"
        }
    }

Array

    {
        "ArrayDataType": [1, 2, 3, 4]
    }

Number

    {
        "NumberDataType": 1
    }

Boolean

    {
        "BooleanTrueDataType": true,
        "BooleanFalseDataType": false
    }

Date

    {
        "DateStringDataType": "2011-07-14 19:43:37 +0100",
        "JavaScriptDateDataType": new Date(1310669017000)
    }

JSON Formatting

There are some strict rules when it comes to formatting JavaScript Object Notation and if not adhered too, expect your code to fall over.

Rule #1. Key/Identifier & Value

JSON consists of 2 main elements, a key, and a value. No matter the data type, it needs to be in this format. The key you specify will ultimately be used to access the value later on within your application or on the alternative consumer end.

Rule #2. Key/Identifier Double Quoted

Yes, you may get away with it in JavaScript, but with JSON, you can’t. Every identifier or key you specify in a JSON object must be double-quoted, essentially making it a String type. It may be hard to rid habits of not having to do this, but it soon falls into place.

Rule #3. Wrap Objects In Curly Braces

Whether you have one object or fifty in your JSON code, each object needs to be wrapped inside curly braces, specifying the start and the end of each object inside. This is extremely important, especially to interpreters, if these are missed, you will soon be alerted about it!

Rule #4. Separate Key/Value by Colons

Data within JSON must be separated out, to do this, a simple colon is sufficient, it goes straight after the key or identifier statement and just before the value. This is another imperative concept which you will see the importance when logging data to the console, which is explained later in this tutorial.

Rule #5. Arrays Are To Be Treated Like Arrays

When using arrays within JSON, treat them exactly the same as you would do in normal JavaScript syntax. Whether that be a string or numeric array, the same rules apply.

Rule #6. Encapsulate Objects With Square Brackets (Array)

Multiple objects must sit in an array, giving you what is called an Array Of Objects, this will be used when you have advanced data that you need to communicate to the front-end or the back-end. Notice the bracket-syntax highlighted in blue within the image below.

Rule #7. Objects & Data Separated By Commas

No doubt you will end up working with multiple object JSON in your lifetime, they must be separated correctly, with a simple comma each time. Similarly, data must be separated out with commas too, let’s see this in action with a bit more of an advanced JSON snippet. The important syntax is highlighted in blue for visual understanding.

Basic Example

Now that we’ve gone through the main rules of JSON, it’s time for an example with a range of data types. Feel free to use the following code for your own learning, it will be a great reference or starting point. In this example, these four data-types are present –

String
Integer
Decimal
Boolean

    {
        "Article": "Tutorial",
        "Author": "Dan Englishby",
        "YearPublished": 2018,
        "IsPublished": true,
        "AverageWordsPerSentce": 20.3
    }

Nesting

Ok, so JSON can become pretty complicated in terms of data-load and that’s why nesting is a key factor to this technology. When you have tons of data to communicate, nesting is a beautiful art. Within the following example, nesting down to two levels is shown because, in theory, nesting is endless. Therefore, knowing how to do it will inevitably come in handy.

How do we nest objects?

Nesting objects are achieved by creating an Array-of-objects within a JSON property. See the following example

    {
        "OuterObject": [{
            "NestedObjects": [{
                    "SomeName": "SomeValue"
                },
                {
                    "SomeName": "SomeValue"
                },
                {
                    "SomeName": "SomeValue"
                }
            ]
        }]
    }

How do we nest arrays?

Similarly, we can nest arrays, and it’s pretty simple too. The only problem with doing it, is you lose the ability to specify the array’s data with identifier or keys. This is because the nested array will be identified with a numeric index rather than a key-value pair.

    {
        "OuterObject": [{
            "NestedArray": [
                [
                    "SomeValue"
                ],
                [
                    "SomeValue"
                ],
                [
                    "SomeValue"
                ]
            ]
        }]
    }

Advanced Examples

See the following examples that use nested concepts to section out data. The property Articles holds a nested set of article names, in addition, it holds the next nested set of data, Shared On, which again nests social network names.

Advanced Example #1

    {
        "Category": "Tutorials",
        "Articles": [{
                "Name": "ChartJS Lesson 1",
                "Shared On": [{
                        "SocialNetwork": "Facebook"
                    },
                    {
                        "SocialNetwork": "Twitter"
                    },
                    {
                        "SocialNetwork": "Google+"
                    }
                ]
            },
            {
                "Name": "ChartJS Lesson 2",
                "Shared On": [{
                        "SocialNetwork": "Facebook"
                    },
                    {
                        "SocialNetwork": "Twitter"
                    },
                    {
                        "SocialNetwork": "Google+"
                    }
                ]

            },
            {
                "Name": "ChartJS Lesson 3",
                "Shared On": [{
                        "SocialNetwork": "Facebook"
                    },
                    {
                        "SocialNetwork": "Twitter"
                    },
                    {
                        "SocialNetwork": "Google+"
                    }
                ]
            },
            {
                "Name": "ChartJS Lesson 4",
                "Shared On": [{
                        "SocialNetwork": "Facebook"
                    },
                    {
                        "SocialNetwork": "Twitter"
                    },
                    {
                        "SocialNetwork": "Google+"
                    }
                ]
            }
        ]
    }

The above example shows how to nest objects, but you can also nest arrays too, having an array-of-arrays is perfectly normal. It all depends on what your specific needs are. The following example shows the Shared On property holding an array of social network names.

Advanced Example 2

    {
        "Category": "Tutorials",
        "Articles": [{
                "Name": "ChartJS Lesson 1",
                "Shared On": [
                    ["Facebook"],
                    ["Twitter"],
                    ["Google+"]
                ]
            }
        ]
    }

Managing JSON With JavaScript

JavaScript works super-fluently with JSON, which of course it does, JS did create it! Managing data within JS can be done in numerous ways, from storing variables to finally accessing the data. In this section, we will learn how to do each one.

Storing JSON In A JavaScript Variable

If you’ve already worked with JavaScript before, I know this will be teaching you to suck eggs, but for the readers who haven’t see the example below –

Storing as a variable

    var json = {
        "Article": "Tutorial",
        "Author": "Dan Englishby",
        "YearPublished": 2018,
        "IsPublished": true,
        "AverageWordsPerSentce": 20.3
    };

Yep, it’s as simple as that, you’ve just stored your first JSON data-set in a JS variable!

Accessing the data

Accessing JSON values can be done in two ways

Dot Notation Style
Bracket Notation Style

Dot Notation Example

With the variable we created in the last example, we can now access the values with the following code.

    var articleName = json.Article; // variable is now "Tutorial"

Bracket Notation Example

    var articleName = json["Article"]; // variable is now "Tutorial"

Working With The Console

Visualizing the data, you create in JSON is quite important to understand it even further, once you see it properly logged into a console, it makes such a difference. All we need to successfully log data to the console is first, a browser with the console facility and secondly some JavaScript.

Browsers such as Google Chrome, Internet Explorer, Firefox all have this functionality, so If you haven’t got one of them already, go download one and then come back to this part of the tutorial.

How do I see the console?

The good news here is that to expose the console in most browsers is done by the exact same method. Use the following steps to find your console.

Right click on the web page.
Find the Inspect Element option.
Click it.
After the new window opens, find the sub-headed Console window and click it.

See chromes console in the image below –

Logging to the console

Now we’ve discovered the console, let’s use it, add the following code to your JavaScript and reload the page.

    var json = {
        "Article": "Tutorial",
        "Author": "Dan Englishby",
        "YearPublished": 2018,
        "IsPublished": true,
        "AverageWordsPerSentce": 20.3
    };
    console.log(json);

As you can see, the JSON created within the JavaScript has been nicely logged to the Google Chrome console. It’s sectioned and colored beautifully so you can quickly-visually understand it.

Summary

Within this tutorial, all aspects of working with JSON were covered, hopefully giving you the knowledge to go and play with it and learn even more. With a little practice, you will become fluent with it too and then start daring to work with some really complicated nested JSON. As I mentioned before, knowing these concepts will be invaluable to your tool-set because there are so many libraries and API’s that use it.

I’ve logged all the examples within this tutorial to the console, so you can see them all in their full glory. Right-click, inspect element and click the console window to see them.

Lastly, a great online tool that is extremely helpful in verifying that JSON is syntactically correct is the JSONLint interface, it’s free and very easy to use.

Hope it helps, thanks for reading!

This post is cross-posted from my blog - CodeWall JSON Tutorial

40 reasons why I love being a DEV!

Dan Englishby — Tue, 26 May 2020 10:13:02 +0000

Here’s my personal list of reasons why I love being a developer and always will. I hope you can share this list with people who aspire to be web developers or programmers and maybe, it will make them jump and give it go! Honestly, If you’re fed up with your current job, and it’s not in development, try being a developer, it’s awesome.

The whole purpose of this post is to try to give non-developers a glimpse into the life of what it’s like to be a developer. From there, you can make your own mind up!

Reasons why being a developer is awesome

Learning something new pretty much every day.
Being challenged every day whether that be a simple bug fix, to something big like a new project.
Being able to see technology make life easier.
Taking part in a fast-moving industry that never ceases to amaze you.
Lots of coffee.
Discovering new open-sourced (free) tools & resources to work with consistently – thanks to GitHub.
The opportunity to be creative with your own ideas.
Being part of a global industry where everyone knows that arrays start at zero :).
With the right dedication and consistency, you can learn yourself to be a pro at this type of work.
Pretty decent money, especially for something you love.
More coffee.
There is always room to learn more.
Technology is the future, and it will be here for a long, long time.
No worries about the development industry disappearing.
It’s great fun and there is definitely lots of coffee.
The only job that you can eat a chocolate cake for breakfast and now be frowned upon. (Devs need much sugar)
Using beautiful coding software like Visual Studio.
Learning to interface applications with just about anything these days.
This one is hard to believe… Actually not being too bothered about going to work.
Realizing that StackOverflow is my new Bible.
Google is now my best friend.
Appreciating, deeply, how much effort is used in things like Xbox Games & Virtual Assistants like Amazon’s Alexa.
The only job that you and your colleagues can get over-excited when you reduce 6 lines of code to 1.
Maintaining and being proud of my 80 words per minute typing speed.
Red Bull.
Making time-consuming tasks super fast.
Having a good reason to actually be on Twitter. Ahem, follow me – @DanEnglishby
Developing things that quite possibly have the potential to change the world.
Seeing the look on the client’s faces when they get their software/website or another technical resource!
My nan telling everyone I’m a genius because I’m a coder.
Being able to take my laptop to a beach and write code (Yep I did this once).
Having the skills to become a freelancer or start my own business easily.
Being able to just look at a website and pretty much figure out how it was made.
Caring about what color my IDE theme is. (Dark, of course)
Having a genuinely fulfilling career.
Taking pride in telling people why Internet Explorer is useless and Google Chrome is superior.
Having great job security, there are always jobs available for developers.
Being passionate about what I do.
There is how-to-guides to build or learn just about anything.
Did I mention there is lots of coffee?

Summing Up

I hope you enjoyed my reasons as to why being a web developer or programmer is awesome. I would love to hear your personal reasons as to why you love being a developer too! Please leave a comment with yours.

Like my content? Feel free to check out my blog : CodeWall

MongoDB Beginner Tutorial With Compass GUI & The Mongo Shell CLI

Dan Englishby — Thu, 12 Dec 2019 20:11:09 +0000

Original Article on : https://www.codewall.co.uk/mongodb-beginner-tutorial-with-compass-gui-the-mongo-shell-cli/

Introduction.
Installation Guide.
Pre-requisites.
MongoDB Setup & Connecting To DB.
Downloading MongoDB.
Installing MongoDB & Connecting.
Compass for MongoDB Setup & Connecting To DB.
Downloading Compass for MongoDB.
Installing Compass for MongoDB.
The Data.
Link to Excel data file.
Managing Data With Compass (CRUD)
Creating a Database & Initial Collection.
Creating documents (data)
Viewing documents (data)
Updating documents (data)
Deleting documents (data)
Managing Data With MongoDB CLI (CRUD)
Creating a Database.
Creating a collection adding documents (data)
Inserting one document
Inserting multiple documents.
Viewing documents (data)
Updating documents (data)
Deleting documents (data)
Advanced functionality with MongoDB.
Projection.
Sort
Skip.
Limit
Indexing.
Aggregation.
BackUp.
Restore.
Import With mongoimport.exe.
Advanced Data With MongoDB.
Advanced MongoDB CLI Setup (Windows OS Only)

Introduction

NoSQL is an emerging database technology that provides a non-relational structure of data. In this following document, key factors of getting started with NoSQL with a database container of MongoDB will be explored. In addition to installing and utilizing MongoDB, another piece of software will be used in Tandem with it too. Namely, Compass, MongoDB’s official GUI.

Installation Guide

Pre-requisites

Internet Connection
Windows Operating System PC/Laptop

MongoDB Setup & Connecting To DB

Downloading MongoDB

To download the latest version of MongoDB, follow the steps below.

Go to https://www.mongodb.com/download-center/community
Choose the current release from the version dropdown.
Select Windows 64-bit x64 from the OS dropdown.
Make sure MSI is the package selected.
Click download.

Installing MongoDB & Connecting

To install MongoDB onto your computer/server follow the steps below.

Step 1

Locate and open the downloaded installation file.
Double click and open.
See the images below with arrow prompts to install.

Figure 1. MongoDB SetupWizard Page1

Figure 2. MongoDB SetupWizard Page2

Figure 3. MongoDB SetupWizard Page3

Step 2

For this tutorial, MongoDB will be installed under the Network Service user, but alternatively, you can specify a local or domain user if required. For the latter, you must provide an Account Domain and Account Password.

Tick Install MongoDB as a service (This will ensure that MongoDB is online/running each time the computer is booted) Otherwise, it would need to be started manually.
Tick run service as Network Service User.
Leave the default service name of MongoDB so it’s easily recognized.
Leave default data and log directory intact unless you must have it somewhere different.
Click next.
Make sure Install MongoDB Compass is unticked, as this is to be installed manually later.
Click next.
Click Install.
Wait for install to complete and click finish.
Finally, open TaskManager and click the services tab or use windows key + R and type services.msc
Try and locate the MongoDB service instance to make sure the installation was a success. See figure 4.

Figure 4. Services. MongoDB

Step 3

Note: If you want to undertake a more advanced setup to access the mongo shell, see Page 45, Advanced MongoDB CLI Setup (Windows OS Only).

Open the command prompt on your computer.
Enter the following command – cd C:\Program Files\MongoDB\Server\4.0\bin (Or replace with the path of the MongoDB installation bin folder)
Now type the following command – mongo
You will now be connected to the MongoDB instance on the local machine. See the following reference on the mongo shell.

Compass for MongoDB Setup & Connecting To DB

Downloading Compass for MongoDB

Follow the steps below to download the free, community edition of Compass.

Go to the following download page URL for Compass https://www.mongodb.com/download-center/compass?jmp=docs
Pick the Community Edition Stable version from the drop-down.
Select Windows 64-bit (7+) from the platforms dropdown.
Click the download button.
Wait for the download to complete.

Installing Compass for MongoDB

Step 1

Locate and launch the MongoDB Compass installer that was download earlier.
Read the License Agreement and click agree if you are happy with the conditions.
Navigate through the series of how-to panes until you reach the privacy setting window and tick/untick to your preference.
Lastly, click Start Using Compass.

Step 2

You should now be presented with the following page to set up the GUI software and connect to the MongoDB instance.

Figure 5. Compass Initial Setup

Add the following parameters as follows

Hostname: localhost or Remote ServerIP
Port: 27017
Leave the rest of the fields as their default and press connect.

After these three steps, the following page should have loaded within the software.

Figure 6. COMPASS Connected To Host

The Data

The data that is going to be used for the purpose of this tutorial is a simple data set generated from the cool website https://generatedata.com. The data consists of people, their first and last name, age, email, education, etc. In addition, It’s a flat data set that is perfect for MongoDB.

It’s worth noting here that the Primary Key of id has been removed from the excel data set due to MongoDB’s default functionality of giving each document (row) a unique id of its own.

Link to Excel data file

If you want to use the exact same data file that I have, then download the excel file below.

People.csv

Managing Data With Compass (CRUD)

Creating a Database & Initial Collection

Step 1

Open up MongoDB Compass Community that was installed earlier.
Connect to the MongoDB Server by specifying parameters as below
1. Hostname: localhost
2. Port: 27017
Click connect.
From the loaded dashboard click the Create database button.
The create database helper will be loaded, as shown in Figure 7.
Specify the Database Name as peopledb
Specify the Collection Name as people
Click the Create Database button.

Figure 7. Create Database Helper

Creating documents (data)

Step 1

Locate the People Database under the MyCluster Pane located on the left-hand pane and click it. You will be presented a screen as shown in Figure 8.

Figure 8. People Database View

Step 2

Then progress to click on the earlier created collection, people, the software will then present a new dashboard of functions shown in Figure 9.

Figure 9. People Collection Dashboard

Step 3

Now to add some documents (data), proceed by clicking on the Insert Document button to open the insert document helper as shown in Figure 10.

Figure 10. Insert Document Helper

Using the data from People excel data set, fill out the key-value fields for the first row of data altering the data types with the right-hand dropdowns, after that press the insert button. See figure 11.

Figure 11. Insert Document Data Example

Step 5

Hover over the newly created document in the data pane, and hit the clone document button, this will replicate the data into another insert pane. From here, simply type in the next row of data from the excel file, no need to specify the field names or data types this time!

Viewing documents (data)

Compass GUI offers two ways to view data, List view (Figure 12) and Table view (Figure 13). To view data or collection of documents, follow the steps below.

Within Compass click the peopledb in the left-hand pane.
Click the collection name People.
The documents will now be visible in the default List View.
If you want to change it to Table view, simply click the Table toggle parallel to the View menu. See Figure 14 with arrow indicators.

Figure 12. List view of data

Figure 13. Table view of data

Figure 14. View data toggle

Updating documents (data)

Editing or updating documents with Compass is straight forward, follow the next steps to utilize the software and update value fields.

Locate the document you want to update and hover over it until the tooltip pops up.
Click the edit document Pencil icon as shown in Figure 15. This will enable the full modification of the document within the viewer.
Double click the value field of the data you want to update, as shown in Figure 16.
Change the data to your requirement and press enter.
You will notice a Document Modified notification will appear, click the update button on this notification to save changes. See Figure 17.

Figure 15. Edit document icon

Figure 16. Editing a value

Figure 17. Document modified & Update data button

Deleting documents (data)

Deleting documents is another simple task with the Compass software and can be done in two clicks of a button. Please follow the next steps to delete a document.

Locate the document you want to update and hover over it until the tooltip pops up.
Click the delete Trash Can icon as shown in Figure 18.
A notification will appear stating the document has been flagged for deletion in red, Click the delete button as shown in Figure 20 and the document will be deleted.

Figure 18. Delete Document Icon

Figure 19. Document Flagged For Deletion Icon

Figure 20. Delete document button

Managing Data With MongoDB CLI (CRUD)

Creating a Database

To create a new database with the MongoShell, please make sure you are already connected via the command line, if not see Page 3, Installing MongoDB & Connecting. Or simply follow these steps –

Quick Command Line Connection Recap

Open the command prompt on your computer.
Enter the following command – cd C:\Program Files\MongoDB\Server\4.0\bin (Or replace with the path of the MongoDB installation bin folder)
Now type the following command – mongo

Create the DB

Type use peopledb. (This command creates the peopledb database)
Press enter, see Figure 21 for what should be displayed.

Figure 21. Creating database via mongo shell

Creating a collection adding documents (data)

To create a new document and add documents with the MongoShell, please make sure you are already connected via the command line, if not see Page 3, Installing MongoDB & Connecting.

Inserting one document

Make sure you are using the peopledb database (see Figure 21)
Using the command db.people.insertOne() will create the People collection automatically if it does not exist. Between the parenthesis is where the JSON data should go.
Use the CodeBlock 1 below to insert a row of the CSV file dataset.
A JSON response will be returned to the console, displaying the inserted id. See Figure 22.

CodeBlock 1

db.people.insertOne({"firstName":"Grace","lastName":"Nelson","gender":"Female","age":{"$numberInt":"21"},"email":"g.nelson@randatmail.com","education":"Bachelor","salary":{"$numberInt":"5347"},"maritalStatus":"Single"})

Figure 22. After insertOne command is used

Inserting multiple documents

Rather than inserting documents one method at a time, you can utilise the insertMany() command. Follow the steps below –

Make sure you are using the peopledb database (see Figure 21)
Using the command db.people.insertMany() will create the people collection automatically if it does not exist. Between the parenthesis is where the array of JSON data should go.
Use the CodeBlock 2 below to insert multiple rows of the CSV file dataset.
A JSON response will be returned to the console, displaying the inserted ids. See Figure 23.

CodeBlock 2

db.people.insertMany([{"firstName":"Daryl","lastName":"Johnson","gender":"Male","age":{"$numberInt":"20"},"email":"d.johnson@randatmail.com","education":"Upper Secondary","salary":{"$numberInt":"4450"},"maritalStatus":"Married"},{"firstName":"Justin","lastName":"West","gender":"Male","age":{"$numberInt":"27"},"email":"j.west@randatmail.com","education":"Doctoral","salary":{"$numberInt":"5783"},"maritalStatus":"Married"}])

Figure 23. After insertMany() command

Viewing documents (data)

To view data within the MongoShell, please make sure you are already connected via the command line, if not see Page 3, Installing MongoDB & Connecting.

Follow the steps below –

Make sure you are using the peopledb database (see Figure 21)
Type the command db.people.find() and press enter. The documents in the collection will be returned to the console. See Figure 24

Figure 24. db.people.find() all results displayed

Updating documents (data)

To update documents with the MongoShell, please make sure you are already connected via the command line, if not see Page 3, Installing MongoDB & Connecting.

Updating a document uses a method called updateOne() which requires multiple parameters in the format of JSON. The first is the criteria or search term to find the document in question, the second is the values we want to set.

Make sure you are using the peopledb database, see Figure 21.
Use the command in CodeBlock 3 to change the salary of the person with the email of west@randatmail.com.
The response returned should give you an acknowledgment that the document was modified. See Figure 25.
Check that the document was updated visually with the following command – db.people.find({email: "j.west@randatmail.com" })

CodeBlock 3

db.people.updateOne({ email: "j.west@randatmail.com" }, { $set: { "salary": 9999 } } )

Figure 25. Updating documents with updateOne()

Deleting documents (data)

To delete a document from the database with the mongo CLI, please make sure you are already connected via the command line, if not see Page 3, Installing MongoDB & Connecting.

Deleting a document uses a method called updateOne() which takes up to 3 parameters but, for this example, we will only be using one; filter.

Make sure you are using the peopledb database, see Figure 21.
Enter the following command to delete the document that has the email of j.west@randatmail.com – people.deleteOne({email: “j.west@randatmail.com” })
Mongo should give a JSON response notifying the deletion was successful. See Figure 26.
Check to see if the document above still exists by using the following command – people.find({email: “j.west@randatmail.com” }) and you should see nothing returned from mongo.

Figure 26. Response after deleteOne() method utilised

Advanced functionality with MongoDB

Projection

Projections are a way of overriding the default way of how MongoDB returns data via a query. Using a projection enables customization of how the data is returned or as otherwise put, what fields are returned.

For example, MongoDB will, by default be similar to the following query in SQL

SELECT * from tbl

Selecting all fields when executed.

With projection parameters, it could be like the following

SELECT field1, field2 from tbl

Specifying specific fields to be returned in the result set.

With Compass

Using the Compass query bar, you can specify projection fields easily. Following the steps below to perform a projection query on the collection.

Locate the database and collection of documents you want to query in the left-hand pane and click it.
After the view is loaded locate the query bar and press the options button as shown in Figure 27 and click it.
Four options will now appear on the left-hand side, one of these is Project.
Fill out fields that you want to return in the result set in JSON format where the first value in the field and the second is a Boolean 1 or 0 to show the field or not. For example {email : 1}
After filling out the JSON within the project option, click the find button as shown in Figure 28.
The result set returned will now be displayed in the list view below the query bar. See Figure 29 for an example.

Figure 27. Query bar options button

Figure 28. Find button

Figure 29. Projected result set

With MongoDB CLI

Projection in the Mongo shell is done with JSON projection parameters passed into the find() method. By specifying a query and secondly, field names and an integer (1 to show and 0 to hide) we can utilize projection.

See the following steps –

Connect to MongoDB instance with the CLI.
Type use peopledb
Type db.people.find({}, {email : 1})
Notice the first empty object parameter in the method above, as we do not want to specify any criteria, in particular, just simply ask for all results instead.
Also, notice the default behavior of the output, the _id field is also included without request.
See Figure 30 for the output.

Figure 30. Example Projection Query

Sort

Sorting of data (documents) can be utilized by using the Sort option which takes a field name and the ascending or descending parameter in the format of a number. 1 for Ascending and -1 for descending.

For example, sorting is exactly similar to how you would sort in SQL. See the query below.

SELECT

*

FROM

TBL

ORDER BY

age

ASC

With Compass

See the following steps to perform a sort in a query on collections.

Locate the database and collection of documents you want to query in the left-hand pane and click it.
After the view is loaded locate the query bar and press the options button as shown in Figure 21 and click it.
Four options will now appear on the left-hand side, one of these is Sort.
In the sort option bar enter the parameters in the format of JSON. For example {age: -1}
Press the find button and you will see the document view now be ordered by length descending. See figure 31 for the result view.

Figure 31. Results after sort by descending length

With MongoDB CLI

The sort method can be chained to a find method, making it extremely understandable and in opinion, better than executing within compass. The integer supplied acts the same as it does in Compass too, 1 for ascending and -1 for descending.

See the following steps –

Connect to MongoDB instance with the CLI.
Type use peopledb
Type people.find({}, {age : 1}).sort({age: -1}) for descending result.
Type people.find({}, {age : 1}).sort({age: 1}) for ascending result.
See Figure 32 for results sorted by age.

Figure 32. Sorting results

Skip

Skip serves the purpose of skipping x number of documents during a query search, by specifying an integer, the MongoDB will skip this amount and return the results next in the collection.

For example, you can execute this command in SQL too. See the following SQL code.

SELECT

*

FROM

TBL

SKIP

1

With Compass

To skip documents when executing a query, use the following steps for Compass.

Locate the database and collection of documents you want to query in the left-hand pane and click it.
Click the options button on the query bar and look to the bottom right of the dropped down box, parallel to collation. Here you will find the Skip option. See Figure 33.
Enter an integer, for this tutorial the number 1 will be used.
Click the find button and you will see the result set with the first two collections missing. See Figure 34.

Figure 33. Skip option

Figure 34. Skip 1 document result set

With MongoDB CLI

Again, this method can be chained to existing methods already in the command line, for this example we will use the commands for both the Find and Sort tutorials.

Connect to MongoDB instance with the CLI.
Type use peopledb
Type people.find({}, {email : 1}).sort({age: -1}).skip(1) for descending result that skips the first document, see Figure 35 for an example.
Alternatively use people.find().skip(1) to request all documents, skipping the first document.

Figure 35. Skip method example

Limit

Limit is a filter to limit the number of results returned, this can be any number you desire and can serve really good purposes in some use cases.

SQL offers the very same functionality, see the example below, the returned result set would be one row only.

SELECT

*

FROM

TBL

LIMIT 1

With Compass

To skip documents when executing a query, use the following steps for Compass.

Locate the database and collection of documents you want to query in the left hand pane and click it.
Click the options button on the query bar and look to the bottom right of the dropped down box, parallel to collation. Here you will find the limit option. See Figure 26.
Enter an integer, for this tutorial the number 1 will be used.
Click the find button and you will only see one document in the result view. See Figure 27.

Figure 36. Limit option

Figure 37. Limit 1 result set

With MongoDB CLI

The Limit method is highly similar to the Skip method, it requires a single integer and again, it can be chained, see the following steps.

Connect to MongoDB instance with the CLI.
Type use peopledb
Type people.find({}, {email : 1}).sort({age: -1}).skip(1).limit(1) See Figure 38 for an example
Alternatively, you can use skip without chaining to all the methods above. Use the command people.find().limit(1) to retrieve the first document in the collection.

Figure 38. Limit method example

Indexing

Just like in SQL server, MongoDB can place indexes on specific fields too. This helps speed up queries but at the same time can add more hard-disk usage with the more indexes utilized.

With Compass

By using Compass GUI, indexes can be added to fields in the database’s collections. See the following steps to utilize indexing.

Locate the database and collection you want to place an index on and click it.
From the initial collection dashboard look to the top of the view and find the Indexes tab as shown in Figure 39 and click it.
Next, click the green Create Index button, as shown in Figure 40.
From the modal popup, enter an index name, something of descriptive purpose to the field you want to index. For this example, ageIndex.
Select the field you want to index, for this example, age was selected.
Choose ASC from the index type dropdown*. (MongoDB, Index Types, 2018).*
Click the create button, see Figure 41.
You will now be able to see the index within the indexes tab view. See Figure 42.

Figure 39. Index Tab Location

Figure 40. Start Creating Index Button

Figure 41. Create Field Index Button

Figure 42. Indexes View After Index Creation

With MongoDB CLI

Creating an index is executed with the following method createIndex(), it takes two parameters, the first being specifying the fields that you want to index and the second is specifically for index options which you can see more detail in the documentation.

Connect to MongoDB instance with the CLI.
Type use peopledb
Type people.createIndex({age: 1}) to place an index on the age field.
See Figure 43 for the successful index creation response.

Figure 43. createIndex() response

Aggregation

Aggregation in MongoDB is similar to SQL Server aggregation functions like Group By or Sum. Mongo offers 3 prominent options for aggregation; Aggregation Pipeline, Map-Reduce and Single Purpose Aggregation. See the following reference for fine detail on the above-listed methodologies.

With Compass

Compass GUI comes out-of-the-box prepared for aggregation and has its own tab within the collections dashboard. See the steps below to perform a simple aggregation of counting by specific criteria.

Locate the database and collection you want to perform aggregation on and click it, in this case the peopledb DB & people collection.
Locate the Aggregation tab towards the top of the view and click it. See Figure 44 for the location of the tab.
Once the aggregation tab has loaded, enter a Pipeline name, for this example use Count Of Males Pipeline.
Then locate the aggregation stage widget as shown in Figure 45.
Click the select drop down and pick the $match operator, this will load the initial format requirements to the window. See Figure 46.
Within this window, enter a key and value like the following – { gender: “Male” }
Once this is filled out, you will notice the output window on the right displaying only documents with the Gender of ‘Male’. See Figure 47.
Now to add the Count aggregation, to start this, click the Add Stage button underneath the $match query.
Again, from the new stage’s dropdown, select $count.
This JSON blueprint requires a key field only, what you want this count field to be named. Name it malePeopleCount, keeping apostrophes intact.
The output window on the right of this stage will then load the result. See figure 48.
Finally, save the pipeline with the Save Pipeline button at the top of the aggregation view. – This will allow you to preload this aggregation functionality for quick use another time.

Figure 44. Aggregations tab

Figure 45. Aggregation Stage Widget

Figure 46. $Match operator JSON

Figure 47. $match output

Figure 48. $match & $count output

With MongoDB CLI

The aggregate() function of the Mongo Shell provides many possibilities for aggregation, it allows multiple instances of its aggregating parameters. In this example, a query for the count of all instances of documents with a specific gender.

Connect to MongoDB instance with the CLI.
Type use peopledb
Type the following command people.aggregate([{ $match: { gender: “Male” } }, {“$group” : {_id:”$gender”, count:{$sum:1}}}])
See Figure 49 for the output of the above command.

Figure 49. Aggregation, group and count

BackUp

With Compass

Currently, the only method of backing up from the Compass software is to export data at collection level. See the following steps to execute an export.

Locate the database and collection you want to export. For this tutorial, people was used.
Click the collection dropdown at the top of the window as displayed in Figure 50.
Click export collection.
Turn the Export Full Collection toggle on.
Select JSON or CSV (For this example, JSON was selected)
Select the path and type a filename where you want to export the data to go to.
Click the export button, see Figure 51.
The data will be exported in JSON format.

Figure 50. Collection dropdown

Figure 51. Export Data Button

With MongoDB CLI

Mongo comes out-of-the-box with a special engine to back up the database, but it may be wise to use a third-party tool to do this to prevent affecting performance. Nevertheless, the following steps show how to back up a MongoDB database.

Locate the MongoDB installation /bin folder. For example, C:\Program Files\MongoDB\Server\4.0\bin.
In this folder, there will be a program called mongodump.exe – This is the engine that will backup the database.
Open the command line prompt as administrator (Right click -> run as administrator) to make sure the CLI has utmost access to create the backup file).
Type cd C:\Program Files\MongoDB\Server\4.0\bin — Or replace with your own path.
Type mongodump –host localhost –port 27017 –db peopledb
See Figure 52 for the response.
Check inside the folder C:\Program Files\MongoDB\Server\4.0\bin (or your own path) for a folder named dump, which should have been created and open it
Open the next folder inside of it, which should be your Database name that you backed up.
Inside are the backup files from the mongodump command. See an example of the files in this zip file.

Above parameters explained

–host = Hostname, e.g.: localhost or remote host address.
–port = Port number, e.g.: 27010 or remote port number.
–db = Database name, in this case peopledb or alternatively one of your own.

Figure 52. mongodump output

Restore

With Compass

Currently, the only method of backing up from the Compass software is to import data at collection level. See the following steps to execute an import.

Locate the database and click create collection – Call it peopleDuplicate.
Click the peopleDuplicate collection then click the collection dropdown at the top of the window as displayed in Figure 53.
Click the import data option.
Select JSON or CSV (For this example, JSON is used).
Browse to find the file you want to import, in this case, the data that was exported earlier will be used.
Click the import button, see Figure 53.
The data will now be imported into the duplicated collection. See Figure 54.

Figure 53. Collection Dropdown & Import Button

Figure 54. Collection after import

With MongoDB CLI

In this example of restoring with the Mongo engine, the backup that was made with mongodump in the backup tutorial section.

Alternatively, if you didn’t use the backup section, grab the files here. – Add the files to the MongoDB bin folder in a folder named ‘dump’ and in a subfolder named peopledb. So, for example – C:\Program Files\MongoDB\Server\4.0\bin\dump\peopledb

Locate the MongoDB installation /bin folder. For example, C:\Program Files\MongoDB\Server\4.0\bin.
In this folder, there will be a program called mongorestore.exe – This is the engine that will restore a database.
Open the command line prompt as administrator (Right click -> run as administrator) to make sure the CLI has the utmost access to create the backup file).
Type cd C:\Program Files\MongoDB\Server\4.0\bin — Or replace with your own path.
Type the command mongorestore --db peopledbduplicate dump/peopledb
See the output response in Figure 55.
Now connect to mongo with a new command prompt.
Type use peopledbduplicate
Type db.people.find() – See Figure 56 for the documents in the newly restored People collection.

The parameters for mongorestore above

–db = Database name for import/restore
Dump/exportedFolder = the command to specify the dump folder inside the /bin folder.

Figure 55. Output/Response after mongorestore

Figure 56. People collection output after restore from dump

Import With mongoimport.exe

With the mongoimport exe available to use within the MongoDB installation, it is possible to import data in CSV, TSV or JSON format. In this example, the data set specified at the beginning of the tutorial will be imported into the mongo database. Note: The data set must be saved as a .csv file.

Locate the MongoDB installation /bin folder. For example, C:\Program Files\MongoDB\Server\4.0\bin.
Make sure that mongoimport.exe exists.
Open the command line prompt as administrator (Right click -> run as administrator) to make sure the CLI has the utmost access to create the backup file).
Type cd C:\Program Files\MongoDB\Server\4.0\bin — Or the path of your bin folder
Use the following command – mongoimport –db peopledb –collection peopleDuplicate –type csv –headerline –file C:\Users\DWEPr\Desktop\people.csv ( –file will be the full path to your CSV file)
Press enter. See Figure 57 for the response after import.
Now connect to mongo with a new command prompt.
Type use peopledb
Type db.peopleDuplicate.find(). See Figure 58 for the documents in the newly restored peopleDuplicate collection.

Parameters for mongoimport explained

–db = Database name you want to import into
–collection = The name of the collection you want to create/import into.
–type = type of file, in this case, CSV
–headerline = Instructs the engine to use the first line of the CSV as the field names.
–file = the full path to the CSV file for import.

Figure 57. Output after import CSV

Figure 58. Collection after CSV import

Advanced MongoDB CLI Setup (Windows OS Only)

To save time whilst using the command line, you can set an Environment Variable in the form of a path to your mongo engine. This will prevent specifying the full folder path of the engine every time you boot the command prompt and rather just be able to type ‘mongo’. See the following steps to set it up.

In addition to the ability to use mongo quickly, other engines like mongodump and mongorestore will also be available from the CLI too, simply by typing them.

Go to control panel
Click System and find Advanced System Settings and open it.
Click environment variables.
Find the user variables window and look for ‘Path’ if it’s not already there, then you will need to follow these sub-steps
1. Click New
2. Enter Path as the variable name
3. Enter cd C:\Program Files\MongoDB\Server\4.0\bin as the variable value (or the path to your mongo bin folder).
4. Click Ok, then Ok again.
If the path does exist, click it and press edit.
Click new on the right-hand side and enter the following – cd C:\Program Files\MongoDB\Server\4.0\bin (or the path to your bin folder)
Click Ok, then Ok again.
Finally, open up the command prompt and type mongo
You should now be connected to the mongo shell!

HTML Text Input Formatting With Cleave.js

Dan Englishby — Fri, 08 Nov 2019 20:48:58 +0000

One of my pet peeves when shopping online is HTML input forms, especially when they’re not properly formatted for you. Usually, many of the giant e-commerce shops will have this functionality, but others, not so much.

For example, when typing in your phone number in an input form, it will end up looking like a zero-spaced 11 digit number. This is a bit of a nightmare when you're double-checking the number, especially if you’ve just read that number from your phone which is beautifully formatted, for example, 0800 1234 567.

When properly formatted, an input form should display the numbers like the above example whilst you type it in, spacing it automatically for you.

This simple user-experience aspect can be fixed with the use of Cleave.js – A beautiful text input formatting plugin.

Cleave.js not only formats contact telephone number inputs but go further by formatting some of the following common inputs –

Credit Card No. Inputs
Date Inputs
Time Inputs
Numeral Inputs eg, tens and thousands
Tel/Mob No Inputs

Some examples of Cleave.js in action

Check out the CodePen demos of default HTML input forms in comparison with Cleave.js inputs.

Date Text Input Formatting

Yes, I know, why use a text input for date inputs? I don’t know a great reason as of yet, but it’s not to say people would rather use the text type on their websites. This library is brilliant for that specific use case.

The following example, subtly adds slashes between each part of your date of birth eg, day, month and year. A standard input form of ‘date of birth’ would look similar to the following –01052005, but with Cleave.js you wind up with 01/05/2005. Test out the examples in the CodePen below –

You may be wondering why the heck the tel input type is used with these inputs and there is a good reason; Whilst this library is a text-formatting library, rather than use the text input type, you can use tel so that mobile users have a much better experience.

Credit Card Number Text Input Formatting

Next up, is a beautiful example of formatting credit card numbers as users type. Rather it a big long text string of numbers, it will be spaced elegantly, just like it is on your actual credit card! After you type the first four digits of your credit card number, space is added automatically before you start typing the rest of it out.

See the pre-filled example below, feel free to edit the numbers and try for yourself.

Cleave.js goes even further with formatting credit cards too. It has the ability to display highlighted icons dependant on your number, which again is another great user-experience. See the image below –

Cleave.js Visual Credit Card Formatting

Telephone Text Input Formatting

Just like the formatting of a credit card number, Cleave.js does this for telephone numbers too. Splitting the number out into digestible groups, making it easy to read back to yourself and double-check. In the following demo, the format has been set for 3 size groups of 4,4 and 3. Resulting in a formatted number like the following – 0800 1234 567, but this can be customized to suit.

Check out the example below

If you wanted to change the way it’s formatted, then check the JS and comments below to understand how it works –


    var cleave = new Cleave('.cleave-input-telephone', {
        delimiters: [' ', ' ', ' '], // What should be appended after each block
        blocks: [4, 4, 3] // block groups = no. of chars before a delimiter is added.
    });

Custom Text Formatting

With Cleave.js, you can completely customize formatting to your specific needs, for example, if you need a dollar sign in the middle of text input, it can be done, for what reason, I do not know!

Here is a demo of customization, which probably serves no purpose to a user but gives you an insight into how it can be specific to your data.


    var cleave = new Cleave('.cleave-input-random', {
        delimiters: ['A', '£', '£', '$'],
        blocks: [1, 1, 1, 3, 1]
    });

The above block parameters instruct Cleave to add an ‘A’ after 1 character, a ‘£’ after another character and so on. This will result in the following –

Summary

Cleave.js is the perfect plugin to boost user-experience if you have a lot of plain text inputs. The examples in this article show quite common inputs being formatted but is certainly not limited to just that. There are plenty more examples on the dedicated demo page.

Also, there are instructions on how to use cleave with React and Angular on the GitHub repo page, enabling you to quickly get set up and utilize the library.

Cross Posted from https://www.codewall.co.uk/html-text-input-formatting-with-cleave-js/

How To Remove Unused CSS From Your Website

Dan Englishby — Thu, 07 Nov 2019 19:38:18 +0000

Cross Posted: https://www.codewall.co.uk/how-to-remove-unused-css-from-your-website/

A cascading style sheet can gradually build up into a bulky file over time. And in most cases, over time, you’ve added lots of new CSS and stopped using some classes that were there before.

This means two things, your CSS file is messy, and it’s unnecessarily bigger. A bigger CSS file indicates more significant download times, and we don’t want that if it’s not necessary!

Of course, this isn’t the only scenario to why you may have a larger CSS file, and it could be that you’ve used a pre-built theme and stripped it down a bit. But how do you know what’s required still and whats not? Unless you were super-careful and stripped out each class as you edited the theme.

In this article, you will see how we reduced CodeWall’s CSS file size by a considerable ratio.

So, to recap, who is this article for?

Developers who have downloaded a theme but only need some parts of it
Developers who have downloaded a theme and have customized it considerably
Developers who have been working on a website for a while and want to get rid of old fluff
Developers who, like myself, want to speed up their website in general

If any of the points above is why your reading, then stay tuned!

In this article, the blog (CodeWall.co.uk) will be the guinea pig, as the CSS file currently stands at a size of 19.2kb. I know it’s not super huge, and there will undoubtedly be bigger ones out there, but the concept of this activity can go a long way in most cases.

Let’s begin

There are already tools available for use with getting rid of old, unused CSS, so I will be utilizing one of them in this tutorial, namely PurifyCSS.

Prerequisites

If you haven’t already got it, you will need to install Node, as this will be used to execute our code. Download and install Node here which will include the package manager NPM.
You will also need a text editor, and if you haven’t got one, I strongly recommend using Visual Studio Code.

Understanding how PurifyCSS works

PurifyCSS works by grabbing all HTML files specified for process comparison against any given CSS file. So, the important thing here is not to miss that you most likely can’t just supply your index.html file. This is because you will probably have different HTML and classes on through a range of templates on your website.

For example, In the case of CodeWall, the following pages are slightly different so they will need to be included.

Homepage
Category Page
Contact Page
Newsletter Page
Standard Page

This list of files will then vet against one or more CSS files supplied, like style.css and custom.css. In your case, this will probably be different, so try to think of which pages on your website are using the same layouts and which are not. The more unique pages will need to have their source code compared to the CSS file. Otherwise, you will wind up losing CSS that is required.

Heres a diagram of how it works on the virtual level –

How PurifyCSS Works

Installing PurifyCSS

Once you have Node installed, you will have access to its package manager, NPM. PurifyCSS has a ready NPM Package for installation, and you can install it by running the following command in your terminal at the root directory of your project folder –

npm i -D purify-css

Prepping our files

So, for the purifier to work, we need some input in the form of HTML source code also with some CSS source code, which could be of multiple instances. In our case, the main bulk of our CSS is in the style.css file, which comes with the WordPress theme we use.

In your root directory, you will need to create an HTML file for each HTML layout you want to process, in our case, it will be of the following templates –

Homepage
Category
Contact
Newsletter
Page
Post

Once you’ve created the template files to match your site, directly navigate to the actual working template pages of your website, view the source, copy and paste it into the new files you created in your root directory.

Then to create a .css file or a few if you have more you want to process, in this example, we re-created a style.css file and copied our full live style.css file contents into it.

So our root directory for the purify tool looks like this –

node_modules/
category.html
contact.html
index.html
newsletter.html
page.html
post.html
style.css

Creating the JS Purifier Script

Now go ahead and create a new .js file in the root directory, something like purifyMyCSS.js

Add the following JS to the file –


    const purify = require("purify-css")


    let content = ['*.html']; // Glob pattern to ref all HTML files from root directory.

    let css = ['*.css']; // Glob pattern to ref all CSS files from root directory.

    let options = {
        // Will write purified CSS to this file.
        output: 'purified.css', // Output file name
        minified: true, // Minify boolean
        info: true // Output information on how much reduction was achieved
    };

    purify(content, css, options, function (purifiedAndMinifiedResult) {
        console.log(purifiedAndMinifiedResult);
    });

The above code is all is needed to initiate the CSS purifying magic. All is left to do now is run the file via node.

Purifying

With all the points followed in this article, you are now prepared to drop all your unused CSS. So let’s do it.

Run the following command in a terminal at the root directory level –

node purifyMyCss.js

And boom, you should get an output similar to the following –

Now, you will have a new file in your root directory, named purified.css, and all the unwanted fluff will have vanished. All that is left to do is copy and paste the contents of the purified.css file over your live CSS file, result!

References

Summary

PurifyCSS helped shed 13kb from our CSS file, which was a 70% reduction. That CSS was completely unused and unnecessary. As I mentioned before, this doesn’t seem like much but imagine if your CSS file started at 200kb, 70% stripped from that is a great deal! PurifyCSS isn’t the only tool JS plugin out there, but it’s certainly a pleasure to use.

If you have a single page website, then there is an online tool available for just this use case. Check out https://uncss-online.com/, which allows you to paste HTML contents in one input and CSS in the other. Hit the button, and your stripped CSS will be appended to an output box!

Until next time!

Setting Up a NodeJS Web Server On Your Android Phone or Tablet

Dan Englishby — Thu, 07 Nov 2019 19:32:06 +0000

I came across a really cool app recently, specifically on my Samsung Galaxy S9 Android device. The app is called Dory and it’s capable of installing a full-working NodeJS environment on your device.

In this article, I will detail how to get your very first NodeJS web server setup on your device and ultimately connect to a web page locally. It won’t take longer than 10 minutes, so just for the cool factor, it’s well worth the time spent.

Step 1

Open the Google Play Store on your device and search for ‘Dory’, see Figure 1 so that you know what it looks like when you see it. Alternatively hit the following link – Dory – Node.JS
Hit the install button and await the app to finish downloading and installing.

Figure 1. Dory NodeJS – Play Store Listing

Step 2

Locate the app on your device and launch it.
As the app launches you will see a notification at the bottom, informing you of both Node and NPM installing.
After this, another notification will inform you that they have been installed.
Next, the NodeJS server will boot automatically, you can see this in the notification center, see Figure 2.

Figure 2. NodeJS Running Notification

Step 3

Time to write some code and serve our first page!

Find the + icon at the bottom right of the app and tap it.
Then, tap the ‘Eval Script’ button.
Delete out the console.log('hello world'); code.
Add the following code block to the file –

CodeBlock


    const http = require('http');

    let app = http.createServer((req, res) => {  
        // Set a response type of plain text for the response
        res.writeHead(200, {'Content-Type': 'text/plain'});

        // Send back a response and end the connection
        res.end('NodeJS Server Online!');
    });

    // Start the server on port 3000
    app.listen(3000, 'localhost');

Step 4

Goto the top right settings menu and use the ‘save as’ feature, save it as server.js in your documents folder.
Navigate back to the home panel and make sure that the widget for the file is present and secondly make sure the ‘Start’ button is greyed out, meaning its active.
If not, you can hit the + button, add file, and open the file from your documents folder.
Now you can open up the browser, and navigate to http://localhost:3000
See Figure 3, an example of my Chrome browser loading up the NodeJS Server.

Figure 5. NodeJS Server Online

Summary

This article shows you the basic instructions to get a NodeJS web server set up on your Android device. But, there are many other features this app offers too. The app comes fresh with NPM, has a file downloader and even has the ability to git clone! The app developers also have some other great applications ready for download as well, one of which is MongoDB, you can check them out here.

Cross Posted From : https://www.codewall.co.uk/

How To Build A Twitter Hashtag Tweets Viewing Tool Tutorial

Dan Englishby — Wed, 06 Nov 2019 20:19:36 +0000

Twitter is an incredible social media platform for end users but, it’s also immense for data analyzers too. Twitter offers an API to conduct informative searches and display these results in your own web tools. From there, the world is your oyster, especially for social media marketers.

In this tutorial, we will build a simple website that displays tweets with performance indicators like ‘Retweets’ and ‘Favorites’ for any hashtag we desire. The website will be built on NodeJS with ExpressJS, if you’ve already got this then great, if not, you can follow my tutorial here – basic NodeJS & ExpressJS setup,

Here is the final result below

Prerequisites

The code used in this tutorial will be entirely JavaScript, CSS & HTML, so, all you need in place is the following two points.

Apply for a Twitter Developers Account and wait for approval (This could take up to a couple of weeks)
A basic NodeJS & ExpressJS setup, you can follow my earlier tutorial to get this up and running in less than 30 mins!

Installing & Configuring Twit

First up, we need to install the beautiful Twit library which allows us to configure our API credentials and also gives us some pre-defined API functionality. Twit is a neat Twitter API client for Node and saves a boatload of time fleshing out all the code yourself.

Install Twit by running

npm install twit

Then, require the library in your server.js file by adding the following code near to the top of the file –


    const twit = require("twit")

Lastly, configure a new Twit instance with your API credentials –


    let Twitter = new twit({
            consumer_key: 'your_consumer_key',
            consumer_secret: 'your_consumer_secret',
            access_token: 'your_access_token',
            access_token_secret: 'your_access_token_secret',
            timeout_ms: 60 * 1000, // optional HTTP request timeout to apply to all requests.
            strictSSL: true, // optional - requires SSL certificates to be valid.
        });

Searching for some tweets

Before we make it all beautiful and user-friendly, we can test searching for tweets from a hashtag by running the API call and logging the response to the console. For this example, I used the ‘#100DaysOfCode’ hashtag for the q parameter, which I like to think stands for ‘Query’.

Let’s add the code to search tweets on Twitter, just after the Twit instance setup.


    Twitter.get('search/tweets', {
      q: '#100DaysOfCode',
      count: 100,
      result_type: "mixed" 
    }).catch(function (err) {
      console.log('caught error', err.stack)
    }).then(function (result) {
       console.log('data', result.data);
    });

Now re-run your server.js file and check out the response in the console, it should look similar to below –

As you can see from the screenshot above, each tweet comes with a lot of useful data, albeit some of it hidden within the console because they are further objects, but still really handy data. The most obvious pieces of data are the retweet_count and favorite_count.

So, how do we make this user-friendly and ultimately digestible information?

Add a single HTML input field to allow submission of hashtags to the backend.
Configuring the server.js file to handle post data from the HTML form and use it within the API call.
Return the response to our index file.
Parse the data and build our beautiful HTML.

Let’s go…

Adding an HTML form to the index.ejs file

Add the following code to your index.ejs file, for quickness I’ve used the bootstrap and font awesome CDN.


    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Twitter Hashtag Viewer</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
            type="text/css">
        <link href="/css/style.css" rel="stylesheet" type="text/css">
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
            type="text/css">
    </head>
    <body>

        <div class="container">
            <div class="form mb-2 mt-2"> 
            <fieldset>
                <form action="/" method="post">
                    <div class="input-group">
                    <input class="form-control" name="hashtag" placeholder="eg. #100DaysOfCode" required type="text">
                    <input type="submit" value="Analyze!">
                    </div>
                </form>
            </fieldset>
        </div>   
        </div>

      </body>
    </html>

With the above code inserted into your file, it should look something like below –

Configuring Our server.js to handle Post requests

Installing and configuring Body-parser

Now we need to write the logic to handle the posting of input values into the form above. First of all, we need to install some middleware which will give us this functionality, namely body-parser. Body-parser has access to the req and res objects giving us the ability to interrogate what data is passed during the post.

Run the following command to install it –


    npm install body-parser --save

Then, at the top of your server.js file, require it, and lastly, tell the app to utilize its power.


    const bodyParser = require('body-parser')

    app.use(bodyParser.urlencoded({ extended: true }));

Adding our post handler

Add the following JS to your server.js file which will handle a simple posting of the hashtag input form with the name ‘hashtag’.


    app.post('/', function (req, res) {
      console.log(req.body.hashtag);
      if (req.body.hashtag !== undefined) {
        res.render('index',  {hashtag: req.body.hashtag})
      }
      res.render('index',  {hashtag: null})

    });

Adjusting the index file to print hashtag variable passed in from the post handler

Add the following EJS markup to your index.ejs file, somewhere that you want the hashtag to print out after it’s been submitted to the server and returned as a variable.


    <% if(hashtag !== null){ %>
            <h3>All popular tweets for <%- hashtag %></h3>

        <% } %>

Now, if you reboot your server, navigate to the index file and submit a new hashtag, you should see the value printed to the page! See below, I submitted the hashtag ‘code’

Putting it all together and displaying tweets

So, we’ve got our Twitter API client ready, the ability to post data from an HTML form, all is left to do is build the logic for the API call to include the hashtag and return data to the index file. Once that’s done, we can format the data to look good and digestible.

The next pieces of code will need to be completely changed if you want to build more functionality into the project, but for now, it’s sole purpose is to handle hashtag inputs and query the Twitter API with them.

Edit your server.js files post handler

Adjust your Post handler to look the same as below, with your own API credentials –


    app.post('/', function (req, res) {

      if (req.body.hashtag !== null) {

          let Twitter = new twit({
            consumer_key: 'your_consumer_key',
            consumer_secret: 'your_consumer_secret',
            access_token: 'your_access_token',
            access_token_secret: 'your_access_token_secret',
            timeout_ms: 60 * 1000, // optional HTTP request timeout to apply to all requests.
            strictSSL: true, // optional - requires SSL certificates to be valid.
        });

        Twitter.get('search/tweets', {
            q: req.body.hashtag, // use the user posted hashtag value as the query
            count: 100,
            result_type: "mixed" 

        }).catch(function (err) {
            console.log('caught error', err.stack)
            res.render('index', {
                hashtag: null,
                twitterData: null,
                error: err.stack
            });
        }).then(function (result) {
          // Render the index page passing in the hashtag and the Twitter API results
            res.render('index', {
                hashtag: req.body.hashtag, 
                twitterData: result.data,
                error: null
            });
        });
      }
    });

Edit your index.ejs file to handle the Twitter Data

Adjust your index.ejs file to look similar to below, which does the following –

Uses font-awesome for like and retweet icons
Logic to handle if twitter data is present
JavaScript to build and append HTML to the page


    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <title>Twitter Hashtag Viewer</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
            type="text/css">
        <link href="/css/style.css" rel="stylesheet" type="text/css">
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
            type="text/css">
    </head>

    <body>
        <div class="container">
            <div class="form mb-2 mt-2"> 
            <fieldset>
                <form action="/" method="post">
                    <div class="input-group">
                    <input class="form-control" name="hashtag" placeholder="eg. #100DaysOfCode" required type="text">
                    <input type="submit" value="Analyze!">
                    </div>
                </form>
            </fieldset>
        </div>   


        <div class="container-fluid">

        </div>
        <% if(hashtag !== null){ %>
        <h3>All popular tweets for <%- hashtag %></h3>

        <% } %>

    <div id="tweets"></div>

        <% if(twitterData !== null){ %>


        <script>
            let twitterData = <%- JSON.stringify(twitterData) %>;
            let tweetHTML = '<div class="row">';
            for (let index = 0; index < twitterData.statuses.length; index++) {
                var createdDateTime = new Date(twitterData.statuses[index].created_at).toUTCString();

                tweetHTML += '<div class="col-sm-4"><div class="card mb-3">' +
                    '<div class="card-body">' +
                    '<h5 class="card-title">@' + twitterData.statuses[index].user.screen_name + '</h5>' +
                    '<h6 class="card-subtitle mb-2 text-muted">' + twitterData.statuses[index].user.name + '</h6>' +
                    '<p class="card-text">' + twitterData.statuses[index].text + '<</p>' +
                    '<p class="card-text"><i class="fa fa-retweet" aria-hidden="true"></i> ' + twitterData.statuses[index].retweet_count + ' <i class="fa fa-heart" style="color:red;" aria-hidden="true"></i> ' + twitterData.statuses[index].favorite_count + '</p>' +

                  //  '<a class="card-link" href="#">Another link</a>' +
                    '<p class="card-text"><small class="text-muted">Created on '+createdDateTime.toString()+' </small></p>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
            }
            tweetHTML += '</div>';

            var tweetsContainer = document.getElementById('tweets');
            tweetsContainer.insertAdjacentHTML('beforeend', tweetHTML);
        </script>
        <% } %>



        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </body>

    </html>

Save both files and reboot your Node server, navigate to the index page and search for a tweet. You should now have a very clean HTML page with all of the popular and latest tweets for that hashtag, see example below for #code.

Summary

This tutorial was written to once again show the power of the Twitter API’s many uses, with data like this the information can be forever valuable. Especially to businesses looking for trends. Whatever your ideas, this article gives you a strong foundation to get set up quickly and analyze tweets from within your own project. Check out the Twitter Standard search API documentation for further reading on the API method used in this article.

Twitter is an incredible social media platform for end-users but, it’s also immense for data analyzers too. Twitter offers an API to conduct informative searches and display these results in your own web tools. From there, the world is your oyster, especially for social media marketers.

Cross Posted From : https://www.codewall.co.uk/

How To Log Like A Pro With Laravel & LogViewer

Dan Englishby — Wed, 06 Nov 2019 19:32:09 +0000

Laravel ships with a logging system that is easily utilized, these logs end up .txt log files within your project. Whilst in the text files, they are pretty useless and boring, but if you add a lovely little plugin named LogViewer, things become pretty awesome. LogView works with Laravel 5.0 all the way through to 5.8 so, most likely, you will be able to use it immediately.

So, let’s see what log viewer gives us.

The following text is generally what you will see in your log files –

From this, with LogViewer, it is transformed into the following –

Log Viewer Dashboard

Log Viewer Overview

Log Viewer Log Details

Which, frankly is pretty amazing, considering that all this data is stored in a boring plain text file. So, how can I start using Log Viewer you ask? Simply follow the rest of this tutorial, which will explain how to install the Log Viewer and in addition, go into how you can utilize your own custom logs throughout your code.

Installing LogViewer

Step 1

If you’ve got Laravel 5.8, then run the following command, this will install the LogViewer package and publish it automatically. Otherwise, check out the version compatibility table to find the matching version located on this page here.

composer require arcanedev/log-viewer:~4.7.0

Step 2

If your Laravel version > 5.5

Open your .env file and change the LOG_CHANNEL value to daily rather than stack.
Just to make sure it automatically published run the following command – php artisan log-viewer:publish

If your Laravel version <= 5.5

Open your .env file and add the following full line APP_LOG=daily
Add the following line to your config/app providers Arcanedev\LogViewer\LogViewerServiceProvider::class,
Then run the following command – php artisan log-viewer:publish

Step 3

Navigate to your http://yourrooturl/log-viewer, In my case, for this tutorial it’s http://localhost/LaravelLogger/log-viewer.

You should now see the LogViewer dashboard.

Using Custom Logs

If you’ve only recently installed Laravel, you will notice that you don’t have many logs at all in the dashboard. As you can see from my screenshot earlier, I had a few error logs. (See below)

Log Viewer Dashboard

But notice all of those other potential logs,

Emergency
Alert
Critical
Warning
Notice
Info
Debug

You can easily utilize these logs in your code, there’s actually a lot of documentation on how to use the logging system on the Laravel website.

But, I will quickly show you how easy it is to start using the logs immediately.

Step 1

To use the logging system, you will need to reference it, add the following at the top of your controller or file of choice –


    use Illuminate\Support\Facades\Log;

Step 2

Make some logs! For this example, I will simply add the following commands inside one of my controller functions. Specifically, my home controller index function. You can repeat this into the file of choice where you’ve referenced the Log library.


    public function index() {

            // Lets add some logs.
            Log::alert("This is a new Alert!");
            Log::critical("This is a critical error message");
            Log::debug("This is a debug message");
            Log::emergency("There is an emergency! Help!?!?!?!");
            Log::error("Houston, we have an error");
            Log::info("An informative message");
            Log::notice("Notice!");
            Log::warning("Be warned, be very warned");
            return view('home.index');
        }

Step 3

Then, load up the page where the logs will be executed and navigate back to the log viewer. See the result below –

Now the dashboard is full of logs! Albeit beautifully colorful, we wouldn’t really want to see this all in production!

If you go into the logs page, you can see each of the logs have incremented by one.

Finally, we can click into these, for the screenshot below, I clicked into the emergency log to see the detail –

Of course, I’m just playing around here, but you get the gist of how useful these logs can actually be.

Another Example

Add the logs to some try-catch blocks in your code and execute it, this will deliver the exception message to your log viewer –


    try {
        // some code to throw an exception
        $divisionByZero = 5 / 0; // Divide 5 by zero
    } catch (\Exception $e) {
        Log::emergency("Exception Message: ".$e->getMessage()  . " File: " . $e->getFile() . " Line: " . $e->getLine());
    }

After executing the above code and going into the log viewer, something like the following will be shown –

Summary

LogViewer and Laravel logs have endless possibilities, whether it be an informative log that tells you people are logging off the website, registering, etc. Or of course, the many bugs we catch throughout our development lives. I hope you get as excited to use this as I first did!

Many thanks to ARCANEDEV on GitHub for making logging glorious!
Don’t forget to check out the logging documentation on Laravel’s website.

Cross Posted From: https://www.codewall.co.uk/

PHP Date & Strtotime Cheat Sheet with PDF

Dan Englishby — Mon, 26 Aug 2019 19:24:00 +0000

If you want to bookmark the original post, feel free with the following link - https://www.codewall.co.uk/php-date-strtotime-cheat-sheet/

If you've been developing some projects that are data-rich like me, you will of seen yourself using the Date function and the Date function mixed with strtotime, Date & strtotime are very powerful tools, enabling you to set date criteria very swiftly, no matter the scenario. It's simply all about knowing how to do it, as there are a lot of commands you can give these functions that are extremely useful. For example, '-7 days'. This article will be an online cheat sheet, but at the end of the article, there will be a download link with the most popular 'cheats' that can be printed perfectly on an A4 piece of paper. You can download the PDF Here or at the end of this page.

Current Date & Time Formatting
- 4 Digit Year
- 2 Digit Year
- Month Number
- Day Number
- 2 Digit Year
- 4 Digit Year
- 12 & 24 Hour Format Hour
- Minutes
- Seconds
- Date Time Stamp
Custom Date & Time Formatting
Date & Time Manipulation With strtotime
- * First day of the month
  - Last day of the month
  - Subtract days from date
  - Add days to date
  - Subtract months from date
  - Add months to date
  - Subtract years from date
  - Add years to date
  - Subtract hours from date
  - Add hours to date
  - Subtract minutes from date
  - Add minutes to date
  - Subtract seconds from date
  - Add seconds to date
  - Get yesterdays date
  - Get tomorrows date
  - Get next date
  - Get previous date
  - Next day name
  - Last day name
  - First day of month name
  - Last day of month name
  - Noon - Midnight Date

Current Date & Time Formatting

Let's start with plain old Date formatting, there are hundreds of variations available, but you will probably only ever use a few! Please Note: All examples in this section work with the Current Date Time, meaning the real-time-stamp of your computer at the time of execution!

4 Digit Year (#4-digit-year)


  echo date('Y'); // 2019

2 Digit Year


    echo date('y'); // 19

Month Number


    echo date('m'); // 08

Day Number

    echo date('d'); // 26

Date With 2 Digit Year


    echo date('y-m-d'); // 19-08-26

Date With 4 Digit Year


    echo date('Y-m-d'); // 2019-08-26

12 Hour & 24 Hour Format Hours

Quick note: There are 2 ways to access the hour from the date() function, use the following parameters to yield an identical result -

date('g') - (12 Hour Format) or date('G') - (24 Hour Format)
date('h') - (12 Hour Format) or date('H') - (24 Hour Format)


    echo date('h'); // 11 (am) (12 Hour Format Style)
    echo date('H'); // 11 (am) (24 Hour Format Style)
    echo date('g'); // 11 (am) (12 Hour Format Style)
    echo date('G'); // 11 (am) (24 Hour Format Style)

Minutes


    echo date('i'); // outputs: 08 (Minutes 00-59)

Seconds


    echo date('s'); // outputs: 56 (Seconds 00-59)

Date Time Stamp

Now with all of these parameters in thought, we can produce a proper date-time stamp in the format of YYYY-MM-DD HH:MM:SS


    echo date('Y-m-d h:i:s'); // 2019-08-26 09:48:01

And if we want to do it the other way, swapping the place of the year so that the format is DD-MM-YYYY HH:MM:SS


    echo date('d-m-Y h:i:s'); // 2019-08-26 09:48:01

Custom Date & Time Formatting With strtotime

Using a custom date or date-time with the date function is very straight forward. All's you need to do is pass in the date with the strtotime function after the formatting parameters is set. See the example below, notice that the passed in date format is YYYY-MM-DD and that the actual output is DD-MM-YYYY because of the specified formatting. Example 1


    echo date('d-m-Y h:i:s', strtotime('2018-01-31 00:00:01')); // 31-01-2018 12:00:01

This exact methodology of using the date function will work with all the formatting displayed in the first section of this article, Example 2


    echo date('Y-m-d', strtotime('2019-08-26')); // outputs 2019-08-05

So, the date function will format the strtotime date passed into whichever format parameters are specified. So another example, to get the day of the month number from the date passed in goes like this - Example 3


    echo date('d', strtotime('2019-08-26')); // outputs 05

Date & Time Manipulation with strtotime

To be honest, strtotime is an absolute godsend, being able to give it a parameter in a language that you actually speak is awesome. Eg. 'First day of this month' or 'First day of this week' and so on. This can be utilized without a custom date, so basically, the date-time of your server, or a date-time of your specification. In this next section, I will demonstrate both use-cases.

First day of the month


    // Using server date-time
    echo date('Y-m-d h:i:s', strtotime('first day of this month')); // 2019-08-01 19:35:00

    //Using custom date-time 
    echo date('Y-m-d h:i:s', strtotime('first day of this month', strtotime('2019-12-31 19:00:00'))); // 2019-12-01 07:00:00

Last day of the month


    // Using server date-time
    echo date('Y-m-d h:i:s', strtotime('last day of this month')); // 2019-08-31 19:35:00

    //Using custom date-time 
    echo date('Y-m-d h:i:s', strtotime('last day of this month', strtotime('2019-12-31 19:00:00'))); // 2019-12-01 07:00:00

Subtract days from date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('-7 days')); // Outputs: 2019-08-19 11:43:59

    //Using custom date-time 
    echo date('Y-m-d H:i:s', strtotime('-7 days', strtotime('2019-08-13 14:00:00'))); // Outputs: 2019-08-06 14:00:00

Add days to date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('+7 days')); // Outputs: 2019-09-01 11:43:59

    //Using custom date-time 
    echo date('Y-m-d H:i:s', strtotime('+7 days', strtotime('2019-08-13 14:00:00'))); // Outputs: 2019-08-20 14:00:00

Subtract months from date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('-7 months')); // Outputs: 2019-01-26 11:56:06

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('-7 months', strtotime('2019-08-13 14:00:00'))); // Outputs: 2020-03-13 14:00:00

Add months to date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('+7 months')); // Outputs: 2020-03-26 11:56:45

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('+7 months', strtotime('2019-08-13 14:00:00'))); // Outputs: 2020-03-13 14:00:00

Subtract years from date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('-5 years')); // Outputs: 2014-08-26 11:57:16

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('-5 years', strtotime('2019-08-13 14:00:00'))); // Outputs: 2014-08-13 14:00:00

Add years to date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('+7 years')); // Outputs: 2024-03-26 11:48:16

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('+7 years', strtotime('2019-08-13 14:00:00'))); // Outputs: 2024-03-13 14:00:00

Subtract hours from date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('-12 hours')); // Outputs: 2019-08-25 23:21:23

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('-12 hours', strtotime('2019-08-13 14:00:00'))); // Outputs: 2019-08-13 02:00:00

Add hours to date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('+12 hours')); // Outputs: 2019-08-26 23:21:53

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('+12 hours', strtotime('2019-08-13 14:00:00'))); // Outputs: 2019-08-14 02:00:00

Subtract minutes from date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('-60 minutes')); // Outputs: 2019-08-26 10:48:23

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('-60 minutes', strtotime('2019-08-13 14:00:00'))); // Outputs: 2019-08-13 02:00:00

Add minutes to date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('+60 minutes')); // Outputs: 2019-08-26 12:30:33

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('+60 minutes', strtotime('2019-08-13 14:00:00'))); // Outputs: 2019-08-13 13:00:00

Subtract seconds from date

    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('-300 seconds')); // Outputs: 2019-08-26 11:40:33

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('-300 seconds', strtotime('2019-08-13 14:00:00'))); // Outputs: 2019-08-13 13:55:00

Add seconds to date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('+60 seconds')); // Outputs: 2019-08-26 11:50:58

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('+60 seconds', strtotime('2019-08-13 14:00:00'))); // Outputs: 2019-08-13 14:05:00

Get the yesterdays date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('yesterday')); // Outputs: 2019-08-25 00:00:00

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('yesterday', strtotime('2019-08-13 14:00:00'))); // Outputs: 2019-08-12 00:00:00

Get tomorrows date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('tomorrow')); // Outputs: 2019-08-27 00:00:00

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('tomorrow', strtotime('2019-08-13 14:00:00'))); // Outputs: 2019-08-14 00:00:00

Get next date

Note: the next parameter works along with day, month and year.

    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('next month')); // Outputs: 2019-09-26 20:40:43

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('next year', strtotime('2019-08-13 14:00:00'))); // Outputs: 2020-08-13 14:00:00

Get previous date


    // Using server date-time
    echo date('Y-m-d H:i:s', strtotime('previous month')); // Outputs: 2019-07-26 20:40:43

    //Using custom date-time
    echo date('Y-m-d H:i:s', strtotime('previous year', strtotime('2019-08-13 14:00:00'))); // Outputs: 2018-08-13 14:00:00

Next day name

Note: short month name or full month name can be used, eg. Sat or Saturday


    echo date('Y-m-d H:i:s', strtotime('next saturday')); // Outputs: 2019-08-31 00:00:00

Last day name

Note: short month name or full month name can be used, eg. Sat or Saturday

    echo date('Y-m-d H:i:s', strtotime('last saturday')); // Outputs: 2019-08-24 00:00:00

First day of month name

Note: short month name or full month name can be used, eg. Feb or February

    echo date('Y-m-d H:i:s', strtotime('first day of February')); // Outputs: 2019-02-01 00:00:00

Last day of month name

Note: short month name or full month name can be used, eg. Feb or February

    echo date('Y-m-d H:i:s', strtotime('last day of February')); // Outputs: 2019-02-28 00:00:00

Noon And Midnight Date

    echo date('Y-m-d H:i:s', strtotime('midnight')); // Outputs: 2019-08-26 00:00:00

    echo date('Y-m-d H:i:s', strtotime('noon')); // Outputs: 2019-08-26 00:00:00

PDF Download Feel free to download this compacted cheat-sheet pdf. You can download the PDF Here

If you want to bookmark the original post, feel free with the following link - https://www.codewall.co.uk/php-date-strtotime-cheat-sheet/

A Water Filling d3.js Visualization

Dan Englishby — Tue, 12 Mar 2019 20:30:32 +0000

I stumbled across a really oddball JavaScript visualization that probably doesn't have a whole range of uses. But in the world we live in nowadays, AI technology and home-smart devices, I thought of a perfect use-case.

Let's imagine your house combi-boiler (this is what they're called in the UK) is linked to your home internet. Then, you actually had access to its data, namely, how much water is currently being pumped through due to the load-request from the taps!

With this single value of data, you could build the following JavaScript visualization on your own personal Home-Dashboard.

Water Load Gauge

Hit the switch to turn on the water!

By using a little d3.js and an additional community plugin, this brilliant little visualization can be achieved.

For reference, the JS used to produce this visualization are found in the following links -

d3.js
brattonc liquidFillGauge.js

And credit to prakash27dec for the toggle switch snippet which can be found here -
prakash27dec toggle switch

Enjoy

DEV Community: Dan Englishby

The Complete JSON Tutorial – Quickly Learn JSON

Contents

Some Background

A Basic Introduction

JSON Data Types

JSON Formatting

Basic Example

Nesting

Advanced Examples

Managing JSON With JavaScript

Working With The Console

Summary

40 reasons why I love being a DEV!

Reasons why being a developer is awesome

Summing Up

MongoDB Beginner Tutorial With Compass GUI & The Mongo Shell CLI

Contents

Introduction

Installation Guide

Pre-requisites

MongoDB Setup & Connecting To DB

Downloading MongoDB

Installing MongoDB & Connecting

Step 1

Step 2

Step 3

Compass for MongoDB Setup & Connecting To DB

Downloading Compass for MongoDB

Installing Compass for MongoDB

Step 1

Step 2

The Data

Link to Excel data file

Managing Data With Compass (CRUD)

Creating a Database & Initial Collection

Step 1

Creating documents (data)

Step 1

Step 2

Step 3

Viewing documents (data)

Updating documents (data)

Deleting documents (data)

Managing Data With MongoDB CLI (CRUD)

Creating a Database

Quick Command Line Connection Recap

Create the DB

Creating a collection adding documents (data)

Inserting one document

Inserting multiple documents

Viewing documents (data)

Updating documents (data)

Deleting documents (data)

Advanced functionality with MongoDB

Projection

With Compass

With MongoDB CLI

Sort

With Compass

With MongoDB CLI

Skip

With Compass

With MongoDB CLI

Limit

With Compass

With MongoDB CLI

Indexing

With Compass

With MongoDB CLI

Aggregation

With Compass

With MongoDB CLI

BackUp

With Compass

With MongoDB CLI

Restore

With Compass

With MongoDB CLI

Import With mongoimport.exe