BC SOFTWARE
Saved by @CodyyyGardner

Let's create Phineas using CSS in few simple steps😄

THREAD🧵

 STEP 1. Create a head

create a triangle and rotate it so that it looks like a head
STEP 2. Create smile and ear

We have a pseudo elements in CSS, so we can create smile and ear using head::after and head::before
STEP 3. Create eyes

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
STEP 3(I). Create a black pupil

We can create pupil using pseudo element
STEP 3(II). Create white reflection in black pupil

Again make use of pseudo element and create small little white reflection inside pupil
STEP 4. Create moles

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
STEP 5. Create second eye

Same as step 3
STEP 6. Create hair spike

This is the easiest part in my opinions because all you need to make are just random spikes.

What I have done here is just created a border-top 20px and rotate it in order to give it a spike look.
STEP 7. Create hairs

Repeat step 6 and create multiple spikes so that they look like hairs😁
That's all😍

Thanks for reading this thread. Drop a link of your creations below. I love to check them out

More from Pratham 👨‍💻🚀

Pratham \U0001f468\u200d\U0001f4bb\U0001f680
Pratham 👨‍💻🚀...
@Prathkum
Neumorphism is a trendy UI style nowadays. So let's create a neumorphic form using few simple steps

THREAD🧵


Neumorphic design is another UI design that has become popular these days.

Making neumorphic effect is actually pretty easy using only just CSS box-shadow

We'll be creating a neumorphic form in steps👇🏼

2.

STEP 1:

Place a light source(virtually) on screen. In this example I'm considering that my light source is placed top left corner of the screen

3.


STEP 2:

Create a container div and set background color slightly darker than white. I picked #ecf0f3

* Make sure that the color of body and container should be same

CONTINUE...

4.

As we placed our light source on top-left corner, make sure left and top border of container should be brighter than right and bottom border.

This will make the element looks like it has the light source illuminating from the top left corner of the screen.

5.
DESIGN
Pratham \U0001f468\u200d\U0001f4bb\U0001f680
Pratham 👨‍💻🚀...
@Prathkum
10 HTML and CSS tips that you need to know😉

🧵👇🏻

1️⃣ Customize the text selection

- The ::selection pseudo-element matches the portion of an element that is selected by a user.


2️⃣ Range Input

- You can change the styling of input type="range"


3️⃣ Custom Scrollbar

- Customize the scrollbar of your website in few minutes


4️⃣ Scrollable element

- If you have some fixed size element then use overflow: auto. It will convert your element into scrollable element
ALL
Advertisement
Pratham \U0001f468\u200d\U0001f4bb\U0001f680
Pratham 👨‍💻🚀...
@Prathkum
5 amazing websites that will blow the mind of a developer. Definitely check them out

🧵👇🏻

1️⃣ Animation generator

- Dead simple visual tools to help you generate CSS for your projects.

🔗 https://t.co/IFmIEgDiVY


2️⃣ Neural Network Visualizer

- Deep playground is an interactive visualization of neural networks, written in TypeScript using d3.js.

🔗 https://t.co/mTAlFbJsOW


3️⃣ Blockchain Demo

- A visual demo of blockchain technology

🔗 https://t.co/I1RwxYcM1Z


4️⃣ Developer Roadmaps

- Step by step guides and paths to learn different tools or technologies

🔗 https://t.co/VSNPdG8jQR
CODING
Pratham
Pratham
@Prathkum
Five free VS Code extensions that will change the way you do web development:

1. RapidAPI Client

Fulfill all your need for API development.

• Test and consume APIs
• Work with your VS Code theme
• Generate TypeScript, Swift, and Python interfaces from responses.

🔗 https://t.co/FR0QhyTi8v


2. Better Comments

Create more human-friendly comments in your code.

• Alerts
• Queries
• TODOs
• Highlights

🔗 https://t.co/AV2BwAMAlL


3. Git Graph

View a Git Graph of your repository and efficiently perform Git actions from the graph.

🔗 https://t.co/S5wagmTgsa


4. Peacock

Do you have a habit of keeping multiple VS Code windows open?

Peacock lets you change the color of your VS code even if multiple instances are open.

