There's a lot of people above 30+ that aren't too PC-savy in the Traffic Management field. Especially folks who worked with me. This addon is the perfect solution for them.

Why would You use it? Well imagine a situation. You are filling the current project with blocks (traffic signs) and for each traffic sing You have to perform an action:

And boom. There You have it. Pretty simple right? Perhaps there's not really a need for a thing like this? You'd be correct without seeing more.

What plays a big role here is that the traffic signs can be 'custom made'. Currently in our database there's around 500 traffic signs. Each with their custom name. Rememebering all of them is impossible.

So what do You do when You can't remember then?

You have to find them in the dataset and copy paste them. And now that takes a lot of scrolls to do. As much as the INSERTBLOCK command would take me, someone who has 93 WPM merely a second, this process however is gonna take 10-15 seconds. Not to mention, if You're working on a big project, good luck with the lags.

And to top it off, bigger projects that affect entire cities can easily have more than 1500 traffic signs. Suddenly the addon that turns it all into a simple 2 clicks process, doesn't sound bad.

Another simple script in Python that has speed up the work process for folks who write slow

Bricscad Addon to help speed up the work process yet again!

This is going to stay on the top of my web dev portfolio soon. It will utilize everything I've learned and that can be used in a NEXT.js project.

I'll try to optimize it as much as possible.

Wish me luck and for now, You can see the code and some previous images here:

Even though I've made websites based on functionality of some of the most known services like Facebook or Instagram, I'm still not a fan of just re-engineering stuff. This one started as an Airbnb copy, but now it's got it's own big twists!

Nippon Air - a Travel / Flight / Housing Company

I'm still working on other pages for it, but once I'm done You can see it here:

https://www.christophersaffron.com/en/project/ecommerce-figma

Inspired by Aliexpress, this one will be perfect for the future PHP projects

E-commerce in FIGMA

Another website design I've prepared in my free time. Will use it for some Nuxt.js portfolio anytime soon!

https://www.christophersaffron.com/en/project/winery

Perhaps You'd like some wine to Your cheese? I'll turn it into a website eventually!

Winery shop in FIGMA

Favourite asian restaurant's website is outdated, images on mobile have issues with loading, the only nice thing going for them is the restaurant's cool name.

Figured I could make something better myself.

This design will be used for when I'm going to use Vue.js for a bigger projects.

Check out more of the design on my website:

https://www.christophersaffron.com/en/project/asian-restaurant

Another take on making website blueprints in FIGMA

Asian Restaurant in FIGMA

The discovery of FIGMA has been an incredible milestone for me. All thanks to one job offer that had it in their requirement list. And being the curious me that I am, I simply picked up the challenge to learn it.

https://www.christophersaffron.com/en/project/szafran-projekt-firma

After studying and making components in FIGMA for quite some time already, I thought it's time to finally utilize it on some older projects.

SZAFRAN-PROJEKT in FIGMA

Preparing maps and filling them with traffic props is an essential part of work in road designing. At least where I live, there's two options on how to approach the topic. You can either try and get a map of terrain from the local government - which as always, will be costly, to the point where accepting the deal roughly translates into not making any money from the project. 

The second option is to use internet maps, which both are legal and free, as long as we give them credit where credit is due. But, usually there's not many options You can include when You download maps like this. Scale could be wrong, some options You had on the preview won't be seen, etc.

Therefore, everyone in the business turns to manual map making by joining together as many screenshots from the map as needed. 

Sometimes such thing could take hours. With my tool it takes minutes.

This seems to be the third time I have speed-up this process. Around 6-8 years ago, when my father and his colleagues (5 people from all ages) asked me for help with cleaning up the maps from colors - as in, taking a bucket tool in any image editing software, because they were short on time. I couldn't believe that there's no faster way of doing it.

And so I searched and searched. With free software it sure looked like there's no better way to do it. As any 'color change' would affect the silhouettes of objects, which had to remain pure black.

Until I tinkered around paint.net and just used the bucket tool but with custom settings. It saved everyone HOURS of work.

