DEV Community: EDDYMENS

I leant something new trying to build a Github profile analytics tool

EDDYMENS — Sat, 06 Nov 2021 10:33:10 +0000

So last night an interesting idea popped into my head, a simple solution to help you track who visited your Github profile. I began thinking of an approach and finally settled on pixel tracking.

which means I will give you an image tag to embed in your GitHub profile README.md ie: <img src="https://4d0a552c1c8e02.lhr.domains/" width="0" height="0"/>.

With this when someone lands on your page and their browser tries to get the image from my server I will collect all their browser info and use it to provide you analytics, so their IP helps me know their location, user agent to get their device details, language, (Ethics aside for now :)) etc.

Also since the width and height of the image is set to 0 they won't even see that it's there, very straightforward.

This morning I decided to test this out on my own profile and I learned something interesting I never thought of.

The above is what I got back, github-camo is what was sent back as the user agent. so I googled it. It turns out to be a proxy server setup by Github, https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls.

So basically the URL I used is masked by GitHub so I can't get info from the visitor's browser. So even the IP I get back is the one from GitHub's server and not the visitor.

I knew Gmail has this kind of implementation to prevent pixel tracking but I always thought Github, Twitter, etc masked URLs using domains like githubusercontent.com just for CDN purposes, I never thought it was more than just that.

I am keeping this in mind for future work I will be doing that involves allowing people to embed or share URLs.

But on the real, though Github should give us profile analytics just like they do with repos. :)

No time to learn a static site generator? Try this

EDDYMENS — Thu, 30 Sep 2021 16:01:56 +0000

What is a Static Site Generator(SSG)?

Traditionally we built sites supported by a backend that takes data and spreads it onto an HTML template.
Backends also took care of the differences between rendered pages.
This setup is what we refer to as a dynamically rendered site.

For many sites, this approach meant each time a user visited the website, the backend did the same thing repeatedly.
So the idea of a static site generator is to mix the data/content with the HTML templates once and then keep a copy of the output to be served to users.

With this approach, you have a faster website. You also remove the overhead of maintaining the backend code in production, leaving you with a basic server setup to manage.

You may also give up the server setup altogether to use any of the numerous static site hosting solutions out there.

Challenges static site generators present to developers

Credit: Unsplash

Do note that there are general cons to having static sites. I am not going to talk about those.
I am addressing the cons static site generators themselves present.

They come with a learning curve, and it’s made worse given there are too many static site generators out there. This means you are likely to hop on a project using one you are not familiar with.
Limited functionalities, developers are limited to what a static site generator provides. Do you want a specific date format? Your best bet is a plugin, and pray it exists.
The authoring process is a nightmare for non-developers, from dealing with markdown files to sometimes dealing with build pipelines. It’s even becoming a requirement for hiring content creators in some cases.

What’s the alternative?

Just build your site in whatever framework you are comfortable with, Laravel, Express, whatever.
Then use a tool like wget or HTTrack to generate the static files.

You might benefit from using SSGs, but I think this approach remains a good starting point.

With this approach, you can build a complete website with a backend admin that anyone can use.
Also, it will be based on a web stack you are familiar with or that your team is already using. You can build out whatever feature set you will need as well.

The image above shows the exact command I run to generate my site, you can find the explanation of each parameter here.
For example, I am currently working on https://codingterms.com/, and it’s running as a laravel app locally. I run wget when I am ready to publish.

As far as feature sets go, I have many of them. One example is my ability to create hyperlinks pointing to other pages. The system checks if the page exists before making them visible as links on the other page. This way, I don’t have to go through older articles to change links.

I am using wget for my personal website https://eddymens.com as well.

Another approach is using a CMS then generate the static files for production. When dealing with plugins, you need to be aware that this might not translate well to static site land, which is a general characteristic of static sites anyway.

Also, this allows you to move away from static sites to dynamic sites in a snap because you already have a dynamic site on hand.

I am still on the lookout for the gotchas of this approach and will share more as I progress.

Originally posted on Eddymens Personal Site

Trimming the fat off Bootstrap 4

