DEV Community: Tobias Nickel

The Odyssey of an E-Commerce Order

Tobias Nickel — Wed, 29 Oct 2025 12:14:06 +0000

Recently, after an exhausting 30-kilometer cycling sprint, I made a terrifying discovery: a chain link was suffering from a critical integrity breach! Thankfully, I'd managed to bootstrap my way home - the thought of pushing my bike for ten kilometers was a genuine nightmare scenario. So, I immediately logged in to provision a replacement part online. What followed was a masterclass in suboptimal data management.

The Initial Data Handshake

My journey began on the frontend of Vendor D's e-commerce platform. I initiated an order for a new bike chain. The first point of friction appeared during the checkout process: the selected chain cleaning solution was from a different microservice/vendor, triggering separate shipping APIs and demanding additional freight charges. I quickly decided to swap it for an alternative chain lubricant. For shipping, I stuck with the default parameter, which meant the package would be dispatched via the "Logistics Expert," Carrier H. Payment was swiftly processed via the Payment Gateway P, which directly transmitted my address data to Vendor D - this was accurately displayed to me in the final confirmation receipt.

The Shipping Data Black Hole

The following Monday, I received the shipping notification from Carrier H. Curiously, my street name was omitted from the payload, which I initially dismissed as a security feature (a common misconception!). Three days later, on Thursday, the major incident: an email informed me that my address had failed validation checks and I needed to establish contact with Carrier H within 10 days. The customer service portal was exclusively managed by a chatbot - a true test of patience, but at least I was promised that the package would be delivered within the next two days.

The Back-End Disaster Recovery Failure

As a Software Engineer, I was genuinely flummoxed. It took Carrier H three whole days to flag the address as invalid data! The package was stuck in a pointless holding state before even being loaded onto a truck, only for the driver to discover an address resolution error. This isn't just a poor User Experience (UX); it's an extremely expensive operational overhead for the company.

My address was double validated transmitted correctly to the Online Vendor D. Granted, my street name is quite long. But here's the query: Shouldn't both Vendor D and Carrier H have implemented an address pre-validation routine? Both could have leveraged simple, publicly accessible external APIs such as OpenStreetMap or Google API for robust data verification.

And even if Carrier H constantly struggles with long street names, shouldn't Vendor D - as a market leader - have already iterated on this feedback? Shouldn't they have a clear protocol for correctly interacting with Carrier H's service endpoints?

The Solution: Focus on Data Architecture

This narrative involves multiple enterprises that should be operating in a tightly integrated ecosystem. Each utilizes a myriad of systems that predominantly communicate through automated pipelines. As a Software Consultant and Developer, I see immense potential for optimization: processes could be made more lean, Total Cost of Ownership (TCO) reduced, and the Customer Service Level Agreement (SLA) significantly improved.

My urgent recommendation to Vendor D and Carrier H: Prioritize and refactor your Data Management Architecture! Both companies have internal access to truly massive data lakes. This inherent potential must be harvested to elevate service quality while simultaneously de-risking and reducing costs. If an external observer can spot such glaring data integrity gaps and simple fixes, there are certainly far greater potentials that can be unlocked with solid Data Governance.

Are you seeking support to optimize your data flows and streamline your processes? Then Codoflow might give you the right starting point for you.

Would you like me to highlight any specific IT terms in the translation or perhaps draft a social media post based on this article?

Two Types of SmartContracts

Tobias Nickel — Tue, 16 Aug 2022 11:09:03 +0000

For blockchain technologie and web3 it is today needed to use smartcontracts. today I want to discuss two greatly differences between smartcontracts.

single process contract
business rule contract

single pricess contracts:

On public blockchains such as eth one deployed smartcontract is meaned to represent one business process. they can be used to lock in some money(eth or a currency on that blockchain) and releqse it after some condition is met.

Single process contracts can also be used to reflect ownership of some property. To do so they store a reference to the propery(art, house, car, certificate...) and a reference to the owner. depending on the usecase, the ownership can be transfered or not or only under defined conditions.

business rule contracts

