Web development (5)

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 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

TID 30 seconds of code

A snippet code website: 30 seconds of code This website provides cool and easy code snippets that can be helpful for web developments. Sometimes, you need CSS animations for a button, a React dropdown or a method to find index with Python. This website can help…

By Marc