AND NOW THIS WHOLE PROCESS IS FULLY AUTOMATED.
SCREENSHOTTING? Automated.
JOINING SCREENSHOTS TOGETHER? Automated.
CLEANING UP THE COLORS? Automated.

I'm on the verge of starting to send my CV and Portfolio around, but I just can't take my mind off of automating other stuff.

Sometimes hours of work turned into 10 minutes. Extremely simple, extremely helpful.

Automated brute-force map creation

So far I love how much I can do with basic modules. So many things I couldn't really do by making websites. Although I'm pretty some if not all of those things could be done with just NodeJS alone - but still.

The autoclickers, auto-typing functions just come in so handy in so many events it's crazy. 

I felt slightly lost until I got myself some GUI to go along the code - that was an incredible efficiency boost!

Now I'm currently working on some brute-force automation of some of my BricsCad work.


I'm pretty sure I'm going to save weeks of work thanks to it. If not more.

To be frank, I really expected myself to be more confused by how different Python is from Javascript. It's relatively similiar and also extremely inviting thanks to the possiblities.

Experimenting with Python

Ok, this one better comes with a narration.

Imagine You have a 6 terabytes of projects from years of work. They're all segregated from 0 to anything above on each hard drive. You make an excel sheet in which You have additional info about each project. Like how much it costs, the status, client info, and a couple more.

Now imagine that at one point in life, You could reuse 1(ONE) specific file from a project You know You did, but You have no idea where it is. And so You can look through all the hard drives, sure. Or better yet, You can try the never faulty always helpful windows search. Good luck with that.

This website simply joins two sides, it creates folders, stores the uploaded files in them, and also keeps the data about the project in them. Of course it also allows You to change the data. It's 2 in 1.

And more importantly it has a search function to quickly find projects.

It's not some peak engineering but more of an organizing tool. 

The server I made for the local PC wasn't perfect. I figured something smaller can also make do.

File archive and an excel like sheet

Working with Dates can be fun or a challenge.

This time? It was fun! Until I realized something was off and that the calculations weren't right. Went through dozens of posts from stackoverflow and as much as some things did help, it was almost always, not perfect. Being off 1 day or 1 month - it doesn't look the best.

At one point I figured it out and there was almost never a mistake. But eye for an eye. Bug for bug. Now I couldn't select dates from a certain age as it would break the whole website.

I'll return to it at one point, but now I'll just hope that nobody is going to use that website too much..

A silly little thing I made to scare myself into working. It works almost always (never)

Memento Mori

Showing off is almost always considered rude, but if it goes to portfolio, perhaps people look at it different. At least I'm hoping so!

React-leaflet is a great tool. For the szafran-projekt I had to watch a vietnamese/burnese/cambodian video, as it was the only guide that covered a similiar "topic/issue" that I've had with it. Now it was much easier. (Thank God)

I have that one pointless fear with all transaction based apps, that one day somehow, I'm not gonna be using test-mode and my money is gonna say byebye. Thankfully, not this time. I'm using paypal on daily basis so I figure, knowing how it works is gonna come in handy.

The ThreeJS was just a random thing I thought I can add for funzies. That's honestly all I can say about it :)

Oh and a small MongoDB cluster to keep some data so it looks more like an actual fully fledged website!

The all rounded website that nobody asked for, but everyone is interested in!

Mapbox + Paypal + ThreeJS + Mongodb with AirBnB

First of all, dummy APIs. I wish all the devs working on those a great life.

Now, I've tried using STRIPE even in 2019 but that was way above my league back then. Having to go from frontend to backend and then to STRIPE servers - not the hardest thing but definitely can be mundane.

With Next JS that issue was gone, doing all the transactions without 'an actual server'? Convenient to say the least.

Also, as to not bother making a firebase for this project, as I feel it would just be a filler, I allowed myself to simply store the data in the sessionStorage, not localStorage so to not clutter anyone's web browser.

Simple as that, for the cherry on top - using sessionStorage to keep track of the user orders.

Utilizing STRIPE on a Commerce website

Not much to say, cut out a couple of sections, made it more clear, used some  great NEXT-JS features such as Image to make images responsive.