EDDYMENS — Sun, 13 Dec 2020 00:33:10 +0000

Bootstrap is a very useful CSS framework in the sense that it makes designing a website easy by providing a lot out of the box.

It provides a lot from typography to Modal. Applying a style to your HTML is simply done by adding a bootstrap class to the element in question.

Adding bootstrap to a project

Content Delivery Network (CDN)

The easiest and quickest way to add bootstrap to a project is through a CDN. Which is basically loading bootstrap into your project using a URL that loads up a copy of the bootstrap CSS file, You can also load accompanying dependencies in the same way if you need any of them. Bootstrap provides a minified copy which reduces the number of bytes transferred over the network.

Local copy

You may also just make a copy of the bootstrap files and add it to your project. This is also a very straight forward approach.

Package Managers (NPM/Bower/Composer)

Popular package managers like NPM and Composer allow you to pull in bootstrap like any other dependency in your project. Now at this point, I should also mention that you can also have Bootstrap CSS in different formats other than plain old CSS i.e.: Sass or Less, Bootstrap has moved away from Less onto Sass. In the next section, I will explain why and how the Bootstrap source is managed using Sass and how that can help you shave some bytes off Bootstrap when you ship to production.

Trimming the fat with Sass

Sass as defined on the website is a CSS extension language, This means Sass is a superset of CSS so every CSS syntax is valid in Sass. Sass adds a host of things to CSS which makes writing and managing CSS source code a joy and it's likely for this reason the Bootstrap source is now in Sass. I should also mention that in the end your Sass source code is transpiled to plain old CSS to be used in the browser.

One of the features is the ability to split parts of your CSS files into components. Bootstrap is set up in this way, You have Bootstrap components such as modals, tables, grids all in different Sass files.

So you can import only the parts of bootstrap you need into your project leaving out parts you don't need. Thus if you have no need for modals you don't have to import it. This leaves you with a smaller bootstrap CSS file to add to your project,

Setting it all up

Be sure to have NodeJs and NPM installed.
Next, install Sass globally from the command line using $ npm install -g sass. You will find other ways to install Sass here
$ npm install bootstrap will install the latest version of Bootstrap in the node_modules folder.
You will need to create a file for your Bootstrap imports and any CSS you will like to add. It can be whatever name but should have the extension .scss eg: app.scss.
In the scss file navigate and import all the bootstrap Sass files you will like to use. You can find the list of available and also required Bootstrap files you need to import here.
To get back a CSS file you can use in your project run the Sass compiler $ sass app.scss > app.css now you can call app.css in your project.

Pair this up with minification and GZIP over the network and you already improve the speed of your website.

Getting your Windows files and folders to behave as on Linux

EDDYMENS — Mon, 11 May 2020 16:20:58 +0000

I will make this brief.

If you write software on a Windows machine but then usually deploy on a Linux server you probably have run into the trouble of your software breaking because of the difference in the way both OS handles file names and the issue with referencing the wrong case of the name in your code.

Basically you can get away with calling on index.js as Index.js on Windows but not on Linux.

To get your directories and files to behave on Windows as they would on Linux.
Open PowerShell navigate into your project directory and run the following script.

(Get-ChildItem -Recurse -Directory).FullName | ForEach-Object {fsutil.exe file setCaseSensitiveInfo $_ enable}

This will enable case sensitivity for when you reference a name of a file/folder in your code or if namespacing depends on file and folder names like in PHP.

This way if you mix up the case of your file you won't be forgiven even on Windows because Linux won't either.
I got this script on Stackoverflow but I am still looking for the source.
I will add that bit when I find it.
I kept the above script in a Gist for when I need it and felt I should share it.
The End...

Laravel file driven cache on steroids

EDDYMENS — Sat, 18 Apr 2020 14:26:37 +0000

Photo by toine G on Unsplash

As of Laravel 7, there are 6 available cache drivers, with APC giving the best results and the file driver being the only one that requires no extra setup.

I was speaking to a friend last night, who mentioned they used Redis as their cache driver. At this point, I have a project that still uses the file driver.

