Hey everyone,,

I want to create a timeline which should be zoomable and dragable. Vertical layout.

It would have data points which show up as flags with a small title and they should be clickable.

The data points will be added dynamically depending on a search.

Any ideas how to realize that? Are there libraries which can do that? Could I "abuse" some chart libraries to fake something like a timeline?

Ideas are welcome!

Hey folks! 👋

So, I’ve been working on this open-source CMS project and got hit with this thought…

Do WYSIWYG editors even make sense for devs? Like, yeah, they’re cool for non-tech teams to drag/drop stuff and update content. But as devs, would you rather just have control through code or APIs instead?

Here’s what I’m curious about:

1. Do WYSIWYG editors add any real value for developers? Or do they just get in the way?
2. Would you prefer working with a CLI/low-code workflow over some editor UI?
3. If you were building the ultimate CMS for devs, what would it look like?

Trying to figure out how much focus should go into this vs making it more dev-centric. I’m building Sling, an open-source, dev-friendly CMS—think Builder.io but with full control for developers. Would love to hear your thoughts!

#frontend #webdev #opensource #javascript #builderio

I created this repo with some questions and answers related to the core comcepts of JaVaScript: https://github.com/ir3ne/javascript-questions-and-answers

There are several repositories for preparing interviews and after reading a lot of them I almost always found the same lack of information. A lot of explanation good as first answer to an interview's question but nothing specific for a practical usage. In this repository I'm trying to accomplish also this thing. An example: what is a proxy? You can find the definition everywhere. More interesting is how you can use it and why. What do you think about this idea? Of course feel free to open issues for topic you want to see in this repository.

Hey there, dont know if this is the correct subreddit, but we will see.

I have created an email using HTML and CSS, with some media queries for mobile display. For image size, I defined some max-widths, and was testing it in my gmail, and everything seems fine.

Then I used email on acid to display across all email clients.. and Outlook is completely ignoring my max width and displays the image full size. Do I need to say exactly the image size of each of the images?

Hi,

I'm in the market for a new macbook, and I've been contemplating between an m1 max 64GB, or an m2 max 32gb. I currently have an M1 pro 16GB and it's struggling quite bad with what I'm throwing at it.

I run some dockers, mess around with local LLMs, video/photo editing and obviously frontend development.

Honestly, I feel like 64gb is ultra overkill, but you know, I see RAM, I want RAM...

How's you guy's situation? Got a new one recently? Happy with your situation? What would you say is your ideal configuration without overkil?

Thanks!

I'm currently working in a CRM web app and im using nextJS, trying to optimize and cache with tanstack, hooks. Now i'm wondering if move to a faster framework like svelte or solid is convinient or not. I really want that the CRM go very fast

I thought CSS was frustrating enough. They are not. React and Next.js is the shit. I appreciate the noble concepts and philosophy of each framework. I appreciate it on paper. In reality I can't make shit work. Why is every code wrapped in 20 levels of nested curly braces and why does colon appear everywhere with different meanings. Why is everything so hard to read. Why is the error message always pointing to some vague framework code rather than the code I wrote. Wildest shit I saw in Next.js is SyntaxError: html is not a valid JSX. It solved itself couple of minutes after for whatever stupid reason, maybe it was vscode lagging. but I was very close to throwing laptop. React already is an overengineered solution for my needs and nextjs is even worse. Have you used Apollo client with nextjs? Is it just me? I hope it's just me. I hope it will be better over time. Because I am going insane at this point.

Hi, i am building a analytics dashboard app and i would like to use react. I'm familiar with the MUI free starter templates. Are there any out there better and more professional?

I was recently laid off from a tech company, as a front end developer specializing in data driven three.js rendering in react and nextjs. My goal is now to find work at a creative agency, doing not only threejs but creating beautiful, abstract and awesome marketing sites, possibly using pre-rendered 3D motion graphics sequences if that’s more desired and performant. I am not opposed to learning something like webflow, nor working for a lower rate. I really just want to be in a room with other creative people. I also need to find work as quickly as possible, so definitely not opposed to doing freelance. But yea my question is, would it be smarter to invest in learning webflow? And specializing in adding custom code to it? Or should I invest in something like plasmic and figma, and just focus on building as many beautiful sites as quickly as possible with my current knowledge?

To you contractors out there, how do you find clients? I’m a full stack dev and really want to start a side hustle of building web apps for people on the side but not sure where I should start

I was thinking to create a UI library that contains everything at one place, it can be similar to Acertinity UI, but have all the sections that a website can need, such as admin dashboards, add blog page, home pages, components, about pages, footers. You name it we have it sort of.

User can select their own theme, colors, buttons, fonts or choose from premade color pallets. This would require less work after copy pasting. Existing free UI components just give the component then we would need to match it according to our theme which again becomes extra work.

We would provide components that match the user’s website theme and feel.

In the long long run, it can also have both developer components and nocode website builder for those who don’t know how to code.

What do you think about it?

