JS Basics: One-way data binding

var title = document.createElement('h1');
title.textContent = 'Click and edit me!';

var hero = document.createElement('div');
hero.style.backgroundColor = 'green';
hero.style.padding = '1em'
hero.style.minWidth = '1em';
hero.style.minHeight = '1em';
hero.textContent = title.textContent;

var lblInput = document.createElement('h4');
lblInput.textContent = 'Source data';

var lblOutput = document.createElement('h4');
lblOutput.textContent = 'Output';

title.setAttribute('contenteditable', true);

title.addEventListener('input', () => {
hero.textContent = title.textContent;
});
document.body.appendChild(lblInput);
document.body.appendChild(title);
document.body.appendChild(lblOutput);
document.body.appendChild(hero);

Digital heroin

“…time feels especially shallow these days, as the wave of one horror barely crests before it’s devoured by the next, as every morning’s shocking headline is old news by the afternoon. Weeks go by, and we might see friends only through the funhouse mirrors of Snapchat and Instagram and their so-called stories, designed to disappear. Not even the pretense of permanence remains: we refresh and refresh every tab, and are not sated. What are we waiting for? What are we hoping to find?”

Reading in the Age of Constant Distraction by Mairead Small Staid

Such a beautiful way to paint our social drama. Very good questions put in context by the young author. We are seeking approval for the way we roll. We are seeking advice and leadership. We are hoping to be on the ship when it leaves the harbour. We want to be on board. We are seeking role models and recognition. Although we passed our drinking age limit, we behave like mentally retired people. We age without realising. Technology enslaves as at a rapid scale and only a trained eye can see it. Technology empower as us. It’s our duty to use it ethically, meaningfully.

Instant gratification everywhere

We refresh tabs in our desperate race towards the digital nirvana. Like heroin users, the new junkies of these worlds don’t know when to stop. We lost our mind. The worlds we crate out of boredom and for making more money on the back on the poor (the mentally poor ones) are sick worlds. For the sake of convenience we trade much grater things we should protect in the first place. Takes such education and self abstinence to understand that there is life beyond those screens. Takes courage to read a real book in front of the new herds. Takes balls to stop lying to yourself. We became pussies – masculine, feminine and gender neutral ones. It does not matter. Pathetic pussies being afraid to live our life. We imitate so much that every line between virtual and real life disappears. We are not digital nomads anymore. We are identity crisis nomads. If we can’t find our self let’s create one from scratch. Stop eating your excuses and start the journey today. Read a book and tell others about it.


Peace and love.
JJ


P.S.: This article is not meant to disqualify the importance of technology. Technology is good if you do good things with it. Judge it for yourself.

5 things to consider before building your next website or HTML5 app

TL;DR Fuck fat frameworks. Embrace common sense and copy good design.

Websites for dummies

One thing about websites: they are nothing but content. So start focusing on that today. Start from content up to the technology. Don’t choose your tools until you know whatyou are going to build. Don’t judge tools based on your failure to identify the content you want to share with the world.

Responsivity andresponsibility

The content is responsive. It’s our responsibility to give it enough room to breath. All we have to do is listen to it’s needs. Give it enough space. Don’t squeeze it. Encourage the paragraphs of text to dance on a nice rhythm. You are the DJ of your content. You don’t need to be a designer to appreciate readable paragraphs. Just copy some great text formatting from places such as https://medium.com/ or https://ia.net/. Copying good practice will not hurt anyone.

TTS – Time To Show (made-up acronym)

You don’t need a framework to render the content. You don’t need a framework to display “fast” 10k (ten thousands) elements on a screen. Use simple constructs and be pragmatic in your approach. Here is an example of how you can achieve fast rendering with simple pragmatic building blocks https://jjbewildered.wordpress.com/2019/03/04/js-basics-how-to-render-fast-10k-elements/

Love CSS

CSS is beautiful.Take your time to understand it. It’s a core thing you need to learn once for good in order to have a smooth experience developing web experiences. Don’t jump on fancy tools such as pre-processors, bloated frameworks, CSS-inside-JS shit, unless you really don’t give a fuck about being pragmatic. They exist fora reason. That reason might not be relevant to you. Keep it simple folks. If you ignore learning CSS for good, at one point it will bite you back. Don’t say I did not warn you.

Learn the basics:HTML, CSS, JS

If you do thisfirst, you may realise you have all the tools you need to fix a large set of problems. However, if you wanna learn a fat framework for the sake of learningit, that’s fine too. But don’t choose the tools before you understand the problem.

Keep It Stupid Simple people. He have better problems to solve in this world. Let’s focus our energy on what matters.

Peace and love.

JJ

P.S.: The above advice might not apply to your case. Use your judgement and decide foryourself. You are smarter than you think.

JS Basics: How to render fast 10k elements

var totalElements = 10000;
var getUpdatedProducts = () => {
var products = [];
for (var i=0; i < totalElements; i ++ ) {
products.push({id: i, name: `Product ${i}`, price: Math.floor(Math.random() * 10)+1, description:`Lorem ipsum dolor sit amet ${i}${i}${i}`})
}
return products;
}
var buildElement = () => {
var elContainer = document.createElement('div');
var elTitle = document.createElement('strong');
var elPrice = document.createElement('span');
var elDescription = document.createElement('div');
elDescription.className = 'desc';
elContainer.appendChild(elTitle);
elContainer.appendChild(elPrice);
elContainer.appendChild(elDescription);
return elContainer;
}
var elTemplate = buildElement();
var render = items => {
var documentFragment = document.createDocumentFragment();
var el, name, price, desc;
items.forEach( i => { el = elTemplate.cloneNode(true); name = el.querySelector('strong'); name.textContent = i.name; price = el.querySelector('span'); price.textContent = ` £${i.price}`; desc = el.querySelector('.desc'); desc.textContent = i.description; documentFragment.appendChild(el); }); document.body.appendChild(documentFragment);
}
console.time('render time');
render(getUpdatedProducts());
console.timeEnd('render time');

