Web developer for 10 years with an interest in UX design. Freelancer.
I publish coding tutorials on YouTube, create demos on CodePen, and complain about bad UX.
@daboigbae
Yes and no. A boot camp won't make you a developer with the same knowledge as someone who studied it deeply.
On the other hand, you barely need anything slightly more complicated than a for loop in day-to-day work.
I'm exaggerating of course, but both sides make sense.
I'm happy to announce that I published a new website for creative coders: . Learn what is behind the source code of an SVG and how to code fun little images step by step. (I'm still trying to figure out why the previews don't work on Twitter, any guesses?)
@GergelyOrosz
Then Figma figured out how simplify collaboration and handover to developers in a browser. And how they did it is also crazy from a technological perspective. I guess Sketch being MacOS exclusive didn’t help that much despite designers mostly using Macs.
¿Quieres construir un sitio web, pero hay muchas herramientas?
Estás trabajando en JS ¿Qué necesitas para comenzar?
En esta guía de JS
@HunorBorbely
te muestra, paso a paso, cómo configurar su proyecto de desarrollo front-end.
Traducción por
@DevJulio1
Made an interactive logic gate simulator. One of those things you think you'll finish in a weekend, but then spend a month on it:
#javascript
#VueJS
#SVG
#electronics
I saw many examples here on X that don't use Prettier and it drives my OCD crazy.
Prettier is the industry standard code formatter that makes sure that your code not only works but is also readable by others.
Here are 3 quick tips to get the most out of it 🧵
You can inline an entire SVG in CSS. In many cases, an SVG feels like noise in HTML. An icon is more like styling than content. In this step, we learn how to use the background-image property to define an SVG in CSS and how to create background patterns
I’ve spent some time lately figuring out how Vue’s reactivity system works and wrote an article on
@css
about making localStorage reactive:
#vue
#VueJS
#javascript
Putting together a 3D scene in the browser with Three.js is like playing with LEGOs.
You put together some boxes, add lights and a camera, & Three.js renders the 3D image.
In this tutorial
@HunorBorbely
helps you build a simple car with texture in 3D.
The first 30 days of SVG Tutorial. The massive boost came from HackerNews; the second spike was the after-effects of that. Been featured in at least one newsletter and many blogs and link collections. Now it's down to a couple hundred daily visitors and I expect to fade away.
An SVG image can also be generated from code. Using a frontend library like React makes it quite convenient to generate a diagram. Ever wondered how the D3 library generates those nice diagrams? Yes, they generate an SVG.
I'm working on my first contribution to the Mozilla Developer Network documentation. Part of the process is to fork it and patch it on my local computer. Now I'm realizing how cool it is, that I can run the entire MDN docs without internet on my computer. It's only 826 MB.
You can not only move SVG properties to CSS, but you can even animate some. You can create a keyframe animation that changes the transform property. In this example the bell starts ringing on hover:
Some of my goals this year:
- 10K followers on YouTube,
- Land freelance jobs or a regular job with 100K salary,
- Gain a few kilograms of muscle,
- Read at least a book every month,
- Go down to zero inbox,
- And write a journal every day.
What's yours?
@girllovescoding
Earlier I was full on SPA, but since I discovered Astro I realized most websites really don’t need to be a SPA. With server side rendering you get better performance, better SEO and with Astro it’s also easier to develop them.
All right, thank you for tuning in. With the last piece of the SVG Tutorial, I wish you a happy holiday season, and then I retire this project until next year. See you soon with other stuff :)
After taking some time off I'm open to freelance jobs. I'm a senior full-stack web developer focused on frontend with a deep understanding of React and Vue. Check out the various things I do on my website:
#jobsearch
#devjobs
#webjobs
#developerjobs
Combining SVGs with JavaScript doesn't stop with manipulating SVG elements from code. You can also add event handlers to individual SVG elements. So if you need an image, that has interactive parts then you can do that with JavaScript
In 3 days my last tutorial on Three.js and Cannon.js reached a thousand views, became my most liked video, and got me 100+ new subscribers. I'm super glad it found it's audience 🎉
#threejs
#cannonjs
#javascript
#creativecoding
A couple of you asked why would anyone code an SVG? There are designer tools for that. For the most part that's true. But it opens up a whole new world when you combine SVGs with JavaScript. In this example, we create a clock that shows the actual time
@astralwave
While highly interactive web apps are obviously more responsive with client side rendering (or hydrated or something) most of the web is boringly static.
I also just started realizing that for a lot of my projects I really don’t need client side rendering. And with server side
@TheJackForge
Someone once told me she likes Android better because it’s so bad and slow, that as a consequence she’s wasting way less time on her phone since she got one.
If you are wondering how is it in Italy, today I climbed up to the tower of an abandoned castle somewhere in the Alps. More on that in my Instagram stories:
I love this. Vue is considering adding syntactic sugar to simplify code, and while that's a step away from standard JS, it would be a huge step forward for non-dev people who just want to patch together a website. Here's my take on it:
#VueJS
#javascript
@thejorgemedina
@loganthorneloe
Ah, I was wondering for a bit, how you got the image bigger, then I read the rest of the post. Super cool! Also, how did you make this screenshot? Is it a tool like Carbon, or is it also custom?
My next YouTube tutorial is going to cover a remake of the 1991 classic game Gorillas with plain JavaScript. The game will feature destructible buildings, bright and dark modes, and even computer logic, so you can play it against the computer. Stay tuned! 💣🦍
Up next we have
@HunorBorbely
with his talk Stand Out From The Crowd With Online Presence.
He'll chat about the different things you can do online to stand out in your job applications whether it's via CodePen, blogposts, YouTube ETC.
🎟
Guess who's YouTube channel just reached the 2000 subscribers milestone? Yep, thank you all for your support! More videos coming as the winter season is coming!
Check it out for web development tutorials👇
As the ultimate drawing challenge with SVG, we draw a bear. We use circles, rectangles with rounded corners, and different Bézier curves and we move as many properties to CSS as possible:
@eloffd
With the first job I was lucky I guess. Went straight to a paid internship after university. For the second I built up a portfolio of hobby projects on CodePen
It's time for SVG! New SVG + JavaScript tutorial coming up next week on my YouTube channel! We go in-depth with some of the trickier SVG properties, then add JavaScript for animation and event handling! Watch out!
The Arc To command in SVG has seven different parameters. They can be quite confusing at first, but if you only want to draw a half circle, most of them you can ignore. Here's how to use it to draw a candy:
If you've ever built a game in JavaScript, you've likely come across Three.js.
It's a library that lets you render 3D graphics in the browser.
In this article
@HunorBorbely
teaches you the basics by drawing a box (it's more complex than it sounds!).