I work in a company where we have a large front end code base (millions loc). In general our front end devs are happy with their developer experience - no notes. I’m curious though about how things work in other places.

For devs who have a horrible devx, what’s the bane of their existence? For devs who love their tooling, what’s makes it so special?

I want to share a terrible experience I had yesterday for a front end role. I was given a problem where I had to build a Food List. I had to fetch data from an api and add input field where I can search for the food items. And add a star component to give to rating for each item.

So there were 2 guys and when the call started they did not even greet! It was a very awkward start, I initiated the conversation saying - how are you, how’s your day etc. they just started off with the technical live coding without even giving an introduction about themselfs. So this guy sent a document where there were instructions saying Part-1 - fetch data, part-2 search field etc. and it said I can use hooks or redux for state management. In 45 mins of time I had to build the application, style to according to the mock-up, make it responsive and add unit tests.

I built the app, but I could not reach the unit test in that timeframe, and the star component logic was a bit wrong and I couldn’t finish it. The time was up.

They rejected me, I’m ok with that, it’s an experience but the feedback they gave was ridiculous, they gave me feedback instantly at the end of the call.

1. They wanted me to fetch data before the input field. I did it the other way round.
2. I used grid, he said flex is better.
3. He said you didn’t even try redux!!!! When I cleared in the very beginning that I would use hooks.
4. I used a div element in a hurry to list all the items fetched from the api. He said it’s FOOD LIST, ul and li needs to be used.
5. The star component logic and unit test were incomplete.

I understand I might not be up to the mark. I am also very conscious about live coding and miss few things out in nervousness.

Is this really valid? This is just bringing my confidence low. Even when the solution is almost there, they are rejecting. It felt like they had decided to reject me way before the interview started. Just wanted to vent out to fellow devs about the interviews these days. 🙏🏻

https://preview.redd.it/ck23g13du31e1.png?width=1979&format=png&auto=webp&s=373c9835c0317b35ca7f1e5ea61d256b689bef5d

best part is style="margin-top: 76px; margin-bottom: 0px;"

I am evaluating both options for the next project.

embedded Power BI into my webapp seems to be a no brainer given how powerful its charting is, I don't think I need the extra miles of using raw d3.js to get the most chart customization. The biggest cons are no version control in Power BI and it's low-code UI drag drop development which will be terrible to trace the change and history.

Given how powerful Power BI is and aside from the above cons, why would someone use charting library (D3.js, DevExpress Chart, Syncfusion chart, chart.js,...)? Is that because their use case is much simpler that embedded power bi dashboard is overkill?

Am I missing anything?

Thank you.

Hi,

Angular newbie here. like the title, the plan is to slowly migrate parts of the legacy webform to Angular, not all at once. How should I approach this? Thank you!

Currently looking at a modal, so I think of embed a webview (not sure if possible) or launch a new browser window linking to a page in the new angular app. Not sure if that's optimal. Thank you.

What's the #1, most important thing, concept in frontend?

Is it responsiveness, UI/UX, visual appeal, css, performance.. if you need to choose just 1 to invest your time and improve that skill as it will make significant difference, what it would be? only one

Long story short company ran into financial issues and decided to scale down.

Please share how you dealt with it, and your advice for what to do next

