Supraja Ganji

Yeah. So coming to the first question, could you help me understand more about your background by giving a brief introduction of yourself, Bhakti? So, yeah, hello, everyone. So my name is Gunji. So I have, uh, around 9 8 plus 8.9 years of experience in this, uh, as a front end developer, UI and front end developer. So I started my career in 2015 June, uh, with the GGK Tech Organization. So initial initial days of my career, I have started as a UI developer wherein, like, we used to, uh, build the, uh, pages on websites and the web pages of an application using the plain HTML, CSS, and JS, uh, with some mock data, and we used to provide those to the front end developers wherein they integrate it with the with the, uh, APIs and all. But later, after 4 years of my career, I have, um, uh, I mean, I have learned Vue JS and JS thoroughly, and now I'm working as a front end. Vue JS front end developer for one of the, uh, projects. So wherein all this API integration and all, also, I'm only doing. And I even have experience of working with, uh, 1 year of experience working with AngularJS, 1 year of experience working with the ReactJS, and 4 years of experience working with VueJS, and around 6 months to 1 year of experience working with the WordPress. So I have extensive knowledge on this HTML, CSS, you know, uh, plain vanilla JavaScript and all the front end frameworks like Bootstrap, and I have experience, uh, SaaS, CSS preprocessor, cross browser compatibility issues, you you know, these, uh, mobile desk building the mobile responsive applications and all. Uh, And after looking at this job description, I feel like I'll be the good fit for it, but I do have few doubts about how this part time works and all. Maybe when you people connect with me, I'll, uh, I'll get those clarified here. That's it. Yeah. Thank you.

We are coming to the next question. Design a complex UI component that requires dynamic content updates from ACF feeds in WordPress while ensuring it is mobile responsive. Okay. Uh, to be frank, what exactly this ACF feels, I'm not sure because I have only 6 months of experience with purpose, but I do have knowledge on this HTML, CSS, JavaScript, and all. But, uh, talking in general, building a UI component that requires a dynamic content updates will be, like, like, we use the reactive properties in our view or Angular or React JS. We you we have these reactive properties which will have the two way data binding. So, uh, whenever that prop gets updated, it will automatically update in the, uh, UI. So that is how we do these, um, dynamic content updates. Uh, yeah, on the page. So building a UI component means I have experience, uh, building this, uh, table component. So in our application, we have used, uh, you know, uh, like, uh, our application consists of lot of tables with millions and millions of data. So we have used the Kendo UI for you, uh, to use the table component, but on top of it, we have customized it a lot, you know, to fit for our, uh, application requirement. So, um, yeah, I do have experience building the complex UI components, and, uh, I have experience even building the new directives as well, uh, in view and Angular. Yeah. We are coming to this exact ACF fields. I'm not sure, but I can quickly learn it. It's like, uh, finally, what I feel is, like, whatever the language it is I mean, whatever the technology it is, only the syntax will be vary. But the main logic, how we think and how we write, so that that should be there within us. So whatever the technology we are using, it doesn't I won't say it doesn't matter, but we can learn it. So we have Google with us. Sorry if I'm not wrong, but, yeah, we have Google with us for everything and, uh, yeah. And this IT in this IT field itself is, like, if you learn the new things, then only we will survive here. So we should not stick with one thing. So learn the new things and upgrade yourself. Yeah. Yeah. Yep. That's all I have. Thank you.

So the next question is describe a way to automate the compilation of SaaS to CSS on a live production web WordPress website without downtime. Automate the compilation of SaaS to CSS on a live production So, ultimately, browsers will understand only CSS. So and we, uh, you know, we generally write, and the preferred way is to use this as because it has lot of advantages compared to CSS. We have lot of, uh, like, we can reuse the code and it will be, you know, clear. We can minimize the code and also whatever the, uh, c, uh, styles we have written in the SAS code, we have written this as that should be and then that should be compiled to CSS for browser to understand. So how we compile the SAS to CSS? So it, again, depends from where is from application to application. So in a WordPress site, I think we might, uh, have automatic plugins there in the WordPress, which will automatically, you know, compile this as to CSS. So that's what I feel. I mean, generally, in our view applications and also we in, um, webpack dot config file, we automatically give it, I mean, in our package, JSON, webpack, and all, uh, in app settings file. Like, we generally given that will that should automatically compile down. Unless, we do have the comments as well to compile this as to CSS, but in the WordPress site, I believe there will be some plug in which will automatically compile, uh, SaaS to CSS. Yeah. Thank you.

