JS for Designers @jsfordesigners
Tweet-sized JavaScript lessons for designers. Start at the bottom of the timeline to follow the lessons in chronological order. Ping @bdc with any question! Joined December 2013-
Tweets75
-
Followers1K
-
Following1
-
Likes0
Example summarizing some of the principles we've learned so far: a simple todolist interface sharedfil.es/h5UPm7qtRb (view source).
Until now, we've used anonymous event handlers but those functions can also be declared if you need to reuse them: sharedfil.es/xfEAq3kjom.html
A more advanced function example: make document.querySelectorAll friendlier to use by abstracting a for() loop cloudup.com/cZWQhzD-tG1
Don't want to deal with querySelector/querySelectorAll ? You could abstract them into a single select() function: cloudup.com/c4L5dk8zA6z
If you find the removeChild syntax cumbersome, you could use a function that makes it more convenient to use: cloudup.com/cyzTS4q5oe4
Example: if you see yourself adding a class to almost every element you create, you could make your life easier: cloudup.com/c5XyE1LpnKw
A function can optionally return a value that you can use somewhere. Example: function sum(number1, number2) { return number1 + number2 }
Parts of the function can change with parameters: function sayHello(name) { alert("hello " + name) } Call it then by doing sayHello("Ben")
A function is a "folder for code". Define a function by doing: function sayHello() { alert("hello") } Use it then by doing: sayHello()
click() lets you programmatically simulate a click on any element. Example: delay a click event to play an animation sharedfil.es/KWv1Cr8z6m.html
JS makes it easy to test if a CSS property is supported and to dynamically use vendor prefixes if needed. Example: sharedfil.es/czoqfdD0Pw.html
Want to automatically load the retina versions of all your images when needed? You could it this way cl.ly/U0UV
You can declare multiple variables using commas instead of repeating the var keyword: var name = "Ben", location = "Belgium", age = "29"
There's a friendlier way to iterate over an array than using a for() loop: the forEach() method. Example: sharedfil.es/PmTDDB9IrF.html
Just like with querySelectorAll, you can get all the values from an array by creating a loop. Example: sharedfil.es/CrvMOpz8Xq.html (view source).
You're already familiar with something that works like an array: the list of elements you get from document.querySelectorAll().
You can access any item in the array by using its index (the first element is at index 0). So, favoriteCities[1] will give you "Amsterdam".
An array is kind of a variable with multiple values separated by commas: var favoriteCities = ["San Francisco", "Amsterdam", "London"]
getBoundingClientRect() lets you retrieve an element's size and position. Example with an animated input focus: i.cloudup.com/K3jC0qzm7q.html
You can detect if you need to serve retina images with devicePixelRatio: cloudup.com/cAgXJVGH5KI
Dan Mall @danmall
44K Followers 5K Following Showing you how to use design to live a better life. Intentionally unique. Ran @superfriendlyco for a decade. Now creating @designsystemu and @greatjobkids.
Harry Keller | @harry.. @harryfk
2K Followers 832 Following It was fun while it lasted. Newsletter + socials on my website. Find me on Mastodon: https://t.co/zYQg72Rnol
4 Aces Technologies @4acestech
243 Followers 4K Following 4Aces is a renowned website designing & mobile app development company & the best IT Software Solutions provider based in Panchkula, India established in 2012.
Andrew Davies @adsevenfour
3K Followers 2K Following Designer, tea drinker, ADHDer, pirate, dinosaur & monster enthusiast. Looking ... Design Prinicpal | prev @McKinsey Data Viz Lab @QuantumBlackLabs & more
Polina Todorov @polinatodorov
35 Followers 436 Following Designing digital products for 7+ years, previously @Shopify. Background in journalism and creative writing
Laura Lekeu @LauraLekeu
2 Followers 37 Following
sathish varma @sathishvarma97
3 Followers 179 Following
BNCHNDLR @bnchndlr
126 Followers 1K Following
Jovis Joseph 👨🏽.. @JovisJoseph_
430 Followers 510 Following Cofounder @usecorner. Obsessing over carts in ecom websites Maker | UI / UX Designer | CSS Lover
Beatriz Sopeña @beatrizsmerino
40 Followers 302 Following
Steven @stuffstesaid
113 Followers 402 Following LFC. User Experience Designer. Coffee & bacon butty enthusiast.
EssejTravog @ETravog
19 Followers 538 Following
Daniela Bernardo @its_me_daniela
9 Followers 58 Following
Shawn @Shawn_Spink
79 Followers 193 Following Family first. I love technology. I enjoy learning, can’t get enough.
Rodrigo Nappi @rodrigonappi
29 Followers 114 Following Tentando ser um bom desenvolvedor desde 2002! Fui designer, frontend, backend, fullstack... minha única certeza é que eu gosto é de código:)
WUDDUP @WuddupAgency
226 Followers 2K Following Agence de communication #Digitale & Créative | #Branding | #Webdesign | #Print | #Marketing | Nous vous aidons à créer votre avenir💡
Fabbio @fabbiodesign
218 Followers 2K Following UX /UI Designer | Product designer | See my portfolio: https://t.co/01U42FDpi1
Angie Kwan @angiekwan
181 Followers 1K Following
Windows Creative Inno.. @WindowsCreativ1
157 Followers 743 Following Hello,We are a Creative innovation Institution for Graphic Design. We make sure our Client Satisfaction. We provide all kind Graphic design & Creative solution.
rayma-glass @RaymaGlass
97 Followers 1K Following Rayma is a leading manufacturer & supplier of building glass, valves and related systems.
🐰 @Kuchengnom
263 Followers 518 Following A user’s ability is the guide to usability. They call it being an experience Designer now – that's what I am.
Роберт Григ.. @___rubik
13 Followers 340 Following
Lewis_ @lewald_
70 Followers 209 Following developer @gravitywelluk 🚀 // semi-amateur sports participant ⚽️
biibin @biibin1
30 Followers 253 Following
Adriana Lousado @AdrianaLousado
32 Followers 176 Following Working as a Team Lead UX/UI Designer at @Noesis_Portugal
Hannibal Lecture @givenlemons
299 Followers 712 Following I love New York more than I love most people. Creative Director, Product Designer & Podcaster
Farida Sheralam @FaridaSheralam
455 Followers 1K Following Digital Media . Innovation . Branding . Marketing . Content Strategy . Web Design . Graphic Design . Illustration . Trends . Cat Lover .
Lena Istomina @istomina_elena
19 Followers 234 Following
Fraz Shah @FarazShaw
153 Followers 4K Following I’m a visual and interactive designer. My expertise is in design execution, user interface, illustrations & interaction design.
Cha_Um ❣️ @chaa_um
6 Followers 86 Following
Vertex Studio @studios_vertex
23 Followers 348 Following Vertex Studio Is A Ultimate Event Management, Media & Creative Solution Company Located In Dhaka Bangladesh.
Esther @l0ve_nothing
149 Followers 729 Following Spider woman (web developer) - bad joke addict - improv girl - Fangirl (tv shows, pop culture)
L'Opale @Lopale_web
175 Followers 1K Following L'Opale est une #agence de #communication #web qui défini et accompagne ses clients dans la création d'application #numérique.
Abhisek Panda @CatchAbhisek
21 Followers 250 Following Iot Developer , Full Stack Developer , Intern at Now Floats , Tech-geek , Student
Najmin Sema @Najmin_Sema
500 Followers 3K Following CURRENT: 1.Public Relation Manager RedeFineLab Ltd (March 2016- Continue) PREVIOUS: 1. Esysolution Technogies Ltd https://t.co/G6MKuectxW On Demand Ltd.
Gilang Chandrasa @gchandrasa
194 Followers 165 Following Working as Python/Django developer, interested in Android/iOS and React
Pavankumar Kulkarni @pavanpri
194 Followers 155 Following #Nation-lover, #Bharat #Photography, #Bird-Photography, #web-publisher. Instagram :https://t.co/vjBCDLUBN8 Tagline : Hard works always keep Impact.
Sébastien Seghers �.. @S_Seghers
159 Followers 1K Following UX/UI Designer Founder of @bitrade_trading crypto platform.
David Peirs @davidpeirs
958 Followers 3K Following Strategic Management through hands-on innovation and true digital transformation. Strong interest in Online / Lighting / Art / Sailing
Mohammed Ali @mmaillist
23 Followers 829 Following
Clovis @Clovis_app
190 Followers 427 Following Clovis, la plateforme pour les professionnels de la construction, de l'immobilier et de l’architecture, qui vous fait gagner du temps au quotidien !
Chinmay Das @chinmaydas96
58 Followers 649 Following Unraveling the mysteries of the Universe, one line of code at a time! On a quest to teach machines how to think until they enlighten us all. 🌌💡 🧠
Arara Azul Web @araraazul
291 Followers 115 Following Criação de Sites, Otimização de sites, Acessibilidade Web, Criação e desenvolvimento de sites
Trends for United States
You might like
