Top challenges website designers face

1) Compiling client expectations into code

The for most crucial task being a website designer is transforming client requirement into code if you are working as a freelancer and taking cut to cut responsibilities of client requirements, then in real-time you have to think in both perspective that is with respect to code and design

2) Maintaining responsiveness across devices

Maintaining responsiveness is one of the most crucial task because more than 70% of internet traffic is from mobile or tablet so any web app or website its for most important to work fine also in mobile device

3) Cross browser compatibility

In this competitive world the competition among web browsers also is on peak, majority of techie people consider chrome( i guess due to developer tool) for their work, but in meantime common people also go with different browsers like opera, firefox, edge, IE etc so its very important for a website to run stable in any browser with any version, to make this happen in background a web designer has to do a lot of testing and invest a lots of time to make website stable across different browsers.

4) Side effects of using many libraries

If we are using some framework like react angular then this point is not valid at all because in that case we get node package manager, yarn etc package management tool, but if we are creating website from just html css and javascript with cdn and script tag link in web page then big challenges comes into picture like getting errors for cross libraries compatibility, not getting proper dependency from one library to another

Say if we are using some crousal library and jquery is dependency for that library then we would have to make sure that jquery script comes first than crousal script also we need proper version of jquery to be there to run that crousal properly

5) Cache issue

As i mention earlier here we are talking about just html css and javascript made website native way of creating website until and unless if we are using some task runner or build tool like gulp, grunt, webpack etc till then we are somehow safe, if we aren’t using them then cache becomes mostest irritating part whenever you change something in css it doesn’t reflect and you would think i didn’t apply proper css after a struggle you would get to know that it hasn’t css problem its because of shit cache

Cache play a very major role in every browser but irrespective to that it also creates lots of problem while creating website most of the time it takes old copy of css and js and our changes couldn’t reflect and we think its our issue

Conclusion :-

Lot more challenges a web designer face but here i tried to showcase some of major and most common problem web designers come’s across, at last i just wanna to say not only web designing if we talk about graphics designing etc those also is not piece of cake, behind every design lot more dedication and time a designer invest to make it successful.

looping data to some html and css is one of basic level of task at least a beginner should know, in looping data the most common problem we face is , how to write code in such a way it take less number of lines and more reliable in logic after loop

If we have to loop single data then without thinking we can go for Array, but if we would have to loop through two piece of data inter link to each other in such a manner that one is static and another is dynamic or say static then first thing comes in our mind is object since object contains key value pair so in that perspective if we could iterate both key and value in loop then that will solve our problem

So there are some ways to iterate through object key value pair

By using for .. in loop

const obj = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3"
}

for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console. log(key +" -> "+ obj[key]);
    }
}

We use the for-in loop as shown. However, we need to use hasOwnProperty() method so that the key we get would be an actual property of an object, and doesn't from the prototype

ES6 way — By using Object.entries

const obj = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3"
}

for (let [key, value] of Object.entries(obj)) {
    console. log(`${key} -> ${value}`);
}

By using Object.keys

const obj = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3"
}

Object.keys(obj).forEach((res) => {
    console. log(res +" -> "+ obj[res]);
})

Conclusion

There are lot more ways to iterate key value pair in loop, above are most common ways javascript developers use in day to day code, being a developer we need to know at-least basics of data structure for handling data with the help of code.