In private or consortium blockchains business rule contracts are used. Often these blockchain systems make a distinction of two data systems. First the blockchain itself, that is holding transactions in sequential order, that order can not be changed. And second a state database.

In hyperledger fabric, the state db is defined as a key value store, and in most cases implemented using couchdb. In sawtooth the data store is a custom merkle tree that is also used like a key value store.

The smartcontract in a business rule blockchain define the rules how a business is run. technically defining methods that will update the state database and apply rules for authentication and other validations.

implications

When learning about etherium smartcontracts, I often asked: how do I store all my data. and the answer is: you don't. One smartcontract only reflects one business process and hopefully that process is finite(has an end, even if it is far in the future). You might give the eth contract and its methods a meaningful name, but the true meaning comes from the application that is interacting witg that contract.

Business rule contracts can represent business processes and rules much better and more clear. however instead of defining the rules for once incident of a process, they describe the rules for the long run. This is making it much more important to reach consensus of the business rules/smartcontract. This is making it particular hard to stablish this kind of contract, not technically but organisatorial.

RESTful verbs vs Real actions

Tobias Nickel — Tue, 05 Jul 2022 00:27:25 +0000

In http rest APIs we are stuck with a very limited set of verbs. They are essentially:

get: to load data
post: to create new data
put: to replace data
patch: to update data
delete: to remove data

These are the verbs of a typical CRUD operation. They are very effective. But let me tell you a story:

In the afternoon you patch your location to your mothers house. After that you get her data and patch her status to happy.

This is a small situation, told as if you tell a story to a database. Here is the same story, but for the application layer:

In the afternoon you drive into the city to your mothers house. After you see her, you notice her pretty dress. You make her a nice compliment. That makes her very happy.

What version of the story do you prefer?

How often google crawls my websites sitemap.xml

Tobias Nickel — Mon, 25 Jan 2021 15:36:17 +0000

My website has a sitemap.xml for years. It automatically get updated when I publish a new article. Or any new content.

Since last November I use the google search console. There I can see how my website has performed in the google search. In the search console web app, you can add the url to your sitemap.xml. I did and I found google had already read it. The last time two days ago.

I observed, when it was read again, it was three weeks later on December 17. In all this time I published 5 more articles already (not all of them here in dev). But ok, Google would know that there are 5 new pages at once.

Then I published more stuff. Ohh in December I wrote a number of articles, that was a good month. And I keep observing when google pick up the sitemap.xml. It took an other week that it was crawled again.

Now I decided, I will every time when google is coming have something new. I added a new section to my website a developer log, where I can write what I developed on a day in a less structured way, compared with nice worked out articles.

Today, In the later half of January, I can see, that google read my websites sitemap.xml every day.

Summary

When there is very irregular new content on your website, google will crawl the websites sitemap also less regular. When google find something new, it comes back more often. In that way, google is like a hungry wild cat.

Now let us feet the cat and comment and share and make some good content.

TCP and UDP did you ever use them directly?

Tobias Nickel — Mon, 18 Jan 2021 09:09:16 +0000

Did you ever had a project where you used lower level protocols directly?

Usually we use http(s), a lib like grpc or service SDKs such as for databases.

But did you ever build an app that use tcp or udp directly or define your own protocol on top of them?

How I removed google analytics and still have good data to analyze

Tobias Nickel — Fri, 25 Dec 2020 05:19:48 +0000

It was just recently, that I opened my google analytics account and added it to this website. I wanted to get some insights, about my website's visitors. But compared to the google search console, there was not much information interesting to me.

And actually I worried a little. Is it legal to just add analytics? analytics was easy to add, just adding a script tag into my page. In EU it is needed to inform the user about non essential cookies. Before setting one, it is needed to ask the users consent. However, analytics got added using a static html tag and there is no way to control what cookies are set immediately.

I was not sure if I should create that script tag dynamically after asking the user, using some client side javascript. and would analytics still work?

On the internet when searching for analytics without cookies there are many websites advising to use motomo. It is a very good solution made with php and mysql. But for my little blog setting up this server seem a little to much. Also because I would have to look that I keep it up do date and do some more security measures. For real production application, google analytics and motomo, both will be a better choice recording lots of data you don't know now you want to have in the future.