I've been a junior dev for 2.5 years, and quite stuck in my role. But I'm realizing I may not have the desire to try and progress (which could be partially why I'm stuck).

I don't like spending the majority of my time in front of a computer. I also don't like the feeling that I should always spend my free time up-skilling. I don't like the amount of human disconnection. Yes, I may have entered the wrong field.

At one point in time I worked in the restaurant industry and I miss that environment. Part of me wants to open a restaurant or coffee shop. Even if a massive risk, the adventure of trying alone I think would be more stimulating and fulfilling than this.

Curious what anyone else, who actually left, decided to do.

Same as title. Please tell me how can I fix this mindset.

HI i have this problem i know tailwindcss very well but i'm suck at deciding the front end look of my site
any help what u do when u face such problems

I'm wondering what others experience has been like with frontend interviews in 2024. I am taking a break applying to places after several months. I got burnt out. Let me share the types of interviews I've received (usually after being accepted from a Hackerrank online test).

1. Leetcode whiteboarding
2. Leetcode whiteboarding
3. Render graph data from API using an external library (I liked this one, but didn't end up completing in time)
4. Leetcode whiteboarding
5. Build a JS stopwatch in 30 minutes

My focus has been less on design/api/react and now on leetcode. Before getting into frontend development, I had an idea it strayed away from coding challenges and such, but is it just inevitable? It is not my strong suit (also not a CS major), but I'll have to switch gears if that's the way it is.

I am trying to draw a line in SVG, where the line’s curvature is variable. For example, it starts to curve more around 50px along it, and the point passes through the line. I'm failing miserably. Can anyone help?

Here is my code and an example.

<!DOCTYPE 
html
>
<html 
lang
="pt-BR">
<head>
    <meta 
charset
="UTF-8">
    <title>Curvas com Linha Central</title>
</head>
<body>
    <canvas 
id
="meuCanvas" 
width
="800" 
height
="600" 
style
="border:1px solid #000000;"></canvas>
    
    <script>
        const canvas = document.getElementById("meuCanvas");
        const ctx = canvas.getContext("2d");

        // Definindo os pontos, as linhas com cores específicas e a nova variável de curvatura
        const linhas = [
            { 
                inicio: { x: 0, y: canvas.height / 2 }, 
                ponto: { x: 150, y: 150, cor: "red" }, // Cor do ponto
                fim: { x: 300, y: canvas.height / 2 },
                curvatureStrength: 2,  // Controle da intensidade da curvatura
                corLinha: "red" // Cor da linha (igual ao ponto)
            },
            { 
                inicio: { x: 0, y: canvas.height / 2 }, 
                ponto: { x: 400, y: 200, cor: "green" }, // Cor do ponto
                fim: { x: 400, y: canvas.height / 2 },
                curvatureStrength: 2,
                corLinha: "green" // Cor da linha (igual ao ponto)
            },
            { 
                // Nova linha na direção negativa (curvatura para baixo)
                inicio: { x: canvas.width, y: canvas.height / 2 }, 
                ponto: { x: 400, y: 400, cor: "blue" }, // Cor do ponto
                fim: { x: 100, y: canvas.height / 2 },
                curvatureStrength: 2,
                corLinha: "blue" // Cor da linha (igual ao ponto)
            }
        ];

        // Desenhando a linha central reta
        ctx.strokeStyle = "black";  // Cor da linha central
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(0, canvas.height / 2);  // Começo da linha central
        ctx.lineTo(canvas.width, canvas.height / 2);  // Fim da linha central
        ctx.stroke();

        // Função para desenhar uma linha curva com suavização nas extremidades
        function drawCurvedLine(
inicio
, 
ponto
, 
fim
, 
curvatureStrength
, 
corLinha
) {
            ctx.strokeStyle = 
corLinha
;  // Definindo a cor da linha
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(
inicio
.x, 
inicio
.y); // Começo na linha central

            // Ajuste para suavizar a linha nas extremidades e controlar a intensidade da curvatura
            const controlX = 
ponto
.x;
            const controlY = 
ponto
.y;
            
            // Ajuste da curvatura para o cálculo correto da linha, agora com suporte para linha negativa
            if (
fim
.x > 
inicio
.x) {
                // Curvatura para cima (linha positiva)
                for (let x = 
inicio
.x; x <= 
fim
.x; x++) {
                    const t = (x - 
inicio
.x) / (
fim
.x - 
inicio
.x); // Proporção para a curva
                    // Garantindo que o ponto de controle seja o mais alto
                    const y = 
inicio
.y + (
fim
.y - 
inicio
.y) * t + 
                              Math.sin(t * Math.PI) * (controlY - 
inicio
.y) * (
curvatureStrength
 - Math.pow(t, 2)); // Curvatura ajustada
                    ctx.lineTo(x, y); // Desenha a linha curva
                }
            } else {
                // Curvatura para baixo (linha negativa)
                for (let x = 
inicio
.x; x >= 
fim
.x; x--) {
                    const t = (x - 
fim
.x) / (
inicio
.x - 
fim
.x); // Proporção para a curva
                    // Garantindo que o ponto de controle seja o mais baixo
                    const y = 
inicio
.y + (
fim
.y - 
inicio
.y) * t + 
                              Math.sin(t * Math.PI) * (controlY - 
inicio
.y) * (
curvatureStrength
 - Math.pow(t, 2)); // Curvatura ajustada
                    ctx.lineTo(x, y); // Desenha a linha curva
                }
            }

            ctx.stroke();
        }

        // Desenhando as linhas com curvaturas
        linhas.forEach(
linha
 => {
            // Desenhando a linha com a cor personalizada
            drawCurvedLine(
linha
.inicio, 
linha
.ponto, 
linha
.fim, 
linha
.curvatureStrength, 
linha
.corLinha);

            // Desenhando o ponto de controle com a cor personalizada
            ctx.fillStyle = 
linha
.corLinha;  // Usando a mesma cor para o ponto e linha
            ctx.beginPath();
            ctx.arc(
linha
.ponto.x, 
linha
.ponto.y, 5, 0, Math.PI * 2);  // Ponto de controle
            ctx.fill();
        });
    </script>
</body>
</html>

I am trying just one line.

https://preview.redd.it/n4wue0znbu0e1.png?width=714&format=png&auto=webp&s=e1acb82fdb57fc775758f3d2ac5679588cfbc005

I'm the only one on my team using WebStorm. And it seems that VSCode is always preferred or the default on the front end, even though I think alternatives like WebStorm are better.

Is this just my impression or is this just the way it is? Should I just give in and use VSCode?

I'm planning to create a syntax standard that can be transpiled to existing languages like html/css or implemented in a framework like flutter.

If you have any suggestions or opinions, please share.

Should I quit? If not, what feature would you want in a language like that?