Instagram story viewer> @webdev.tips> Posts

ᵂᵉᵇᴰᵉᵛᵀⁱᵖˢ

@webdev.tips

27.4K

followers

346

following

🔥 Handy Web Development Tips
💻 HTML | CSS | JS | React
✉️ [email protected]

POSTS STORIES REELS TAGGED

Download All

How to create your own controls on the HTML Audio element 🎵
-
Check this online with full source code: bit.ly/3bWJ8pD
-
What's up guys? Today's snippet shows how we can create our own controls for the audio element in HTML.
-
First, we'll create our HTML structure, with the audio element and then we'll add some controls - buttons to play, pause and play from the start and two range inputs to control the audio volume and it's speed. On each of these controls we'll add some onclick/onchange functions.
-
Now, in Javascript, we'll create these functions that we assigned to the controls. First we will create a const to reference our audio element, and then on our functions we will just use the audio native methods to control it - play, pause, volume, playbackRate, etc.
-
And that's it in terms of functionality! Now we just need some simple CSS to put everything in place.
-
Let me know your thoughts on this tip and don't forget to like this post 🤗✌️
.
.
.
#html5 #htmlsnippets #htmltricks #css #javascripting #javascript #webdev #webdesign #uidesign #webapp #app #codingpower #codingtips #frontenddev #webdevtips by @webdev.tips

530

8

5 years ago

Positioning a fixed element in relation to it's parent 📐
-
-
Check this tip online with full source code: bit.ly/3fMQcXg
-
So, when it comes to CSS, position fixed is often used to make an element stay fixed on a specific place - and even when the user scrolls, that element will still stay there. This is usually used for things like navbars, modals, pop-ups, etc
-
One of the first things we usually learn about 'position: fixed' is that it positions the element always in relation to the viewport. So if you use 'top: 10px', it will always stay fixed, 10px from the top of the page.
-
But what if we wanted to have an element fixed on the page but positioning it relatively to another element? Well, there's a way to do this!
-
Imagine the following page layout that you see on this tip's example: a sidebar on the left, and a main section on the right. Let's say we want a fixed modal to appear, but we want it centered on the main section, and not on the whole page.
-
To achieve this, we will style our modal (in this case the div .box) exactly how we would to center it on the page, but we'll add a 'transform' property on the main section.
-
On this example I used 'transform: translate (0)', but any 'transform' would have done the trick! Just by adding this, our fixed element will now always be positioned in relation to this parent element and not to the viewport!
-
And that's it! Had you ever used this 'trick' before? Do you know any other ways of achieving this?
Let me know in the comments 🤗👇
.
.
.
#css #learncss #webdevelopment #webdesign #webdesigntips #uiux #uidesign #frontenddeveloper #frontenddevelopment #frontenddev #htmlcss #html5 #CSS3 #coder #cssposition #csssnippets #csstricks by @webdev.tips

456

15

5 years ago

Happy Friday 🔥 🔥
.
.
.
#developer #developerlife #setupwars #setupinspiration #devlife #coder #coding #reactdeveloper #frontenddeveloper #website #desksetup #ultrawidemonitor #mechanicalkeyboard #javascripters #deskinspo by @webdev.tips

278

4

5 years ago

Hello guys, how are you? 🤓✌️
-
Did you know that you can label if statements on JavaScript? I know I didn't! Basically, you can use these labels to give names to your if statements, and then you can use these names to reference them so you can, for example, break this if statement.
-
Check this online with full source code: bit.ly/3oD2MMI
-
Honestly, I struggled a bit to find a good use case for this, but here is the example I chose: so I have this function 'assignColorToValue'. It receives a value and based on that value it return a color - either 'red', 'green', 'black' or 'grey'.
-
I have two examples using this same function. On the first I use the labels, on the second I'm not using any. On this first example, notice that the first if has 'checkVal:' before it - this is the actual label. Then, inside other ifs, I'm using 'break checkVal' to exit the main if statement.
-
Take a look at the output of both examples and see how they differ!
-
How about you? Have you ever used these labels on if statements? Do you know of a good use case for it?
Let me know in the comments 🤗👇
.
.
.
#javascripting #javascriptdevelopers #javascriptdeveloper #javascript #developers #codingtips #webdevtips #coding #developer #learnjavascript #js #es6 #programming #learntocode #frontenddevelopment #frontenddeveloper by @webdev.tips

386

12

5 years ago

Sending an SMS from an HTML anchor ✉️
-
What's up guys? So only the other day I found that you can use an HTML anchor to create a link for a text message, basically the same way you can do for an email.
-
Check this tip online with full source code: bit.ly/2S0AJKC
-
In order to do this, we need to create our anchor and on the 'href' we will type 'sms://"phone number"&body="text message content"'. It's that simple!
-
This will open any text message application that the user has on his device, with a text ready to be sent for the specified phone number and with the content that we passed in.
-
How about you? Have you ever used this? Let me know in the comments 👇🤓
.
.
.
#html5 #htmltricks #htmlsnippets #html #webdeveloper #frontenddeveloper #frontenddevelopment #developer #webdesign #webdevtips #css #learntocode #frontendev by @webdev.tips

717

18

5 years ago

Friday’s heree 🔥
Have a nice a guys! 👍
-

#deskspace #desksetup #workstation #deskspacegoals #setup #deskspacelove #officedecor #technology #creativity #designspace #photography #clean #inspiration #setupinspiration #setupwars #macbookpro #apple #mechanicalkeyboard #developer by @webdev.tips

353

2

5 years ago

