• Breaking News

    Monday, July 27, 2020

    Home Unlabelled I wanted to share some Front End practice interview questions, after interviewing and finding it nothing like Leetcode web developers

    I wanted to share some Front End practice interview questions, after interviewing and finding it nothing like Leetcode web developers

    July 27, 2020

    I wanted to share some Front End practice interview questions, after interviewing and finding it nothing like Leetcode web developers

    I wanted to share some Front End practice interview questions, after interviewing and finding it nothing like Leetcode

    Posted: 27 Jul 2020 09:00 AM PDT

    I wanted to share some Front End practice interview questions, after interviewing and finding it nothing like Leetcode

    I recently spent some time preparing for Front End interviews and found the suggested 'Software Engineer' interview prep pretty lacking: the common advice is to spend most of your time grinding Leetcode and, for Front End interviews, get ready for countless trivia-style questions.

    After half a dozen interviews with Bay Area companies, I personally experienced just one Leetcode-style algorithmic question (a pretty basic graph question) and zero FE trivia questions.

    My interview experience was roughly: 25% culture fit, 25% system design/experience (e.g. discussing a project I worked on and choices I made), and 50% practical Front End coding.

    This also matches my experience as an interviewer at my previous company, where we phased out both algorithmic and trivia questions (in favor of practical FE coding) after finding they were poor indicators of future success.

    IMPORTANT NOTE: your experience may vary, especially with companies based in other states or countries!

    I feel like there's a huge lack of practice questions suited for practical Front End interviews, so I wanted to share a handful of my favorite Front End coding practice questions (with slight variations) that came up for me. But first, a few tips for getting the most out of these practice questions:

    • Use codepen.io - I was asked to use this in nearly every interview. Get familiar with the environment: shortcuts, layouts, how to add libraries, etc
    • Read the question prompt, and think about what clarifying questions you might ask in a real interview (e.g. unclear requirements, edge cases you might need to account for)
    • Run through the question once with a time limit. After completing, review your approach: what went well, did you get stuck on any specific parts, what could be improved, etc
    • Complete the question and think about how you could refactor it for readability, extensibility, re-usability, and performance
    • Come back to the question later and try it again, but this time using a different approach. e.g. vanilla JS vs framework, React class components vs hooks

    Front End coding practice questions

    Data fetching and visualization

    • Prompt: retrieve a list of numbers from an endpoint, then plot a histogram showing the frequency of each number in the list. The histogram should have appropriately numbered x and y axes

    In the example below, the list contained 24 ones, 17 twos, 30 threes, and so on.

    https://preview.redd.it/jvxwpf13i3d51.png?width=1684&format=png&auto=webp&s=18a86709d03fa6885a5afddf0b7133d17524f6fe

    • Time limit: 40 minutes
    • Hints
      • There are three main parts to this question: fetching the data, manipulating the data (i.e. into a format that can be visualized as a histogram), and drawing the histogram. Start by considering at a high-level how each of these will work
      • After fetching the data, you should have an array of numbers. Think about what format you need the data to be in to make it easier to draw the chart
      • Consider using reduce to convert your list of numbers to an object of { number: frequency of that number }
      • How are you going to draw the chart? If you decide to use plain HTML with some styling, think about what the HTML structure will look like (e.g. how will you draw the axis, how will you dynamically size the bars, etc)
    • Possible extensions
      • Ensure your histogram displays correctly with extremes, e.g. how does it handle very high frequencies of a single number, what about negative numbers?
      • Use different colors for each bar in the histogram
      • Add a button to refetch/regenerate the data (the endpoint will return random numbers each time)
      • On hovering over a bar in the histogram, change the color and show a label above the bar with the precise value
      • You may notice that the random.org URL takes query parameters that will change the numbers generated: include a form that will dynamically generate the URL to provide a different set of numbers (e.g. more numbers, min/max value)

    ​

    Image carousel

    • Prompt: create an image carousel that cycles through images fetched from an endpoint (displaying a new image every 3 seconds), and allows the user to skip to the next/previous image

    The example endpoint contains images within the response as follows:

    { data: { children: [ { data: { url_overridden_by_dest: "*.jpg" } }, ... ] } }

    Below is a mockup of what the UI should look like (the carousel should be horizontally centered, with at least some top margin):

    https://preview.redd.it/48tq1gbbi3d51.png?width=1686&format=png&auto=webp&s=a8addd3473d64361bb1d7d2cd566ee6dd924e3f4

    • Time limit: 60 minutes
    • Hints
      • As with the previous question, start by thinking about what the main parts of this question are and how to tackle them at a high-level: fetching the data, getting the image URLs from the response, displaying an image, automatically cycling through the images, and allowing the user to go forward and back through the images
      • There are two ways you could start: stub the endpoint and fully build out the component first (e.g. create a static array of image URLs to use for testing), or fetch the data first and then build the component
      • Make sure that the data fetching and extraction of the image URLs is cleanly separated from the code that displays the interactive carousel component. Ideally, the carousel component itself should just accept an array of image URL strings
    • Possible extensions
      • When the user presses next/previous, make sure that the timer resets
      • After the last image, make sure the image cycles back to the first
      • Add image selector circles. The highlighted circle should have the same index of the current image, and the user should be able to click on a circle to jump to that image

    https://preview.redd.it/7w5jccmdi3d51.png?width=1026&format=png&auto=webp&s=d97550bbb7444a124ce5aaf118c0f16d90cf4469

    • Allow the user to select from a (static) list of subreddits to change the cycled images
    • Allow the user to see top images from the day, week, month, year, or all time by dynamically appending a query param to the URL: e.g. https://www.reddit.com/r/aww/top/.json?t=day
      (or t=week, t=month, t=year, t=all)

    ​

    Snake game

    • Prompt: Create a Snake game (example) that meets the following requirements:
      • 15x15 grid
      • Snake should be controlled with cursor keys (or WASD if you prefer)
      • Snake should start with a length of 3
      • One apple at a time should appear in a random position on the grid. When collected, it should increase the score by one, increase the snake length by one, and change to another random position
      • Display a score for how many apples have been collected
      • If the snake head collides with the rest of the body, the game should end
      • If the snake head collides with the borders, the game should end

    https://preview.redd.it/v2eqcztfi3d51.png?width=594&format=png&auto=webp&s=3bb3c82528158bde1024cd69a2c18a13e61de3eb

    • Time limit: 60 minutes
    • Hints
      • This is a pretty open-ended question with many different approaches (e.g. HTML canvas, vanilla JS with styled DIVs, framework). Think about the tradeoffs of each, and how you can decouple the model (the game state, logic, and main loop) from the view (how you take that state and render it to the screen)
      • Begin by thinking about how you will represent the game state
      • One simple way to represent the game state would be: current apple position as {x,y}, snake body as an array of positions [{x,y},{x,y},...], and score as a number
      • Build the features very incrementally (planning the order in which you'll tackle them), and test constantly. Start by just getting a single square moving around the grid
    • Possible extensions
      • When the game is over, display a game over message with the score and allow the user to press space to restart
      • As well as the current score, display the player's high score (you could also persist this with localStorage
      • Before the game starts, display an intro message (e.g. game title, controls, high score) and wait for the player to press a key
      • Consider ways to increase the difficulty over time (or add selectable difficulty modes): increasing the speed of the snake, adding random obstacles
      • At this point, you have a pretty complete game: congratulations!

    ​

    More questions?

    I have a bunch more practice questions, but it takes a little time to rewrite them in such a way as to test the same concepts and be of similar scope, while also being different enough from the original question asked (while I didn't sign any NDAs, I have been on the other side of the interviewing fence and it's frustrating when your exact question appears on Glassdoor).

    If even a few people find these practice questions helpful, I'll spend some time writing and sharing more. Also, if anyone knows of a good repository of Front End practice questions then please share!

    submitted by /u/jayrobin
    [link] [comments]

    Dear WordPress Plugin/Theme Devs, You Don’t Need jQuery!

    Posted: 27 Jul 2020 06:03 AM PDT

    Figma for Web Developers - Frontend Horse

    Posted: 27 Jul 2020 06:05 AM PDT

    Does hosting Google Fonts on your own server actually improve UX or just pagespeed scores?

    Posted: 27 Jul 2020 06:18 AM PDT

    I've suddenly seen a whole bunch of "load Google Font's from your own server to boost Pagespeed" posts. I always assumed it's faster to load Google fonts from Googles massive global CDNS than to load them from one's own server. Don't resources with different TLD origins load synchronously?

    submitted by /u/focusedphil
    [link] [comments]

    Is WordPress still the go-to option for putting a site together quickly?

    Posted: 27 Jul 2020 07:48 AM PDT

    I am a coder by profession but I don't really need much of my skills for this project. Is WordPress still the easiest place to get a (pretty basic) site off the ground? I haven't used it for years and I imagine there will be others, but I do remember it being pretty easy to use.

    I'd be curious to hear of others experiences.

    submitted by /u/ShetlandJames
    [link] [comments]

    My job is bringing the animal out of me.

    Posted: 26 Jul 2020 08:07 PM PDT

    Even though this is a rant, you can think of it as a cry for help and my way of releasing stress since I have nobody to share this with.

    I work in a very small web-dev company of 8 devs, where I am given all the work involving CSS, basically any landing page projects. They give me a design and I spin up a site. The problem is the designs they give me are shared with me as a pdf and the designs keep changing to the fancy of the clients. Sometimes I am given no design, the client banters about the stuff he needs and I spin up the site and he keeps changing stuff to his liking and I end up re-writing the CSS.

    The last project I was asked to do a landing page, but later they reveal details of the project where the page is the same but they need 20 odd pages of the same design linked together with pagination and this information was revealed between the project. Since I did not use any framework or static site builders, I had to learn Eleventy and run the JSON file and create multiple copies of it and bring it back to my original site.

    Plus I love working on bigger projects and stuff like Angular and backend stuff. Which I was never given. Since I am the only one in my office who knows CSS I am given all the shit to deal with. I don't know how I can progress in my career. They threw random shit at me like making HTML email templates and had to learn MJML the whole night to make that shit. Plus the client does not have any fucking idea that email HTML has limitations from the regular HTML and sends designs that are impractical to replicate in email.

    My manager is non-technical and also I am given no holidays. I am a self-taught developer and my family depends on my income. I cannot quit the job. Without a break, I work and sometimes I have no time to learn new stuff. I am ready to do this all day. I need basic stuff like sleep and some breaks. I cannot leave my job since I have no degree and not many companies will be hiring just based on the skill set.

    Yesterday I did not pick up the phone and slept happily, which I feel very guilty doing. I feel I am not respected enough. Also generally the office is a mess. Once they hired a freelancer for an Angular project and I did the CSS work for it and gave him. Later his job was done and a week later clients called up asks for corrections. Since the freelancer had left they asked me to do the job. When I opened the project that bastard had put the 2k lines of code in one single component. How the fuck shall I work?

    They don't check shit, they eyeball it and bam push it out. I don't think that way, I don't trust anybody except myself and I am a perfectionist and I value the work I do and try to be as clean as possible and take my time doing it. This does not bridge with the overall ethics of the company but I do it my way at the cost of my free time.

    Plus these nasty clients give me data. With no organization and I end up sorting it and making it clean for them. Our company says yes to anything, and they don't want to miss out on clients, especially during the testing times of COVID19.

    But good thing yes, they are friendly. The only reason I am working here. Somehow I have to dig myself out of this pit I have buried myself in.

    submitted by /u/meldi96
    [link] [comments]

    Modern web games?

    Posted: 27 Jul 2020 03:32 PM PDT

    I'm a beginner developer (in general, not just web) and I've been looking at web development for developing a game. I've done some toying around with some basic PHP and SQL stuff, and the biggest advantage I can see is that it works well for asynchronous multiplayer (which I like.) But I have a few questions for people who are more experienced than I am:

    1. Is a web game something that would be feasible in 2020? Not commercially, but would it be potentially off-putting to people who want to play it that it's not a stand-alone game? Or inversely, could it be more attractive?
    2. Would a CMS or something similar be useable for a project like this? I don't know much about them, but it'd be nice to have things like accounts and page organisation handled for me so I don't end up writing spaghetti code and having to fix it later - also doing too much CSS hurts me deeply
    3. Is an RPG (stats, turn-based battle system, skills and damage calculations, PvP and PvE) suited to an asynchronous game? I'm sure it's possible, but would it be particularly difficult to get working compared to some other kind of game? This question is probably more of a game design one, but I think it's worth asking anyway.
    4. And finally, this is a more open-ended question: is there any specific tips or advice that people would be able to give, having worked on similar projects or theoretically being able to approach this project - such as potential frameworks to use?

    Thanks for your time if you can answer any of those, and sorry if it seems like I don't know what I'm talking about, since I probably don't to be honest.

    Edit: thought about this after posting, but if anyone has anything to say regarding mobile, would be appreciated

    submitted by /u/HashtagBenches
    [link] [comments]

    coding.blog public issue #1: a collection of interesting recent articles about programming

    Posted: 27 Jul 2020 06:51 AM PDT

    issues creating a responsive email template for Gmail [coding] [media query]

    Posted: 27 Jul 2020 12:35 PM PDT

    hey, I am trying to create responsive email templates I am finding that they tend to work with outlook and the media query is completely ignored in Gmail. I know Gmail can be a bit more picky wondering if anyone has experience creating responsive templates for Gmail the query is media query I use is normally.

    @media only screen and (max-width: 600px) {

    ...}

    I use internal CSS on the templates, I was kind of just wondering if anyone could lend a helping hand relating to this issue. any feedback is greatly appreciated.

    submitted by /u/dompinic
    [link] [comments]

    PSA: developer.mozilla.org will block your connection if you're using a VPN

    Posted: 27 Jul 2020 03:33 PM PDT

    Was trying to do a bit of doc reading and found out that MDN is blocking traffic if you use a VPN (at least my VPN; Proton).

    I didn't know where else to put this

    submitted by /u/Clunkbot
    [link] [comments]

    How to write a blog for different languages?

    Posted: 27 Jul 2020 09:21 AM PDT

    I'm thinking of creating a blog and writing in English and Portuguese, but I still don't know if there is any "definitive solution" for this, the extensions I found don't seem to be very good for this or involve complexity that for me is unnecessary.

    ​

    so, I thought of the following:

    - Use two different models on the back-end, one for posts in Portuguese, and the other for posts in English.

    - Each model will have its endpoint

    ​

    For the front end:

    - First I thought about using some state in react and based on language make different requests with different languages, on the same page, but that doesn't look very good

    - So, I thought of doing something like "blog.domain.com/pt_BR/awesome-post", and from that, I would have unique pages for each language

    ​

    The only things about internationalization that I would use would be things like:

    - format the time to the time of the location of the person who is accessing the page, which will be done using SSR, so without problems with the front

    ​

    So, in "blog.domain.com/pt_BR/", I think about simply putting the entire front of the blog, but with things in Portuguese, like some text in the footer etc.

    ​

    I could do something like this in react:

    <p> {lang.pt_BR? "Hello": "Hello" </p>

    ​

    But it doesn't look very cool, especially for things like search engines.

    ​

    then, briefly: there would be a website with the url "/ pt_BR /" containing exactly the same components as the blog in English, but with things statically written in Portuguese, and requests being made on the back end of posts in Portuguese.

    ​

    And for my back-end, simply create two different templates for the posts, something like "Article" and "ArticlePT", and each one will be at a different endpoint.

    ​

    What do you think of this solution? it seems the least complicated to me, and the least will cause any problems in SEO matters

    submitted by /u/flakesrc
    [link] [comments]

    What do use for your site?

    Posted: 27 Jul 2020 03:14 PM PDT

    Is it worth having a website portfolio?

    Posted: 27 Jul 2020 03:13 PM PDT

    Unfortunately, due to COVID, my company is going to have to let me go. Before I had time to make a site I was hired with them and now it's become apparent I might need more. I've talked to all of my friends and none of them have a site, though they do more backend or software development. I did a fullstack bootcamp, so I have knowledge and skills in both and was wondering if it's worth it to pay for and maintain a site.

    Anything is appreciated, thanks!

    submitted by /u/lilmissgarbagecant
    [link] [comments]

    Sometimes I need to build PHP based sites (WordPress etc). I'm using a Mac and for years have just been using MAMP which works fine for setting up local dev environments, but I'm wondering what the modern approach is these days? Should I be looking into Docker?

    Posted: 27 Jul 2020 03:11 PM PDT

    Don't really know how to expand on the question, but I'm battling to find a way to ask it more clear than that.

    submitted by /u/overcloseness
    [link] [comments]

    Don't know what digital ocean plan to buy

    Posted: 27 Jul 2020 01:15 AM PDT

    I need a host who gives the developer a bit more control so digital ocean seems right, but I have no idea what to buy.

    Other hosts make it so simple with a few plans, but digital ocean has so many options and I have no idea what specs my site needs. Is there a good place to start?

    submitted by /u/BuffDrBoom
    [link] [comments]

    I made and deployed my first website using Django and Heroku to display my art work. I'm really proud of it.

    Posted: 27 Jul 2020 03:06 AM PDT

    UI/UX Designer LF Developer to team up on some projects

    Posted: 27 Jul 2020 02:31 PM PDT

    Any one looking to team up to try and make some projects together?

    submitted by /u/asmrJack
    [link] [comments]

    About to dive into Vue or React for web apps, in your experience which do you recommend for a PHP and C# and html background ?

    Posted: 27 Jul 2020 02:12 PM PDT

    New to front end development and I build websites with cms and PHP now but I would like to custom design more robust features with a easy to implement minimal code lines required framework.

    I like that vue and laravel/php has a decent community of support.

    I know react is hot but I'm not a fan of using a technology with a nasty history to it like facebook.

    I get their top engineers make 500k to do bleeding edge jsx with react but if that 500k comes from nasty sources I dont want to associate with it.

    I dont use facebook, barely use instagram but I will probably dive into react and vue.

    Definitely leaning towards vue with laravel or .net.

    Crazy how much a reputation would make me even consider this.

    If facebook had a clean do good past I wouldn't even have asked this question.

    View Poll

    submitted by /u/alienalgen94
    [link] [comments]

    Understanding and Configuring Zsh

    Posted: 27 Jul 2020 02:11 AM PDT

    Hello everybody!

    I just published an article to understand and configure Zsh. It allows you to dive a bit in this crazy shell, to be able to configure it to your own needs afterward.

    Even if frameworks like oh-my-zsh and prezto are useful, my preference goes for a very lean approach, where I can modify everything I want. It's useful if you really want to know what your configuration is doing.

    Feedback are welcome!

    tl;dr:

    • Zsh reads its configuration files in a precise order.
    • You can set (or unset) many Zsh options depending on your needs.
    • The completion system of Zsh is one of its best feature.
    • Zsh directory stack allow you to jump easily in directories you've already visited.
    • If you like Vim, Zsh allows you to use keystrokes from the Vim world. You can even edit your commands directly in Vim.
    • External plugins can be found on The Great Internet, to improve even further the Zsh experience.
    • You should go crazy on shell scripting, to automate your workflow as much as you can.
    • External programs can enhance your experience with the shell, like tmux or fzf.

    https://thevaluable.dev/zsh-install-configure/

    submitted by /u/phantaso0s
    [link] [comments]

    In your experience what is the fastest server side language for web apps with the most minimal amount of code needed?

    Posted: 27 Jul 2020 02:06 PM PDT

    I am a wordpress and c# developer looking to build more web apps freelanced.

    I'm between going vue and laravel php Or react and laravel PHP Or react/vue and .net core.

    View Poll

    submitted by /u/alienalgen94
    [link] [comments]

    Laravel (Vue.j and MySQL) bugs, looking for help to fix it..

    Posted: 27 Jul 2020 01:41 PM PDT

    Hi,

    We have to launch a website in less than 48 hours and we have some issues that must be fixed. The website is built with Laravel mostly (Vue.j and MySQL).

    Could you guys suggest someone technical who would be willing and capable of fixing bugs?

    I hope this is not against community rules, we are desperately looking for help, since this happened unexpectedly.

    Regards

    submitted by /u/jamesftf
    [link] [comments]

    Can I help local and government organizations update their websites and apps?

    Posted: 27 Jul 2020 07:33 AM PDT

    Just this past weekend, I've had some pretty awful user experiences.

    One was for a automatic toll website for my state—on their mobile app I couldn't even see the placeholder text for the form fields, so I had no idea what to put there.

    Another was for a dog adoption site — instead of a form they had me download and fill out a paper form — from 2016.

    The more I use this stuff and get frustrated, the more I want to step in and just save the day. But I realize it's not that simple. Two questions on this one if anyone knows:

    1. What would "upgrading their site" actually entail?

    2. How can I secure this type of work, even if it's pro-bono?

    submitted by /u/majesty86
    [link] [comments]

    Does anyone know a way to figure out what platform a site is built on from a URL?

    Posted: 27 Jul 2020 01:24 PM PDT

    Any guidance here is appreciated!

    submitted by /u/redundantotter
    [link] [comments]
    Read more
    at

    No comments:

    Post a Comment