The question was how to migrate GSAP. And boy oh boy. Some of the functions worked correctly. Some were starting twice - but that's the strict policy. Some weren't starting at all, and that was the breaking point.

I came up with a simple solution - react-observers and I'll just add classes when the viewport reaches a certain point. Simple as that, and with that, all the problems were gone.

SZAFRAN-PROJEKT migrating to NEXT-JS and Tailwind

Next JS is amazing, the NEXT 13 version is also looking interesting. Concepts of server-side rendering are so good they make me want to redo my portfolio website from zero. But the time it would take just doesn't sound convincing...

With Next JS comes next-auth for authorization, solid tool, will remember it.

I think I've avoided Firebase for a very long time. Just because I preferred working with Mongodb and MySql. Yet here we are. Starting to really like it.

Shame to admit, but I knew about the sockets that wait and can run functions on certain events. Eh, long story short - I just realised databases like Firebase and Mongoose can provide functions like "onSnapshot" and update data in real time. Well, thanks firebase for opening my eyes.

And wait! There's more! It has in-built plugins and tools that connect everything for You? (example - stripe extension) What's there not to like.

Well there's one thing not to like, although it's unrelated to Firebase. Facebook authentication has been a rather annoying experience. To the point where I'm on the verge of simply replacing it with the trusty google auth. And I think that's the way to go.

I used bootstrap in 2019, but preferences change, now tailwind is my best friend. Convenient and comfortable.

Next-JS and tailwind enter the stage

Quite some time ago I wanted my portfolio to start with a video and some animation after the user click's some button in the middle. Who would have thought I would use my own self-made looped video AND a 3D object to perform an animation for that idea to come true.

Had a struggle choosing which object should be in the middle. I wanted to go with the mystery, somewhat asian shrine mood. Should I go with the Tori Gate, or should I go with the rectangle?

Tori would give be a headache thinking how 'going through it' would make a good transition to a different scene. But it would be doable, that's for sure, just, would it really be worth it? The solution would be to create a transparent, 2-part face (in 3D Modeling terms - a 4 pointed wall) that would slowly become more visible, and extend from the poles, then join in the middle.

Or, I could just make a rectangle that would just extend like a door once the user clicks it?

It was already a tough fight as doing animations like these usually requires knowledge of either gsap or react-spring.

I knew gsap from other projects but react-spring was a new Ffor me and I went for it. It did it's job perfectly. 

Anyway back to the topic of the video. Gotta add that the grass spam did well on making the scene not look too bland.

Had to think about a scene for the whole 'show'.

Looped video for the 3d portfolio

Just a head's up. This post is full of unnecessary gratitude.

I was ready to do this project full vanilla, but discovering Three-JS was the best goldmine I could have asked for. Though, I could have asked for better examples in their docs, because ThreeJS is just sugarcoated vanilla JS it still uses the vanilla concept. Perfect example - react. First contact with react takes You to another dimension, it feels like all that You have learned up till no wasn't really important. In this case it only took half of my body to another dimension, if You catch my drift.  The other half had to stay in the vanilla webGL docs domain.

Anyway, it's still a great tool and an absolute godsent.

Now, the bad thing is? I had much bigger plans, in blender nothing is really stopping me, making a looped video in blender is easy. But making it render on the website? AND making sure visitors don't get their PCs fried? Or worse, phones? I had to go into low-poly mode for this. But hey, had to manage somehow.

3D Portfolio

It's difficult to design onethat hasn't been done before. 

Since I can't guarantee that I'm gonna make something outstanding, I figured I'll at least do something not common. That also utilizes other things I can do.

This is a background scene for the RESUME tab.

Portfolio website

To simplify the workload, I've used MUI Elements and custom stylized them.

At one point I've stopped sending updates to github as I feared for any potential security problems.

The server had a tab for projects - and an archive for them and their files, clients and their credentials. As well as graphs with stats and a very convenient mapbox that would help us find maps that we already have and used, so that we don't waste time making new ones.

In details, the mapbox would create polygons from selected coordinates and point to a project that uses them. Unfortunately the coordinates had to be selected manually on a map - but what's the problem clicking 4-8 times to select a region?

Client + server that would run on family pc so that the other devices can connect to it locally.