My Solution to do Analytics without Analytics

I added a little script into my website. Instead of cookies it uses local storage. local storage can not be used to track users across other websites. So I think this should comply with the law. Also in the storage there is nothing stored to identify the user.


// analytics
const lastViewTime = parseInt(localStorage.getItem('lastViewTime')) || 0;
const viewCount = parseInt(localStorage.getItem('viewCount')) || 0;
const lastViewPage = localStorage.getItem('lastViewedPage') || '';

localStorage.setItem('lastViewTime', Date.now())
localStorage.setItem('viewCount', viewCount+1)
localStorage.setItem('lastViewedPage', document.location.href);

fetch('/api/pageViews', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    page: document.location.href,
    viewCount,
    time: Date.now(),
    lastViewTime: lastViewTime,
    lastViewPage: lastViewPage,
    userLanguage: navigator.language,
    userAgent: navigator.userAgent,
    referrer: document.referrer,
    dayTime: parseInt(req.body.dayTime+''),
  })
})  
  .then( r => r.json())
  .then(data => console.log('pageViewResult:', data);

On the server I just dump this information into a jsonl file, meaning one json log entry each line. It can easily be converted to csv for analyses via excel. Draw some charts or count per interval weekly and monthly interval.

const router = require('express').Router();
module.export.pageViewRouter = router;

const file = fs.createWriteStream(fileName, {
  flags: 'a' // 'a' means appending (old data will be preserved)
});

router.post('/api/pageViews',async (req,res) => {
  res.json(true);
  file.write(JSON.stringify({
    page: body.page,
    time: Date.now(),
    userLanguage: (req.body.userLanguage+'').substr(0,500),
    userAgent: userAgent.id,
    viewCount: parseInt(req.body.viewCount),
    lastViewTime: parseInt(req.body.lastViewTime+''),
    lastViewPage: req.body.lastViewPage,
    referrer: req.body.referrer,
    dayTime: new Date().getHours()
  })+'\n', (err)=>{
    if(err) console.log(err)
  });
});

Do you see, that I do not check if the browser supports the fetch API and modern arrow functions? I was thinking about it, and decided that I don't need to care about old browser compatibility for this optional feature.

You see all the fields that are getting stored. These are what I came up with. That I think are interesting. To be honest, the API shown is not exactly the one running at tnickel.de, but the concept is this. On my running implementation I validate the received data, store urls and user agent string into a separate json file database and write the id into the log file. But with this example you can understand how you can implement the server side yourself.

How others do it

As by chance: The dev.to community, was just asked about analytics tools. And I described my little solution. The comment received a reply by Charanjit Chana, saying he is using a similar solution, here is what I found on his websites source code (it was minified, so I formatted it a little):

function allowedToTrack() {
  return !(window.doNotTrack || navigator.doNotTrack || navigator.msDoNotTrack || window.external && "msTrackingProtectionEnabled" in window.external) || "1" != window.doNotTrack && "yes" != navigator.doNotTrack && "1" != navigator.doNotTrack && "1" != navigator.msDoNotTrack && !window.external.msTrackingProtectionEnabled()
}
if (allowedToTrack()) {
  let o = Math.floor(8999999 * Math.random()) + 1e6;
  let n = window.innerHeight + "x" + window.innerWidth; 
  // this request then set the cookie. 
  fetch("https://123.charanj.it/xyz/api/" + o + "/false/" + n);
}

if (void 0 !== console) {
  console.log("%c👋 Hey!", "font-size: 16px; font-weight: 600");
  console.log("%cIf you can see this I would love to hear from you.", "font-size: 16px;");
  console.log("%cYou can find me at https://twitter.com/cchana.", "font-size: 16px;");
  console.log("%cUse the hashtag #cchanaconsole", "font-size: 16px;");
  console.log("%c🤙 🖖", "font-size: 16px;");
}

Seems as head of development he is interested in finding new developer talents for his team. I like the allowToTrack function used before the analytics request is made. This request then set a cookie, so multiple page views can be related to the same user and session. I don't know about the rules in England after it left the EU, but I believe in Germany, an additional popup banner would be needed. Other than me, Charanjit is interested in the users screen resolution to know what to optimize the page for.

How do you analytics on your website?

You now have seen two valid approaches to building the client side for collecting analytics information. With this article, I hope you find how how this website does analytics, without tracing the users all over the internet and even into their darkest dreams.

Update January

In a number of comments people point out, that storing identification data in local storage is under the law similar to storing it directly as a cookie.

I was thinking this would be OK, because it would mean, that you can not be tracked with it over other websites. But anyway, I did not store personal identifiers. Or did I?

I think at this point you have to really believe the website operator try to trick you. And if they really wanted, it would be easier to simply show a cookie banner and get consent.

But lets us pretend I wanted to track you personal journey on my(your) website. With the recorded information, there is the viewCount and ViewTime the current and last URL. Just like that these information can plot a journey, but are not connected to a person. However when I or any other web provider with such solution plan to connect journeys with user information that could be possible by: provide a feature or content on the page that require authentication. At the moment of authentication it would be possible to connect that user with his already journey. And that is not good.

Here is some idea, that can make it more difficult for you to connect a journey to a user, but still maintain good insights to users in general.

Round the timestamps to a full minute or several minutes.
Same with the viewCount. I came up with the following function. The function still allow you to know if there are regular users or just random spontanious visitors.

function normalizeViewCound(count){
  const sqrt = parseInt(Math.sqrt(count).toString())
  return sqrt * sqrt;
}

So here is the version that I currently use for my website:


const lastViewTime = parseInt(localStorage.getItem('lastViewTime')) || 0;
const viewCount = parseInt(localStorage.getItem('viewCount')) || 0;
const lastViewPage = localStorage.getItem('lastViewedPage') || '';

const now = Date.now();
const visitTime = now - (now % 60000); // normalize the time

localStorage.setItem('lastViewTime', visitTime)
localStorage.setItem('viewCount', viewCount + 1)
localStorage.setItem('lastViewedPage', document.location.href);

function normalizeViewCound(count){
  const sqrt = parseInt(Math.sqrt(count).toString())
  return sqrt * sqrt;
}

fetch('/api/pageViews', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    page: document.location.href,
    viewCount: normalizeViewCound(viewCount),
    time: visitTime,
    lastViewTime: lastViewTime,
    lastViewPage: lastViewPage,
    userLanguage: navigator.language,
    userAgent: navigator.userAgent,
    referrer: document.referrer,
    dayTime: new Date(visitTime).getHours()
  })
}).then(function (r) {
  return r.json();
}).then(function (data) {
  console.log('pageViewResult:', data)
});