What's up guys? 😁✌️
-
Today's snippet is a simple text animation that we can create with some basic CSS.
-
Check this tip online with full source code: bit.ly/2R5iTq3
-
Basically, using 'transform: translateY' we'll create a transition that takes the text from bottom to top. We just need to make sure that we have an 'height' property on our element with the same value that we use for this 'transform: translateY'.
-
Using some JavaScript we'll just add and remove the 'show' class on our element' that will change this 'transform' property.
-
And that's it! Super simple, right?
Let me know your thoughts on this tip and don't forget to like this post 🔥
.
.
.
#css #CSS3 #learntocode #webdevtips #webdesigntips #webdesign #webdesigner #htmlcss #uidesign #uianimation #uitips #webanimation #cssanimation #frontenddevelopment #frontenddeveloper #csssnippets #csstricks by @webdev.tips

646

9

5 years ago

Creating a custom context menu (or right click menu) in React!
-
Today's snippet shows how we can easily override the default context menu of the browser, and instead use our own right click menu, in React.
-
Check this tip online with full source code: bit.ly/3tCSBsa
-
Using the 'useState' hook we create three variables - showMenu, x and y. showMenu will always be true or false, wether the menu should be opened or not. X and Y will store the values for the x and y coordinates where the user clicked and where we'll place the context w.
-
Now, on a useEffect, we'll add two event listeners (and remove them). The first will be for the 'contextmenu' event and using this event we'll get those x and y coordinates and we'll set showMenu to true. We also need to 'preventDefault' on this event so we don't show the browser's context menu.
The other event will be on 'click' and we'll use it to set showMenu to false.
-
Now we just need to return the menu itself if 'showMenu' is true and we'll set those x and y coordinates on the element's 'left' and 'top' properties.
-
On the CSS we need to make sure that our menu has 'position: fixed' so it will always be positioned exactly where we want it.
-
And we're done! Let me know your thoughts on this tip and don't forget to like this post! 🤗✌️
.
.
.
#reacttips #reactjs #react #createreactapp #frontenddeveloper #htmlcss #learnreact #javascript #coder #dev #learntocode #software #webapp #uidesign #interationdesign #webdesign #js by @webdev.tips

545

17

5 years ago

Happy Friday guys 🔥
-
Managed to finish the Chat App I’ve been doing this week. It’s nothing too fancy, but the point was just to mess around with Web Sockets a bit.
-
You can check it here: bit.ly/33pDxDO
And you can take a look at the code here: bit.my/3h9I2LH
-
What have you guys been working on this week? 😊✌️
.
.
.

#developer #programming #webdeveloper #coder #softwaredeveloper #webdesign #design #codinglife #dev #developerlife #webdev #softwareengineer #setup #macsetup #macbookpro #deskspace by @webdev.tips

420

5

5 years ago

Hey guys! 😁✌️
-
Today we'll check some basic examples on how we can use the 'every' and 'some' array methods in Javascript.
-
Check this online with full source code: bit.ly/3nN7YwQ
-
Both methods are super straightforward to use and, unlike array methods like 'filter', 'map' , 'sort', etc, they both return a boolean - either true or false.
-
The name of each method pretty much describes what it does. The 'every' method returns true if all the items on an array pass a given condition, otherwise it will return false.
-
On the snippet we first check if every user has 'HTML' on their languages array. Since all of them have it' will return true. Then we do the same with 'CSS' which will return false since not all users have it.
-
On the other hand, 'some' will return true if at least one of the items on an array passes a given condition. If none the items pass this condition it will return false.
-
So on the example we first check if some user has 'Python'. Since one of them has it' it will return true. We then check if some user has 'GO' and since none of the users has it, it will return false.
-
And that's pretty much it. Let me know if you have any doubts and don't forget to like and share 🤗🙏
.
.
.
#javascripting #javascriptdeveloper #codingtips #codingpower #coding #js #jsarrays #es6 #ecmascript #javascript #webdevelopment #frontenddev #learntocode #webdevtips #javascripters by @webdev.tips

527

12

5 years ago

Happy Monday guys! 🤗
-
Today's tip will be a simple HTML and CSS to create the Instagram's notifications tooltip!
-
Check this online with full source code: bit.ly/3tfiQ87
-
This is really simple to do so I won't go into much detail. The only thing that may be a bit more complex for some people is the little arrow on the tooltip's bottom. This is done with an ':after' pseudo element where we use its borders to achieve this result.
-
All the icons are from 'thenounproject.com' - a really cool website where you can find all sorts of icons either in SVG or PNG format.
-
Let me know if you have any UI elements like this in mind, that you would like to see me implement with HTML & CSS.
-
Have a nice one guys 😁✌️
.
.
.
#htmlcoding #htmlcss #css #learnhtml #webdesigns #webdesigntips #webdesign #uidesign #uiux #instagramtooltip #instagramui #frontenddevelopment #webdevtips #learncss #html5 by @webdev.tips

592

6

5 years ago

136 facts every Web Developer should know before burnout
-
What’s up guys? Yesterday found this awesome post on Reddit where the author - who has 25 years of web dev experience - shared a lot of the stuff he knows on a condensed list, super easy to read.
-
I thought this had huge value so decided to share it here, take a look: https://www.baldurbjarnason.com/2021/100-things-every-web-developer-should-know/
-
Have a nice weekend guys! 🔥
.
.
.

#setupwars #desksetup #battlestation #workstation #workspace #clean #apple #setupinspiration #deskinspo #cleansetup #ultrawidemonitor #macbookpro #setuptour #coding #developer by @webdev.tips

331

2

5 years ago