I was thinking I could use some of that sweet performance of memory-driven cache but I really don’t want to install Redis at this time. Right then a solution hit me, something I knew but not really used. “tmpfs”.

$ mount -t tmpfs -o size=12m tmpfs storage/framework/cache

What does it do?

Photo by Liam Briese on Unsplash

tmpfs: Allows you to store files in RAM by acting as a directory.

Running the above on a Linux server within your Laravel directory will map your storage/framework/cache to your RAM, which means you enjoy the drop in latency of your cached files by using the RAM as opposed to disk IO.

It's a small improvement that can go a long way especially if you use cache a lot within your app.

You can make sure your server switches to RAM storage on restart by putting the command below in your server's system configuration file /etc/fstab

tmpfs storage/framework/cache tmpfs nodev,nosuid,noexec,nodiratime,size=12m 0 0

And to revert back to Disk IO use the command below

$ umount storage/framework/cache

The End …

Leveraging affiliate programs to sell more as an indie hacker.

EDDYMENS — Fri, 28 Feb 2020 19:43:55 +0000

Who is an indie hacker?

This I believe was coined by Courtland Allen who runs Indiehackers.com. So I won’t stress myself to come up with a definition, I will just quote the about section of the site.

You’re an indie hacker if you’ve set out to make money independently. That means you’re generating revenue directly from your customers, not indirectly through an employer. Other than that, there are no requirements!

What is an affiliate program?

This is basically a program set up to reward people known as affiliates who bring in new customers or sales. These individuals are usually rewarded only when a sale is made. Think of it as a salesperson on commission only.

Why might this benefit an Indie Hacker?

As an Indie hacker, you already have a lot to do ie: product development, marketing, legal, sales, etc.

Also, sales might not be your strongest skill, more soo for the many developers who decide to go the Indie hacker route. By having an affiliate program in place, you might only have to pitch to get affiliates to join the program and sell through them.

This is a good strategy to boost your sales without having to be the only salesperson for your product.

With that being said I believe doing the initial sales yourself and continuing to do some sales even with affiliates, is important if your product is to be loved by your users. Not only do you get to understand what your users want, but you also get to become better at selling.

Load balancing without a load balancer

EDDYMENS — Thu, 27 Feb 2020 17:51:26 +0000

What is load balancing?

Load balancing in web development land is a strategy used to handle high volumes of requests from users by either spreading the traffic evenly or strategically across multiple servers.

Traditional Load balancing

In a typical architecture with load balancing, you usually have one or more servers acting as load balancers solely dedicated to spreading traffic across the main application servers.

With this approach there is a single point of failure thus the load balancers themselves. Most teams use dedicated third-party load balancing services to improve their odds and also because sometimes they don’t have the capacity to run their own load balancers.

But there are other options teams can explore.

Another way

If you happen to have a Single Page App you might be able to explore the approach of allowing the Frontend to broadcast user requests directly to **all **the application servers, on receiving the first response returned by any of the servers you cancel, the connection to the others. You may also apply different strategies regarding how you broadcast the request. For example, you can have the right number of servers in every region based on the number of users from that region and route said users to those servers only.

The good thing with this approach is that we no longer have a single point of failure since we have no central nodes or load balancers routing traffic.

Things to note

If your APIs or web app is not stateless having users be served by different servers can be a challenge as the user session might be known by only one server.

This is not a silver bullet or a definite replacement for using Load balancers. This approach, for example, works best for small teams with a lot on their hands or a product that is just gaining traffic or apps that have known spike periods were having a load balancing setup might be an overkill.

Also, this approach is deeply embedded within the architecture of your application compared to using a load balancer that can be thrown in and thrown out easily, this also means it might be a challenge to tweak an existing app to go this route.

Also, note for user requests that require data modification, it might not be a good idea to broadcast it to all the servers, this can lead to problems like a double purchase or multiple entries. For such requests, you might have to ping one server then the next in case the first fails.

Conclusion

This is one example of ways to leverage one's coding skills to skip Ops #infracstructureAsCode

