TIL (9)

Today I learnt

TIL how to make my own codepen like

To make your own codepen like, you just need to follow these instructions: <body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i></iframe></body>And.. tada.. you should see womething like this: You can add your own html/CSS/JS code to test your snippets This code can be tried on…

By Marc

TIL auto fit multiple column with CSS grid

 If you don't knwo how may items you will have and want them to fit in a row, you can use CSS grid. It is a powerful CSS feature (with my favourite flexbox)..container { display: grid; grid-template-columns: repeat(auto-fit, 160px); justify-content: center; gap: 20px; }The tricky…

By Marc

TIL how to reset a HTML input file

When you want to upload a file, you often want to see a preview before sending it. To do this, I show a preview in a canvas. But even if I close the preview part, the input is still loaded with the selected filed. So,…

By Marc

TIL how to change url without updating page in browser

In a Next.JS / React project, I needed to update query params in URL to match values updated in a form. But I didn't want to reload and refresh the page completely because when the form is sent, the answers are updated by an API…

By Marc

TIL how to listen to a Hubspot submit form event

For my current project, I need to send data to hubspot via a form. This form is managed by Hubspot and injected in my code during runtime. I cannot modify the sumit button behaviour. I dealt with this problem by listening the click event when…

By Marc

TIL how to keep macOS desktops order

I use a macbook almost every day, and I have a lot of apps opened all the time : iTerm2, Firefox, Spotify, Spark, Slack, VSCode and more... I like to have them displayed on differents "desktops" to switch between apps fast with my mouse. Until…

By Marc

TIL Git push --atomic

For continuous integration puropses, I need to be sure some of my commits are all done together. If some fail for some reasons, I have to reconciliate everything t o be sure it is ok. After some research, I found a git command that helped…

By Marc

TIL clip-path CSS animation

I learn how to use clip path in CSS with animations to give my website a better user experience. I followed this course from DesignCourse channel: You can find the corresponding Codepen here: https://codepen.io/designcourse/pen/vqPWbJ Enjoy!

By Marc

TIL - TID - What and why

By this new blog, I want to share what I learn every day and what I discovered. Tht's why you will see two types of articles: TIL for Today I Learnt and TID for Today I Discovered. It has two functions: it <ill help to remember…

By Marc