SZAFRAN-PROJEKT-SERVER

Quite frankly it's not just redesigning. The website had a contact section in which the possible client could write to us not from a mail, but from the website itself. Which means - we're about to build more and more over it.

One thing wasn't adding up. All transactions and details were ALWAYS going through email. Facebook, messenger or anything in between won't do it. No matter what topic or project - it's a business that touches over government related stuff. Emails were a must and other options were just to make it look better.

But thanks to that, it only means there's going to be less work and less server hosting on the backend side!

That's the amount of props I had prepared or worked over just for that one website.

It was a challenge due to it's simplicity. The business is good and the clients are there, but how can You sell a "government like service", where there aren't any "basic/premium" options? It's simple to design a clothing store, where You can have cool and easy tags, descriptions, categories. But how can You flamboyantly say and sell to the client that "You do projects for temporary road work"?

And it's not everything. This is not a business that puts the required traffic signs in place, this is a completely different and separate part and there are companies specializing in ONLY that too. 

So to put it in a simple version, imagine designing a website that doesn't sell SHIRTS. It sells only one particular shirt to everybody, and wait for it - it's only half of the shirt. But again, that's how this business looks on the market.

There was a lot of thinking but I've also come up with some simple logo designs.

SZAFRAN-PROJEKT-REDESIGN

Shame the website for my old employer couldn't be sold. But nothing to worry, the written code will be perfect for the frontend and backend I'm about to develop for my father's company.

Nothing goes to waste. The old no longer soldable website will be a great starting point for my father's website.

SZAFRAN-PROJEKT

I've worked there for a while and I can't say I know all about it - in fact probably not even half of what's going on. 

However, I knew that a website could fix AND SPEED UP TREMENDOUSLY all work spaces in there.

Schedule was done on paper everyday in the morning, due to shortage of workers and them skipping work. So just having a website available to all workers at any time - even a place where they can just simply SAY they can't make it to work today, was a brilliant idea.

An archive for projects, with all the data available at anytime? Splendid.

BUT the greatest point was a 3D Storage that I made which would hold all real-life traffic signs in their current spots. It was my first introduction to WebGL. Dear God am I glad there's a thing called Three JS out there. Vanilla WebGL has been a drag and even simple functions would take hours to figure out.

Overall, it was a great project which I believe took me a month? If not more. Obviously we have to take in account that I was also working on Bricscad projects in the mean time, so this website wasn't getting the classic 9-5 attention.

However, all things considered, the website did not get to see the light of the day. I was considering selling it to the old employer, but, well, after hearing that they weren't doing good financially, selling them a website which COULD have been faulty at some point - was a very unattractive option.

Given that so much work was done with a pen and paper I was really digging the improvements I can bring to them.

Website for my old employer

freeCodeCamp wasn't the best but it was a great 'warm-up'. 

I'd say it's the same as duolingo for language learning. Not great, not terrible - but a great introduction nonetheless!

Project Odin felt like it was quite nice, however the walls of words - which don't get me wrong, were great knowledge - just felt many times overwhelming and not really that usefull at the moment?

Well! But here we are and I'll be trying to make my own stuff and just use either some guides or I'll go straight to the docs.

I've used those as guides for learning before, and now as a revision. However from now on I'll be doing my own thing.

Branching off from FreeCodeCamp and Odin Project

I had started coding in 2018/2019 but due to circumstances I stopped. And would You look at that, I have officially come back on the year 2022. That's it, this message is just for the record.

The year 2022 Is officially the year where I have returned to coding

Disclaimer

Wheather someone likes AI or not, it's difficult to say they look bad now. However, they can't be more than placeholders for real images or art. At least in the business. Right?

Although - not going to lie - it can come up with some great eye-catching designs.

Recently, I have developed a peculiar love towards AI generated images.

Second Post

Perhaps this blog should have been one of the first things to make, but hey, better late than never! This is the first post on my blog! Hopefully I won't forget to run it.

Hello and welcome to my blog

I develop websites, edit videos and images, create 3d objects and work on road design.

Feel free to look around, perhaps You'll find something that catches your attention!