Be careful with HTML ID attributes

EDDYMENS — Fri, 17 Jan 2020 12:19:04 +0000

What are HTML attributes?

HTML is made up of elements which help define the structure of a web page, Elements of the same type possess the same behavior across a web page. One way to make an element behave differently is by adding properties to them. One of the ways to add a property to an HTML element is using the attributes, for example, you can add CSS styles to elements using selector attributes like classes, ids, and names.

Working with selectors

Selectors help you target specific HTML elements, this way you can easily attach CSS styles or behaviors using Javascript. The most commonly used attributes are classes, ids, and names. Although any of these selectors can be used to add either style or behaviors.

Usually, classes are used to add styles to elements simply because an element can have multiple classes and multiple elements can have the same classes, meaning you can apply multiple styles to an element as well as apply one style to different elements. Names are usually used with input elements to not only mark as the key for the data they collect and send to the server but also sometimes for applying targeted styles. More than one input can share a name, the reason being that you may have more than one form within a page.

The ID attribute

Ids, unlike classes and names, should be assigned to only one element, its meant to serve as a unique identifier for accessing elements. But based on the specification most browsers convert ids into variables meaning you have access to the DOM of that particular element.

Not using ids carefully could lead to polluting the javascript global scope, this might also lead to problems if your ids collide with the variable names within the global scope.

Also at first glance, this might be seen as an easier way to access the DOM of any element with just the id name without having to use query selectors. But this is a bad idea as a browser like Firefox discourages the use of this. It's much safer to just go with query selectors.

A simple solution

Unfortunately, the conversion of ids into variables is something that is out of your control, but you can gain back that control, one way is to use invalid variable names as id names, this way there is no way it will conflict with your variables in the global scope. But sometimes you can’t due to a naming conversation or some other reason, in which case the best option is to try to use fewer ids where and when possible.

I underestimated the responsibilities of UI/UX designers

EDDYMENS — Tue, 12 Feb 2019 13:31:18 +0000

I underestimated the responsibilities of UI/UX designers

My initial views

For long I have viewed the job of UI/UX designers as one that ensures a clean
looking product with the best experience as possible. This is still true, but I
have never thought about the depth of work required to get the best results.

A case in point

I found myself working on the API of a booking feature for an app, Most of my
work was influenced by the mockups of the app, Unlike most bookings were you
have pre-created slots for users to choose from, this was the kind where there
are opening and closing times, which meant a user was allowed to pick any
starting to closing time between the opening and closing times. This was
represented on the mock-up as a simple time picker. For me, I just went ahead to
create an endpoint to accept bookings, cross-checking to prevent overlaps then
persist. From the frontend standpoint, things were not exactly ok. You see if
the user is allowed to select their prefered times they might end up receiving
error messages each time there are overlaps till they finally picked a free time
range, which is not the best experience. The next best solution was to populate
the time picker with available time slots, the challenge here is we might just
end up with a lot of time slots to scroll through.

The Ah Ah moment

This got me thinking, why is this not falling in place nicely, I mean as a
developer the only time you seem to have to jump hoops is when you try to mock
some natural world scenario, you know like calculating menstrual cycles,
timezones etc. There was something wrong. It took a while but it hit me, This is
not about implementation its design, This is not a problem for a time picker,
this is one that is best solved with something like a display calendar. All
booked times are spread and displayed on the calendar, this naturally reveals
unbooked slots then the user can pick empty slots. Simple and clean.

Final thoughts and my new view

The one thing I kept thinking about after was if I were a UI/UX designer how
would I get this right before it gets to the implementation stage? How do I
learn these things? Sure for something like the above case, I would spend time
learning about available inputs and when best to use them. But what about other
aspects of UI/UX? The only way to know the best option to go with sometimes
depends on thinking not only through the colour scheme, the user flow but also
aspects like data flow and **timeliness. **The commonest form of data flow
thought of are empty states and overflow of data(when to paginate), what about
that long list of available time slots, how long will it take a user to find the
perfect time to pick or how long till the server returns the entire time list on
picking a date and how can entire process of returning a list be avoided ?
Populating a design or mock with data reveals a lot of things that might be
overlooked and caught only during implementation because well that's usually the
only time you have test data going through the product. Imagine forgetting to
add country codes to phone numbers at the design stage and only realising you
need to add this when you get to the point of implementing SMS.