The Front End Apocalypse

A fiction story about a messy world called front end

TL;DR – Front end is fucked. But we can change that. Shall we?

I am bewildered. We live exciting times yet we refuse to simplify our developer life. We invent job descriptions and bullshit jobs (see https://en.wikipedia.org/wiki/Bullshit_Jobs) rather than ethical ones. We go with the wave and accept to live mediocre lives in complacent environments. We love buzz words. Oh! we love them so much. At the end of the day they are the pillars of our resumes. Our identity revolves around crafted tag lines. We take emotions and like crafty silversmiths we create hashtags as a token for our moments. We tweet to feel something. Why do we focus on the wrong things? Actually why don’t we focus? Why do we live other people lives? We need a manifesto. This bullshit world of front end must stop. Too many undelivered projects. Too many resources poured down the drain for the sake of yet another schizophrenic framework.

Coding is a means to an end, not an end in itself. It’s time to be pragmatic people.

Oh god, front end is fucked! I said it and it feels so good. It’s fucked people. But it’s not all lost. Stop procrastinating. Stop reading mailing lists about the latest shiny bullshit. Stop eating all the bullshit that’s delivered to you via different channels. Stop learning things from your obscure, tunnelled hand-(AI-my-ass)-crafted (pardon my French) ads experience. Stop. Go back to basics. Writing more code is not progress. Using a framework developed by some advertising company will not make you smarter. It will not benefit the humanity. Stop and listen to yourself for a second whenever you are proposing a new “technology”. God (any God you fancy), forgive me for all these swear words. For God’s sake stop being stupid. Stop being a sheep. Coding is a means to an end, not an end in itself. It’s time to be pragmatic people. Ask questions before offering solutions. Let’s help people. Let’s use the right tools for the job. Let’s fix this world rather than add even more shit to the behemoth pile of shit code.

Imagine you are under surgery and the doctor is talking about his new shiny knife rather than performing the surgery.

Write HTML by hand (see https://motherfuckingwebsite.com/). Write it by hand if that means common sense. Generate the interface on the server side if you need to index it. This approach is time tested and is much simpler to implement. Why do we reinvent the wheel? Who cares which solution you choose. Just do your fucking jobs and launch that fucking static website today. Stop procrastinating and learning yet another framework just to show a form on a page. Seriously, this is like a déjà vu from Idiocracy (see https://www.imdb.com/title/tt0387808/).

Stop spending people’s money for the sake of using fancy tools. Imagine you are under surgery and the doctor is talking about his new shiny knife rather than performing the surgery. Imagine you tell your mechanic about your car problem and all he cares about is his new wrench. Most likely the world would be set on fire. I am surprised we are still tolerating this stampede of ignorant attitudes. What the fuck is wrong with us. Software is a tool. Let fucking behave. Let’s do our job with morality. Let’s be ethical.

To all morons (including myself): It’s our duty to fix the mess we created in the first place. I hereby feel the need to create a manifest. In the end, this is how you heard the sheep. Let’s create a religion called: Just fucking do your job. Pragmatically!

Ok, no more waiting, here’s the manifest

1. Follow the rules below otherwise you’ll still be a moron.

2. Read. Read. Read. Read he fucking documentation. Don’t recreate the same shit.

3. Obey your gut feeling and stop being a follower wuss.

4. New things are not always useful.

5. Test my ***. You don’t always need tests. And if you need, think again. And if you really need to test, then again, be pragmatic, for hamburger’s sake.

6. End that mother fucking website. It’s not rocket science.

7. Node JS will not save you when the apocalypse will come. Don’t use it for everything, you moron.

8. Do not lie to yourself.

9. Information is vital. Make sure it’s not fake.

10. Stop writing code if you don’t need to.

11. Find what you love. There is no point in living a miserable life.

12. Undo if it’s wrong. Don’t contribute do the pile of shit code created by morons. Don’t ask for permission to refactor. Grow some balls you little schmuck.

13. Check your clock. If it’s 5 o’clock then go home. You have a life and it’s amazing and worth living. Even that life means more coding.

14. Keep it stupid simple, not stupid. Heard of KISS?

15. Expand your horizon.

16. Do it. Just fucking do it.

So be it.

Till next time, love and be loved. Peace.

The world is beautiful

The world is beautiful. Look out of the window. Stop overthinking. Let’s go away for a while and see if we find the way back to our home. Let’s see if home means to be on the road. Time for change is now. Rearrange your priorities. Make new ones. Dare to do mistakes. Nothing holds you back but your only mind that eats too many ads. Let’s go away for a while and see if you miss any friends. Let’s go away for a while and see if you have any friends or family. Life is about exploring new angles, it’s about smelling new breezes under new suns. Smile back to people. Smile to them even if they don’t smile back.

Stop. Stop eating fast. Enjoy good coffee, good wine. You don’t have enough time on this world for shit stuff. And trust me you can afford anything you want.

Pinpoint your receipts and burn them. It’s time for a change. For a new life. Embrace the imperfection and the mistakes. It’s time to be wrong. Wrong is good as long is good for you and does not hurt people you love.

For fuck’s sake listen to new music. Get out of your register. Make love with the sound waves and stop having excuses to not dance.
There is nothing more beautiful than a sunny morning, a cuppa and a good smile from a stranger.

Till next time take care of your souls and bodies.