DEV Community: Paetelmechanic

Databases revisted

Paetelmechanic — Mon, 20 Jan 2020 13:50:18 +0000

A database index is a data structure that improves the speed of data retrieval operations on a database table at the cost of additional writes and storage space to maintain the index data structure. Indexes are used to quickly locate data without having to search every row in a database table every time a database table is accessed. Indexes can be created using one or more columns of a database table, providing the basis for both rapid random lookups and efficient access of ordered records.
Indexes are created using a few database columns.
The first column is the Search key that contains a copy of the primary key or candidate key of the table. These values are stored in sorted order so that the corresponding data can be accessed quickly.
Note: The data may or may not be stored in sorted order.
The second column is the Data Reference or Pointer which contains a set of pointers holding the address of the disk block where that particular key value can be found.

Two primary methods of constructing indices are clustered and non-clustered:
A non-clustered index (or regular b-tree index) is an index where the order of the rows does not match the physical order of the actual data. It is instead ordered by the columns that make up the index. In a non-clustered index, the leaf pages of the index do not contain any actual data, but instead contain pointers to the actual data
A clustered index is a special index which physically orders the data according to the indexed columns. The leaf nodes of the index store the data for the rest of the columns in the table so when a lookup is performed on this type of index there are no other structures that need to be referenced.
Some other key facts to remember about indexes are:
Indexes take additional disk space.
indexes slow down INSERT,UPDATE and DELETE, but will speed up UPDATE if the WHERE condition has an indexed field. INSERT, UPDATE and DELETE becomes slower because on each operation the indexes must also be updated.

Suppose a database contains N data items and one must be retrieved based on the value of one of the fields. A simple implementation retrieves and examines each item according to the test. If there is only one matching item, this can stop when it finds that single item, but if there are multiple matches, it must test everything. This means that the number of operations in the worst case is O(N) or linear time. Since databases may contain many objects, and since lookup is a common operation, it is often desirable to improve performance.
Indexing is an easy way to improve the performance of our databases
Hopefully this brief look into indexing helped to clear up the concept.

Stateful and Stateless components in React

Paetelmechanic — Mon, 14 Oct 2019 12:52:02 +0000

Lets have a little chat about stateful and stateless components in React. But first, we'd have to say what the heck is React. React is a framework for building web applications.

In React, applications are made of components. If you pass the same arguments (properties in React lingo, or props) to a component, you have the same output. This allows components to be reusable.

One more important facet about React is that components cannot change their props. Or rather, information only flows in one direction. Components can have children and give the props to them, they can also store some information once they are created (the state), but after you give them the props, they wont be able to be changed anymore. This makes components and the application quite static and a more easy to predict.

In conventional HTML and Javascript applications, Javascript is used to modify the DOM with data, and it usually does this “imperatively”. This means we define each step through code to create the result we want:

Here is an example of a stateless component:

An imperative example of calling an API

Call API
Set some spinner as loading by adding it to the DOM
Get API result
Remove the loading spinner by removing it from the DOM
Add result to DOM by inserting HTML results

React tries to describe things in a “declarative” way, instead of imperatively. This means, we focus on writing what we want the result to look like, and not the steps that take us to that result.

This takes us to state. React’s state is used to declaratively set the state of the app, and pass those values to our components. The components then simply use the state passed to render themselves in a specific way:

A declarative example, using same example as above:

var React = require('react');

var Header = React.createClass({
render: function() {
return(

);
}
});

Conversely, here is a stateful one:

var React = require('react');

var Header = React.createClass({

getInitialState: function() {
    return {
        someVariable: "I remember something"
    };
},

render: function() {
    return(
        <img src={'mypicture.png'} />
    );
}

This tells our loading spinner to render automatically

Call API
Get API result, set state to apiCallInProgress: false

This tells our loading spinner to hide and the result automatically populate to the DOM

It’s nice because it is easier to understand what is going on just by following the state values.

Hopefully that helped to clarify some of the ambiguities, or maybe it simply created more. If that's the case then I recommend giving this insightful article a little read to clear up any remaining doubts:

Conclusion
Deciding between stateless and stateful components depends on your needs. You should think carefully about how each component will be used. If you won’t use state, refs or lifecycle hooks then you should choose stateless components, because there is a significant difference between transpiled versions of them.

var Header = React.createClass({
render: function() {
return(

);
}
});

https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541

Thanks and see you next time coders!

Same Origin Policy & Cors

Paetelmechanic — Mon, 07 Oct 2019 12:57:17 +0000

The backbone of modern internet web security is something called the Same Origin Policy. It refers to the standard in place throughout most of the interwebs that restricts access to a webpage from a secondary page unless the two pages share the same 'origin'. What's an origin you may ask? Well an origin is the combination of domain, host name, and port number, all working in tandem to provide a very specific identification address for where your page lives on the internet

This mechanism bears a particular significance for modern web applications that extensively depend on HTTP cookies[1] to maintain authenticated user sessions, as servers act based on the HTTP cookie information to reveal sensitive information or take state-changing actions. A strict separation between content provided by unrelated sites must be maintained on the client-side to prevent the loss of data confidentiality or integrity.

While waiting on that to load, let's talk about CORS a bit. CORS stands for Cross Origin Resource Sharing. It as implemented a a bit of a work around for Same Origin Policy because sometimes sites actually do want to allow access to their page from outside sources.

They accomplish this by making allowances to certain pages in their response headers. This can be verified with the use of a get request that will show if a page has permission to access or not.

For Ajax and HTTP request methods that can modify data (usually HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests

The browser sends the OPTIONS request with an Origin HTTP header to service.example.com containing the domain that served the parent page:

Origin: http://www.example.com
The server at service.example.com may respond with:

An Access-Control-Allow-Origin (ACAO) header in its response indicating which origin sites are allowed. For example:

Access-Control-Allow-Origin: http://www.example.com
Since www.example.com matches the parent page, the browser then performs the cross-origin request.

An Access-Control-Allow-Origin (ACAO) header with a wildcard that allows all domains:

Access-Control-Allow-Origin: *
An error page if the server does not allow a cross-origin request

Hopefully, if you were in the dark about what exactly same origin policy or cors was, this post helped to clarify it somewhat. Happy coding.

Recursion in a nutshell

Paetelmechanic — Mon, 30 Sep 2019 12:14:21 +0000

Recursion in computer science is a sometimes tricky concept to wrap one's head around.

People often say that to understand recursion, one must first understand recursion! But it needn't be as daunting as it seems. Recursion at in its simplest form is simply a function call itself. My instructors have always told me to ignore complexity and let the recursive call do the work for me. Turns out, they're right!

Let's cover the basics first. In order for a function to be a working recursive function, it needs two things: a base case that serves as a stopping condition, and a recursive call that calls the selfsame function again(hopefully with a slightly modified argument)..

Recursion is great for iterating through lists and trees. It does the heavy lifting of sifting through all of the possibilities for us, and does so quite elegantly might I add.

I would say that the biggest shortfall of using recursion would be the effect that it can have on time complexity of operations. Using recursion where a simple for loop might have sufficed can cause your code's performance to suffer. One technique to hedge against increased time complexity, is memoization. It's used to store the results of expensive function calls and return the cached result when the same input occurs. Memoization can help a recursive function actually run faster than an iterative function if written correctly.

Be judicious and remember that with great power comes great responsibility, and remember that with great power comes great responsibility, and remember...