With these changes, the privacy of my and your users is greatly improved. However, I can't really give legal advice here and know for certain if the measures are enough. Maybe it is just easier to just show the users a cookie information and shameless track them into their most private dreams.

How big or small should microservices be?

Tobias Nickel — Thu, 17 Dec 2020 10:07:40 +0000

How big are microservices? They are small. How do you even messure it? lines of code? needed memory? amount of data processed? complexity(of any kind)?

Does running an app in docker makes it a micro service architecture? and how big would you say is a cloud function in comparison?

and I would also like to see some wrong and fun answers.

The Best approach to use RxJS for clean code

Tobias Nickel — Tue, 08 Dec 2020 00:58:18 +0000

When building angular apps, you will sooner or later get in contact with RxJS library. On angular's official documentation, the library get praised with many examples how to use rx. In angular templates, the result of a subscription can be used directly. Many of angular's core modules expose RxJS Observables through the API. For example the http module, that most angular developers use for loading additional data from the server.

What is RxJs used for?

With RxJS, you can write the same code, for an event stream as for a plain array. RxJS promote the use of functional programming. For that it provides very abstract primitives, that fit into almost any situation.

A already mentioned request response request to an API but also processing data, implementing user interactions or working with data streams, all can follow the same programming paradigm.

Due to the functional programming model, it should be easy to reason about the logic and to be easy to locate and repair bugs.

What is an observable and how do they work?

The main concept or class, to use the Library, is the Observable. Every event stream, data or process can be wrapped into an Observable.

An Observable is providing the most general API to work in your programs.