As I keep thinking about it, It becomes clear to me a better UI/UX is one that
considers the entire life of the app from development to growth. With
considerations like happy, sad, failed, successful paths along the way. Thinking
through the colours and product flow alone is not enough. The work of the UI/UX
designer is one that brings the product to life through imaginations prior to
implementation. Again this is something I have never given deep thoughts, maybe
many already know this but me, I never thought of it.

Knowing when it's a Model or a Builder(Laravel)

EDDYMENS — Mon, 07 Jan 2019 23:58:14 +0000

User::where('id',1)->update([]) and User::find(1)->update([]) do the same thing but in different ways.

Erhn?

When working with databases in Laravel you usually find yourself either using Eloquent or the lower level Fluent queries.

Eloquent provides ways to “objectice” working with databases using the Fluent queries. Simply put its a wrapper around Fluent queries with extra cheese :).

Some underlying Mechanisms.

Generally, everything regarding Fluent queries can be found under the namespace Illuminate\Database\Query\Builder

And everything Eloquent under Illuminate\Database\Eloquent\Model

Further into Eloquent

If you know you know :)

Eloquent also has many parts to it, the main point of attraction the Model Class, Its own Query Builder Class as well other important classes like the Relations etc.

Examples Now let's try and break a couple of queries down

User::where('id',1) : This statement starts out as an eloquent model then once where is called the returned instance is that of the eloquent builder which means you can append more query methods. NB: The Eloquent Builder extends the Fluent Query Builder to perform its task.

User::find(1) : This statement immediately returns a model instance of the record where the primary key is 1 NB: This will return an eloquent collection if multiple ids are passed to the find method eg find([1,2,3]

So the first query with the where method returns an instance of the query builder which means we can append more query builder methods as we go, and the fluent query when the called method does not exist within the eloquent builder class eg: the joinmethod.

With the second query, we can append both model and query builder methods still.

NB: Some methods exist in both the Builder and Model class.

So as you would imagine if you have a model instance the first point of reference of the method will be from the Model class and if not found will be looked up from the Query Builder. More or less like method overriding in the case of inheritance. But in this case, the magic method __call is used for this check https://github.com/laravel/framework/blob/5.7/src/Illuminate/Database/Eloquent/Model.php#L1602.

And one of such methods that exist in both the Builder and Model is the update method.

There are a few differences in the implementation of these updates with the one in the Model returning false if the model does not exist as well as allowing the user to pass in options such as whether to set the timestamp or not.

Why is it worth noting though?

Not that you might want to do this, but say for some reason you override the update method in a Model. Well, what this means is as long as you have a Model instance say like in our example above User::find(1)->update([...]your overridden method will be executed.

But in the case, the other kind of query is used where a Builder is returned, your method will not run as the default update within the Builder will be called instead.

But hopefully, you don’t have to override any methods but find other cleaner ways to handle situations you might have.

What I am hoping to draw to light with this post though is the usefulness of understanding how things work and how it might come handy one day :)

References

Illuminate\Database\Eloquent | Laravel API

_Edit description_laravel.com

https://github.com/laravel/framework/blob/5.7/src/Illuminate/Database/Eloquent/Builder.php

https://github.com/laravel/framework/blob/5.7/src/Illuminate/Database/Eloquent/Model.php

Eloquent: Getting Started - Laravel - The PHP Framework For Web Artisans

_Laravel - The PHP framework for web artisans._laravel.com

How I learn’t how Laravel works

EDDYMENS — Wed, 08 Nov 2017 10:08:38 +0000

One of the best things to happen to developers in the 21st Century is open
source, at least for me. The power to look under the hood of some of the key
software out there is mega. Not only do you better understand the software, you
become a better developer by learning as well.

Getting Started with Laravel.

Prior to Laravel I did most of my PHP projects in either Yii , CakePHP and Slim
for my APIs. Then the Laravel hype got to me , So on my next project I decided
to try it out and it turns out its hyped for a reason.It had some interesting
concepts that I wanted to understand.

Learning beyond the Docs

The default place to look up possible things you can do with any piece of
software is its documentation . I must mention that Laravel has very good
documentation . But then again the single source of truth is the Laravel code
base. Documents are prepared based on what is present in code and the code is
more accessible to me than the docs. So why not look up that instead :) . You
might be thinking this is hard to do . Its very easy . Example

