- Видео 238
- Просмотров 462 285
Webflow and Code
Великобритания
Добавлен 17 сен 2019
As a developer, my ethos is always about understanding fundamentals and on this channel that's exactly what we do. Seeing past the flashy veneer and staying rooted in the basics so we can build a sustainable web for all.
Webflow on iPad Pro? (M4 2024)
I play around on the new M4 13 inch iPad Pro and test Webflow and Figma and what it's like to use them for web design.
Affiliate links for gear:
iPad Pro M4 (2024): amzn.to/3XEAhBE
Magic Keyboard: amzn.to/4bdiqot
Pencil Pro: amzn.to/3VRvRpL
Brought to you by FlowSt8.dev - The unlimited Webflow Development Service
Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53
-
Buy merch: flowst8.dev/store
Join the community: i/communities/1737357986903753004
Support my content: buymeacoffee.com/fakesamgregory
Learn to become a Full Stack Agency: thefullstackagency.xyz/
Services I Love
Domain Names: namecheap.pxf.io/c/3510278/386170/5618
Hosting: www.hostg.xyz/aff_c?offer_id=6&aff_id=130549
Onlin...
Affiliate links for gear:
iPad Pro M4 (2024): amzn.to/3XEAhBE
Magic Keyboard: amzn.to/4bdiqot
Pencil Pro: amzn.to/3VRvRpL
Brought to you by FlowSt8.dev - The unlimited Webflow Development Service
Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53
-
Buy merch: flowst8.dev/store
Join the community: i/communities/1737357986903753004
Support my content: buymeacoffee.com/fakesamgregory
Learn to become a Full Stack Agency: thefullstackagency.xyz/
Services I Love
Domain Names: namecheap.pxf.io/c/3510278/386170/5618
Hosting: www.hostg.xyz/aff_c?offer_id=6&aff_id=130549
Onlin...
Просмотров: 285
Видео
Webflow Released Summer 2024 Roundup in 5 Minutes!
Просмотров 6392 дня назад
Webflow just announced a bunch of new features and so here's a quick 5 minute roundup of said features along with some thoughts. Brought to you by FlowSt8.dev - The unlimited Webflow Development Service Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53 - Buy merch: flowst8.dev/store Join the community: i/communities/1737357986903753004 Support my content: buymeacoffee.com/f...
What Webflow Didn't Tell You About Static Page Templates
Просмотров 66621 день назад
Brought to you by FlowSt8.dev - The unlimited Webflow Development Service Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53 - Buy merch: flowst8.dev/store Join the community: i/communities/1737357986903753004 Support my content: buymeacoffee.com/fakesamgregory Learn to become a Full Stack Agency: thefullstackagency.xyz/ Services I Love Domain Names: namecheap.pxf.io/c/35102...
Figma Boilerplate Is Here!
Просмотров 21921 день назад
Download the Figma Boilerplate at figmaboilerplate.com/ - Buy merch: flowst8.dev/store Join the community: i/communities/1737357986903753004 Support my content: buymeacoffee.com/fakesamgregory Learn to become a Full Stack Agency: thefullstackagency.xyz/ Services I Love Domain Names: namecheap.pxf.io/c/3510278/386170/5618 Hosting: www.hostg.xyz/aff_c?offer_id=6&aff_id=130549 Online S...
This No Code Tool is Clean AF
Просмотров 384Месяц назад
This week I take a look at @toddledev and give you my 2 cents. Overall, really nice and clean tool. It was a joy to use. Brought to you by FlowSt8.dev - The unlimited Webflow Development Service Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53 - Buy merch: flowst8.dev/store Join the community: i/communities/1737357986903753004 Support my content: buymeacoffee.com/fakesamgr...
Dora, I'm sorry...
Просмотров 391Месяц назад
A few weeks ago on stream I checked out Dora, an "immersive" web design tool with a newly announced AI generator. The stream didn't go as I planned... Leo's subscription service: UXbreeze.com Brought to you by FlowSt8.dev - The unlimited Webflow Development Service Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53 - Buy merch: flowst8.dev/store Join the community: i/communi...
Finsweet CMS Load is BROKEN: Here's how to fix it (@Prerender + Cloudfare)
Просмотров 237Месяц назад
Using CMS load is detrimental to your SEO. Here we use Prerender to prerender the content and deliver it to search engines on initial load. Brought to you by FlowSt8.dev - The unlimited Webflow Development Service Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53 - Buy merch: flowst8.dev/store Join the community: i/communities/1737357986903753004 Support my content: buymeac...
CMS Values Inside Framer Code Components
Просмотров 229Месяц назад
In this episode we take a look at how we can use CMS item values inside of a Framer Code Component by rendering a star rating system for reviews. Leonardo Iob's Services: uxbreeze.com Property controls: www.framer.com/developers/#property-controls-array Brought to you by FlowSt8.dev - The unlimited Webflow Development Service Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53 - Buy merc...
Wix Studio is the Best No Code Website Builder: Here's Why
Просмотров 8432 месяца назад
This week on stream i took a look at Wix Studio to give it a fair shot at understanding the tool in comparison against Webflow and other such tools. Brought to you by FlowSt8.dev - The unlimited Webflow Development Service Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53 - Buy merch: flowst8.dev/store Join the community: i/communities/1737357986903753004 Support my content...
My thoughts on the Webflow Custom Class Attribute
Просмотров 2952 месяца назад
Brought to you by FlowSt8.dev - The unlimited Webflow Development Service Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53 - Buy merch: flowst8.dev/store Join the community: i/communities/1737357986903753004 Support my content: buymeacoffee.com/fakesamgregory Learn to become a Full Stack Agency: thefullstackagency.xyz/ Services I Love Domain Names: namecheap.pxf.io/c/35102...
A Webflowers Guide to Next.js
Просмотров 6322 месяца назад
I thought it'd be fun to give you a taster on what it's like to start a nextjs project from scratch using modern tools. VS Code Snippets: pastebin.com/0g2YZCYb Brought to you by FlowSt8.dev - The unlimited Webflow Development Service Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53 - Buy merch: flowst8.dev/store Join the community: i/communities/1737357986903753004 Support...
Framer Spring Forward Event 2024 Roundup
Просмотров 1322 месяца назад
Brought to you by FlowSt8.dev - The unlimited Webflow Development Service Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53 - Buy merch: flowst8.dev/store Join the community: i/communities/1737357986903753004 Support my content: buymeacoffee.com/fakesamgregory Learn to become a Full Stack Agency: thefullstackagency.xyz/ Services I Love Domain Names: namecheap.pxf.io/c/35102...
@Finsweet Attributes CMS Filter: Boss Mode!
Просмотров 4622 месяца назад
We take a deep-dive into Finsweets Webflow CMS filter API and solve an issue which could have been solved by server-side rendering of conditional elements. Brought to you by FlowSt8.dev - The unlimited Webflow Development Service Get started with Webflow NOW! webflow.grsm.io/vju2g2zhpv53 - Buy merch: flowst8.dev/store Join the community: i/communities/1737357986903753004 Support my ...
Versoly is the Best No Code Website Builder: Here's Why
Просмотров 4502 месяца назад
Versoly is the Best No Code Website Builder: Here's Why
Webflow is the BEST No Code Tool. Here’s why
Просмотров 4203 месяца назад
Webflow is the BEST No Code Tool. Here’s why
Framer is the Best No Code Website Builder: Here's Why
Просмотров 7553 месяца назад
Framer is the Best No Code Website Builder: Here's Why
The Webflow Custom Code Stack NOBODY is Talking About
Просмотров 1,1 тыс.4 месяца назад
The Webflow Custom Code Stack NOBODY is Talking About
Custom Properties Are Here and They Are AWESOME
Просмотров 9254 месяца назад
Custom Properties Are Here and They Are AWESOME
The Webflow Accessibility Crash Course
Просмотров 5114 месяца назад
The Webflow Accessibility Crash Course
Webflow Aren't Even Using this Accessibility Rule
Просмотров 2975 месяцев назад
Webflow Aren't Even Using this Accessibility Rule
Have You Heard of "Accessibility-First"?!
Просмотров 2565 месяцев назад
Have You Heard of "Accessibility-First"?!
Easy Webflow Collection List Filtering!
Просмотров 7156 месяцев назад
Easy Webflow Collection List Filtering!
Pinegrow Wordpress Plugin (First Look!)
Просмотров 9066 месяцев назад
Pinegrow Wordpress Plugin (First Look!)
A Comprehensive Guide to Webflow Pricing
Просмотров 9386 месяцев назад
A Comprehensive Guide to Webflow Pricing
Slater App: The PERFECT Webflow Custom Code Solution Doesn’t Exis…
Просмотров 8396 месяцев назад
Slater App: The PERFECT Webflow Custom Code Solution Doesn’t Exis…
Howdy. Thank you for this excellent presentation. Any experience with Divhunt?
I wanted to create just a simple HTML and CSS.. web page.. but I could not find an HTML file in the system is there something I'm missing .. they have an index.js file but not an HTML
I think there’s a misunderstanding in the platform. You might look to Pinegrow for this but you do not get access to raw files in something like Web Studio/Webflow and other similar.
I’m Product Designer and when apple launched the new iPad M4, I wanted to buy it, but I don’t know if the performance of figma and webflow are good. In your opinion I can to remplace my macbook for one iPad? if on my workflow I only use Miro, Loom, Figma and google meet. What’s your experience working with one iPad? Thank for your video and greetings from the Mexico 🇲🇽
Thanks for watching! As I said in the video, this cannot be your main device. I’m similar to you in that I really do want it to be but it just can’t. You’d have a hard time in so many little areas. Watch my first video too. I had a hard time referencing a design AND creating in Webflow.
@@webflowandcode Oh! wooow this is my dream too, it's a pity the limitation of ipad os I wish apple added mac os soon on the ipad and you? thanks for your reply! 🙌🏻
This could come in handy in some situations, but I personally wouldn't use it for heavy tasks. Have you tried this whole process with an Apple Vision Pro? I wonder how it feels!
Apple have offered early access and I’m going to be running a poll on Twitter to see if it’s worth getting for Webflow audiences. I’m from the UK so we don’t have it yet
What size are ya getting?
I had a look yesterday in their recap page and my reaction was - love it - love it - love it - love it It's all useful!
It really is. Something I didn’t elaborate on is the filtering. This is great because you’re normally limited to a number of items the responses. If you can do the filtering on the server then instead of retrieving responses over a few pages or results and doing the filtering “our side” you can just do one request and filter the results.
What feature are you most excited about?
Hi Sam. I'm just wondering why you store the function on the window object instead of just creating a new object called functions? Both of these methods avoid polluting the global namespace, right? Or is there another reason? I'm hoping you didn't say why in the video and I just missed it! Great video though. I've only just discovered you so I'm excited to go through all of your Webflow videos. Happy no-coding!
Polluting the global namespace isn’t inherently a bad thing as we are further name spacing it as “WFModules”. This should be unique enough where you avoid conflicts. Pollution happens when it’s too simple. We’ve come a long way since this video however I wouldn’t necessarily recommend this solution though it might serve some purposes. Other options could be IFFE or using new type=module or even a third party service like Slater. Thanks for joining the ride!
Hey, I am struggling with Webflow at the moment with images... If I leave "responsive design" enabled even when I upload largeish file size images (think 2MB 3200x1800) when I publish and put them on the web they look terrible... But I can go into photoshop and export the quality so they are now 500kb 3200x1800 and disable responsive design they look great... but I am stuck with a bunch of 500kb images at every breakpoint.... Is there a way round this with the HiDPI? or 2x?
I had a lot of problems with this exact issue actually. Maybe search the Webflow forum and find my post but I think someone suggested wrapping the image in a div because that’s how it calculates the sizes. Otherwise, trying to use webp and dealing with a large image on mobile but using the most performant image format
12:50 Looks like Webflow eventually did end up changing the Layout selector to this style. Very interesting. Looks like Webstudio did it first
Yeah! Definitely the way to go
THANK YOU!
No problem
Would love to see you handle some advanced buttons. Example, long list of items to choose from that are setup as checkbox buttons, perhaps driven by a CMS. How to get all the chosen items to show up in that checkboxes submission field.
Definitely would love to see more!
I'm about to have a rummage around this!
Waiting for CMS page template from Webflow hope they release after 20 years
A template that can be used in static pages and CMS templates?
I also didn’t quite get the question.
Do you mean the option to use different templates for your CMS pages?
So what is it that webflow didn't tell us? 😃
Static page templates don’t count towards your page limit removing the need to use draft pages as a template. 🎉
You should take a look at directus.
Dude almost 90% of people use qwerty keyboard...
It’s a shame 90% are wrong
So essentially, I tried applying this by: 1. Paste the code into the <body>: <script> // Find all elements with data-images attribute const images = Array.from(document.querySelectorAll('[data-image]')); // Utility function to check if element is in viewport const isInViewport = function (elem) { const bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; // If there are images on the page if (images && images.length) { // Bind scroll event window.addEventListener('scroll', () => { // Loop through each image images.forEach((image) => { // Check if the image is on the screen if (isInViewport(image)) { // replace src with contents of data-image image.src = image.getAttribute('data-image'); } }); }); } </script> 2. Use a blurred version of your image on the page. 3. Add a "data-image" attribute and paste the clear version's URL as the value. This still does not work for me. Did I do something incorrect?
Hi @webflowandcode. Thanks for the awesome tutorial. However I'm having an issue where Webflow is refusing to run the code: "not allowed to run insecure code from localhost..."
I had this issue in Brave browser and used Chrome. What browser are you using?
@@webflowandcode Thanks for replying, I was not expecting a response on a Sunday you absolute legend! I was using chrome. A while back I remember reading that Webflow only runs code served from https else it throws this error. After watching your video I thought local-host may have been an exception to the rule but I still seem to be getting the error. I usually use code-sandbox which serves from https but I would love to get a local vs-code setup running like you have in your video. For full disclosure, I haven't tried using Webpack yet. In testing I just severed a test project with a js file using (npx http-server). Not sure if the Webpack setup itself could be doing anything to prevent the error perhaps?
Check out my video on proxyman. It might add a bit of extra insight. ruclips.net/video/CpyZRpjN74o/видео.htmlsi=lEhRhgl9kg0eUiG9
IS PINEGROW A GOOD FIT FOR ME? AM I FIT FOR PINEGROW? I was asked to add a Blog section to an existing website that is using a custom theme built with Pinegrow. Before I learned it had been built using Pinegrow. So here I am. 🙂 Accessing the WP admin, I tried to do things as I'm used to, but it didn't work. I'm coming from ancient html/CSS then years of WordPress (Genesis framework). Now I find the "new" WordPress "blocks" approach to be confusing at best. Stiffing at worse. So I always install the Classic Editor so I can actually develop a website. Otherwise the workflow is awkward. How is the learning curve with Pinegrow? You mention other software which I never used (coding?). I'm not as agile as I used to be with learning new software, but I need to get a working understanding of at least one (1) WP builder for websites in 2024. The more I try to figure this out, the more confusing and frustrating it becomes... Thanks for any tip!
Pinegrow Is definitely arguable the most difficult as it requires a solid understanding of HTML and CSS. If you do then Pinegrow is a good fit. Bearing in mind Pinegrow builds the theme files. You might consider something like my personal favourite, bricks which in of itself I’d a theme so works slightly differently.
Hi, the Dala webpage at around 5:55…do you know of any similar sites that are cloneable or templates for purchase. I love that webpage. Thanks for the video!
I don’t I’m afraid
Dont even bother using wix studios responsive AI. It's very very poor. I lost images, headings after its completion and the burger menu doesn't even work.
I praise their implementation but yeah, maybe a history wouldn’t be a bad idea
@@webflowandcode I know & also rather than using the responsive AI & even resizing manually it seems to free and do all sorts of crazy stuff. Looks like I will be going back to Webflow.
Can you make a live stream on this topic with firebase integration APIs please.🙂
Well, you should make a new datile video on Wbflow APIs. I hope next video will be on ths topic
I’ve done this already. Search my channel Webflow API
@@webflowandcode I think it is very old, webflow add new features I think you should do it again, and please this time use xano APIs that alllows you that you can create you own APIs without coding. please help me🙏, I hope you will like this idea☺
@user-mk6op8qz7f process is exactly the same. Up to you to then read the docs and use it how you want
@@webflowandcode OK, thanks for reply. well can you make APIs using Xano? the APIs that prfrom CRUD opration.
@@webflowandcode OK, thanks for reply. well can you make APIs using Xano? the APIs that prfrom CRUD opration.
Hi, Can we import Canvas Component inside Code Component? Example I have created a form using UI and have created a code component which display few things and also needs to display that form, can I just import that form or I have to code it from scratch?
@webflowandcode looks like the site is down. Do you have any alternatives you suggest?
This was video was recorded last year! I’m not up to scratch with what’s going on. Sorry!
I'm actually (desperately) looking for the opposite. Code Components inside CMS fields. For my project I want a blog to be able to insert 'cards' like quotes, tips, warnings. I believe it's called a CMS resource but I can't figure it out.
You could do this by using an Option field in the CMS and passing that string to your component then using switch/case to render a different component depending on value.
Blep
Well, How can we add icon in our webflow like home icon, cart icon, sort icon and many more icons
Very helpful!
Hey bro, I want to build a marketplace app for buyers and website for sellers, so also need APIs to send data, reciving data and realtime updates on the seller dashboard, and buyer app but, I need a teacher and help . Please help me bro. I really need it. Please reply to me. I hope next video will be on this topic. please reply me
My backend is firebase
If I had infinite time and infinite money I’d love to
@@webflowandcodeBro reply me if you will help me how to create APIs to send and receive data and live charts etc without coding. You can see the tools building APIs without coding in this video.☺
ruclips.net/video/0HhoR_fgoNY/видео.htmlsi=itIZ5u1V0as6gTrD
You are a smart cookie brother and a great communicator
Thank you!
There should be a universal language for all of this stuff
What do you mean?
I am a senior dev who is currently learning Webflow to see if I can offer a faster build for specific jobs. So far, I find the basic building blocks are fast to build, but as I am pretty quick with all of my animation and js elements, those are where it slows the job down and is making me unsure if I can actually build complex animation websites as quick as I can code them! ha
I recently asked my Twitter audience their #1 install on all new Webflow websites. Guess what it was?
@@webflowandcode I'm gonna take a stab at sass 👍😂
Dvorak❌ Qwerty✔️
same as what I am doing.. just expand ,.. tools should not be a barrier.
Would you use it to do ecommerce, or would you stick to Shopify for that?
Shopify is great but I’ve not used e-commerce on Wix extensively enough to comment. I’d suggest if it intrigues you, give it a go. My gut says it’ll cater for a lot of situations
@@webflowandcode I have seen Wix for ecommerce in action and then migrated that shop to Shopify, Wix had some big advantages with the analytics, in-built email marketing and so forth. I handed that Shopify over to the client, so am not sure how it goes now but Wix had some powerful features the site used consistently to pull in sales
QWERTY
Cool video, cheers 🥂 😎 👌
Would be really curious to see how you integrate Prerender!
Boy, you can always tell a dev who knows nothing about design. This world is such an us and them battle. Mocking designers as if only devs matter. Why wouldn’t you research WS before doing a vid like this? Oh well.
Mocking designers? What gave you that impression? My guess Is you’re new around here and haven’t watched any of my other stuff. I’m not doing the stream to teach anything, we all join the stream to discover the tool together. At some point you have to just get stuck in the tool as there’s only so much research you can do but for Your information I did the entire Wix course beforehand. Don’t watch if is not for you!
I see this was posted a year ago, do your settings & options still appear the same way? Mine also shows the “call controls” in the same place with “answer call” option but there’s also “mute & unmute” + “end call”. Answer call is unclickable & on “press once” and the other 2 only have the options “press once “ & “press twice”. I’ve gone into allofthe settings, accessibility, etc. any tips or advice?
Totally agree that other component prop field types would be so great to make collaborator component editing much more reliable - have often felt the same with how some have been using custom attribute props to control component styling, etc.
I think it’ll just end up getting messy and disorganised to be honest
Okay, I thought it was only me, LOL :) I couldn't get my head around it, because I couldn't see how the various use-cases I was seeing would make it easier for my clients. As it is, onboarding a client for me is still a work-in-progress.
Yeah! Crazy
Hi, thank you for the tutorial. I’m curious about workflow. When I’m working on the js file, I run the server to check things out but it affects my production site. I understand that when I turn the server off, my site is back to normal until I push the changes but is there a way to possibly only work on the staging site that webflow offers and then have it work on production when it’s ready? Or if you have a different workflow solution that doesn’t show my js changes on the production site, please let me know.
This is a pretty complicated setup. You might look into slater.app for this
@@webflowandcode Thank you, I will check it out. For now, I just did a makeshift solution of putting the setup code to in webflow and only publishing the staging site so that's the only site that the js file can affect.
Ok but just to be clear, when you run your code locally in this way, this doesn’t actually affect the live site (production or staging). It’s literally just on your machine that the code runs.