The .subscribe method works similar to the .then function on a Javascript Promise. With the difference, that the event can happen many times, not just once. When Processing data, Errors can happen, So the `.subscribe method also accepts an error handler as second argument.

What are operators?

Operators are the second important concept when working with RxJS Observables. Operators are there to process data. The Rx library provides many helper functions, to do map, reduce, retry, scan (a different kind of reduce function) and more. These are basically higher order functions. and get passed into the observables .pipe method.

Is it worth learning RxJS?

To answer the question short, and you might already know: no, it is not worth it. I think the best about the RxJS library, is its documentation. It teaches about good programming concepts. However, then it seems in the docs, that the engineers of the RxJS library invent all the good concepts and they only work, when the developer uses Rx.

In my opinion it is making things difficult, mapping simple programming paradigms into the most complex form: an 'async list operation'. I believe when requesting data from the server, it is guarantied, that there is one result, not many. Using observables does not allow in these situations to use JavaScripts async/await syntax.

In one of the first examples of the documentation, a click event listener get registered to button. That event get throttled. In Pure js with some extra variables and a timeout. In rx with a single pipe through a throttle helper function. However, when using the throttle helper utility from underscore js, I believe the pure js code is much simpler and also more easy to reason about.

It is a strong contradiction, to promote functional programming, but the most basic thing in RxJS is a class. The problem with this class, is its live time. In every project I work on that is using the library, I see the same kind of bugs. Some events are happening multiple times. I see that there is subscribed often to the same Observable and forgotten to unsubscribe. Some dialogs open twice on a single click, some API update calls get executed multiple times.

For a long time, I thought this is a problem with the angular framework, but found when working clean with angular components and services, making apps with angular feels much better, is easier to test and reason about.

I ask you, try it out, make an angular app without using RxJS. One Method of the observable, that will help you to make the transition is Observable.toPromise().

I don't want to make ads here, but I learned a good way to work on angular apps from a pluralsight video course, shows very clear, how to use use services to share information between components.

rapid prototyping with json file database

Tobias Nickel — Fri, 20 Nov 2020 00:59:24 +0000

What do you think? How many good ideas never got started? Rapid Prototyping, is the art of getting up an initial version of an app. A version good enough for showing an idea, proving that an idea is feasible.

That often is a frontend. How fast can you run create react app, add a material UI, maybe with the help of material or ant design let users login, insert and present data.

For me as a backend engineer it is often more about the nodejs app. How quick can I create an express app with session middleware and some endpoints to insert and query data. Can it be faster setup using lookback?

Personally I never used loopback, sails or such productive, they both have an inMemory datastore. I mostly use less opinionated libraries.

The part that stopped most of my projects from actually getting started is setting up the DB. Docker is not stable on my mac nor on my Windows PC. That is why I sometimes look into file datastores.

For frontend developers there is the fantastic json-server. It provides rest API to a json file very quickly in a single command. As a backend developer we can use SQLite, nedb (outdated/not maintained), low-db that is inside json-server.

But the problem I found is, that the code written with these solutions is much different from actual production applications made with a sophisticated database.

Solution

That is why I created the node module trdb. A json file database that feels like a real db with asynchronous API and the data inside the db are isolated objects, that will not unexpectedly mutate.

While json-server let you build the frontend before the API is ready, With trdb you can implement the API before the db is ready.

// create a db
const db = newFileDB('./db.json');

// create a collection
const users = db.collection('users');

// insert a user (see without id!)
const user = await users.insert({
    name: 'Tobias Nickel',
    job: 'technical lead',
});

// update and save the user
user.favoriteHobby = 'programming';
await users.save(user);

await users.insertMany([
    { name: 'Sebastian Sanchez' },
    { name: 'Firat Evander' },
    { name: 'Silpa Janz' }
]);

// When inserting or saving, internally a new copy of the object is created
// next the reloaded user represents the same user in DB, but is a separate object.
// this is the same behavior you get from a real databases or API.
const userReloaded = await users.findOne({id: user.id});
console.log(user !== userReloaded); // true

// pass in the properties all the resulting items should have.
// also allow to pass arrays for then the objects value need to be included.
const searchedUsers = await users.find({ name: ['Firat Evander', 'Tobias Nickel']});
console.log(searchedUsers.length);

// removing items just works just like search, if first search then removes.
await users.remove({ name: 'Tobias Nickel' });
await users.remove({ id: user.id });

// Feel free to create multiple dbs to put collections in separate files.
// This example also shows the options for custom idName and
// newId. This the newId defaults to uuid v4, and provides a method for
// generating autoIncrementIds. You can implement your own ID functions,
// returning and primitive like numbers and strings. 
const postsDB = newFileDB('posts.json', {
    idName: 'postId',
    newId: newAutoIncrementId
});
const posts = db.collection('posts');

The db also watches the file. during development and testing you can always see what is inside the db file. When you edit that file, it is instandly loaded into the server process.

Result

I was about to study oauth2 and open connectId. To play with that, you need three services. The authentication/authorization service, an API service and the app service. Each want to have its own db. With trdb setting up these services was quick and I can concentrate on the logic, rather than setup.

What do you think of my solution? How do you build quick prototypes.

Peter Drucker's quotes for software developers

Tobias Nickel — Fri, 13 Nov 2020 01:41:39 +0000

As expert for business, economy, management leadership and such, Peter Drucker also shared some interesting thought about the computer. And I believe, these quotes can serve you as a developer well.

With these quote, you might get the right words, that will help you next time, to make and win the argument about a new feature in your software giving great value to you and your organization.

You can be sure, your manager has read some of his books, or at least have read and heard about Peter Drucker's work.

First Quote

Beginning somewhat provocative:

The computer being a mechanical 
moron, can handle only quantifiable 
data. These it can handle with 
speed, accuracy, and precision. 
It will, therefore, grind out 
hitherto unobtainable quantified
information in large volume.
One can, however, by large 
quantify only what goes on 
inside an organization.

Can you feel it? when the software does not do what it should? This quote is about quantifiable information. Stuff that can be counted and measured. But while we can also also count anything we find outside, we will never have the complete picture, because we can never count everything. And when investing the Effort, money and time to analyse the outside, at the time we get the result, it might just be irrelevant.

Second Quote

Going in a similar direction:

Relevant outside events are rarely 
available in quantifiable form, 
until much to late to do anything 
about them. This is not because 
out information-gathering capability
in respect to outside events lags 
behind the technical abilities 
of the computer. 

The problem is rather that the 
important and relevant outside 
events are often qualitative and 
not capable of quantification.

Wow, relevant information is qualitative. Informations that we need to develop a sence for, where we need a good intuition. We need experience to make good decisions based on qualitative information.

Third Quote

Very quick, check the next quote

The danger is that executives will 
become contemptuous of information 
and stimulus that cannot be reduced 
to computer logic 
and computer language.

Do you know that when getting lost in more and more information. When buying a new PC or other gedget, study lots of options, probably way to many, and actually getting distracted from what I actually wanted. While for personal, this can be very joyful, in business however there are usually bigger amounts of data and lots valuable resources at risk. We have to figure out what is the relevant information.

Fourth Quote

Is about your team.

One should only have on a team the 
knowledge and skills, that are
needed day in and day out for 
the bulk of the work.

Specialists that may be needed 
once in a while, or that have to be 
consulted on this or on that, should
always remain outside.

It is indefinitely cheaper to go
to them and consult them against
a fee than to have them 
in the group.

This one is so huge, I see so many decisions made by inexperienced people, including me. We all always strive for the best solution. Sometimes we wish, there is someone with even more experience. This quote tells you, not to do everything on your own. Ask for help, and while it can cost, it will certainly pay off.

Fived Quote

Next is about attitude to your colleagues:

The man of knowledge has always
been expected to take
responsibility for being 
understood.

It is barbarian arrogance to assume
that the layman can or should make
the effort to understand him,
and that it is enough 
if the man of knowledge talks to 
a handful of fellow experts
who are his peers.

And I said this counts for your direct communication with others as well as making sure your code can be understood by the next engineer. And that one is not necessarily on your team jet, he does not everything about your app jet and probably not even about your problem space and work domain. As, it is not necessary that your grandmother understand your code, a less experienced engineer should.

Sixed Quote

This is the quote, that made me start writing this article:

The greatest impact of the computer
lies in its limitations,
which will force us increasingly 
to make decisions, 
and above all,
forces middle managers to change 
from operators 
into executives and decision makers.

This is so powerful. When managing people, it is enough to say "get it done"(probably more friendly and constructive) and later check how it goes. When developing an application however we have to define every little behavior for any possible circumstances. And that means, we have to make the decision upfront, hopefully before the user encounter that case.

I often have this quote in the back of my head, when asking my boss for the next nitpicking detail, that will be encountered by only 0.1% of users.

Comments

What are your thoughts? are these thoughts outdated? which one quote is new to you?

These quotes are from the book 'The Effective Executive`.

