create a triangle and rotate it so that it looks like a head
Let's create Phineas using CSS in few simple steps😄
THREAD🧵
We have a pseudo elements in CSS, so we can create smile and ear using head::after and head::before
This is the most trickiest part because in order to make an eye we have to create
- One bigger white circle
- then a small black pupil inside white circle
- then a small white reflection in black pupil
Let's create a outer white circle first
Again make use of pseudo element and create small little white reflection inside pupil
Well CSS art is all about creative ideas and solution. In previous step we made oval shape white reflection. We can also create moles using shadow of the white element(reflection) and align them properly
More from Pratham 👨💻🚀
9 websites that will help you learn web development faster (they are free) 🧵
1. How HTTP Works
Everything you need to know about HTTP based system.
🔗 https://t.co/gVZS4RzS1a
2. 30 Days of Node
Learn Node step by step with interactive examples and code snippet in 30 days.
🔗 https://t.co/9nbtMiNB1C
3. How DNS Works
Learn what happens when you type a website address in your browser
🔗 https://t.co/SqMRNnDbc3
4. Git
Check out this excellent free website to learn git visually.
🔗 https://t.co/rQJMISBDfS
1. How HTTP Works
Everything you need to know about HTTP based system.
🔗 https://t.co/gVZS4RzS1a
2. 30 Days of Node
Learn Node step by step with interactive examples and code snippet in 30 days.
🔗 https://t.co/9nbtMiNB1C
3. How DNS Works
Learn what happens when you type a website address in your browser
🔗 https://t.co/SqMRNnDbc3
4. Git
Check out this excellent free website to learn git visually.
🔗 https://t.co/rQJMISBDfS
More from Software
The Great Software Stagnation is real, but we have to understand it to fight it. The CAUSE of the TGSS is not "teh interwebs". The cause is the "direct manipulation" paradigm : the "worst idea in computer science" \1
Progress in CS comes from discovering ever more abstract and expressive languages to tell the computer to do something. But replacing "tell the computer to do something in language" with "do it yourself using these gestures" halts that progress. \2
Stagnation started in the 1970s after the first GUIs were invented. Every genre of software that gives users a "friendly" GUI interface, effectively freezes progress at that level of abstraction / expressivity. Because we can never abandon old direct manipulation metaphors \3
The 1990s were simply the point when most people in the world finally got access to a personal computer with a GUI. So that's where we see most of the ideas frozen. \4
It's no surprise that the improvements @jonathoda cites, that are still taking place are improvements in textual representation : \5
The Great Software\xa0Stagnation https://t.co/A6peSPERaU
— Jonathan Edwards (@jonathoda) January 1, 2021
Progress in CS comes from discovering ever more abstract and expressive languages to tell the computer to do something. But replacing "tell the computer to do something in language" with "do it yourself using these gestures" halts that progress. \2
Stagnation started in the 1970s after the first GUIs were invented. Every genre of software that gives users a "friendly" GUI interface, effectively freezes progress at that level of abstraction / expressivity. Because we can never abandon old direct manipulation metaphors \3
The 1990s were simply the point when most people in the world finally got access to a personal computer with a GUI. So that's where we see most of the ideas frozen. \4
It's no surprise that the improvements @jonathoda cites, that are still taking place are improvements in textual representation : \5
Kubernetes vs Serverless offerings
Why would you need Kubernetes when there are offerings like Vercel, Netlify, or AWS Lambda/Amplify that basically manage everything for you and offer even more?
Well, let's try to look at both approaches and draw our own conclusions!
🧵⏬
1️⃣ A quick look at Kubernetes
Kubernetes is a container orchestrator and thus needs containers to begin with. It's a paradigm shift to more traditional software development, where components are developed, and then deployed to bare metal machines or VMs.
There are additional steps now: Making sure your application is suited to be containerized (12-factor apps, I look at you: https://t.co/nuH4dmpUmf), containerizing the application, following some pretty well-proven standards, and then pushing the image to a registry.
After all that, you need to write specs which instruct Kubernetes what the desired state of your application is, and finally let Kubernetes do its work. It's certainly not a NoOps platform, as you'll still need people knowing what they do and how to handle Kubernetes.
⏬
2️⃣ A quick look at (some!) serverless offerings
The offer is pretty simple: You write the code, the platform handles everything else for you. It's basically leaning far to the NoOps side. There is not much to manage anymore.
Take your Next.js / Nuxt.js app, point the ...
Why would you need Kubernetes when there are offerings like Vercel, Netlify, or AWS Lambda/Amplify that basically manage everything for you and offer even more?
Well, let's try to look at both approaches and draw our own conclusions!
🧵⏬
1️⃣ A quick look at Kubernetes
Kubernetes is a container orchestrator and thus needs containers to begin with. It's a paradigm shift to more traditional software development, where components are developed, and then deployed to bare metal machines or VMs.
There are additional steps now: Making sure your application is suited to be containerized (12-factor apps, I look at you: https://t.co/nuH4dmpUmf), containerizing the application, following some pretty well-proven standards, and then pushing the image to a registry.
After all that, you need to write specs which instruct Kubernetes what the desired state of your application is, and finally let Kubernetes do its work. It's certainly not a NoOps platform, as you'll still need people knowing what they do and how to handle Kubernetes.
⏬
2️⃣ A quick look at (some!) serverless offerings
The offer is pretty simple: You write the code, the platform handles everything else for you. It's basically leaning far to the NoOps side. There is not much to manage anymore.
Take your Next.js / Nuxt.js app, point the ...
🚨 🦮 Seven ways to test for accessibility using only what is already in browser developer tools of Chromium browsers https://t.co/C7kdbigHGE
@MSEdgeDev @EdgeDevTools @ChromiumDev
#tools #accessibility #browsers
Also, a thread: 👇🏼
Issues pane, powered by @webhintio, listing accessibility issues with explanations why these are problems, links to more info and direct links to the tools where to fix the problem. https://t.co/4K5RynHhbg
The inspect element overlay showing accessibility relevant information of the element, including contrast information, ARIA name, role and if it can be focused via keyboard.
Colour picker with contrast information offering colours that are AA/AAA compliant. You can also see compliant colours indicated by a line on the colour patch.
Note: the current algorithm fails to take font weight into consideration, that's why there will be a new one.
Vision deficit ("colour blindness") emulation. You can see what your product looks like for different visitors.
https://t.co/bxj1vySCAb
@MSEdgeDev @EdgeDevTools @ChromiumDev
#tools #accessibility #browsers
Also, a thread: 👇🏼
Issues pane, powered by @webhintio, listing accessibility issues with explanations why these are problems, links to more info and direct links to the tools where to fix the problem. https://t.co/4K5RynHhbg
The inspect element overlay showing accessibility relevant information of the element, including contrast information, ARIA name, role and if it can be focused via keyboard.
Colour picker with contrast information offering colours that are AA/AAA compliant. You can also see compliant colours indicated by a line on the colour patch.
Note: the current algorithm fails to take font weight into consideration, that's why there will be a new one.
Vision deficit ("colour blindness") emulation. You can see what your product looks like for different visitors.
https://t.co/bxj1vySCAb