lets say you want to work with Laravel’s collection, which is a nice way to work
with arrays. To make a collection out of an array you first collect it eg
collect(["name"=>"joe"]) now depending on the editor or IDE you use you should
be able to locate where the collect method lives by placing your cursor on it.

Places the collect keyword exist

With most IDEs pointing your cursor on the keyword and pressing down on CTRL or
Command will show you where this keyword is implemented and sometimes places you
have used it. With this you are able to see how this is implemented as well as
discover other callable methods.

List of other callable collect methods

For me this is gold as at a glance I can experiment and know what more I can do
as well as understanding how these things are implemented. This saved me one
time where I had code for counting my collection collect([])->count() . Count
is just a wrapper around the PHP count function and so I knew if the
collection ever ended up being a string I will silently get back 0 so I
handled that nicely as the collection count method won’t do that for me.

Using Tinker.

Well once I get to see all the options I have for a given Concept, Class or
Function I immediately try out these methods using tinker. Tinker is the default
REPL which allows one to try out Laravels components without having to deal with
views. Its similar to the rails and Django console.

It also has some cool features which I won’t get into, but as mentioned its one
of the quickest way for me to try out stuff I discover within the framework.

./artisan tinker

From the above you will notice it also gives the namespace which collect belongs
to. From there I can also go ahead and look it up some more.

*Using *dd(debug_backtrace());

Alright so we’ve looked at how to discover some of the things packed in Laravel
for developers. One other important piece is understanding how Laravel deals
with the request/response flow.

For me whenever I need to understand the flow of any PHP project I pull out
die(var_dump(debug_backtrace())); . I drop this at any part of the code I
understand and run the app once again, view this in my browser and I end up with
a complete execution stack up to where I dropped this. I can then follow through
and understand how each class/method/file processes the request and hands over
execution to the next. This gives me an understanding of how the app works as a
whole. With Laravel even better we can replace die , var_dump with dd so
we end up with dd(debug_backtrace()); which gives us something much more
pleasant to the eye.

Backtrace

So above I have the complete execution path till it gets toServiceController
You can see that the request came through the Controller.php file from within
the Routing package. Ow by the way the laravel framework it self is based of a
bunch of packages together known as illuminate which you can find on
Github. There use to be lots of symfony parts in
there as well . With every new release of Laravel I run debug_backtrace just
to see if there are any changes in the request/response flow. You get to learn a
lot by doing this . Also it might take you a while to understand exactly what
happens at every point.

Learning from other Laravel Projects.

One interesting thing about code is that not even the authors of the tools can
completely predict how developers will be using some of the things they created.

For example some developers use blade for scripting and others as a stand alone
tool for creating static pages. This is
also true for things within the framework.

One of the best ways to pick up some of these things is to read the source of
Laravel projects by other developers. One of the ways I decide which project to
look at is through the Github PHP trending pages
This way am more likely to find young Laravel
projects that have smaller footprints. I can now follow the progress of this
projects and learn while its grows. Also the few contributions I have made has
been through this process.

People Behind the Framework

One other important step that I take is to lookup those involved with the
development of Laravel. This not only allow me keep up with the state of
development of the framework. It also gives me a sense of why something exists
or was added. I picked this approach up from school , where the only way I could
understand something like calculus was to follow the life story of Newton and
how he stumbled on Calculus. Also with something like PHP following the story
allowed me understand why we have strtoupper and str_replace which is
because the implementation is by two different people :). Anyways.