The title picture for this article is from coWoman.

What to do with abandoned projects? BrowserSync

Tobias Nickel — Fri, 06 Nov 2020 06:56:40 +0000

Browser sync let you view your app in multiple sizes and even multiple devices at once. Navigsting in one of the windows, All other windows will perform the same action.

BrowserSync is an openSource project of the company jh.

When I tried eleventy for the first time, it serve the ssg site via browser-sync. I found an issue about a broken link, that leads to a potentially dangerouse fraudulent website.

I created an issue, as asked on browsersyncs website.

Now some time went by, and it seems more and more issues pile up. not answered.

What do you think can we do? The tool is very cool, but it should also be safe and secure to use.

web accessibility with the axe-core module

Tobias Nickel — Mon, 02 Nov 2020 00:51:42 +0000

Accessibility accessibility, as here at dev, we also want want that the apps we develop, can be used by everyone.

Wether people with a hook as their had, a wooden lag, shoot laser out of the eyes, or have not caught Jerry yet. They all want to access your awesome new app, that you build with all the great skills you learn at dev.to.

Today I want to introduce a module, that I recently came across, to help you, that all people can use your site and feel included. If they stand upside down or read minds.

The tool I am very excited now, is axe-core. It is absolutely straight forward to use and provides direct feedback, on what you can do, to show that everyone is welcome on your platform.

