• Breaking News

    Tuesday, April 13, 2021

    The Complete CSS Flex Tutorial (with color-coded diagrams for every property) web developers

    The Complete CSS Flex Tutorial (with color-coded diagrams for every property) web developers


    The Complete CSS Flex Tutorial (with color-coded diagrams for every property)

    Posted: 13 Apr 2021 05:59 AM PDT

    Visitors with unsupported browsers ? A short and simple way to display a warning.

    Posted: 13 Apr 2021 10:04 AM PDT

    When working as a solo developer with companies that don't need to support everyone, you might sometimes use features that won't work with older browsers.

    By using CSS "@supports", you can easily target old browsers to show a warning that your site will not run optimally.

    HTML

    <div id="old-browser">You are using an outdated browser. Our site may not work optimally.</div> 

    CSS

    @supports (text-orientation: mixed) { #old-browser { display: none; } } 

    I used support for text-orientation as a threshold. The warning will show on IE, pre-chromium Edge, and old versions of Chrome and Firefox, but you can choose a more recent or older CSS feature if you want to display the warning at different thresholds.

    Thought this could be useful to others.

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

    Why some developers are avoiding app store headaches by going web-only

    Posted: 13 Apr 2021 11:28 AM PDT

    My simple Github project went Viral - Thank you Reddit!

    Posted: 13 Apr 2021 12:48 PM PDT

    My simple Github project went Viral - Thank you Reddit!

    Last month, I made a simple project which got spread in various tech communities and social media. On Github, It reached from 0 to 4k+ stars and 200+ forks within 7 days. Github featured it in Trending repositories of day section for straight 5 days or so.

    Some of you might remember :) this was the project:

    Trending on Github - 13 Mar'21

    Clone Wars

    70+ open-source clones or alternatives of popular sites like Airbnb, Amazon, Instagram, Netflix, Tiktok, etc. List contains source code, demo links, tech stack, and, GitHub stars count.

    Project link: https://gourav.io/clone-wars

    Github link: https://github.com/gorvgoyl/clone-wars

    Motivation behind this project

    I usually lurk in programming subreddits like webdev, reactjs, etc. to see what other devs are building or if any new JS framework is popping up. I noticed many devs were making clones of popular sites like Instagram, Trello, Spotify, etc. as part of their learning purpose, and they were sharing it with others to get feedback in terms of code quality and best practices.

    https://preview.redd.it/nwydthxgvzs61.jpg?width=1316&format=pjpg&auto=webp&s=5ea90bf8e890963468a3eb172157b4efb74d61a7

    These clones were scattered all over the communities. So, I thought why not create a single list of all these clones which people can bookmark and revisit later for whatever purpose they need it for. Honestly, I wasn't entirely sure at that time whether it would provide any good value to others or not. So, there was a way to find out that is to build it myself!

    How I built it

    1. Scrapping Reddit

    I wanted to get all posts that contain the "clone" keyword. I initially did it with default reddit search reddit.com/r/reactjs/search/?q=clone&source=recent&restrict_sr=1&sort=new, (means look for all posts in reactjs subreddit with "clone" keyword and sort by new). It returned all posts, but that also included low-quality posts with 0 upvotes, questions on how to build a specific clone, etc. It would be a headache figuring out good clone projects from that dump. So, I used redditsearch.io instead, which provides advanced Reddit filtering like return posts that have at least 10 upvotes, posted during a specific timeline, etc.

    Next, I made a list of all these clones, their Github repo, demo links, tech stack. It was manual work.

    Additionally, I googled "open-source alternatives" and found some fully-functional clones of Slack, Airtable, Bit.ly, Evernote, Google analytics, etc. I added these to the list.

    So, now there are 2 kinds of projects on the list. The first ones look quite similar (UI-wise) but aren't fully-functional and the other ones which are fully-functional but UI is different (to avoid copyright issues, etc).

    BTW, I named my project after Star Wars 2008 TV Series: "The Clone Wars" and also kept the similar color scheme of OG image.

    2. Pretty view of table

    I needed to make it look better (sticky header) which meant I needed to deploy this project somewhere else. I still needed it to be on Github so that others can collaborate easily. I decided to host it on my personal site https://gourav.io.

    My site is built using NextJS, and I was already using markdown (mdx) to write blog posts, so it was just a matter of copy-pasting markdown file from my Github project to new page https://gourav.io/clone-wars. And on top of it, I use Tailwind CSS with "typography" plugin which makes tables pleasing to read along with other text.

    I thought of automating it to the next level i.e. if any change happens to the Github project or someone's PR gets merged, update the same on my site https://gourav.io/clone-wars. But, decided not to over-engineer it as changes weren't that frequent.

    Making it Viral

    I posted in 2-3 relevant subreddits and it took off 🚀

    https://preview.redd.it/ieamks9nvzs61.png?width=1003&format=png&auto=webp&s=785dfc349c497df8562f224226d4a14b8eb3e34a

    https://preview.redd.it/vdwyesvlvzs61.png?width=994&format=png&auto=webp&s=babac18f8c861d289a2406269ee86f87ad453ef7

    After effects

    Once the project gained some popularity many developers started raising PR to add their clone projects to the list. When I started it had around ~75 clones, but now it's more than 120+ and I still get new PR every now and then.

    I got to know from a friend that it was picked by React Newsletter. Such a serendipitous moment.

    People were tweeting about Clone Wars. nickbulljs tweeted a neat idea for devs who are looking to get hired.

    I got 150+ new followers after this tweet :o

    And one person donated $5 from BuyMeACoffee link I put on the project. Love you stranger.

    https://preview.redd.it/kjl0ohdqvzs61.png?width=1160&format=png&auto=webp&s=5720a3991b35961b08e3fd7fcf95d9a20b39c061

    Within 30 days of launch, 40k+ people came to my personal site and viewed my project (80k+ views).

    You can see users insights at the end of the article on my blog.

    I know it was a long read, I hope you enjoyed it.

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

    My Fullstack Dev just dropped out, what should I do now?

    Posted: 13 Apr 2021 02:10 AM PDT

    I dont know why he did, he just stopped replying to my messages, stopped updating the site, the github repo isnt updated either. No notice. Yeah it was a freelance job, i did pay a bit in advance but we settled on payment when the page is completed for my business. I still hope he didnt ghost me, but rather got sick or something idk whats up..

    Now Im sitting on a site thats live but ~40% finished, with a lot of key features still missing. What Im supposed to do now? Im in the process of learning webdev but Im nowhere near to even attempt to finish the site, but I need the site. It was supposed to go live last week but well.

    Is the code so far useable for another dev? Or is it like in design (since Im a designer) where people dont like working on existing stuff made by someone else and they rather opt in to make it from scratch? Should I just hire a proper company for it? Pretty frustrating.

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

    Curated Resource for Developers, Designers & Makers - Read more of what you love

    Posted: 13 Apr 2021 05:44 AM PDT

    Request for website changes rant, seriously annoyed

    Posted: 13 Apr 2021 08:51 AM PDT

    I work as a web developer at an ad agency. When I develop the pages they are asking for, the approved copy needs to have passed the approval of the client, the copyrights, the graphic designers, and the account managers.

    In other words, I am supposed to have a perfect template to work off of that has been reviewed many times already. After this, the page is supposed to be approved by my department's director who is supposed to verify the accuracy and catch mistakes (since they are my direct contact to the other departments).

    I take the assets that have been provided to me (sometimes they are missing and I have to hunt them down 🙄) and copy the text directly from the given template. I generate the pages and attach (provided links) according to the final template I am given.

    Multiple times I have been given outdated templates. I have talked to my director about this and even the account managers and the issue still continues to arise time and time again. I am always having to go back again and again and again to fix assets/text, etc. and make changes that someone somewhere wants me to make (immediately). And it almost always comes down to me not being given the correct template or text with misspellings (client name usually 🙄) and/or errors.

    It seems I am always starting my day off with these little, but disruptive, requests for change. I do have other bigger projects I am working on.

    I don't think people realize how much this annoys me (and how much it affects my progress with other projects) because I am generally a very friendly person and I don't want to be hostile to my coworkers but it is seriously making me angry.

    I have talked to the director about this and although he agrees that the template errors are not optimal and that the frequent requests for change disruptive, I doubt he actually communicates this with the other departments' directors.

    He always sets strict, and honestly stressful deadlines, for projects. I think he's more worried about making others happy that he doesn't take into consideration how unhappy people in his department might be.

    Just a rant.

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

    How to create a "Write Your Legislators" form online that automatically looks up your address and sends it to the right place?

    Posted: 13 Apr 2021 09:33 AM PDT

    In various advocacy groups, I've been able to write my legislators via online forms. The form asks for my name and contact info, fills them into the pre-written message, and based on my address it automatically finds my legislators and sends them the email. Here's an example of what I'm talking about: https://secure.planetary.org/site/SPageServer?pagename=%2Factioncenter#/27

    Does anyone know how to create one of these or if there's a website that lets you do it? I know how to do a regular online contact form but is there an easy way to integrate the address search/legislator lookup part of it?

    Any help would be appreciated. Thanks!

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

    What is a functor in JavaScript?

    Posted: 13 Apr 2021 06:15 AM PDT

    Web Accessibility and Javascript: Is best practice to assume that JS doesn't work?

    Posted: 13 Apr 2021 02:34 PM PDT

    I'm doing some research into accessibility and one thing I keep coming across is that items such as menus and forms that rely on Javascript should work without Javascript. However, other articles seem to imply that was part of an older version of the WCAG specification.

    So, my question is, for accessibility should everything work without Javascript? Or is it safe to assume that Javascript will work for users who need assistive technologies? Do screen readers not work with Javascript in 2021?

    submitted by /u/-BMR777-
    [link] [comments]

    Got a new "dream job" at an agency 2 months ago. I'm feeling burnt out.

    Posted: 13 Apr 2021 08:20 AM PDT

    To give some context on my background, I am a full stack developer who is mainly trained to work in MERN and serverless frameworks (like Next.js). I've also developed an interest in UI & UX design, but I've learned pretty quickly that UX design is a complex beast of itself. With that said, I would still classify myself as a junior developer, since I've yet to be in a managerial position.

    Like the title says, I got a job at a design agency (the company mainly does custom print & apparel work) back in February. I applied for the job on indeed, where the job title was "CSS ninja" (I prayed it wasn't their version of "rockstar", since that's typically a red flag). They're working on entering a new industry as "web/branding" specialists, and hired me as the person to spearhead the operation. It was a grueling interview process with 4 interviews with the last 3 I prepared presentations to demonstrate my knowledge and scope of the work to be done.

    The owner clearly defined a deadline for the project as 5/1 of this year, which is sneaking up quickly. At the time, I figured that's plenty of time to build out a landing page, flesh out the program, and freshen up the UI of our current sites. What I didn't expect is that we would already be getting client projects and other internal projects to work on simultaneously.

    To be frank, I'm tired. I'm the only developer at the company, and I often feel imposter syndrome - I think to myself "a developer with more experience could get this done in no time!".

    Most of the client projects and our internal sites are managed by a coupled Wordpress environment, I'm not too familiar with site builders, and I learned pretty quickly that each Wordpress site is managed drastically differently. Whenever the owner asks me how long something will take, he typically responds shocked/disappointed that a task would take 4-6 hours vs. 1-2 hours, and it's really intimidating.

    Something's telling me I need to put my foot down and say "listen, this is how long is will take ME to do this. You hired me to do this job with the skillset I was upfront with. If you are dissatisfied, then you might want to look at some other candidates", but I need the money.

    Maybe I'm just ranting because the daily workflow isn't quite what I expected & I keep getting steered off track, but I could really use some advice on how to come out on top in this situation.

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

    New to web design. How would I go about making something like this at the bottom of the page with HTMl and CSS? I'm getting close and could do this with text but the same code isn't working when I apply the photos to it.

    Posted: 13 Apr 2021 11:54 AM PDT

    Wordpress?

    Posted: 13 Apr 2021 10:17 AM PDT

    What is Wordpress web development and is it better than handcoding ? And why every freelancer uses wordpress ? Im confused, i thought wordpress is ez to use and i just found out that there is wordpress experts that get paid maybe more than normal web developers , please someone explain, thanx

    And im sorry if my questions sound dumb im still learning html...

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

    Say Hello To CSS Container Queries

    Posted: 13 Apr 2021 01:43 PM PDT

    Frontend masters - what courses is a must-watch for a front-end dev?

    Posted: 13 Apr 2021 10:22 AM PDT

    Student here,

    Planning to improve my front-end skills!; I have the student package by github, so I get a free 6 month of Frontend masters :)!

    After my own self-learning/projects, I have a solid understanding of React, Redux, Typescript; so I'm not a complete newbie.

    I recently learned how to use animation libraries like React-Spring (not In front-end masers) and that made my sites so much better, so I'm lookin for courses like so that will realy enhance the front end.

    Their site offers tools for web performance and 3D animations next using three.js, so that's on my TO-DO List. Are there any other courses that will help me become a better front-end developer?

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

    How do I handle webhook errors from the front-end?

    Posted: 13 Apr 2021 03:37 PM PDT

    I'm working on a webapp that is using Stripe for the billing, and it's working as designed, however I'm uncertain as to how to deal with webhook errors when such error requires action on the front end. For example, if a payment fails, I want to display an error on the front-end to let the user know that something went wrong, and appropriately redirect the user back to the payment details page. How can I accomplish this? The webhooks are fired off from Stripe to my API, but I'm not explicitly calling anything to fire them off, so how do I go about getting some sort of "response," when the request is coming from Stripe and not from my front-end? I'm using Vue/Express/Node/Postgres stack. Any help is appreciated.

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

    Import Spreadsheet into Draw.io Table?

    Posted: 13 Apr 2021 03:35 PM PDT

    Is there a method to do this?

    Every reference I've found discusses importing diagrams via csv. All I want to do is import the data as a table.

    Thanks.

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

    Advice on learning Backbone + Marionette

    Posted: 13 Apr 2021 03:22 PM PDT

    Hi, not sure if this the right place to ask, but I started my first software dev job a week ago, and this week I need to familiarize myself with a giant service that is built using Backbone + Marionette, and was wondering if anyone has any good resources to learn them as I've never used either of them (I've started self learning programming like 6 months ago), or any advice for how I should go about doing that, like should I learn vanilla Backbone first then Marionette, or together etc..

    P.S I am aware that it's not in demand anymore, so I'm really only looking for a crash course that would allow me to be able to comprehend what's going on in the codebase and navigate it (documentation is almost non-existent), and maybe be able to refactor it to React if I had to.

    In case it's relevant my background is in React/Redux/Node/VanillaJS.

    Any help would be appreciated :)

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

    SVG Filter Builder - Create and learn about SVG filters in a drag & drop Designer.

    Posted: 13 Apr 2021 03:56 AM PDT

    I want to partner up!

    Posted: 13 Apr 2021 03:04 PM PDT

    If you are a designer, reach out to me! I am a front-end dev that uses current tech to build websites for clients or for fun. I can make your designs come to life. Both of our portfolios could benefit from collaboration. If this is against community guidelines, sorry. I am tired of designing AND coding.

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

    Web dev noob - need help connecting my frontend and backend parts of a project

    Posted: 13 Apr 2021 10:30 AM PDT

    I'm working on a group project where we're making a social media application. I have designed the frontend of the Chat feature using React, and my friend has set up the APIs. My question is how do I connect the frontend to the backend, to make calls to the database so that I can render the information? The application uses MERN stack btw. Any help would be appreciated!

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

    Anyone else get scrollbar fatigue?

    Posted: 13 Apr 2021 10:06 AM PDT

    I'm learning web dev, and am therefore very bad at it.

    I typically add a bunch of console.logs scattered around my code to keep track of stuff, and have noticed that scrolling up and down consoles, code editors, and my apps for hours on end has left my fingertips feeling raw and irritated. I legit think my fingerpads are smoother than they used to be.

    Anyone else have this problem?

    Edit: scrollwheel fatigue*

    Thanks for the helpful tips everyone!

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

    How can I center a wordpress block?

    Posted: 13 Apr 2021 01:51 PM PDT

    Hello guys,

    First post here, please let me know it there is a better sub for this question. I have a small wordpress website for a side business I run with my Dad. I recently signed up for the Amazon affiliate program and have been trying to get some ads up on our site.

    This is what the ads look like in desktop view. I just want to center the ad with the page. I'm using a plugin where the HTML for the ad is stored. Then I added a wordpress block for the ad in the editor.

    I see in the editor that there is an option for additional CSS classes when I have the ad block selected. Can this be used to center the block? Is there a better way to achieve what I want? Thanks in advance!

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

    Using gpx data and calculating distance and possible map overlay

    Posted: 13 Apr 2021 01:39 PM PDT

    I have a project surrounding bike routes. Trying to find a way to use gpx files and calculate distance and vertical gain. The goal would be to be able to see the gpx overlay on a map. Any suggestions would be helpful!

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

    No comments:

    Post a Comment