What steps would you take to remedy common cross browser compatibility issues with JavaScript functionality? Common cross browser compatibility, I I would say. So in IE, there used to have lot of lot of issues because Chrome, Safari, Firefox, all these are one type. Like, they generally, uh, support all the CSS, uh, properties and all whereas IE and the, uh, and mainly the older versions of IE, they generally won't support lot of the things. So, like, uh, new whenever a new CSS properties is introduced, generally, that will be allowed I mean, that will work in Chrome always, Google Chrome. But in IE, it won't. So to, uh, for these kind of things, I mean, uh, we use the vendor prefixes like hyphen, m s hyphen, hyphen, m o zed, hyphen, hyphen, o, hyphen, hyphen, m o zed for Mozilla Firefox, hyphen, o, hyphen for Opera Mini, hyphen MS, hyphen for the IE, hyphen WebKit, hyphen for the Chrome, and Safari. So we use the vendor generally, we use the vendor prefixes to, uh, you know, make our new CSS properties, uh, work in all the browsers. Yeah. And coming to compatibility issues with JavaScript functionality, this new e s s 6 ES 6. Sorry. Sorry, ma'am. But e s 6, uh, those might not be, I mean, uh, supported in the older versions and in the IE. But recently, like, uh, Microsoft has introduced Edge. Right? So that is, uh, similar to Chrome or that is, uh, working similar to Chrome and Safari now. So it which is supporting almost all the things. So, uh, it the end user is not using IE, it's not a big deal. Uh, mostly it will support. But, yeah, to fix the cross browser compatibility issues, we do have to thoroughly test it in all the, uh, browsers and not might not be all, but all the supportive browsers for our application in all the resolutions and make sure that is working fine. If not, we have to fix that. Yeah.

Okay. So coming to the next question, how would you approach debugging a complex JavaScript problem that only occurs in a specific web browser? Debugging a complex Java's complex JavaScript problem that only occurs in specific web browser. So, generally, any debugging, we do it through dev tools. We put a breakpoint in our, uh, JS file. And, uh, I mean, in the console, we face the error. Right? So based on that, we'll get to know the file name and the line number and, uh, which function is causing that. So we, yeah, we, like, uh, put the break point there in that particular function at that particular, uh, line, and then we refresh the page. And whenever the, uh, program I mean, compilation reaches there, uh, like, we can debug through that. So that is how we generally do the debugging in any of the browsers. Um, so if it is occurring only in specific browser, like, we yeah. We, uh, of course, we have to put the breakpoint and I mean, we have to access the application in that particular browser and try to debug from there. If sometimes it won't hit the break point, then we can put the debugger in our code itself and then check. Uh, and I believe there will be is, um, we, um, we might have, uh, uh, something in JavaScript to identify the browser in which we are checking. Like, in the code itself, we can, uh, put, like, if the browser is I suppose if we are facing an issue in the Internet Explorer IE, so, uh, we can get whatever the browser the user is using. So we can put a condition, like, if the browser is IE, then do so and so to fix that problem, uh, particularly in that particular browser. Yeah. That is how we

To the next question, what's your plan to retrofit an older nonresponsive WordPress site with your mobile first design approach? So, yes, I, actually, I do have lot of experience, uh, with, uh, making applications mobile responsive. So I do work on some existing applications to make them mobile responsive. And I did work on completely building an application from scratch. So, uh, so you are telling there is an older application, and we should make it mobile first I mean, responsive WordPress site and with a mobile first design approach. So mobile first design approach is nothing but, first, we have to build it for the mobile and build or, I mean, as it is an existing application, we have to fix it for the mobile screen first. From there, we have to go to the higher screens. So as that is an existing application, so we have to change all the, I mean, um, HTML structure if needed to make it responsive. And, uh, we have to write the new CSS media queries, new CSS to make it work. So we have to first fix it for the mobile screen and then increase the brow screen width and see if it is working fine for the tab or not. If any if at any area, if that is not, uh, UA is not appropriate in the tab, then, uh, fix it in that particular area for the tab resolution. Suppose if we take, uh, 554 pixels and below for the mobile resolution. Generally, it's 768 and below for the mobile resolutions, but these days, like, uh, even Bootstrap 5 has introduced the new breakpoint excess extra small at 5 around 554, I think. So, uh, suppose below 554 will come under the mobile, uh, screen. So first, you build everything for below 554 resolution and then make it increase the screen with suppose 7 6 state and see if it is if everything is working fine for the 768 resolution or not. If anything is breaking, then write immediate query between 554 and 768 and fix it for that. Uh, not not like that. Maybe above 55, uh, 54, uh, breakpoint, fix it. So that will now, uh, that will work for the tab. Now, again, increase it. Make it as a laptop, uh, laptop resolution or tab resolution that is at 1200 and see if if whatever the thing which we have fixed for the tab, if it is working for the, uh, 1200 resolution, that is well and good. If not, again, we might have to so from 9:90 to fix whatever is breaking. So, like, that is nothing but a mobile first design approach. So fix it for the lower resolutions first, and from there, increase the resolution, go to the higher resolution, and fix it. So that is how generally we do. Thank you.