These are some of the techniques that came to mind that I use. There might be
more that escaped me but hopefully you find some of these techniques useful, And
apply them as you try and understand the inner parts of Laravel.

Substituting JavaScript with HTML

EDDYMENS — Wed, 25 Oct 2017 15:04:58 +0000

So probably by now you are thinking of how in the world will HTML ever substitute Javascript.

Well I didn’t mean it literally. But then in some vain its possible.

How we write code

Have you ever worked on a project were you realised between views you kept writing the same piece of code to get or send data back to your server ?

The most obvious solution is to refactor and have this common part as a class, object, method , function, routine or whatever we do these days. So we can call on this same piece across multiple views.

Going a Step further

But then its only a few developers who go ahead to refactor the bulk of reusable code into refined libraries which can be used outside the original project.

As a matter of fact once you begin to create libraries out of projects you work on you will begin to notice growth. By growth I mean you feel like an engineer because you spend time putting these libraries together to finish projects and spending your spare time patching and fixing these libraries and this expands the dept of your thinking. I must say its a very fun experience.

Show Me Proof

I recently transitioned from building end user applications to focusing more on developer tools @Devless .

I work on not only speeding up the software development process but also making sure its one that scales. One of our flag ship release is a backend framework that is ready for building SAAS applications right out the box.

When we first launched we released a couple of SDKs to work with the framework including JS, RUBY, PHP and PYTHON . As part of our business model we also work with developers on enterprise apps. These projects usually serve as the point of truth for our framework . During such projects we get to know how much speed DevLess provides as far as rapid development goes and can it actually scale in production.

Over the last couple of months I have learnt alot. One of the things I found was that we were writing too much JS even after refactoring the most common used JS code into functions and objects. Well other things contributed to the excessive writing of JS but thats for another post.

Example: We had up to 8 form submissions and about 12 points where we displayed data . I began getting worried each time I had to put together a form then have some binding JS code call on the submission function to send this data over to the DevLess framework. So I set off to do something about it .

The AHA! Moment

https://formspree.io/

I don’t remember how I found Form Spree but the moment I saw the example on the page, something struck me . I realised the reason I still had to tell my forms about the JS functions was because I hadn’t taken Separation Of Concerns to a higher level . I quickly began to look at implementations close to Form Spree like Bootstrap and that completed the other half of the puzzle.

<button class="btn btn-warning">Submit<button>

With the addition of classes I can enjoy all the custom CSS Bootstrap provides for the most part of what we need as far as styling goes . Why can’t we have same for JS ? It turns out we actually do and such libraries are known as UnObstrusive JS libs.

So we came up with a solution for sending data back to the backend with little or no Javascript at all.

So for instance the sample code below is used to submit Data to a table labelled details. Note the class dv-add-oneto:profiles:details thats all you need to submit the form below to DevLess .

So now the JS library listens on the special classes and acts accordingly. This as opposed to what we had earlier is that now for N number of times we work with data from the backend the JS code responsible for it is the same . So for instance if you compare JQuery to Bootstrap. whereas you write some amount of JS to use JQuery you don’t write any CSS to use the Standard components within Bootstrap.

Cool, What Next

In the spirit of open sourcing everything and anything at DevLess we will be extracting the HTML SDK from DevLess and make it possible to use this with other frameworks as well. Also its important to note that the HTML SDK is not a magic bullet for all kinds of Data work. For some instances you may need to use other SDKs or write custom code for that. But at least now we get to keep what should be simple simple.

You may Checkout the Docs below for what more you can do with the HTML SDK :

Adios

Alright this is were I say bye so please remember to Share , Love and comment down below. Oh! yh you can hit my up via email edmond@devles.io , or @eddy_mens on twitter

By clapping more or less, you can signal to us which stories really stand out.

EDDYMENS

“Don’t worry about what anybody else is going to do. The best way to predict the future is to invent it.” Innovate or die ;)

DevLess

DevLess is a platform that allows you to easily build robust backends for your web and mobile applications by piecing together plug and play backend modules.