FinanceInsuranceMortgageTechBusinessTravelLegalHealth/FitnessSportsFashionRenovationReviews

No. 1 Free Social Classifieds. Best Social Classifieds, Fonolive.com.

devtips instagram hashtags, hashtags meanings devtips images, #devtips tag pics

devtips
devtips
devtips 👉 Creating an awesome drag and drop effect between two lists 👈
-
How are you guys? Today we will be learning how to easily create a drag and drop functionality using nothing but some HTML5 and JavaScript! For this case we'll use two lists ( 'ul' elements) and move some elements between them. After learning this, you can start applying this drag and drop functionality to whatever types of elements and scenarios you want to, the logic always remains similar.
-
We'll start by creating two 'ul' elements, each one of them with some 'li' items inside them. On each 'li' we have to give it an unique 'id', set 'draggable=true' and pass the function 'drag' to the 'ondragstart' event. The 'draggable' attribute will determine if an element should be draggable or not and 'ondragstart' function will be executed everytime is element is dragged.
On each of the 'ul' we have to pass two functions for the 'ondrop' and 'ondragover' events. The first event will be used to get the element that we were dragging and place it inside this one. The second event is just for preventing the default behaviour.
-
After having this HTML done, we can place a script tag and create the three functions we will need. They are all pretty basic. Basically all we are doing is using the dataTransfer object to save the 'id' of the element we are currently dragging. Then when we want to drop it, we just need to go get that 'id' on the dataTransfer object and with that, we can append this element to the element were we are doing the drop.
-
Finally, we have some CSS that is just to get the styling we can see on the End Result. This is some pretty basic and straightforward CSS so I won't be covering it much.
-
Hope this tip was handy and that you start using this on projects, it sure does look cool 🔥🔥
-
Have a nice weekend guys! 🤘😀🤞
.
.
.
#webdev #html #htmlcss #css #learncss #learntocode #learnhtml #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #javascript #javascripttips #learnjavascript #webdevtips #buildupdevs
Likes: 1224
Posted at: 2019-09-28 15:31:34
👉 Creating an awesome drag and drop effect between two lists 👈 - How are you guys? Today we will be learning how to easily create a drag and drop functionality using nothing but some HTML5 and JavaScript! For this case we'll use two lists ( 'ul' elements) and move some elements between them. After learning this, you can start applying this drag and drop functionality to whatever types of elements and scenarios you want to, the logic always remains similar. - We'll start by creating two 'ul' elements, each one of them with some 'li' items inside them. On each 'li' we have to give it an unique 'id', set 'draggable=true' and pass the function 'drag' to the 'ondragstart' event. The 'draggable' attribute will determine if an element should be draggable or not and 'ondragstart' function will be executed everytime is element is dragged. On each of the 'ul' we have to pass two functions for the 'ondrop' and 'ondragover' events. The first event will be used to get the element that we were dragging and place it inside this one. The second event is just for preventing the default behaviour. - After having this HTML done, we can place a script tag and create the three functions we will need. They are all pretty basic. Basically all we are doing is using the dataTransfer object to save the 'id' of the element we are currently dragging. Then when we want to drop it, we just need to go get that 'id' on the dataTransfer object and with that, we can append this element to the element were we are doing the drop. - Finally, we have some CSS that is just to get the styling we can see on the End Result. This is some pretty basic and straightforward CSS so I won't be covering it much. - Hope this tip was handy and that you start using this on projects, it sure does look cool 🔥🔥 - Have a nice weekend guys! 🤘😀🤞 . . . #webdev #html #htmlcss #css #learncss #learntocode #learnhtml #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #javascript #javascripttips #learnjavascript #webdevtips #buildupdevs
devtips 💫 Creating a loading spinner animation using CSS only 💫
-
What's up guys? So today I want to share with you a really simple way to create a loading spinner animation that you can use on your projects!
-
Obviously, all loading animations need some kind of logic for you to know if something is loading but here we'll just focus on the visuals of it.
-
Okay, so we basically just to create a 'div' element. Then, in CSS, we turn this 'div' into a circle by giving it the same 'width' and 'height' and 'border-radius:50%'. We won't set any background color, we'll just give it a border on one of the sides ( in this case it's in the right ). Finally, we create a linear, infinite animation with a duration of 800ms that will just  fully rotate our element. Obviously you can change duration from '.8s' to whatever value you prefer and you can also change the size and color of the border to change the look of the spinner.
-
Aaaand, that's all! Hope you guys liked this tip and have a great Friday 🤘🤘🔥
.
.
.
#webdev #html #htmlcss #css #learncss #learntocode #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #javascript #javascripttips #learnjavascript #webdevtips #buildupdevs
Likes: 1009
Posted at: 2019-09-13 14:52:01
💫 Creating a loading spinner animation using CSS only 💫 - What's up guys? So today I want to share with you a really simple way to create a loading spinner animation that you can use on your projects! - Obviously, all loading animations need some kind of logic for you to know if something is loading but here we'll just focus on the visuals of it. - Okay, so we basically just to create a 'div' element. Then, in CSS, we turn this 'div' into a circle by giving it the same 'width' and 'height' and 'border-radius:50%'. We won't set any background color, we'll just give it a border on one of the sides ( in this case it's in the right ). Finally, we create a linear, infinite animation with a duration of 800ms that will just fully rotate our element. Obviously you can change duration from '.8s' to whatever value you prefer and you can also change the size and color of the border to change the look of the spinner. - Aaaand, that's all! Hope you guys liked this tip and have a great Friday 🤘🤘🔥 . . . #webdev #html #htmlcss #css #learncss #learntocode #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #javascript #javascripttips #learnjavascript #webdevtips #buildupdevs
devtips 🖼️ Using the HTML 'figure' element to display an image with caption 🖼️
-
What's up guys? So today I want to show how to use the HTML 'figure' and 'figcaption' elements to create a nice looking image with some caption on it. The figure element is used for containing elements like images, illustrations, videos or even code. It's usually used with a caption inside to describe said element by using the figcaption element.
-
Let's start by creating a 'figure' tag. Inside this tag we'll have an 'img' tag, with whatever image we want, and then a 'figcaption' tag where we'll place our caption. I created two 'div' elemrnts, one for the title and one for the author. That's all for the HTML.
-
Now, we'll apply some CSS to get looking like the end result. We just give a 'max-width' and relative positioning to the 'figure' element.  Then we'll add a 'border-radius' and a 'box-shadow' on our image just to pimp it up a little bit 🔥
Finally we'll apply absolute positioning on the 'figcaption' so it stays on the bottom right corner of the image and change the 'font-size' and 'color' of it.
-
And it's done! We easily created an image displaying it's title and the name of the author using HTML's 'figure' and figcaption'!
Hope you find it handy 😃🤞
.
.
.
#webdev #html #htmlcss #css #learncss #learntocode #learnhtml #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #javascript #javascripttips #learnjavascript #webdevtips #buildupdevs
Likes: 1148
Posted at: 2019-09-18 14:07:27
🖼️ Using the HTML 'figure' element to display an image with caption 🖼️ - What's up guys? So today I want to show how to use the HTML 'figure' and 'figcaption' elements to create a nice looking image with some caption on it. The figure element is used for containing elements like images, illustrations, videos or even code. It's usually used with a caption inside to describe said element by using the figcaption element. - Let's start by creating a 'figure' tag. Inside this tag we'll have an 'img' tag, with whatever image we want, and then a 'figcaption' tag where we'll place our caption. I created two 'div' elemrnts, one for the title and one for the author. That's all for the HTML. - Now, we'll apply some CSS to get looking like the end result. We just give a 'max-width' and relative positioning to the 'figure' element. Then we'll add a 'border-radius' and a 'box-shadow' on our image just to pimp it up a little bit 🔥 Finally we'll apply absolute positioning on the 'figcaption' so it stays on the bottom right corner of the image and change the 'font-size' and 'color' of it. - And it's done! We easily created an image displaying it's title and the name of the author using HTML's 'figure' and figcaption'! Hope you find it handy 😃🤞 . . . #webdev #html #htmlcss #css #learncss #learntocode #learnhtml #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #javascript #javascripttips #learnjavascript #webdevtips #buildupdevs
devtips 🔪 Shortening your text with ellipsis with nothing but CSS 🔪
-
It's quite common for us to have to 'cut' some characters of a text and put some ellipsis ( ... ) a the end of it. Wether it is because we only want to show a small preview of the whole text or simply because we need to fit the text to a container, this is something that can be achieved in numerous ways, depending on the specific situation.
-
Using this really simple method, you don't need to know how many characters you want to show, you just need to know the size of your container element and the text will always fit that element without it overflowing.
-
Here we just have to 'h1' elements with our text inside. The latter one has the class 'ellipsis' and here his where we'll make the magic happen 🧙‍♂️
-
In the 'text' class, we just have to set the width we want on the element, 'white-space: nowrap' because we don't the text to break to a new line and then 'overflow: hidden' so we don't see the text outside of the box. This will produce an ugly result as you can see in the first example.
-
Finally, to get the result we want, we use the 'ellipsis' class to apply 'text-overflow: ellipsis' to the second 'h1' thus creating the ellipsis and making sure the text will always fit the element and it's padding!
-
Have a great weekend guys 👌😄
.
.
.
#webdev #html #htmlcss #css #learncss #learntocode #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #webdevtips #buildupdevs
Likes: 479
Posted at: 2019-08-31 15:45:25
🔪 Shortening your text with ellipsis with nothing but CSS 🔪 - It's quite common for us to have to 'cut' some characters of a text and put some ellipsis ( ... ) a the end of it. Wether it is because we only want to show a small preview of the whole text or simply because we need to fit the text to a container, this is something that can be achieved in numerous ways, depending on the specific situation. - Using this really simple method, you don't need to know how many characters you want to show, you just need to know the size of your container element and the text will always fit that element without it overflowing. - Here we just have to 'h1' elements with our text inside. The latter one has the class 'ellipsis' and here his where we'll make the magic happen 🧙‍♂️ - In the 'text' class, we just have to set the width we want on the element, 'white-space: nowrap' because we don't the text to break to a new line and then 'overflow: hidden' so we don't see the text outside of the box. This will produce an ugly result as you can see in the first example. - Finally, to get the result we want, we use the 'ellipsis' class to apply 'text-overflow: ellipsis' to the second 'h1' thus creating the ellipsis and making sure the text will always fit the element and it's padding! - Have a great weekend guys 👌😄 . . . #webdev #html #htmlcss #css #learncss #learntocode #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #webdevtips #buildupdevs
devtips 🅰️ Creating engraved text with CSS 🅰️
-
CSS allows us to create a lot of cool text effects without really much effort. In this snippet I'll show you how to easily get an engraved effect on an heading element.
-
First just create an element where you'll want to apply the effect - in my case I used an 'h1'.
Then, in CSS we just need to give it background color and set the color to 'transparent' - this background color will determine the actual color of our text. 
Finally we need to apply 'background-clip: text' and some 'text-shadow' to get the desired effect. If you want, you can mess around with the shadow values to see how that affects the final result.
-
And that's it! Hope you have a blessed Friday guys, enjoy it 😄🔥🔥
.
.
.
#webdev #html #htmlcss #css #learncss #learntocode #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #webdevtips #buildupdevs
Likes: 529
Posted at: 2019-09-06 14:50:06
🅰️ Creating engraved text with CSS 🅰️ - CSS allows us to create a lot of cool text effects without really much effort. In this snippet I'll show you how to easily get an engraved effect on an heading element. - First just create an element where you'll want to apply the effect - in my case I used an 'h1'. Then, in CSS we just need to give it background color and set the color to 'transparent' - this background color will determine the actual color of our text. Finally we need to apply 'background-clip: text' and some 'text-shadow' to get the desired effect. If you want, you can mess around with the shadow values to see how that affects the final result. - And that's it! Hope you have a blessed Friday guys, enjoy it 😄🔥🔥 . . . #webdev #html #htmlcss #css #learncss #learntocode #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #webdevtips #buildupdevs
devtips TWO successful PROD deployments! .
.
This week I had a really stressful week with not just one but two PROD deployments on back-to-back days!! I was really excited to complete two big releases especially one really complex release!! Luckily they both went well so I thought I'd share some best practices for how to prepare for releases.
.
.
➡️ Create a deployment checklist - the more details the better! Don't leave it up to your memory when you're doing a release and be sure to write it down
➡️ Have a roll back plan. This will eliminate stress in case the release doesn't go as planned so you have an action plan on how to revert your changes
➡️ Schedule your release outside of working hours. This will prevent end users from experiencing an interruption and give you extra time to work through bugs if you run into issues
➡️ Stay calm. Deployments typically will run into bumps that you'll have to troubleshoot in the moment so don't get stressed if something doesn't happen according to plan! Stay calm and work through it.
.
.
What tips do you have for a successful deployment?
Likes: 172
Posted at: 2020-03-06 18:31:10
TWO successful PROD deployments! . . This week I had a really stressful week with not just one but two PROD deployments on back-to-back days!! I was really excited to complete two big releases especially one really complex release!! Luckily they both went well so I thought I'd share some best practices for how to prepare for releases. . . ➡️ Create a deployment checklist - the more details the better! Don't leave it up to your memory when you're doing a release and be sure to write it down ➡️ Have a roll back plan. This will eliminate stress in case the release doesn't go as planned so you have an action plan on how to revert your changes ➡️ Schedule your release outside of working hours. This will prevent end users from experiencing an interruption and give you extra time to work through bugs if you run into issues ➡️ Stay calm. Deployments typically will run into bumps that you'll have to troubleshoot in the moment so don't get stressed if something doesn't happen according to plan! Stay calm and work through it. . . What tips do you have for a successful deployment?
devtips ⚒️ What exactly does the 'box-sizing' property do and why does it matter ⚒️
-
Hey guys, how's your week going ?
Today I want to talk to you about the CSS 'box-sizing' property.
This property is often overlooked and people really don't understand what it does exactly. Basically what it does is defining how the total width and height of an element will be calculated. We can chose to include the padding and the border in these calculations or not.
-
Look at the example we have here. We have a 'box-wrapper' div acting like a container that has a specific width and height. Then we have another div inside - 'box' - that will take the whole width and height of the parent and that has some padding and a border.
With this we can easily see the difference in the 'box-sizing' property.
-
The first box has 'box-sizing: content-box' so the padding and the border won't be taken into account. The result is that this div will became larger than it's parent because it has the same width and height PLUS the padding and the border.
-
The second box has 'box-sizing: border-box' so it will always take the padding and the border into account. The result is clearly visible, our div will always have the same dimensions as it's parent even with the padding and the border.
-
Hope this was clear to you and hope you have a great Friday 🤞🤓
.
.
.
#webdev #html #htmlcss #css #learncss #learntocode #learnhtml #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #javascript #javascripttips #learnjavascript #webdevtips #buildupdevs
Likes: 487
Posted at: 2019-09-27 16:15:28
⚒️ What exactly does the 'box-sizing' property do and why does it matter ⚒️ - Hey guys, how's your week going ? Today I want to talk to you about the CSS 'box-sizing' property. This property is often overlooked and people really don't understand what it does exactly. Basically what it does is defining how the total width and height of an element will be calculated. We can chose to include the padding and the border in these calculations or not. - Look at the example we have here. We have a 'box-wrapper' div acting like a container that has a specific width and height. Then we have another div inside - 'box' - that will take the whole width and height of the parent and that has some padding and a border. With this we can easily see the difference in the 'box-sizing' property. - The first box has 'box-sizing: content-box' so the padding and the border won't be taken into account. The result is that this div will became larger than it's parent because it has the same width and height PLUS the padding and the border. - The second box has 'box-sizing: border-box' so it will always take the padding and the border into account. The result is clearly visible, our div will always have the same dimensions as it's parent even with the padding and the border. - Hope this was clear to you and hope you have a great Friday 🤞🤓 . . . #webdev #html #htmlcss #css #learncss #learntocode #learnhtml #frontend #frontenddev #webdevelopment #webdesign #programming #webtips #devtips #dailytips #csssnippets #csstips #htmltips #javascript #javascripttips #learnjavascript #webdevtips #buildupdevs
devtips ✋🏽 Hello guys ! How are you ?⠀
🕐 [Day 65/100]⠀
⠀
💨Yesterday I've begun again Javascript course because I don't have a solid base about it. I've took this decision because I didn't understood anything about Webpack...⠀
⠀
⬇ Question of the day : Have you ever used a Javascript Framework ? (Yes or No)⠀
⠀
🏴 You need MORE ? (...)⠀
⚡ Don't forget to join the community -> @harold.codes⠀
Likes: 229
Posted at: 2019-04-10 22:34:17
✋🏽 Hello guys ! How are you ?⠀ 🕐 [Day 65/100]⠀ ⠀ 💨Yesterday I've begun again Javascript course because I don't have a solid base about it. I've took this decision because I didn't understood anything about Webpack...⠀ ⠀ ⬇ Question of the day : Have you ever used a Javascript Framework ? (Yes or No)⠀ ⠀ 🏴 You need MORE ? (...)⠀ ⚡ Don't forget to join the community -> @harold.codes⠀
devtips It's giveaway time! 🔥🔥
React - The complete Guide by Maximilian Schwarzmüller
-
So today is my tip #100 and I decided to do a little giveaway of a Udemy course. A while ago I asked you what type of course would you like the most and reactJS was definitely the topic with the most votes.
-
With that, I decided to giveaway the course ' React - The complete Guide' by Maximilian Schwarzmüller. This course has 4.7 star rating with 55.070 votes on Udemy and covers all the essentials of React from scratch.
-
To enter the giveaway you just have to like this post, tag 2 friends on it and make sure you follow the page. Any contestants that don't follow these 3 rules will not be considered.
-
The giveaway will end on the 6th of December!
-
Hope you have a great Friday guys and good luck! 😁🔥👌
.
.
#webdev #html #htmlcss #css #learncss #learntocode #frontend #frontenddev #webdevelopment #webdesign #webtips #devtips #dailytips #csssnippets #coding #webdevtips #buildupdevs #web #js #react #reactjs #udemy #course #giveaway
Likes: 718
Posted at: 2019-11-29 16:57:46
It's giveaway time! 🔥🔥 React - The complete Guide by Maximilian Schwarzmüller - So today is my tip #100 and I decided to do a little giveaway of a Udemy course. A while ago I asked you what type of course would you like the most and reactJS was definitely the topic with the most votes. - With that, I decided to giveaway the course ' React - The complete Guide' by Maximilian Schwarzmüller. This course has 4.7 star rating with 55.070 votes on Udemy and covers all the essentials of React from scratch. - To enter the giveaway you just have to like this post, tag 2 friends on it and make sure you follow the page. Any contestants that don't follow these 3 rules will not be considered. - The giveaway will end on the 6th of December! - Hope you have a great Friday guys and good luck! 😁🔥👌 . . #webdev #html #htmlcss #css #learncss #learntocode #frontend #frontenddev #webdevelopment #webdesign #webtips #devtips #dailytips #csssnippets #coding #webdevtips #buildupdevs #web #js #react #reactjs #udemy #course #giveaway
devtips 💡Tip: Věděli jste, že prohlížeč podporují přesunutí obsahu souboru do <textarea>. Takhle hezky to doporučuje využít například @CodePen.⠀
**⠀
#VzhůruDolůCZ #DevTips #WebDevCZ⠀
**
Likes: 0
Posted at: 2020-03-31 07:44:51
💡Tip: Věděli jste, že prohlížeč podporují přesunutí obsahu souboru do