And then the next question is, given this implementation of a wordpress shortcode, identify why it might not be showing any content, and provide a solution. So I could see here there is a function called custom underscore shortcut. In that, they are internally calling one more function, obi underscore start. Get another function, get template part, passing content and, uh, custom parameters, and then they're returning OB get click. There is another option called add shortcode, not function, maybe. Whatever the shortcode they have created ago, they're adding that. Custom content. Custom short code. Okay. So what exactly is the question is? Uh, the short item for why it might not be showing any content and provide a solution. Why it might I think because I worked on WordPress very long back, but this add short code is something whatever the function we have uh, written about that, uh, we are including in the application. That's what it mean. I guess so because some content from a custom underscore short code. Custom short code is I do see it is calling different different functions, and, again, it is returning some different functions. So there is no point in get oh, we get clean. So why it won't showing any content? Means, we are not displaying anything. Sorry. Not exactly sure, but I maybe if I, uh, see the entire context, I think I'll I can understand that. But right now, this one, uh, what is this custom content? Might be. Yeah. Sorry. Not that. Not sure.

So the next question is, can you explain what might go wrong with the following CSS code related to responsive design and how would you correct it? So there is a container class with width 900 pixels and there is a media query max width 900 pixels. Container width 100%. So generally for all the resolutions for a container class, they have defined a width as 900 pixels. And there is a media query with max width 900 pixels. This media query will work for the screen resolutions below 900 pixels. So below 900 pixels, they are making the container width as 100%. So this min width and max width, max width 900 pixels means, this will work for 9, 899, 899 pixels only, I guess, but the 900 pixels, this media query won't apply, generally the width 900 pixels will be applied. So if it is below 900 pixels, we are taking 100% of the container width as 100% of the width, which will take the same as the parent width now. I'm guessing exactly at that cut point at 900 pixels, we might face an issue with this code. Yes. We might get unnecessary horizontal scroll bar. So what we can do is max width 991 pixels, in the media query, if we could give max width as 991 pixels, then I think this would solve the issue, because until 900, that will be there and from 991 and above, yeah, and just now I could think of another thing about the order. So we, I think we should write the media query at the top, so that first it will check for the screen resolution and if it is below 900 pixels, then this width will be written. I mean, it will take 100% of width and again, if we write the, okay, again, that might overwrite. So no, I feel the order is correct, okay. Yeah. Okay. So finally, what I feel is like around that 900 pixel point, there will be an issue. We might get unnecessary horizontal scroll bar. So making the media query max width as 991 would solve the issue. Yeah. Thank you.

So, yeah, coming to the next question, how do you ensure the JavaScript code you write takes advantage of modus modern ES 6 features while still being compatible with the older browsers. Takes advantage of modern ES 6 features while still being compatible with the older browsers. So Generally, most of the older browsers like IE, uh, uh, won't support this new JS ES 6, uh, plus concept. So, yes, until ES 5, they'll be supportive. So if we write any new ES 6 feature, like, then that might not work in the older browsers. Yeah. We still being compatible. Ultimately, we have to test everything in, uh, in all our supportive browsers in the older versions as well and, uh, see. It definitely will break if we write if we use new year 6 concept, it won't work in the older browser. So we have to use that one. Maybe we can, uh, based on the browser, uh, compatibility, I mean, uh, we can know what browser the user is trying to access the application from. And if it is IE, maybe use this code. If not I mean, if it supports CS six concepts, then use this particular code like that, we can do IP.

So good to have questions. So next question is illustrative workflow where you integrate Adobe Creative Suite Graphics into WordPress theme while maintaining responsive integrate. Illustrative workflow where you integrate Adobe Creative Suite graphics into WordPress theme while maintaining responsive Fine. Uh, to be frank, I have very less I I do have experience with WordPress around 6 months, but not in-depth about using, you know, integrating, using the ins and all. But I don't think so that will be difficult. Like, I can learn it easily, but I do have very good experience, with making the applications mobile responsive. Uh, I did see the job description Coming to theme, I have experienced this work. I, uh, I mean, those 6 months which I worked for a WordPress, uh, website, we used the Divi theme there, and that website is nothing but, uh, my current organization's website, Innovative Solutions website, you can see, and that I have worked in few pages. So we used the DV team there. So to that DV team, if we want to integrate anything here, they're asking if how to integrate. I don't create also graphics, sir. That exactly I cannot say, but I think I can learn it. Yeah.

And then next question, what's an efficient and maintainable way to handle theme and plug in updates on your WordPress site without breaking the custom SaaS implementation. Efficient and maintainable way to handle theme and plug in updates on WordPress site without breaking the customs as it. And those theme and plugin updates, sir. So, generally, if we update the theme, it will change the complete look and feel of our application. And the plug in updates, uh, we have to check the update notes, and we should make sure that it won't affect the current implementation and whatever that we are making use of that plug in. We should see the update release notes and, uh, see if it affects any of us, and then we do we should do that.