🔗 https://t.co/bmidPkTQOK
ALL
Pratham
Pratham
@Prathkum
12 websites that will help you learn web development faster (completely 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
WEBDEV

More from Software

Andrew Harmel-Law \U0001f3e1
Andrew Harmel-Law 🏡...
@al94781
Software architecture is in crisis, and the way to fix it is a hefty dose of anarchy.


Some lay the blame for this on @boicy with the whole microservices thing.

(Admittedly, @nicolefv, @jezhumble and @realgenekim didn’t help when they statistically proved that he might have been onto something with all that de-coupling and team-alignment…)

However I don’t blame him at all.

I think he saved us; bringing us back to the path of value-delivery and independent services, but now with added independent teams.


But one thing is clear. Microservices need more architecture, not less (as do other forms of #Accelerate-style software organisation).

(See https://t.co/B2hWmXhIqe if you need convincing)

I mean, all those pesky slices we need to carve up our monoliths (or were they big balls of mud?) That’s a significant amount of work right there…
SOFTWARE , ARCHITECTURE
Chris Heilmann
Chris Heilmann
@codepo8
🚨 🦮 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
INTERNET , SOFTWARE
Advertisement
Anson Horton
Anson Horton
@AnsonHorton
1/ In early 2004 we were heads down executing on Edit and Continue across a large contingent of teams. There had been several iterations of scoping, redesigns, and customer feedback.

2/ We had a weekly meeting every Thursday morning when representatives from each of the teams would get together and review progress. It was fairly heavy weight, but there were so many teams involved that it was necessary to have a regular sync.

3/ Regardless, E&C was coalescing, but teams were stretched thin working diligently to enable scenarios, improve performance, fix bugs, etc. It had been a month or so since we decided to add support for C# to the matrix as well, so folks were a bit stressed.

4/ That set the stage for the meeting that we had on the first Thursday in April. A debugger PM named Habib Heydarian ran the meeting and after a brief intro he gave me a ring to come in and present.

5/ I walked in and handed out a document that I had written up, titled DCR: C# Edit and Continue for Venus. DCR meant design change request, and Venus was the design-time code name for ASP .NET support.
SOFTWARE
foone
foone
@Foone
I'm pretty sure whoever designed this control usually makes gender selectors for websites...

Poly Bridge has a language SLIDER.


all languages exist on a spectrum from English to 한국어


next I want to see a game with a "choose language" button and it brings up this language map like it's a skill tree


gonna spend 200 XP to unlock Tamil

that's from
SOFTWARE
foone
foone
@Foone
1. in the beginning, browsers didn't have download statusbars
2. firefox got a browser statusbar extension. it was configurable and worked well
3. chrome cloned it without options and it didn't work as well

4. firefox realized chrome was faster and more secure at everything and therefore dropped extensions
5. now firefox doesn't have a download statusbar either

6. someone reimplements download statusbars in firefox's new web-extensions format. it's terrible because of the inherent limitations of the significantly less flexible and powerful extension format

7. CHROME WINS! (with its terrible download statusbar implementation which can't be fixed by users, because No Options and No Skins and No Extensions)

this is where we are now
SOFTWARE

You May Also Like

Tom Hirst
Tom Hirst
@tom_hirst
How to create a freelancing website that makes money.

Everything I've learned.

A thread.

As a freelancer,

Your website is everything.

First, prioritise its existence.

Second, prioritise its improvement.

The technology you use is irrelevant.

- WordPress
- Notion
- Carrd
- Wix

It doesn't matter which you choose,

What matters is you have a website.

Pick a platform that you're comfortable with.

If you can:

- Capture leads
- Add content easily
- Have a clear design

You're good.

If your website doesn't get leads,

It's not working.

Don't rest on a website that doesn't work for you.

Improve it until it does.
STARTUPS
Aditya Todmal
Aditya Todmal
@AdityaTodmal
Master Thread of all my threads!

Hello!! 👋

• I have curated some of the best tweets from the best traders we know of.

• Making one master thread and will keep posting all my threads under this.

• Go through this for super learning/value totally free of cost! 😃

1. 7 FREE OPTION TRADING COURSES FOR


2. THE ABSOLUTE BEST 15 SCANNERS EXPERTS ARE USING

Got these scanners from the following accounts:

1. @Pathik_Trader
2. @sanjufunda
3. @sanstocktrader
4. @SouravSenguptaI
5. @Rishikesh_ADX


3. 12 TRADING SETUPS which experts are using.

These setups I found from the following 4 accounts:

1. @Pathik_Trader
2. @sourabhsiso19
3. @ITRADE191
4.


4. Curated tweets on HOW TO SELL STRADDLES.

Everything covered in this thread.
1. Management
2. How to initiate
3. When to exit straddles
4. Examples
5. Videos on
OPTION SELLING , OPTIONSTRATEGIES , CATEGORY
Advertisement
Ranvijay Singh\U0001f1ee\U0001f1f3
Ranvijay Singh🇮🇳...
@ranvijayT90
#Thread Two divine forms of Khatu Shyam ji...


On the day of Amavasya, devotees get the darshan of Shyam Baba in Shyam varan (black color). In ordinary days, the form of Baba is saffron. The reason for this is a custom. The real head of Shyam Baba which had appeared from Shyam Kund is of Shyam varan.


Every day Shyam Baba's grand Shringar is done by Pujaris. The main part of Shyam Baba's shringar is Tilak. This Shringar is done by the members of Nij Mandir sevaks. The sevaks of the Nij Mandir do sandalwood tilak to Baba everyday in the auspicious time.


This Divine Tilak is applied from the forehead to the nose. When Baba is given a bath by sevaks, this tilak comes off. Then in the auspicious time, the sevaks again apply tilak to Baba.


There is no auspicious time on the Amavasya. Because of this, tilak is not done on that day. That's why devotees have darshan of Shyam Baba on the Amavasya only in the actual real form (Shyam Swaroop). Baba's tilak is done on Amavasya only on the day of Deepawali.
ALL
SK
SK
@sk_diary1
#sculpture #story -

Chandesha-Anugraha Murti - One of the Sculpture in Brihadeshwara Temple at Gangaikonda Cholapuram - built by Raja Rajendra Chola I

This Sculpture depicts Bhagwan Shiva along with Devi Paravathi blessing Chandeshwara - one of the 63 Nayanmars.

#Thread


Chandeshwara/Chandikeshwara is regarded as custodian of Shiva Temple's wealth&most of Shiva temples in South India has separate sannathi for him.

His bhakti for Bhagwan Shiva elevated him as one of foremost among Nayanmars.
He gave importance to Shiva Pooja&protection of cows.


There are series of paintings, illustrating the #story of Chandikeshwar in the premises of
Sri Sathiyagireeswarar #Temple at Seinganur,near Kumbakonam,TN

Chandikeshwara's birth name
is Vichara sarman.He was born in the village of Senganur on the banks of River Manni.


His Parent names were Yajnathatan and Pavithrai.
Vichara Sarman was a gifted child and he learnt Vedas and Agamas at a very young age.
He was very devout and would always think about Bhagwan Shiva.

One day he saw a cowherd man brutally assaulting a cow,Vichara Sarman could not tolerate this. He spoke to cowherd: ‘Do you not know that the cow is worshipful & divine? All gods & Devas reside in https://t.co/ElLcI5ppsK it is our duty to protect cows &we should not to harm them.
ALL
Andrew Chen
Andrew Chen
@andrewchen
👇 Thread. New deck getting published this week: "Consumer startups are awesome, and here's what I'm looking to invest in at Andreessen Horowitz." If you want to read it, subscribe to my newsletter here: https://t.co/262t8eh0wf


1/ A lot of new consumer technologies have been introduced to US households in the last 100 years. But it's taken many of them - like the telephone - more than 50 years to get to the majority of the US. Why is that?


2/ We had to literally teach people how to use phone. Which end goes to your mouth, which goes to your ear. Say "hello" when people call. The motivation of consumers to talk to their friends has always been there, but we had to teach the behavior


3/ If you compare phones to the latest technologies, there's been a huge shift. Things are being picked up much faster.


4/ Even while there's been all this innovation recently, physically speaking, we are still the same human beings from 100,000 years ago.
STARTUPS