My blog, is looking pretty good, strong contrasts in the colors and big fonts. Articles are wrapped in the tag. But I had to learn different. There are several issues. And I will work, to make my page easier accessible by everyone. Even if he let the minions read my page to him.

When analyzing your site with axe-core, you will get a valuable list of issues, that can hold back the one or the other visitor to enjoy your content.

Axe-core not only helping you to find all the little inconveniences that can hold nice people away, itself has a very clean API and command line tool, that themselves are very accessible for every programmer.
You can run it inside your site on client site and get the results on the browser's JavaScript console. The module works well with various frameworks and provides for example integrations for react.

These integrations into our javascript tooling, allow us to have in the complete product development cycle an eye on accessibility and avoid to improve the accessibility as an afterthought.

My blog is a static site, so I simple tested it using the cli tool. First install it with npm install -g axe-cli and then test your site like this: axe http://tnickel.de/.

The tool is not only good for us engineers, it is also good for management. Because, as we know, management loves numbers. With axe we get a single number for accessibility issues, and we can work to bring the number down and with that, the accessibility up.

I would say, now there is no excuse, not to improve the accessibility to your precious content.

API

What? you still need to see an example how to use it with your project? What about using it by adding some scripts-tags to your html?

<script src="node_modules/axe-core/axe.min.js"></script>
<script>

var lastViolations = '';
setInterval(() => {
    axe.run().then(({ violations }) => {
       const violationData = JSON.stringify(violations);
        if (violations.length && violationData !== lastViolation) {
           lastViolation = violationData;
            console.log(violations);
        }
    }).catch(err => {
        console.error('some issue with axe:', err);
    });
}, 10000);
</script>

And yes, this code don't need to be efficient. It only runs on your site during development, not on the users device. and you can probably integrate axe better into your framework, after your redux store dispatch an update after your component updated.

just add it somewhere where it constantly run during your development. Then you will always see tips, how to improve your site. and knows, even presidents who can not read could understand your articles.